fly-personal-site/src/content/notes/frontend/browser.html

<h3 data-id="heading-2" id="browser-point-1">1. &nbsp;什么是 XSS 攻击？</h3>
<h4 data-id="heading-3">（1）概念</h4>
<p>XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。</p>
<p>XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。</p>
<p>攻击者可以通过这种攻击方式可以进行以下操作：</p>
<ul>
<li>获取页面的数据，如DOM、cookie、localStorage；</li>
<li>DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；</li>
<li>破坏页面结构；</li>
<li>流量劫持（将链接指向某网站）；</li>
</ul>
<h4 data-id="heading-4">（2）攻击类型</h4>
<p>XSS 可以分为存储型、反射型和 DOM 型：</p>
<ul>
<li>存储型指的是恶意脚本会存储在目标服务器上，当浏览器请求数据时，脚本从服务器传回并执行。</li>
<li>反射型指的是攻击者诱导用户访问一个带有恶意代码的 URL 后，服务器端接收数据后处理，然后把带有恶意代码的数据发送到浏览器端，浏览器端解析这段带有 XSS 代码的数据后当做脚本执行，最终完成 XSS 攻击。&nbsp;</li>
<li>DOM 型指的通过修改页面的 DOM 节点形成的 XSS。</li>
</ul>
<p><strong>1）存储型 XSS 的攻击步骤：</strong></p>
<ol>
<li>攻击者将恶意代码提交到⽬标⽹站的数据库中。</li>
<li>⽤户打开⽬标⽹站时，⽹站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。</li>
<li>⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。</li>
<li>恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。</li>
</ol>
<p>这种攻击常⻅于带有⽤户保存数据的⽹站功能，如论坛发帖、商品评论、⽤户私信等。</p>
<p><strong>2）反射型 XSS 的攻击步骤：</strong></p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码。</li>
<li>⽤户打开带有恶意代码的 URL 时，⽹站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。</li>
<li>⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。</li>
<li>恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。</li>
</ol>
<p>反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。</p>
<p>反射型 XSS 漏洞常⻅于通过 URL 传递参数的功能，如⽹站搜索、跳转等。 由于需要⽤户主动打开恶意的 URL 才能⽣效，攻击者往往会结合多种⼿段诱导⽤户点击。</p>
<p><strong>3）DOM 型 XSS 的攻击步骤：</strong></p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码。</li>
<li>⽤户打开带有恶意代码的 URL。</li>
<li>⽤户浏览器接收到响应后解析执⾏，前端 JavaScript 取出 URL 中的恶意代码并执⾏。</li>
<li>恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。</li>
</ol>
<p>DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。</p>
<h3 data-id="heading-5" id="browser-point-2">2. 如何防御 XSS 攻击？</h3>
<p>可以看到XSS危害如此之大， 那么在开发网站时就要做好防御措施，具体措施如下：</p>
<ul>
<li>可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。另一种是对需要插入到 HTML 中的代码做好充分的转义。对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。</li>
<li>使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。</li>
</ul>
<blockquote>
<ol>
<li>CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。</li>
<li>通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式 </li>
</ol>
</blockquote>
<ul>
<li>对一些敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取。也可以使用验证码，避免脚本伪装成用户执行一些操作。</li>
</ul>
<h3 data-id="heading-6" id="browser-point-3">3. 什么是 CSRF 攻击？</h3>
<h4 data-id="heading-7">（1）概念</h4>
<p>CSRF 攻击指的是<strong>跨站请求伪造攻击</strong>，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。</p>
<p>CSRF 攻击的<strong>本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。</strong></p>
<h4 data-id="heading-8">（2）攻击类型</h4>
<p>常见的 CSRF 攻击有三种：</p>
<ul>
<li>GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。</li>
<li>POST 类型的 CSRF 攻击，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。</li>
<li>链接类型的 CSRF 攻击，比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。</li>
</ul>
<h3 data-id="heading-9" id="browser-point-4">4. 如何防御 CSRF 攻击？</h3>
<p><strong>CSRF 攻击可以使用以下方法来防护：</strong></p>
<ul>
<li><strong>进行同源检测</strong>，服务器根据 http 请求头中 origin 或者 referer 信息来判断请求是否为允许访问的站点，从而对请求进行过滤。当 origin 或者 referer 信息都不存在的时候，直接阻止请求。这种方式的缺点是有些情况下 referer 可以被伪造，同时还会把搜索引擎的链接也给屏蔽了。所以一般网站会允许搜索引擎的页面请求，但是相应的页面请求这种请求方式也可能被攻击者给利用。（Referer 字段会告诉服务器该网页是从哪个页面链接过来的）</li>
<li><strong>使用 CSRF Token 进行验证</strong>，服务器向用户返回一个随机数 Token ，当网站再次发起请求时，在请求参数中加入服务器端返回的 token ，然后服务器对这个 token 进行验证。这种方法解决了使用 cookie 单一验证方式时，可能会被冒用的问题，但是这种方法存在一个缺点就是，我们需要给网站中的所有请求都添加上这个 token，操作比较繁琐。还有一个问题是一般不会只有一台网站服务器，如果请求经过负载平衡转移到了其他的服务器，但是这个服务器的 session 中没有保留这个 token 的话，就没有办法验证了。这种情况可以通过改变 token 的构建方式来解决。</li>
<li><strong>对 Cookie 进行双重验证</strong>，服务器在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串，然后当用户再次向服务器发送请求的时候，从 cookie 中取出这个字符串，添加到 URL 参数中，然后服务器通过对 cookie 中的数据和参数中的数据进行比较，来进行验证。使用这种方式是利用了攻击者只能利用 cookie，但是不能访问获取 cookie 的特点。并且这种方法比 CSRF Token 的方法更加方便，并且不涉及到分布式访问的问题。这种方法的缺点是如果网站存在 XSS 漏洞的，那么这种方式会失效。同时这种方式不能做到子域名的隔离。</li>
<li><strong>在设置 cookie 属性的时候设置 Samesite ，限制 cookie 不能作为被第三方使用</strong>，从而可以避免被攻击者利用。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何情况下都不可能作为第三方 Cookie 使用，在宽松模式下，cookie 可以被请求是 GET 请求，且会发生页面跳转的请求所使用。</li>
</ul>
<h3 data-id="heading-10" id="browser-point-5">5. 什么是中间人攻击？如何防范中间人攻击？</h3>
<p>中间⼈ (Man-in-the-middle attack, MITM) 是指攻击者与通讯的两端分别创建独⽴的联系, 并交换其所收到的数据, 使通讯的两端认为他们正在通过⼀个私密的连接与对⽅直接对话, 但事实上整个会话都被攻击者完全控制。在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。</p>
<p>攻击过程如下:</p>
<ul>
<li>客户端发送请求到服务端，请求被中间⼈截获</li>
<li>服务器向客户端发送公钥</li>
<li>中间⼈截获公钥，保留在⾃⼰⼿上。然后⾃⼰⽣成⼀个<strong>伪造的</strong>公钥，发给客户端</li>
<li>客户端收到伪造的公钥后，⽣成加密hash值发给服务器</li>
<li>中间⼈获得加密hash值，⽤⾃⼰的私钥解密获得真秘钥,同时⽣成假的加密hash值，发给服务器</li>
<li>服务器⽤私钥解密获得假密钥,然后加密数据传输给客户端</li>
</ul>
<h3 data-id="heading-11" id="browser-point-6">6. 有哪些可能引起前端安全的问题?</h3>
<ul>
<li>跨站脚本 (Cross-Site Scripting, XSS): ⼀种代码注⼊⽅式, 为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯, 其注⼊⽅式很简单包括但不限于 JavaScript / CSS / Flash 等；</li>
<li>iframe的滥⽤: iframe中的内容是由第三⽅来提供的，默认情况下他们不受控制，他们可以在iframe中运⾏JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端⽤户体验；</li>
<li>跨站点请求伪造（Cross-Site Request Forgeries，CSRF）: 指攻击者通过设置好的陷阱，强制对已完成认证的⽤户进⾏⾮预期的个⼈信息或设定信息等某些状态更新，属于被动攻击</li>
<li>恶意第三⽅库: ⽆论是后端服务器应⽤还是前端应⽤开发，绝⼤多数时候都是在借助开发框架和各种类库进⾏快速开发，⼀旦第三⽅库被植⼊恶意代码很容易引起安全问题。</li>
</ul>
<h3 data-id="heading-12" id="browser-point-7">7. 网络劫持有哪几种，如何防范？</h3>
<p>⽹络劫持分为两种:</p>
<p>（1）<strong>DNS劫持</strong>: (输⼊京东被强制跳转到淘宝这就属于dns劫持)</p>
<ul>
<li>DNS强制解析: 通过修改运营商的本地DNS记录，来引导⽤户流量到缓存服务器</li>
<li>302跳转的⽅式: 通过监控⽹络出⼝的流量，分析判断哪些内容是可以进⾏劫持处理的,再对劫持的内存发起302跳转的回复，引导⽤户获取内容</li>
</ul>
<p>（2）<strong>HTTP劫持</strong>: (访问⾕歌但是⼀直有贪玩蓝⽉的⼴告),由于http明⽂传输,运营商会修改你的http响应内容(即加⼴告)</p>
<p>DNS劫持由于涉嫌违法，已经被监管起来，现在很少会有DNS劫持，⽽http劫持依然⾮常盛⾏，最有效的办法就是全站HTTPS，将HTTP加密，这使得运营商⽆法获取明⽂，就⽆法劫持你的响应内容。</p>
<h2 data-id="heading-13">二、进程与线程</h2>
<h3 data-id="heading-14" id="browser-point-8">1. 进程与线程的概念</h3>
<p>从本质上说，进程和线程都是 CPU 工作时间片的一个描述：</p>
<ul>
<li>进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。</li>
<li>线程是进程中的更小单位，描述了执行一段指令所需的时间。</li>
</ul>
<p><strong>进程是资源分配的最小单位，线程是CPU调度的最小单位。</strong></p>
<p>一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫<strong>进程</strong>。<strong>进程是运行在虚拟内存上的，虚拟内存是用来解决用户对硬件资源的无限需求和有限的硬件资源之间的矛盾的。从操作系统角度来看，虚拟内存即交换文件；从处理器角度看，虚拟内存即虚拟地址空间。</strong></p>
<p>如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存。</p>
<p>进程和线程之间的关系有以下四个特点：</p>
<p><strong>（1）进程中的任意一线程执行出错，都会导致整个进程的崩溃。</strong></p>
<p><strong>（2）线程之间共享进程中的数据。</strong></p>
<p><strong>（3）当一个进程关闭之后，操作系统会回收进程所占用的内存，</strong> 当一个进程退出时，操作系统会回收该进程所申请的所有资源；即使其中任意线程因为操作不当导致内存泄漏，当进程退出时，这些内存也会被正确回收。</p>
<p><strong>（4）进程之间的内容相互隔离。</strong> 进程隔离就是为了使操作系统中的进程互不干扰，每一个进程只能访问自己占有的数据，也就避免出现进程 A 写入数据到进程 B 的情况。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的。如果进程之间需要进行数据的通信，这时候，就需要使用用于进程间通信的机制了。</p>
<p><strong>Chrome浏览器的架构图</strong>：
<img src="/articles/browser/browser-figure-1.awebp" alt="" loading="lazy">
从图中可以看出，最新的 Chrome 浏览器包括：</p>
<ul>
<li>1 个浏览器主进程</li>
<li>1 个 GPU 进程</li>
<li>1 个网络进程</li>
<li>多个渲染进程</li>
<li>多个插件进程</li>
</ul>
<p>这些进程的功能：</p>
<ul>
<li><strong>浏览器进程</strong>：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。</li>
<li><strong>渲染进程</strong>：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。</li>
<li><strong>GPU 进程</strong>：其实， GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。</li>
<li><strong>网络进程</strong>：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。</li>
<li><strong>插件进程</strong>：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。</li>
</ul>
<p>所以，<strong>打开一个网页，最少需要四个进程</strong>：1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程。如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。</p>
<p>虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不可避免地带来了一些问题：</p>
<ul>
<li><strong>更高的资源占用</strong>：因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。</li>
<li><strong>更复杂的体系架构</strong>：浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。</li>
</ul>
<h3 data-id="heading-15" id="browser-point-9">2. 进程和线程的区别</h3>
<ul>
<li>进程可以看做独立应用，线程不能</li>
<li>资源：进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）；线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）。</li>
<li>通信方面：线程间可以通过直接共享同一进程中的资源，而进程通信需要借助 进程间通信。</li>
<li>调度：进程切换比线程切换的开销要大。线程是CPU调度的基本单位，线程的切换不会引起进程切换，但某个进程中的线程切换到另一个进程中的线程时，会引起进程切换。</li>
<li>系统开销：由于创建或撤销进程时，系统都要为之分配或回收资源，如内存、I/O 等，其开销远大于创建或撤销线程时的开销。同理，在进行进程切换时，涉及当前执行进程 CPU 环境还有各种各样状态的保存及新调度进程状态的设置，而线程切换时只需保存和设置少量寄存器内容，开销较小。</li>
</ul>
<h3 data-id="heading-16" id="browser-point-10">3. 浏览器渲染进程的线程有哪些</h3>
<p>浏览器的渲染进程的线程总共有五种：
<img src="/articles/browser/browser-figure-2.awebp" alt="" loading="lazy">
<strong>（1）GUI渲染线程</strong>
负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面；当界面需要<strong>重绘</strong>或由于某种操作引发<strong>回流</strong>时，该线程就会执行。</p>
<p>注意：GUI渲染线程和JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。</p>
<p><strong>（2）JS引擎线程</strong>
JS引擎线程也称为JS内核，负责处理Javascript脚本程序，解析Javascript脚本，运行代码；JS引擎线程一直等待着任务队列中任务的到来，然后加以处理，一个Tab页中无论什么时候都只有一个JS引擎线程在运行JS程序；</p>
<p>注意：GUI渲染线程与JS引擎线程的互斥关系，所以如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。</p>
<p><strong>（3）时间触发线程</strong>
<strong>时间触发线程</strong>属于浏览器而不是JS引擎，用来控制事件循环；当JS引擎执行代码块如setTimeOut时（也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件触发线程中；当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；</p>
<p>注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）；</p>
<p><strong>（4）定时器触发进程</strong>
<strong>定时器触发进程</strong>即setInterval与setTimeout所在线程；浏览器定时计数器并不是由JS引擎计数的，因为JS引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确性；因此使用单独线程来计时并触发定时器，计时完毕后，添加到事件队列中，等待JS引擎空闲后执行，所以定时器中的任务在设定的时间点不一定能够准时执行，定时器只是在指定时间点将任务添加到事件队列中；</p>
<p>注意：W3C在HTML标准中规定，定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms。</p>
<p><strong>（5）异步http请求线程</strong></p>
<ul>
<li>XMLHttpRequest连接后通过浏览器新开一个线程请求；</li>
<li>检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待JS引擎空闲后执行；</li>
</ul>
<h3 data-id="heading-17" id="browser-point-11">4. 进程之前的通信方式</h3>
<p><strong>（1）管道通信</strong></p>
<p>管道是一种最基本的进程间通信机制。<strong>管道就是操作系统在内核中开辟的一段缓冲区，进程1可以将需要交互的数据拷贝到这段缓冲区，进程2就可以读取了。</strong></p>
<p>管道的特点：</p>
<ul>
<li>只能单向通信</li>
<li>只能血缘关系的进程进行通信</li>
<li>依赖于文件系统</li>
<li>生命周期随进程</li>
<li>面向字节流的服务</li>
<li>管道内部提供了同步机制</li>
</ul>
<p><strong>（2）消息队列通信</strong></p>
<p>消息队列就是一个消息的列表。用户可以在消息队列中添加消息、读取消息等。消息队列提供了一种从一个进程向另一个进程发送一个数据块的方法。 每个数据块都被认为含有一个类型，接收进程可以独立地接收含有不同类型的数据结构。可以通过发送消息来避免命名管道的同步和阻塞问题。但是消息队列与命名管道一样，每个数据块都有一个最大长度的限制。</p>
<p>使用消息队列进行进程间通信，可能会收到数据块最大长度的限制约束等，这也是这种通信方式的缺点。如果频繁的发生进程间的通信行为，那么进程需要频繁地读取队列中的数据到内存，相当于间接地从一个进程拷贝到另一个进程，这需要花费时间。</p>
<p><strong>（3）信号量通信</strong></p>
<p>共享内存最大的问题就是多进程竞争内存的问题，就像类似于线程安全问题。我们可以使用信号量来解决这个问题。信号量的本质就是一个计数器，用来实现进程之间的互斥与同步。例如信号量的初始值是 1，然后 a 进程来访问内存1的时候，我们就把信号量的值设为 0，然后进程b 也要来访问内存1的时候，看到信号量的值为 0 就知道已经有进程在访问内存1了，这个时候进程 b 就会访问不了内存1。所以说，信号量也是进程之间的一种通信方式。</p>
<p><strong>（4）信号通信</strong></p>
<p>信号（Signals ）是Unix系统中使用的最古老的进程间通信的方法之一。操作系统通过信号来通知进程系统中发生了某种预先规定好的事件（一组事件中的一个），它也是用户进程之间通信和同步的一种原始机制。</p>
<p><strong>（5）共享内存通信</strong></p>
<p>共享内存就是映射一段能被其他进程所访问的内存，这段共享内存由一个进程创建，但多个进程都可以访问（使多个进程可以访问同一块内存空间）。共享内存是最快的 IPC 方式，它是针对其他进程间通信方式运行效率低而专门设计的。它往往与其他通信机制，如信号量，配合使用，来实现进程间的同步和通信。</p>
<p><strong>（6）套接字通信</strong></p>
<p>上面说的共享内存、管道、信号量、消息队列，他们都是多个进程在一台主机之间的通信，那两个相隔几千里的进程能够进行通信吗？答是必须的，这个时候 Socket 这家伙就派上用场了，例如我们平时通过浏览器发起一个 http 请求，然后服务器给你返回对应的数据，这种就是采用 Socket 的通信方式了。</p>
<h3 data-id="heading-18" id="browser-point-12">5. 僵尸进程和孤儿进程是什么？</h3>
<ul>
<li><strong>孤儿进程</strong>：父进程退出了，而它的一个或多个进程还在运行，那这些子进程都会成为孤儿进程。孤儿进程将被init进程(进程号为1)所收养，并由init进程对它们完成状态收集工作。</li>
<li><strong>僵尸进程</strong>：子进程比父进程先结束，而父进程又没有释放子进程占用的资源，那么子进程的进程描述符仍然保存在系统中，这种进程称之为僵死进程。</li>
</ul>
<h3 data-id="heading-19" id="browser-point-13">6. 死锁产生的原因？ 如果解决死锁的问题？</h3>
<p>所谓死锁，是指多个进程在运行过程中因争夺资源而造成的一种僵局，当进程处于这种僵持状态时，若无外力作用，它们都将无法再向前推进。</p>
<p>系统中的资源可以分为两类：</p>
<ul>
<li>可剥夺资源，是指某进程在获得这类资源后，该资源可以再被其他进程或系统剥夺，CPU和主存均属于可剥夺性资源；</li>
<li>不可剥夺资源，当系统把这类资源分配给某进程后，再不能强行收回，只能在进程用完后自行释放，如磁带机、打印机等。</li>
</ul>
<p><strong>产生死锁的原因：</strong></p>
<p><strong>（1）竞争资源</strong></p>
<ul>
<li>产生死锁中的竞争资源之一指的是<strong>竞争不可剥夺资源</strong>（例如：系统中只有一台打印机，可供进程P1使用，假定P1已占用了打印机，若P2继续要求打印机打印将阻塞）</li>
<li>产生死锁中的竞争资源另外一种资源指的是<strong>竞争临时资源</strong>（临时资源包括硬件中断、信号、消息、缓冲区内的消息等），通常消息通信顺序进行不当，则会产生死锁</li>
</ul>
<p><strong>（2）进程间推进顺序非法</strong></p>
<p>若P1保持了资源R1，P2保持了资源R2，系统处于不安全状态，因为这两个进程再向前推进，便可能发生死锁。例如，当P1运行到P1：Request（R2）时，将因R2已被P2占用而阻塞；当P2运行到P2：Request（R1）时，也将因R1已被P1占用而阻塞，于是发生进程死锁</p>
<p><strong>产生死锁的必要条件：</strong></p>
<ul>
<li>互斥条件：进程要求对所分配的资源进行排它性控制，即在一段时间内某资源仅为一进程所占用。</li>
<li>请求和保持条件：当进程因请求资源而阻塞时，对已获得的资源保持不放。</li>
<li>不剥夺条件：进程已获得的资源在未使用完之前，不能剥夺，只能在使用完时由自己释放。</li>
<li>环路等待条件：在发生死锁时，必然存在一个进程——资源的环形链。</li>
</ul>
<p><strong>预防死锁的方法：</strong></p>
<ul>
<li>资源一次性分配：一次性分配所有资源，这样就不会再有请求了（破坏请求条件）</li>
<li>只要有一个资源得不到分配，也不给这个进程分配其他的资源（破坏请保持条件）</li>
<li>可剥夺资源：即当某进程获得了部分资源，但得不到其它资源，则释放已占有的资源（破坏不可剥夺条件）</li>
<li>资源有序分配法：系统给每类资源赋予一个编号，每一个进程按编号递增的顺序请求资源，释放则相反（破坏环路等待条件）</li>
</ul>
<h3 data-id="heading-20" id="browser-point-14">7. 如何实现浏览器内多个标签页之间的通信?</h3>
<p>实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通信方法如下：</p>
<ul>
<li><strong>使用 websocket 协议</strong>，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。</li>
<li><strong>使用 ShareWorker 的方式</strong>，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。</li>
<li><strong>使用 localStorage 的方式</strong>，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。</li>
<li><strong>使用 postMessage 方法</strong>，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信。</li>
</ul>
<h3 data-id="heading-21" id="browser-point-15">8. 对Service Worker的理解</h3>
<p>Service Worker 是运行在浏览器背后的<strong>独立线程</strong>，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 <strong>HTTPS</strong>。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。</p>
<p>Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 <code>install</code> 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。以下是这个步骤的实现：</p>
<pre><code class="language-javascript" lang="javascript">// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', e =&gt; {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})
// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e =&gt; {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    })
  )
})</code></pre>
<p>打开页面，可以在开发者工具中的 <code>Application</code> 看到 Service Worker 已经启动了：
<img src="/articles/browser/browser-figure-3.awebp" alt="" loading="lazy">
在 Cache 中也可以发现所需的文件已被缓存：
<img src="/articles/browser/browser-figure-4.awebp" alt="" loading="lazy"></p>
<h2 data-id="heading-22">三、浏览器缓存</h2>
<h3 data-id="heading-23" id="browser-point-16">1. 对浏览器的缓存机制的理解</h3>
<p><strong>浏览器缓存的全过程：</strong></p>
<ul>
<li>浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；</li>
<li>下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期；</li>
<li>如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求；</li>
<li>服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；</li>
<li>如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200；</li>
</ul>
<p><img src="/articles/browser/browser-figure-5.awebp" alt="业务流程图1.png" loading="lazy">
很多网站的资源后面都加了版本号，这样做的目的是：每次升级了 JS 或 CSS 文件后，为了防止浏览器进行缓存，强制改变版本号，客户端浏览器就会重新下载新的 JS 或 CSS 文件 ，以保证用户能够及时获得网站的最新更新。</p>
<h3 data-id="heading-24" id="browser-point-17">3. 协商缓存和强缓存的区别</h3>
<h4 data-id="heading-25">（1）强缓存</h4>
<p>使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。</p>
<p>强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。</p>
<p>（1）服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。</p>
<p>（2）Expires 是 http1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，</p>
<p><code>Cache-Control</code>可设置的字段：</p>
<ul>
<li><code>public</code>：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用max-age=来精确控制；</li>
<li><code>private</code>：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；</li>
<li><code>no-cache</code>：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；</li>
<li><code>no-store</code>：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；</li>
<li><code>max-age=</code>：设置缓存的最大有效期，单位为秒；</li>
<li><code>s-maxage=</code>：优先级高于max-age=，仅适用于共享缓存(CDN)，优先级高于max-age或者Expires头；</li>
<li><code>max-stale[=]</code>：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制。</li>
</ul>
<p>一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。</p>
<p><strong>no-cache和no-store很容易混淆：</strong></p>
<ul>
<li>no-cache 是指先要和服务器确认是否有资源更新，在进行判断。也就是说没有强缓存，但是会有协商缓存；</li>
<li>no-store 是指不使用任何缓存，每次请求都直接从服务器获取资源。</li>
</ul>
<h4 data-id="heading-26">（2）协商缓存</h4>
<p>如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。</p>
<p>上面已经说到了，命中协商缓存的条件有两个：</p>
<ul>
<li><code>max-age=xxx</code> 过期了</li>
<li>值为<code>no-store</code></li>
</ul>
<p>使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。</p>
<p>协商缓存也可以通过两种方式来设置，分别是 http 头信息中的<strong>Etag</strong> 和<strong>Last-Modified</strong>属性。</p>
<p>（1）服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。使用这种方法有一个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。</p>
<p>（2）因为 Last-Modified 的这种可能发生的不准确性，http 中提供了另外一种方式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。通过这种方式，比 Last-Modified 的方式更加精确。</p>
<p>当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性。</p>
<p><strong>总结：</strong></p>
<p>强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。</p>
<h3 data-id="heading-27" id="browser-point-18">4. 为什么需要浏览器缓存？</h3>
<p>对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。这就要用到浏览器的缓存策略了。</p>
<p>所谓的<strong>浏览器缓存</strong>指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。</p>
<p>使用浏览器缓存，有以下优点：</p>
<ul>
<li>减少了服务器的负担，提高了网站的性能</li>
<li>加快了客户端网页的加载速度</li>
<li>减少了多余网络数据传输</li>
</ul>
<h3 data-id="heading-28" id="browser-point-19">5. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？</h3>
<ul>
<li><strong>点击刷新按钮或者按 F5：</strong> 浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。</li>
<li><strong>用户按 Ctrl+F5（强制刷新）：</strong> 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。</li>
<li>地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。</li>
</ul>
<h2 data-id="heading-29">四、浏览器组成</h2>
<h3 data-id="heading-30" id="browser-point-20">1. 对浏览器的理解</h3>
<p>浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。</p>
<p>HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。</p>
<p>浏览器可以分为两部分，shell 和 内核。其中 shell 的种类相对比较多，内核则比较少。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。</p>
<ul>
<li>shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。</li>
<li>内核是浏览器的核心。内核是基于标记语言显示内容的程序或模块。</li>
</ul>
<h3 data-id="heading-31" id="browser-point-21">2. 对浏览器内核的理解</h3>
<p>浏览器内核主要分成两部分：</p>
<ul>
<li>渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。</li>
<li>JS 引擎：解析和执行 javascript 来实现网页的动态效果。</li>
</ul>
<p>最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。</p>
<h3 data-id="heading-32" id="browser-point-22">3. 常见的浏览器内核比较</h3>
<ul>
<li><strong>Trident：</strong> 这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。</li>
<li><strong>Gecko：</strong> 这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。</li>
<li><strong>Presto：</strong> Opera 曾经采用的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理 JS 脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。</li>
<li><strong>Webkit：</strong> Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。</li>
<li><strong>Blink：</strong> 谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 内核，加入 Google 阵营，跟随谷歌一起研发 Blink。</li>
</ul>
<h3 data-id="heading-33" id="browser-point-23">4. 常见浏览器所用内核</h3>
<p>（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；</p>
<p>（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；</p>
<p>（3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；</p>
<p>（4） Safari 浏览器内核：Webkit 内核；</p>
<p>（5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；</p>
<p>（6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；</p>
<p>（7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；</p>
<p>（8） 百度浏览器、世界之窗内核：IE 内核；</p>
<p>（9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；</p>
<p>（10）UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。</p>
<h3 data-id="heading-34" id="browser-point-24">5. 浏览器的主要组成部分</h3>
<ul>
<li><strong>⽤户界⾯</strong> 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显示的您请求的⻚⾯外，其他显示的各个部分都属于⽤户界⾯。</li>
<li><strong>浏览器引擎</strong> 在⽤户界⾯和呈现引擎之间传送指令。</li>
<li><strong>呈现引擎</strong> 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。</li>
<li><strong>⽹络</strong> ⽤于⽹络调⽤，⽐如 HTTP 请求。其接⼝与平台⽆关，并为所有平台提供底层实现。</li>
<li><strong>⽤户界⾯后端</strong> ⽤于绘制基本的窗⼝⼩部件，⽐如组合框和窗⼝。其公开了与平台⽆关的通⽤接⼝，⽽在底层使⽤操作系统的⽤户界⾯⽅法。</li>
<li><strong>JavaScript 解释器</strong>。⽤于解析和执⾏ JavaScript 代码。</li>
<li><strong>数据存储</strong> 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“⽹络数据库”，这是⼀个完整（但是轻便）的浏览器内数据库。</li>
</ul>
<p>值得注意的是，和⼤多数浏览器不同，Chrome 浏览器的每个标签⻚都分别对应⼀个呈现引擎实例。每个标签⻚都是⼀个独⽴的进程。</p>
<h2 data-id="heading-35">五、浏览器渲染原理</h2>
<h3 data-id="heading-36" id="browser-point-25">1. 浏览器的渲染过程</h3>
<p>浏览器渲染主要有以下步骤：</p>
<ul>
<li>首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。</li>
<li>然后对 CSS 进行解析，生成 CSSOM 规则树。</li>
<li>根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。</li>
<li>当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。</li>
<li>布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。</li>
</ul>
<p>大致过程如图所示：
<img src="/articles/browser/browser-figure-6.awebp" alt="" loading="lazy"></p>
<p><strong>注意：</strong> 这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。</p>
<h3 data-id="heading-37" id="browser-point-26">2. 浏览器渲染优化</h3>
<p><strong>（1）针对JavaScript：</strong> JavaScript既会阻塞HTML的解析，也会阻塞CSS的解析。因此我们可以对JavaScript的加载方式进行改变，来进行优化：</p>
<p>（1）尽量将JavaScript文件放在body的最后</p>
<p>（2） body中间尽量不要写<code>&lt;script&gt;</code>标签</p>
<p>（3）<code>&lt;script&gt;</code>标签的引入资源方式有三种，有一种就是我们常用的直接引入，还有两种就是使用 async 属性和 defer 属性来异步引入，两者都是去异步加载外部的JS文件，不会阻塞DOM的解析（尽量使用异步加载）。三者的区别如下：</p>
<ul>
<li><strong>script</strong> 立即停止页面渲染去加载资源文件，当资源加载完毕后立即执行js代码，js代码执行完毕后继续渲染页面；</li>
<li><strong>async</strong> 是在下载完成之后，立即异步加载，加载好后立即执行，多个带async属性的标签，不能保证加载的顺序；</li>
<li><strong>defer</strong> 是在下载完成之后，立即异步加载。加载好后，如果 DOM 树还没构建好，则先等 DOM 树解析好再执行；如果DOM树已经准备好，则立即执行。多个带defer属性的标签，按照顺序执行。</li>
</ul>
<p><strong>（2）针对CSS：<strong>使用CSS有三种方式：使用</strong>link、@import、内联样式</strong>，其中link和@import都是导入外部样式。它们之间的区别：</p>
<ul>
<li><strong>link</strong>：浏览器会派发一个新等线程(HTTP线程)去加载资源文件，与此同时GUI渲染线程会继续向下渲染代码</li>
<li><strong>@import</strong>：GUI渲染线程会暂时停止渲染，去服务器加载资源文件，资源文件没有返回之前不会继续渲染(阻碍浏览器渲染)</li>
<li><strong>style</strong>：GUI直接渲染</li>
</ul>
<p>外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器会默认样式，确保首次渲染的速度。所以CSS一般写在headr中，让浏览器尽快发送请求去获取css样式。</p>
<p>所以，在开发过程中，导入外部样式使用link，而不用@import。如果css少，尽可能采用内嵌样式，直接写在style标签中。</p>
<p><strong>（3）针对DOM树、CSSOM树：</strong>
可以通过以下几种方式来减少渲染的时间：</p>
<ul>
<li>HTML文件的代码层级尽量不要太深</li>
<li>使用语义化的标签，来避免不标准语义化的特殊处理</li>
<li>减少CSSD代码的层级，因为选择器是从左向右进行解析的</li>
</ul>
<p><strong>（4）减少回流与重绘：</strong></p>
<ul>
<li>操作DOM时，尽量在低层级的DOM节点进行操作</li>
<li>不要使用<code>table</code>布局， 一个小的改动可能会使整个<code>table</code>进行重新布局</li>
<li>使用CSS的表达式</li>
<li>不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。</li>
<li>使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素</li>
<li>避免频繁操作DOM，可以创建一个文档片段<code>documentFragment</code>，在它上面应用所有DOM操作，最后再把它添加到文档中</li>
<li>将元素先设置<code>display: none</code>，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。</li>
<li>将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于<strong>浏览器的渲染队列机制</strong>。</li>
</ul>
<p>浏览器针对页面的回流与重绘，进行了自身的优化——<strong>渲染队列</strong></p>
<p><strong>浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。</strong></p>
<p>将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。</p>
<h3 data-id="heading-38" id="browser-point-27">3. 渲染过程中遇到 JS 文件如何处理？</h3>
<p>JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。也就是说，如果想要首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。</p>
<h3 data-id="heading-39" id="browser-point-28">4. 什么是文档的预解析？</h3>
<p>Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。</p>
<h3 data-id="heading-40" id="browser-point-29">5. CSS 如何阻塞文档解析？</h3>
<p>理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们。然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。</p>
<h3 data-id="heading-41" id="browser-point-30">6. 如何优化关键渲染路径？</h3>
<p>为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：</p>
<p>（1）关键资源的数量。</p>
<p>（2）关键路径长度。</p>
<p>（3）关键字节的数量。</p>
<p>关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。</p>
<p>优化关键渲染路径的常规步骤如下：</p>
<p>（1）对关键路径进行分析和特性描述：资源数、字节数、长度。</p>
<p>（2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。</p>
<p>（3）优化关键字节数以缩短下载时间（往返次数）。</p>
<p>（4）优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度</p>
<h3 data-id="heading-42" id="browser-point-31">7. 什么情况会阻塞渲染？</h3>
<p>首先渲染的前提是生成渲染树，所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。然后当浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。</p>
<p>当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。当 script 标签加上 defer 属性以后，表示该 JS 文件会并行下载，但是会放到 HTML 解析完成后顺序执行，所以对于这种情况你可以把 script 标签放在任意位置。对于没有任何依赖的 JS 文件可以加上 async 属性，表示 JS 文件下载和解析不会阻塞渲染。</p>
<h2 data-id="heading-43">六、浏览器本地存储</h2>
<h3 data-id="heading-44" id="browser-point-32">1. 浏览器本地存储方式及使用场景</h3>
<h4 data-id="heading-45">（1）Cookie</h4>
<p>Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。</p>
<p><strong>Cookie的特性：</strong></p>
<ul>
<li>Cookie一旦创建成功，名称就无法修改</li>
<li>Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie</li>
<li>每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb</li>
<li>有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的</li>
<li>Cookie在请求一个新的页面的时候都会被发送过去</li>
</ul>
<p>如果需要域名之间跨域共享Cookie，有两种方法：</p>
<ol>
<li>使用Nginx反向代理</li>
<li>在一个站点登陆之后，往其他网站写Cookie。服务端的Session存储到一个节点，Cookie存储sessionId</li>
</ol>
<p><strong>Cookie的使用场景：</strong></p>
<ul>
<li>最常见的使用场景就是Cookie和session结合使用，我们将sessionId存储到Cookie中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。</li>
<li>可以用来统计页面的点击次数</li>
</ul>
<h4 data-id="heading-46">（2）LocalStorage</h4>
<p>LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。</p>
<p><strong>LocalStorage的优点：</strong></p>
<ul>
<li>在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息</li>
<li>LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在</li>
<li>仅储存在本地，不像Cookie那样每次HTTP请求都会被携带</li>
</ul>
<p><strong>LocalStorage的缺点：</strong></p>
<ul>
<li>存在浏览器兼容问题，IE8以下版本的浏览器不支持</li>
<li>如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage</li>
<li>LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问</li>
</ul>
<p><strong>LocalStorage的常用API：</strong></p>
<pre><code class="language-javascript" lang="javascript">// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)</code></pre>
<p><strong>LocalStorage的使用场景：</strong></p>
<ul>
<li>有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可</li>
<li>在网站中的用户浏览信息也会存储在LocalStorage中，还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中</li>
</ul>
<h4 data-id="heading-47">（3）SessionStorage</h4>
<p>SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。</p>
<p><strong>SessionStorage与LocalStorage对比：</strong></p>
<ul>
<li>SessionStorage和LocalStorage都在<strong>本地进行数据存储</strong>；</li>
<li>SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage<strong>只有在同一浏览器的同一窗口下才能够共享</strong>；</li>
<li>LocalStorage和SessionStorage<strong>都不能被爬虫爬取</strong>；</li>
</ul>
<p><strong>SessionStorage的常用API：</strong></p>
<pre><code class="language-javascript" lang="javascript">// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)</code></pre>
<p><strong>SessionStorage的使用场景</strong></p>
<ul>
<li>由于SessionStorage具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。</li>
</ul>
<h3 data-id="heading-48" id="browser-point-33">2. Cookie有哪些字段，作用分别是什么</h3>
<p><strong>Cookie由以下字段组成：</strong></p>
<ul>
<li><strong>Name</strong>：cookie的名称</li>
<li><strong>Value</strong>：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌；</li>
<li><strong>Size</strong>： cookie的大小</li>
<li><strong>Path</strong>：可以访问此cookie的页面路径。 比如domain是abc.com，path是<code>/test</code>，那么只有<code>/test</code>路径下的页面可以读取此cookie。</li>
<li><strong>Secure</strong>： 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。</li>
<li><strong>Domain</strong>：可以访问该cookie的域名，Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。</li>
<li><strong>HTTP</strong>： 该字段包含<code>HTTPOnly</code> 属性 ，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过<code>document.cookie</code>属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。</li>
<li><strong>Expires/Max-size</strong> ： 此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。</li>
</ul>
<p><strong>总结：</strong>
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。</p>
<h3 data-id="heading-49" id="browser-point-34">3. Cookie、LocalStorage、SessionStorage区别</h3>
<p>浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。</p>
<ul>
<li><strong>cookie：</strong> 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。</li>
<li><strong>sessionStorage：</strong> html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。</li>
<li><strong>localStorage：</strong> html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。</li>
</ul>
<p>上面几种方式都是存储少量数据的时候的存储方式，当需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。</p>
<h3 data-id="heading-50" id="browser-point-35">4. 前端储存的⽅式有哪些？</h3>
<ul>
<li>cookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦，需要⾃⾏封装；</li>
<li>localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+ ；</li>
<li>sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式；</li>
<li>Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐；</li>
<li>IndexedDB： 是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常便。</li>
</ul>
<h3 data-id="heading-51" id="browser-point-36">5. IndexedDB有哪些特点？</h3>
<p>IndexedDB 具有以下特点：</p>
<ul>
<li><strong>键值对储存</strong>：IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。</li>
<li><strong>异步</strong>：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。</li>
<li><strong>支持事务</strong>：IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。</li>
<li><strong>同源限制：</strong> IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。</li>
<li><strong>储存空间大</strong>：IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。</li>
<li><strong>支持二进制储存</strong>：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。</li>
</ul>
<h2 data-id="heading-52">七、浏览器同源策略</h2>
<h3 data-id="heading-53" id="browser-point-37">1. 什么是同源策略</h3>
<p>跨域问题其实就是浏览器的同源策略造成的。</p>
<blockquote>
<p>同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：<strong>协议</strong>、<strong>端口号</strong>、<strong>域名</strong>必须一致。</p>
</blockquote>
<p>下表给出了与 URL <a href="https://link.juejin.cn/?target=http%3A%2F%2Fstore.company.com%2Fdir%2Fpage.html" target="_blank" rel="noreferrer" title="http://store.company.com/dir/page.html" ref="nofollow noopener noreferrer">store.company.com/dir/page.ht…</a> 的源进行对比的示例:</p>



































