# js_study **Repository Path**: wanxiaoguo/js_study ## Basic Information - **Project Name**: js_study - **Description**: 前端学习记录 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-17 - **Last Updated**: 2025-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web Web（World Wide Web）即全球广域网，也称为万维网，从技术架构层面上看，Web的技术架构包括了四个基石： + URI + HTTP -> HTTPS + HyperText（除了HTML外，也可以是带有超链接的XML或JSON）,网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成 + MIME ## W3C W3C 万维网联盟是国际最著名的标准化组织 + 结构标准（HTML）：用于对网页元素进行整理和分类,超文本标记语言。从语义的角度描述页面的结构。 + 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式, 层叠样式表。从审美的角度美化页面的样式 + 行为标准（JS）：用于定义网页的交互和行为, 从交互的角度描述页面的行为 ## URL 统一资源定位器(Uniform Resource Locators): 用于定位万维网上的文档 + 语法规则: `scheme://host.domain:port/path/filename` + `scheme` - 定义因特网服务的类型。常见的类型: `http、https、ftp、file` + `host` - 定义域主机（http 的默认主机是 www） + `domain` - 定义因特网域名，比如 runoob.com + `:port` - 定义主机上的端口号（http 的默认端口号是 80） + `path` - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 + `filename` - 定义文档/资源的名称 + URL 只能使用 ASCII 字符集. + URL 编码使用 `%` 其后跟随两位的十六进制数来替换非 ASCII 字符。 + URL 不能包含空格。URL 编码通常使用 + 来替换空格。 + JavaScript 中使用 `encodeURI()` 函数对字符串进行URL编码 + URI(Uniform Resource Identifier) 统一资源标识符, 是由某个协议方案表示的资源的定位标识符, 协议方案是指访问资源所使用的协议类型名称。 + URI 用字符串标识某一互联网资源，而 URL表示资源的地点（互联网上所处的位置）。可见 URL是 URI 的子集。 ## 发展阶段 + **静态内容阶段**：在这个最初的阶段，使用Web的主要是一些研究机构。Web由大量的静态HTML文档组成，其中大多是一些学术论文。Web服务器可以被看作是支持超文本的共享文件服务器。 + **CGI程序阶段**：在这个阶段，Web服务器增加了一些编程API。通过这些API编写的应用程序，可以向客户端提供一些动态变化的内容 + CGI(Common Gateway Interface): 可以产生动态内容，跨语言， 本身是一个进程(数据共享，跨进程调用) + 性能较差，可移植性差，安全性差 + **脚本语言阶段**：在这个阶段，服务器端出现了ASP、PHP、JSP、ColdFusion等支持Session的脚本语言技术，浏览器端出现了Java Applet、JavaScript等技术。使用这些技术，可以提供更加丰富的动态内容。 + **瘦客户端应用阶段**：在这个阶段，在服务器端出现了独立于Web服务器的应用服务器。同时出现了Web MVC开发模式，各种Web MVC开发框架逐渐流行，并且占据了统治地位。基于这些框架开发的Web应用，通常都是瘦客户端应用，因为它们是在服务器端生成全部的动态内容。 + **RIA应用阶段**：在这个阶段，出现了多种RIA（Rich Internet Application）技术，大幅改善了Web应用的用户体验。应用最为广泛的RIA技术是DHTML Ajax 支持在不刷新页面的情况下动态更新页面中的局部内容。同时诞生了大量的Web前端DHTML开发库，例如Prototype、Dojo、ExtJS、jQuery/jQuery UI等等，很多开发库都支持单页面应用（Single Page Application）的开发。其他的RIA技术还有Adobe公司的Flex、微软公司的Silverlight、Sun公司的JavaFX + **移动Web应用阶段**：在这个阶段，出现了大量面向移动设备的Web应用开发技术。除了Android、iOS、Windows Phone等操作系统平台原生的开发技术之外，基于HTML5的开发技术也变得非常流行 ## REST架构风格 REST(Representational State Transfer,表述性状态转移)是世界上最成功的分布式应用架构风格它是为“运行在互联网环境”的“分布式”“超媒体”(超文本+媒体内容)系统量身定制的 + 结构清晰、符合标准、易于理解、扩展方便 + 互联网环境与企业内网环境有非常大的差别，最主要的差别是两个方面： + 可伸缩性需求无法控制：并发访问量可能会暴涨，也可能会暴跌 + 安全性需求无法控制：无法控制客户端发来的请求的格式，很可能会是恶意的请求 + REST架构风格最重要的架构约束有6个： + 客户-服务器（Client-Server）:通信只能由客户端单方面发起，表现为请求-响应的形式 + 无状态（Stateless）:通信的会话状态（Session State）应该全部由客户端负责维护 + 缓存（Cache）:响应内容可以在通信链的某处被缓存，以改善网络效率 + 统一接口（Uniform Interface）: 通信链的组件之间通过统一的接口相互通信，以提高交互的可见性 + 分层系统（Layered System）:通过限制组件的行为（即，每个组件只能“看到”与其交互的紧邻层），将架构分解为若干等级的层 + 按需代码（Code-On-Demand，可选）:支持通过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展 REST的五个关键词： + **资源（Resource）**: 是一种看待服务器的方式，即，将服务器看作是由很多离散的资源组成 + 每个资源是服务器上一个可命名的抽象概念 + 一个资源可以由一个或多个URI来标识 + URI既是资源的名称，也是资源在Web上的地址。对某个资源感兴趣的客户端应用，可以通过资源的URI与其进行交互。 + **资源的表述（Representation）** 是一段对于资源在某个特定时刻的状态的描述。可以在客户端-服务器端之间转移（交换） + 可以通过协商机制来确定。请求-响应方向的表述通常使用不同的格式 + **状态转移（State Transfer）**: 在客户端和服务器端之间转移（transfer）代表资源状态的表述, 通过转移和操作资源的表述，来间接实现操作资源的目的 + **统一接口（Uniform Interface）**: 必须通过统一的接口来对资源执行各种操作。对于每个资源只能执行一组有限的操作 + 7个HTTP方法：GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS + HTTP头信息（可自定义） + HTTP响应状态代码（可自定义） + 一套标准的内容协商机制 + 一套标准的缓存机制 + 一套标准的客户端身份认证机制 + 对于资源执行的操作，其操作语义必须由HTTP消息体之前的部分完全表达，不能将操作语义封装在HTTP消息体内部。这样做是为了提高交互的可见性，以便于通信链的中间组件实现缓存、安全审计等等功能。 + **超文本驱动（Hypertext Driven）**: 又名“将超媒体作为应用状态的引擎”（Hypermedia As The Engine Of Application State） + 将Web应用看作是一个由很多状态（应用状态）组成的有限状态机。资源之间通过超链接相互关联，超链接既代表资源之间的关系，也代表可执行的状态迁移 REST风格的架构所具有的6个主要特征： + 面向资源（Resource Oriented）: REST架构设计是以资源抽象为核心展开的。 + 可寻址（Addressability）: 每一个资源在Web之上都有自己的地址。 + 连通性（Connectedness）: 应该尽量避免设计孤立的资源，除了设计资源本身，还需要设计资源之间的关联关系，并且通过超链接将资源关联起来。 + 无状态（Statelessness） + 统一接口（Uniform Interface） + 超文本驱动（Hypertext Driven） ## 浏览器 浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等, 主要由下面这个七个部分组成： + User Interface（UI界面）：包括地址栏、前进/后退按钮、书签菜单等。也就是浏览器主窗口之外的其他部分 + Browser engine （浏览器引擎）：用来查询和操作渲染引擎。是UI界面和渲染引擎之间的**桥梁** + Rendering engine（渲染引擎）：用于解析HTML和CSS，并将解析后的内容显示在浏览器上 + Networking （网络模块）：用于发送网络请求 + JavaScript Interpreter（JavaScript解析器）：用于解析和执行 JavaScript 代码 + UI Backend（UI后端）：用于绘制组合框、弹窗等窗口小组件。它会调用操作系统的UI方法 + Data Persistence（数据存储模块）：比如数据存储 cookie、HTML5中的localStorage、sessionStorage ![](http://img.smyhvae.com/20180124_1700.png) 执行线程: 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等 + GUI 渲染线程（负责渲染页面，解析 HTML，CSS 构成 DOM 树）、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 + 主线程：也就是 js 引擎执行的线程，这个线程只有一个，页面渲染、函数处理都在这个主线程上执行。 + 工作线程：也称幕后线程，这个线程可能存在于浏览器或js引擎内，与主线程是分开的，处理文件读取、网络请求等异步事件。 ### 渲染引擎 渲染引擎（Rendering Engine）决定了浏览器如何显示网页的内容以及页面的格式信息，用来解析 HTML与CSS, **渲染引擎是浏览器兼容性问题出现的根本原因。** |浏览器 | 内核| |:-------------:|:-------------:| | chrome | webkit | | 欧鹏 | Blink | |360安全浏览器| Blink| |360极速浏览器| Blink| |Safari|Webkit| |Firefox 火狐|Gecko| |IE| Trident | ### JS 引擎 JS 引擎也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行 + 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 + JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行 |浏览器 | JS 引擎| |:-------------:|:-------------| |chrome / 欧鹏 | V8 | |Safari|Nitro| |Firefox 火狐|SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）| |Opera|Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）| |IE|Trident | ## 软件架构 ### C/S架构 C/S是Client/Server这两个单词的首字母，指的是客户端，服务器 + 胖客户端:要求客户端运行业务；把业务放到服务器端，则是瘦客户端 + 性能较高：可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可 + 允许多个客户端程序同时接入一个server程序(并发) + 建立在tcp/ip协议之上，有自己的通信规则(建立业务) + 界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果 + 更新软件：如果有新的功能，就要推出新的版本 + 不同设备访问：如果使用其他的电脑，没有安装客户端的话就无法登陆软件 + 典型的c/s应用：ftp工具、QQ、邮件系统、杀毒软件... ### B/S架构 B/S架构是Browser/Server的这两个单词的首字母。指的是浏览器、服务器，是WEB兴起之后的一种架构 + 基于http协议(应用层) , 几乎所有的业务逻辑处理都在server完成, 支持并发 + 更新简洁：如果需要更新内容了,对开发人员而言需要更改服务器的内容，对用户而言只需要刷新浏览器即可 + 多设备同步：所有数据都在网上,只要能够使用浏览器即可登录使用 + 性能较低：相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。 + 浏览器兼容：处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一。移动设备兼容性较好，ie6已经越来越少人用了。 ## 同源与跨域 同源策略指的是浏览器对不同源的脚本或文本的访问进行限制,只有**同协议 同域名 同端口**下才能访问 + 同源策略的**限制范围** + cookie，LocalStorage，和IndexDB 无法读取 + DOM 无法获得 + Ajax请求不能发送 + 两大危险场景 + 没有同源策略限制的接口请求 : cookie获取 **CSRF攻击** + 没有同源策略限制的Dom查询 从一个网站访问其他网站的内容，就叫跨域, 出于安全性考虑，浏览器不允许ajax跨域获取数据 - iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式 - JSONP：script 标签的 src 属性传递数据 - 通过修改document.domain来跨子域 - 使用window.name来进行跨域, 即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。 - 使用HTML5中新引进的window.postMessage方法来跨域传送数据 - CORS - postMessage - 各种插件：比如http-proxy-middleware - Websocket ## CORS CORS（Cross Origin Resource Sharing），通过协商HTTP Header让浏览器和服务端进行通信，来决定请求或者响应是否有效 + 默认情况下，浏览器发送跨域请求不带认证信息（比如cookie,证书,代理认证信息等），withCredentials属性值为false，后端响应设置Access-Control-Allow-Origin允许该域，或者为`*` + 如果需要cookie认证信息跨域需要withCredentials=true，同时服务端允许Access-Control-Allow-Credentials:true，同时Access-Control-Allow-Origin 值不能为`*` + 使用CORS浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request） + 只要同时满足以下两大条件，就属于简单请求 + 请求方法是以下三种方法之一：HEAD、GET、POST + HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type、text/plain + 对于非简单请求、会发起预检请求Options来确认是否允许跨域 + fetch方法在移动端使用较多，也可以配合CORS来完成跨域 ```sh access-control-allow-credentials: true access-control-allow-origin: http://localhost:9123 ``` ## SPA SPA(single page application) 是一种 网络应用程序(WebApp)模型 + 在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面 + 在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。 + 常见的SPA框架有: angular react vue + 优点 + 前后端分离的优点 + 页面之间的切换非常快 + 一定程度上减少了后端服务器的压力（不用管页面逻辑和渲染） + 后端程序只需要提供API，完全不用管客户端到底是Web界面还是手机等 + SPA的缺点 + 首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。 + 不利于SEO ## SEO **SEO（Search Engine Optimization，搜索引擎优化）**是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名 + 但是一般的seo不支持ajax异步请求爬取 ## SSR + **SSR（Server-Side Rendering，服务器端渲染）**是将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器.但这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。 + 常用的ssr框架有: react的next, vue的nuxt + SSR的优点 + 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。 + 更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。 + SSR的缺点 + 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源 + 一些常用的浏览器API可能无法正常使用，比如`window、docment和alert`等，如果使用的话需要对运行的环境加以判断 + 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂 + 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致 # JavaScript JavaScript是一门动态语言、面向对象的语言，并应用了**JIT**技术，事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标 - **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if语句、for语句等 - **DOM**：Document Object Model，操作**页面上的元素**的API。比如让盒子移动、变色、改变大小、轮播图等等 - **BOM**：Browser Object Model，操作**浏览器部分功能**的API。通过BOM可以操作浏览器窗口，弹框、控制浏览器跳转 JavaScript 的特点： + 解释型语言 + 单线程 + ECMAScript标准, 规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准 + 交互性（它可以做的就是信息的动态交互） + 安全性（不允许直接访问本地硬盘） + 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关） 编写位置： + 外链式: 可以将js代码编写到外部js文件中，然后通过 `script` 标签引入（可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制）,script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 + 内嵌式: 写在 `script` 标签中 + 行内式: 到标签的事件属性中 + a标签：写在超链接的href属性中，这样当点击超链接时，会执行js代码 + `javascript:void(0)`, 仅仅表示一个死链接，`void`指定要计算一个表达式但是不返回值 + 写在浏览器的地址栏 # 代码加密 混淆是故意创建人类难以理解的混淆 javascript 代码（即源代码或机器代码）的行为。它类似于加密，但机器可以理解代码并执行它 + 代码大小将减少。所以服务器和客户端之间的数据传输会很快 + 它对外界隐藏业务逻辑并保护代码不受他人影响 + 逆向工程难度很大 + 下载时间将减少 + 缩小是删除所有不必要的字符（删除空格）的过程，变量将被重命名而不改变其功能。这也是一种混淆 # 前端性能优化 前端性能优化是指：从用户开始访问网站到整个页面完整地展现出来的过程中，通过各种优化策略和优化方法，让页面加载得更快，让用户的操作相应更及时，给用户更好的使用体验。 + 优化工作是围绕前端的基本工作原理展开的，包括：客户端和服务器端建立连接、加载资源、解析资源并渲染 + 随着互联网的发展，网页的内容越来越丰富，功能越来越强大，页面也越做越漂亮；带来的问题是，访问速度和体验会收到影响。只有对网站进行持续不断的优化，才能保证网页的访问速度可以跟得上用户体验的需求 + 高性能可以带来更高的用户参与度、用户留存，进而带来更高的转化率和SEO排名，更好的用户体验，最终带来更高的业务收益 ## 优化过程 + 静态资源优化包括html、css、js、图片等资源的性能优化 + 图片的应用场景和使用 + html、css、js的具体优化策略 + 资源文件的优化：比如文件压缩合并策略、打包方案、版本号更新方案 + 前端工程化工具等 + 页面渲染架构设计及相关的技术方案选型 + 前后端分离技术 + SPA单页应用 + BigPipe + 同构直出 + PWA + 页面加载策略 + 接口服务调优、接口缓存策略 + 大型网站背后的实际性能优化案例 + 前端组件化、模块化，加速业务开发 + 原生App优化、混合开发优化 + 浏览器的整体优化方案。比如导航条、登录态、滚动条优化等 + 前端缓存策略和优化 + H5静态资源请求代理的技术原理 + H5离线技术，达到页面秒开的目标 + 混合式开发解决方案 + RN、小程序、flutter等 + 服务端与网络优化 + CDN 和 DNS 优化 + 如何减少 http 请求数、减少cookie大小 + nginx缓存配置和优化 + 开启和配置 gzip 压缩 + 如何开启全站 https + 升级 Http2.0 的好处和方法 + 研发流程优化 + 技术调用的方法 + 前后端接口约定、加快前后端接口联调 + 前端自动化测试 + 自动化部署和上线 + 从研发的整体流程层面梳理出提升研发效率的方式和方法 + 全链路质量监控体系建设：主要是对性能优化的结果进行衡量、打分、考核： + 上线前，页面质量及时检测 + 上线后，页面性能和错误监控 + 线上运行时，页面的可用性监控 + 愿生App的性能和错误监控 ## 前端性能优化包括哪些方面 + 性能优化指标与测量工具 + 行业标准 + 优化模型 + 性能测量工具：了解性能情况，并对比 + 性能相关APIs + 渲染优化 + 现代浏览器的渲染原理 + 可优化的渲染环节和方法 + 代码优化 + JS优化：了解JS的开销、解析、优化方案，以及如何配合V8引擎做更有效的优化 + html优化 + css优化 + 资源优化 + 压缩合并 + 图片格式 + 图片加载 + 字体优化 + 构建优化 + webpack 优化配置 + 代码拆分 + 代码压缩 + 持久化缓存 + 监测与分析 + 按需加载 + 传输和加载优化 + gZip + KeepAlive + HTTP缓存 + Service Worker + HTTP/2 + SSR 服务端渲染 + Nginx + 更多主流优化方案 + SVG 优化图标 + FlexBox 布局 + 预加载 + 预渲染 + 窗口化提高列表性能 + 骨架屏 ## CDN CDN (Content Delivery Network) 是包含可分享代码库的服务器网络。 # 参考 + [MDN API 参考](https://developer.mozilla.org/zh-CN/docs/Web/) ## 博客 + [千古前端图文教程，超详细的前端入门到进阶知识库](https://github.com/qianguyihao/Web) + [博客网站](https://web.qianguyihao.com/) + [JavaScript深入系列 ](https://github.com/mqyqingfeng/Blog) + [JS周刊](https://javascriptweekly.com/) + [前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点](http://www.h-camel.com/index.html) ## 工具 ### 抓包 + [基于Node实现的跨平台web调试代理工具](https://wproxy.org/whistle/)