<table><thead><tr><th>URL</th><th>是否跨域</th><th>原因</th></tr></thead><tbody><tr><td><a href="https://link.juejin.cn/?target=http%3A%2F%2Fstore.company.com%2Fdir%2Fpage.html" target="_blank" rel="noreferrer" title="http://store.company.com/dir/page.html" ref="nofollow noopener noreferrer">store.company.com/dir/page.ht…</a></td><td>同源</td><td>完全相同</td></tr><tr><td><a href="https://link.juejin.cn/?target=http%3A%2F%2Fstore.company.com%2Fdir%2Finner%2Fanother.html" target="_blank" rel="noreferrer" title="http://store.company.com/dir/inner/another.html" ref="nofollow noopener noreferrer">store.company.com/dir/inner/a…</a></td><td>同源</td><td>只有路径不同</td></tr><tr><td><a href="https://link.juejin.cn/?target=https%3A%2F%2Fstore.company.com%2Fsecure.html" target="_blank" rel="noreferrer" title="https://store.company.com/secure.html" ref="nofollow noopener noreferrer">store.company.com/secure.html</a></td><td>跨域</td><td>协议不同</td></tr><tr><td><a href="https://link.juejin.cn/?target=http%3A%2F%2Fstore.company.com%3A81%2Fdir%2Fetc.html" target="_blank" rel="noreferrer" title="http://store.company.com:81/dir/etc.html" ref="nofollow noopener noreferrer">store.company.com:81/dir/etc.htm…</a></td><td>跨域</td><td>端口不同 ( http:// 默认端口是80)</td></tr><tr><td><a href="https://link.juejin.cn/?target=http%3A%2F%2Fnews.company.com%2Fdir%2Fother.html" target="_blank" rel="noreferrer" title="http://news.company.com/dir/other.html" ref="nofollow noopener noreferrer">news.company.com/dir/other.h…</a></td><td>跨域</td><td>主机不同</td></tr></tbody></table>
<p><strong>同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。</strong></p>
<p><strong>同源政策主要限制了三个方面：</strong></p>
<ul>
<li>当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。</li>
<li>当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。</li>
<li>当前域下 ajax 无法发送跨域请求。</li>
</ul>
<p>同源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。</p>
<h3 data-id="heading-54" id="browser-point-38">2. 如何解决跨越问题</h3>
<h4 data-id="heading-55">（1）CORS</h4>
<p>下面是MDN对于CORS的定义：</p>
<blockquote>
<p>跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 &nbsp;让运行在一个 origin (domain)上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP 请求。</p>
</blockquote>
<p>CORS需要浏览器和服务器同时支持，整个CORS过程都是浏览器完成的，无需用户参与。因此实现<strong>CORS的关键就是服务器，只要服务器实现了CORS请求</strong>，就可以跨源通信了。</p>
<p>浏览器将CORS分为<strong>简单请求</strong>和<strong>非简单请求</strong>：</p>
<p>简单请求不会触发CORS预检请求。若该请求满足以下两个条件，就可以看作是简单请求：</p>
<p><strong>1）请求方法是以下三种方法之一：</strong></p>
<ul>
<li>HEAD</li>
<li>GET</li>
<li>POST</li>
</ul>
<p><strong>2）HTTP的头信息不超出以下几种字段：</strong></p>
<ul>
<li>Accept</li>
<li>Accept-Language</li>
<li>Content-Language</li>
<li>Last-Event-ID</li>
<li>Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain</li>
</ul>
<p>若不满足以上条件，就属于非简单请求了。</p>
<p><strong>（1）简单请求过程：</strong></p>
<p>对于简单请求，浏览器会直接发出CORS请求，它会在请求的头信息中增加一个Orign字段，该字段用来说明本次请求来自哪个源（协议+端口+域名），服务器会根据这个值来决定是否同意这次请求。如果Orign指定的域名在许可范围之内，服务器返回的响应就会多出以下信息头：</p>
<pre><code class="language-javascript" lang="javascript">Access-Control-Allow-Origin: http://api.bob.com  // 和Orign一直
Access-Control-Allow-Credentials: true   // 表示是否允许发送Cookie
Access-Control-Expose-Headers: FooBar   // 指定返回其他字段的值
Content-Type: text/html; charset=utf-8   // 表示文档类型</code></pre>
<p>如果Orign指定的域名不在许可范围之内，服务器会返回一个正常的HTTP回应，浏览器发现没有上面的Access-Control-Allow-Origin头部信息，就知道出错了。这个错误无法通过状态码识别，因为返回的状态码可能是200。</p>
<p><strong>在简单请求中，在服务器内，至少需要设置字段：</strong><code>Access-Control-Allow-Origin</code></p>
<p><strong>（2）非简单请求过程</strong></p>
<p>非简单请求是对服务器有特殊要求的请求，比如请求方法为DELETE或者PUT等。非简单请求的CORS请求会在正式通信之前进行一次HTTP查询请求，<strong>称为预检请求</strong>。</p>
<p>浏览器会询问服务器，当前所在的网页是否在服务器允许访问的范围内，以及可以使用哪些HTTP请求方式和头信息字段，只有得到肯定的回复，才会进行正式的HTTP请求，否则就会报错。</p>
<p>预检请求使用的<strong>请求方法是OPTIONS</strong>，表示这个请求是来询问的。他的头信息中的关键字段是Orign，表示请求来自哪个源。除此之外，头信息中还包括两个字段：</p>
<ul>
<li><strong>Access-Control-Request-Method</strong>：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法。</li>
<li><strong>Access-Control-Request-Headers</strong>： 该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。</li>
</ul>
<p>服务器在收到浏览器的预检请求之后，会根据头信息的三个字段来进行判断，如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求，如果没有，就是不同意这个预检请求，就会报错。</p>
<p>服务器回应的CORS的字段如下：</p>
<pre><code class="language-javascript" lang="javascript">Access-Control-Allow-Origin: http://api.bob.com  // 允许跨域的源地址
Access-Control-Allow-Methods: GET, POST, PUT // 服务器支持的所有跨域请求的方法
Access-Control-Allow-Headers: X-Custom-Header  // 服务器支持的所有头信息字段
Access-Control-Allow-Credentials: true   // 表示是否允许发送Cookie
Access-Control-Max-Age: 1728000  // 用来指定本次预检请求的有效期，单位为秒</code></pre>
<p>只要服务器通过了预检请求，在以后每次的CORS请求都会自带一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。</p>
<p><strong>在非简单请求中，至少需要设置以下字段：</strong></p>
<pre><code class="language-javascript" lang="javascript">'Access-Control-Allow-Origin'  
'Access-Control-Allow-Methods'
'Access-Control-Allow-Headers'</code></pre>
<h5 data-id="heading-56">减少OPTIONS请求次数：</h5>
<p>OPTIONS请求次数过多就会损耗页面加载的性能，降低用户体验度。所以尽量要减少OPTIONS请求次数，可以后端在请求的返回头部添加：Access-Control-Max-Age：number。它表示预检请求的返回结果可以被缓存多久，单位是秒。该字段只对完全一样的URL的缓存设置生效，所以设置了缓存时间，在这个时间范围内，再次发送请求就不需要进行预检请求了。</p>
<h5 data-id="heading-57">CORS中Cookie相关问题：</h5>
<p>在CORS请求中，如果想要传递Cookie，就要满足以下三个条件：</p>
<ul>
<li>在请求中设置 <code>withCredentials</code></li>
</ul>
<p>默认情况下在跨域请求，浏览器是不带 cookie 的。但是我们可以通过设置 withCredentials 来进行传递 cookie.</p>
<pre><code class="language-javascript" lang="javascript">// 原生 xml 的设置方式
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// axios 设置方式
axios.defaults.withCredentials = true;</code></pre>
<ul>
<li>Access-Control-Allow-Credentials 设置为 true</li>
<li>Access-Control-Allow-Origin 设置为非 <code>*</code></li>
</ul>
<h4 data-id="heading-58">（2）JSONP</h4>
<p><strong>jsonp</strong>的原理就是利用<code>&lt;script&gt;</code>标签没有跨域限制，通过<code>&lt;script&gt;</code>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
1）原生JS实现：</p>
<pre><code class="language-javascript" lang="javascript">&lt;script&gt;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&amp;callback=handleCallback';
    document.head.appendChild(script);
    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 &lt;/script&gt;</code></pre>
<p>服务端返回如下（返回时即执行全局函数）：</p>
<pre><code class="language-javascript" lang="javascript">handleCallback({"success": true, "user": "admin"})</code></pre>
<p>2）Vue axios实现：</p>
<pre><code class="language-javascript" lang="javascript">this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) =&gt; {
    console.log(res); 
})</code></pre>
<p>后端node.js代码：</p>
<pre><code class="language-javascript" lang="javascript">var querystring = require('querystring');
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
    var params = querystring.parse(req.url.split('?')[1]);
    var fn = params.callback;
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');</code></pre>
<p><strong>JSONP的缺点：</strong></p>
<ul>
<li>具有局限性， 仅支持get方法</li>
<li>不安全，可能会遭受XSS攻击</li>
</ul>
<h4 data-id="heading-59">（3）postMessage 跨域</h4>
<p>postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：</p>
<ul>
<li>页面和其打开的新窗口的数据传递</li>
<li>多窗口之间消息传递</li>
<li>页面与嵌套的iframe消息传递</li>
<li>上面三个场景的跨域数据传递</li>
</ul>
<p>用法：postMessage(data,origin)方法接受两个参数：</p>
<ul>
<li><strong>data</strong>： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。</li>
<li><strong>origin</strong>： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。</li>
</ul>
<p>1）a.html：(domain1.com/a.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"&gt;&lt;/iframe&gt;
&lt;script&gt;       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---&gt; ' + e.data);
    }, false);
&lt;/script&gt;</code></pre>
<p>2）b.html：(domain2.com/b.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;script&gt;
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---&gt; ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
&lt;/script&gt;</code></pre>
<h4 data-id="heading-60">（4）nginx代理跨域</h4>
<p>nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。</p>
<p>1）nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。</p>
<pre><code class="language-http" lang="http">location / {
  add_header Access-Control-Allow-Origin *;
}</code></pre>
<p>2）nginx反向代理接口跨域
跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。
实现思路：通过Nginx配置一个代理服务器域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。</p>
<p>nginx具体配置：</p>
<pre><code class="language-javascript" lang="javascript">#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}</code></pre>
<h4 data-id="heading-61">（5）nodejs 中间件代理跨域</h4>
<p>node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。</p>
<p><strong>1）非vue框架的跨域</strong>
使用node + express + http-proxy-middleware搭建一个proxy服务器。</p>
<ul>
<li>前端代码：</li>
</ul>
<pre><code class="language-javascript" lang="javascript">var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();</code></pre>
<ul>
<li>中间件服务器代码：</li>
</ul>
<pre><code class="language-javascript" lang="javascript">var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,
    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },
    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
}));
app.listen(3000);
console.log('Proxy server is listen at port 3000...');</code></pre>
<p><strong>2）vue框架的跨域</strong></p>
<p>node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置。开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。</p>
<p>webpack.config.js部分配置：</p>
<pre><code class="language-javascript" lang="javascript">module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}</code></pre>
<h4 data-id="heading-62">（6）document.domain + iframe跨域</h4>
<p>此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
1）父窗口：(domain.com/a.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;iframe id="iframe" src="http://child.domain.com/b.html"&gt;&lt;/iframe&gt;
&lt;script&gt;
    document.domain = 'domain.com';
    var user = 'admin';
&lt;/script&gt;</code></pre>
<p>1）子窗口：(child.domain.com/a.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;script&gt;
    document.domain = 'domain.com';
    // 获取父窗口中变量
    console.log('get js data from parent ---&gt; ' + window.parent.user);
&lt;/script&gt;</code></pre>
<h4 data-id="heading-63">（7）location.hash + iframe跨域</h4>
<p>实现原理：a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。</p>
<p>具体实现：A域：a.html -&gt; B域：b.html -&gt; A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。</p>
<p>1）a.html：(domain1.com/a.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"&gt;&lt;/iframe&gt;
&lt;script&gt;
    var iframe = document.getElementById('iframe');
    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---&gt; ' + res);
    }
&lt;/script&gt;</code></pre>
<p>2）b.html：(.domain2.com/b.html)</p>
<pre><code class="language-ini" lang="ini">&lt;iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"&gt;&lt;/iframe&gt;
&lt;script&gt;
    var iframe = document.getElementById('iframe');
    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
&lt;/script&gt;</code></pre>
<p>3）c.html：(<a href="https://link.juejin.cn/?target=https%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2Fwww.domain1.com%2Fc.html" target="_blank" rel="noreferrer" title="https://link.zhihu.com/?target=http%3A//www.domain1.com/c.html" ref="nofollow noopener noreferrer">www.domain1.com/c.html</a>)</p>
<pre><code class="language-javascript" lang="javascript">&lt;script&gt;
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
&lt;/script&gt;</code></pre>
<h4 data-id="heading-64">（8）window.name + iframe跨域</h4>
<p>window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。</p>
<p>1）a.html：(domain1.com/a.html)</p>
<pre><code class="language-javascript" lang="javascript">var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});</code></pre>
<p>2）proxy.html：(domain1.com/proxy.html)</p>
<p>中间代理页，与a.html同域，内容为空即可。
3）b.html：(domain2.com/b.html)</p>
<pre><code class="language-javascript" lang="javascript">&lt;script&gt;    
    window.name = 'This is domain2 data!';
&lt;/script&gt;</code></pre>
<p>通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。</p>
<h4 data-id="heading-65">（9）WebSocket协议跨域</h4>
<p>WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。</p>
<p>原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。</p>
<p>1）前端代码：</p>
<pre><code class="language-javascript" lang="javascript">&lt;div&gt;user input：&lt;input type="text"&gt;&lt;/div&gt;
&lt;script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"&gt;&lt;/script&gt;
&lt;script&gt;
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---&gt; ' + msg); 
    });
    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});
document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
&lt;/script&gt;</code></pre>
<p>2）Nodejs socket后台：</p>
<pre><code class="language-javascript" lang="javascript">var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---&gt; ' + msg);
    });
    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});</code></pre>
<h3 data-id="heading-66" id="browser-point-39">3. 正向代理和反向代理的区别</h3>
<ul>
<li><strong>正向代理：</strong></li>
</ul>
<p>客户端想获得一个服务器的数据，但是因为种种原因无法直接获取。于是客户端设置了一个代理服务器，并且指定目标服务器，之后代理服务器向目标服务器转交请求并将获得的内容发送给客户端。这样本质上起到了对真实服务器隐藏真实客户端的目的。实现正向代理需要修改客户端，比如修改浏览器配置。</p>
<ul>
<li><strong>反向代理：</strong></li>
</ul>
<p>服务器为了能够将工作负载分不到多个服务器来提高网站性能 (负载均衡)等目的，当其受到请求后，会首先根据转发规则来确定请求应该被转发到哪个服务器上，然后将请求转发到对应的真实服务器上。这样本质上起到了对客户端隐藏真实服务器的作用。
一般使用反向代理后，需要通过修改 DNS 让域名解析到代理服务器 IP，这时浏览器无法察觉到真正服务器的存在，当然也就不需要修改配置了。</p>
<p>两者区别如图示：
<img src="/articles/browser/browser-figure-7.awebp" alt="" loading="lazy">
正向代理和反向代理的结构是一样的，都是 client-proxy-server 的结构，它们主要的区别就在于中间这个 proxy 是哪一方设置的。在正向代理中，proxy 是 client 设置的，用来隐藏 client；而在反向代理中，proxy 是 server 设置的，用来隐藏 server。</p>
<h3 data-id="heading-67" id="browser-point-40">4. Nginx的概念及其工作原理</h3>
<p>Nginx 是一款轻量级的 Web 服务器，也可以用于反向代理、负载平衡和 HTTP 缓存等。Nginx 使用异步事件驱动的方法来处理请求，是一款面向性能设计的 HTTP 服务器。</p>
<p>传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的。正是这个主要的区别带给了 Nginx 在性能上的优势。</p>
<p>Nginx 架构的最顶层是一个 master process，这个 master process 用于产生其他的 worker process，这一点和Apache 非常像，但是 Nginx 的 worker process 可以同时处理大量的HTTP请求，而每个 Apache process 只能处理一个。</p>
<h2 data-id="heading-68">八、浏览器事件机制</h2>
<h3 data-id="heading-69" id="browser-point-41">1. 事件是什么？事件模型？</h3>
<p>事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。</p>
<p>事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：</p>
<ul>
<li><strong>DOM0 级事件模型</strong>，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。所有浏览器都兼容这种方式。直接在dom对象上注册事件名称，就是DOM0写法。</li>
<li><strong>IE 事件模型</strong>，在该事件模型中，一次事件共有两个过程，事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。</li>
<li><strong>DOM2 级事件模型</strong>，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。</li>
</ul>
<h3 data-id="heading-70" id="browser-point-42">2. 如何阻止事件冒泡</h3>
<ul>
<li>普通浏览器使用：event.stopPropagation()</li>
<li>IE浏览器使用：event.cancelBubble = true;</li>
</ul>
<h3 data-id="heading-71" id="browser-point-43">3. 对事件委托的理解</h3>
<h4 data-id="heading-72">（1）事件委托的概念</h4>
<p>事件委托本质上是利用了<strong>浏览器事件冒泡</strong>的机制。因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。</p>
<p>使用事件委托可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理还可以实现事件的动态绑定，比如说新增了一个子节点，并不需要单独地为它添加一个监听事件，它绑定的事件会交给父元素中的监听函数来处理。</p>
<h4 data-id="heading-73">（2）事件委托的特点</h4>
<ul>
<li><strong>减少内存消耗</strong></li>
</ul>
<p>如果有一个列表，列表之中有大量的列表项，需要在点击列表项的时候响应一个事件：</p>
<pre><code class="language-html" lang="html">&lt;ul id="list"&gt;
  &lt;li&gt;item 1&lt;/li&gt;
  &lt;li&gt;item 2&lt;/li&gt;
  &lt;li&gt;item 3&lt;/li&gt;
  ......
  &lt;li&gt;item n&lt;/li&gt;
&lt;/ul&gt;</code></pre>
<p>如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。</p>
<ul>
<li><strong>动态绑定事件</strong></li>
</ul>
<p>给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。</p>
<pre><code class="language-javascript" lang="javascript">// 来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：
// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});</code></pre>
<p>在上述代码中， target 元素则是在 #list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上；</p>
<h4 data-id="heading-74">（3）局限性</h4>
<p>当然，事件委托也是有局限的。比如 focus、blur 之类的事件没有事件冒泡机制，所以无法实现事件委托；mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。</p>
<p>当然事件委托不是只有优点，它也是有<strong>缺点</strong>的，事件委托会影响页面性能，主要影响因素有：</p>
<ul>
<li>元素中，绑定事件委托的次数；</li>
<li>点击的最底层元素，到绑定事件元素之间的<code>DOM</code>层数；</li>
</ul>
<p>在必须使用事件委托的地方，可以进行如下的处理：</p>
<ul>
<li>只在必须的地方，使用事件委托，比如：<code>ajax</code>的局部刷新区域</li>
<li>尽量的减少绑定的层级，不在<code>body</code>元素上，进行绑定</li>
<li>减少绑定的次数，如果可以，那么把多个事件的绑定，合并到一次事件委托中去，由这个事件委托的回调，来进行分发。</li>
</ul>
<h3 data-id="heading-75" id="browser-point-44">4. 事件委托的使用场景</h3>
<p>场景：给页面的所有的a标签添加click事件，代码如下：</p>
<pre><code class="language-javascript" lang="javascript">document.addEventListener("click", function(e) {
	if (e.target.nodeName == "A")
		console.log("a");
}, false);</code></pre>
<p>但是这些a标签可能包含一些像span、img等元素，如果点击到了这些a标签中的元素，就不会触发click事件，因为事件绑定上在a标签元素上，而触发这些内部的元素时，e.target指向的是触发click事件的元素（span、img等其他元素）。</p>
<p>这种情况下就可以使用事件委托来处理，将事件绑定在a标签的内部元素上，当点击它的时候，就会逐级向上查找，知道找到a标签为止，代码如下：</p>
<pre><code class="language-javascript" lang="javascript">document.addEventListener("click", function(e) {
	var node = e.target;
	while (node.parentNode.nodeName != "BODY") {
		if (node.nodeName == "A") {
			console.log("a");
			break;
		}
		node = node.parentNode;
	}
}, false);</code></pre>
<h3 data-id="heading-76" id="browser-point-45">5. 同步和异步的区别</h3>
<ul>
<li><strong>同步</strong>指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。</li>
<li><strong>异步</strong>指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。</li>
</ul>
<h3 data-id="heading-77" id="browser-point-46">6. 对事件循环的理解</h3>
<p>因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中的任务。</p>
<p><img src="/articles/browser/browser-figure-8.awebp" alt="" loading="lazy"></p>
<p>Event Loop 执行顺序如下所示：</p>
<ul>
<li>首先执行同步代码，这属于宏任务</li>
<li>当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行</li>
<li>执行所有微任务</li>
<li>当执行完所有微任务后，如有必要会渲染页面</li>
<li>然后开始下一轮 Event Loop，执行宏任务中的异步代码</li>
</ul>
<h3 data-id="heading-78" id="browser-point-47">7. 宏任务和微任务分别有哪些</h3>
<ul>
<li>微任务包括： promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。</li>
<li>宏任务包括： script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。</li>
</ul>
<h3 data-id="heading-79" id="browser-point-48">8. 什么是执行栈</h3>
<p>可以把执行栈认为是一个存储函数调用的<strong>栈结构</strong>，遵循先进后出的原则。
<img src="/articles/browser/browser-figure-9.awebp" alt="" loading="lazy">
当开始执行 JS 代码时，根据先进后出的原则，后执行的函数会先弹出栈，可以看到，<code>foo</code> 函数后执行，当执行完毕后就从栈中弹出了。</p>
<p>平时在开发中，可以在报错中找到执行栈的痕迹：</p>
<pre><code class="language-javascript" lang="javascript">function foo() {
  throw new Error('error')
}
function bar() {
  foo()
}
bar()</code></pre>
<p><img src="/articles/browser/browser-figure-10.awebp" alt="" loading="lazy">
可以看到报错在 <code>foo</code> 函数，<code>foo</code> 函数又是在 <code>bar</code> 函数中调用的。当使用递归时，因为栈可存放的函数是有<strong>限制</strong>的，一旦存放了过多的函数且没有得到释放的话，就会出现爆栈的问题</p>
<pre><code class="language-javascript" lang="javascript">function bar() {  bar()}bar()</code></pre>
<p><img src="/articles/browser/browser-figure-11.awebp" alt="" loading="lazy"></p>
<h3 data-id="heading-80" id="browser-point-49">9. Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？</h3>
<p>Node 中的 Event Loop 和浏览器中的是完全不相同的东西。</p>
<p>Node 的 Event Loop 分为 6 个阶段，它们会按照<strong>顺序</strong>反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。
<img src="/articles/browser/browser-figure-12.awebp" alt="" loading="lazy"></p>
<p>（1）<strong>Timers（计时器阶段）</strong>：初次进入事件循环，会从计时器阶段开始。此阶段会判断是否存在过期的计时器回调（包含 setTimeout 和 setInterval），如果存在则会执行所有过期的计时器回调，执行完毕后，如果回调中触发了相应的微任务，会接着执行所有微任务，执行完微任务后再进入 Pending callbacks 阶段。</p>
<p>（2）<strong>Pending callbacks</strong>：执行推迟到下一个循环迭代的I / O回调（系统调用相关的回调）。</p>
<p>（3）<strong>Idle/Prepare</strong>：仅供内部使用。</p>
<p>（4）<strong>Poll（轮询阶段）</strong>：</p>
<ul>
<li>当回调队列不为空时：会执行回调，若回调中触发了相应的微任务，这里的微任务执行时机和其他地方有所不同，不会等到所有回调执行完毕后才执行，而是针对每一个回调执行完毕后，就执行相应微任务。执行完所有的回调后，变为下面的情况。</li>
<li>当回调队列为空时（没有回调或所有回调执行完毕）：但如果存在有计时器（setTimeout、setInterval和setImmediate）没有执行，会结束轮询阶段，进入 Check 阶段。否则会阻塞并等待任何正在执行的I/O操作完成，并马上执行相应的回调，直到所有回调执行完毕。</li>
</ul>
<p>（5）<strong>Check（查询阶段）</strong>：会检查是否存在 setImmediate 相关的回调，如果存在则执行所有回调，执行完毕后，如果回调中触发了相应的微任务，会接着执行所有微任务，执行完微任务后再进入 Close callbacks 阶段。</p>
<p>（6）<strong>Close callbacks</strong>：执行一些关闭回调，比如socket.on('close', ...)等。</p>
<p>下面来看一个例子，首先在有些情况下，定时器的执行顺序其实是<strong>随机</strong>的</p>
<pre><code class="language-javascript" lang="javascript">setTimeout(() =&gt; {    console.log('setTimeout')}, 0)setImmediate(() =&gt; {    console.log('setImmediate')})</code></pre>
<p>对于以上代码来说，<code>setTimeout</code> 可能执行在前，也可能执行在后</p>
<ul>
<li>首先 <code>setTimeout(fn, 0) === setTimeout(fn, 1)</code>，这是由源码决定的</li>
<li>进入事件循环也是需要成本的，如果在准备时候花费了大于 1ms 的时间，那么在 timer 阶段就会直接执行 <code>setTimeout</code> 回调</li>
<li>那么如果准备时间花费小于 1ms，那么就是 <code>setImmediate</code> 回调先执行了</li>
</ul>
<p>当然在某些情况下，他们的执行顺序一定是固定的，比如以下代码：</p>
<pre><code class="language-javascript" lang="javascript">const fs = require('fs')
fs.readFile(__filename, () =&gt; {
    setTimeout(() =&gt; {
        console.log('timeout');
    }, 0)
    setImmediate(() =&gt; {
        console.log('immediate')
    })
})</code></pre>
<p>在上述代码中，<code>setImmediate</code> 永远<strong>先执行</strong>。因为两个代码写在 IO 回调中，IO 回调是在 poll 阶段执行，当回调执行完毕后队列为空，发现存在 <code>setImmediate</code> 回调，所以就直接跳转到 check 阶段去执行回调了。</p>
<p>上面都是 macrotask 的执行情况，对于 microtask 来说，它会在以上每个阶段完成前<strong>清空</strong> microtask 队列，下图中的 Tick 就代表了 microtask
<img src="/articles/browser/browser-figure-13.awebp" alt="" loading="lazy"></p>
<pre><code class="language-javascript" lang="javascript">setTimeout(() =&gt; {
  console.log('timer21')
}, 0)
Promise.resolve().then(function() {
  console.log('promise1')
})</code></pre>
<p>对于以上代码来说，其实和浏览器中的输出是一样的，microtask 永远执行在 macrotask 前面。</p>
<p>最后来看 Node 中的 <code>process.nextTick</code>，这个函数其实是独立于 Event Loop 之外的，它有一个自己的队列，当每个阶段完成后，如果存在 nextTick 队列，就会<strong>清空队列中的所有回调函数</strong>，并且优先于其他 microtask 执行。</p>
<pre><code class="language-javascript" lang="javascript">setTimeout(() =&gt; {
 console.log('timer1')
 Promise.resolve().then(function() {
   console.log('promise1')
 })
}, 0)
process.nextTick(() =&gt; {
 console.log('nextTick')
 process.nextTick(() =&gt; {
   console.log('nextTick')
   process.nextTick(() =&gt; {
     console.log('nextTick')
     process.nextTick(() =&gt; {
       console.log('nextTick')
     })
   })
 })
})</code></pre>
<p>对于以上代码，永远都是先把 nextTick 全部打印出来。</p>
<h3 data-id="heading-81" id="browser-point-50">10. 事件触发的过程是怎样的</h3>
<p>事件触发有三个阶段：</p>
<ul>
<li><code>window</code> 往事件触发处传播，遇到注册的捕获事件会触发</li>
<li>传播到事件触发处时触发注册的事件</li>
<li>从事件触发处往 <code>window</code> 传播，遇到注册的冒泡事件会触发</li>
</ul>
<p>事件触发一般来说会按照上面的顺序进行，但是也有特例，<strong>如果给一个 <strong><code>body</code></strong> 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。</strong></p>
<pre><code class="language-javascript" lang="javascript">// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event =&gt; {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event =&gt; {
    console.log('捕获 ')
  },
  true
)</code></pre>
<p>通常使用 <code>addEventListener</code> 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 <code>useCapture</code> 参数来说，该参数默认值为 <code>false</code> ，<code>useCapture</code> 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性：</p>
<ul>
<li><code>capture</code>：布尔值，和 <code>useCapture</code> 作用一样</li>
<li><code>once</code>：布尔值，值为 <code>true</code> 表示该回调只会调用一次，调用后会移除监听</li>
<li><code>passive</code>：布尔值，表示永远不会调用 <code>preventDefault</code></li>
</ul>
<p>一般来说，如果只希望事件只触发在目标上，这时候可以使用 <code>stopPropagation</code> 来阻止事件的进一步传播。通常认为 <code>stopPropagation</code> 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。</p>
<p><code>stopImmediatePropagation</code> 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。</p>
<pre><code class="language-javascript" lang="javascript">node.addEventListener(
  'click',
  event =&gt; {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event =&gt; {
    console.log('捕获 ')
  },
  true
)</code></pre>
<h2 data-id="heading-82">九、浏览器垃圾回收机制</h2>
<h3 data-id="heading-83" id="browser-point-51">1. V8的垃圾回收机制是怎样的</h3>
<p>V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。</p>
<p><strong>（1）新生代算法</strong></p>
<p>新生代中的对象一般存活时间较短，使用 Scavenge GC 算法。</p>
<p>在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。当复制完成后将 From 空间和 To 空间互换，这样 GC 就结束了。</p>
<p><strong>（2）老生代算法</strong></p>
<p>老生代中的对象一般存活时间较长且数量也多，使用了两个算法，分别是标记清除算法和标记压缩算法。</p>
<p>先来说下什么情况下对象会出现在老生代空间中：</p>
<ul>
<li>新生代中的对象是否已经经历过一次 Scavenge 算法，如果经历过的话，会将对象从新生代空间移到老生代空间中。</li>
<li>To 空间的对象占比大小超过 25 %。在这种情况下，为了不影响到内存分配，会将对象从新生代空间移到老生代空间中。</li>
</ul>
<p>老生代中的空间很复杂，有如下几个空间</p>
<pre><code class="language-javascript" lang="javascript">enum AllocationSpace {
  // TODO(v8:7464): Actually map this space's memory as read-only.
  RO_SPACE,    // 不变的对象空间
  NEW_SPACE,   // 新生代用于 GC 复制算法的空间
  OLD_SPACE,   // 老生代常驻对象空间
  CODE_SPACE,  // 老生代代码对象空间
  MAP_SPACE,   // 老生代 map 对象
  LO_SPACE,    // 老生代大空间对象
  NEW_LO_SPACE,  // 新生代大空间对象
  FIRST_SPACE = RO_SPACE,
  LAST_SPACE = NEW_LO_SPACE,
  FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE,
  LAST_GROWABLE_PAGED_SPACE = MAP_SPACE
};</code></pre>
<p>在老生代中，以下情况会先启动标记清除算法：</p>
<ul>
<li>某一个空间没有分块的时候</li>
<li>空间中被对象超过一定限制</li>
<li>空间不能保证新生代中的对象移动到老生代中</li>
</ul>
<p>在这个阶段中，会遍历堆中所有的对象，然后标记活的对象，在标记完成后，销毁所有没有被标记的对象。在标记大型对内存时，可能需要几百毫秒才能完成一次标记。这就会导致一些性能上的问题。为了解决这个问题，2011 年，V8 从 stop-the-world 标记切换到增量标志。在增量标记期间，GC 将标记工作分解为更小的模块，可以让 JS 应用逻辑在模块间隙执行一会，从而不至于让应用出现停顿情况。但在 2018 年，GC 技术又有了一个重大突破，这项技术名为并发标记。该技术可以让 GC 扫描和标记对象时，同时允许 JS 运行。</p>
<p>清除对象后会造成堆内存出现碎片的情况，当碎片超过一定限制后会启动压缩算法。在压缩过程中，将活的对象向一端移动，直到所有对象都移动完成然后清理掉不需要的内存。</p>
<h3 data-id="heading-84" id="browser-point-52">2. 哪些操作会造成内存泄漏？</h3>
<ul>
<li>第一种情况是由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。</li>
<li>第二种情况是设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。</li>
<li>第三种情况是获取一个 DOM 元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。</li>
<li>第四种情况是不合理的使用闭包，从而导致某些变量一直被留在内存当中。</li>
</ul>