2020最全前端面试系列（浏览器原理）（最容易忽视的面试隐藏大杀器）

2020前端面试系列（浏览器原理）

前端面试系列
2020前端面试系列（ES6）

2020前端面试系列（CSS）

2020前端面试系列（VUE）

浏览器输入URL到返回页面的全过程

1. 在浏览器地址栏输入URL
2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   1. 如果资源未缓存，发起新请求
   2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
   3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址，过程如下：
   1. 浏览器缓存
   2. 本机缓存
   3. hosts文件
   4. 路由器缓存
   5. ISP DNS缓存
   6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   3. 客户端发送ACK=Y+1， Seq=Z
7. TCP链接建立后发送HTTP请求
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    1. 主动方发送Fin=1， Ack=Z， Seq= X报文
    2. 被动方发送ACK=X+1， Seq=Z报文
    3. 被动方发送Fin=1， ACK=X， Seq=Y报文
    4. 主动方发送ACK=Y， Seq=X报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，进行缓存
15. 对响应进行解码（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
18. 构建DOM树：
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，启动下载
20. 构建CSSOM树：
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
21. 根据DOM树和CSSOM树构建渲染树 :
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1) script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. js解析如下：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    6. 浏览器在Document对象上触发DOMContentLoaded事件
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件
23. 显示页面（HTML解析过程中会逐步显示页面）

浏览器渲染步骤

1. HTML 解析出 DOM 树
2. CSS 解析出 Style Rules
3. 两者关联生成 Render Tree
4. Layout （布局）根据 Render Tree 计算每个节点信息
5. 对布局树进行分层，并生成分层树。
6. 为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分图块，并栅格化将图块转换成位图。
7. 合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。

注意

1. 解析文档中遇到Script标签，会立即解析脚本，停止解析文档（因为 JS 会改变 DOM 和 CSS，继续解析会造成浪费），如果是外部 Script，会等待脚本下载完成之后再继续解析文档。
   而现在Script标签增加了async属性，脚本解析会将改变DOM和CSS的地方解析出来，追加到DOM Tree和Style Rules。

2. 创建布局树，遍历 DOM 树中的所有可见节点，并把这些节点加到布局中；而不可见的节点（属性包含 display: none）会被布局树忽略掉。最后计算 DOM 元素的布局信息，使其都保存在布局树中。布局完成过程中，如果有js操作或者其他操作，对元素的颜色，背景等作出改变就会引起重绘，如果有对元素的大小、定位等有改变则会引起回流。

重排和重绘

重排（reflow / 回流）：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。

触发reflow情形

下面几种情况会发生重排：
（1）浏览器尺寸改变（resize）
（2）修改网页默认字体
（3）修改CSS样式改变尺寸（包括display: none)
（4）JS操作DOM树
（5）一些影响布局的动画
（6）使用JS脚本获得一些布局属性时，比如offsetTop

减少reflow方法

减少重排方法:
（1）不要逐个修改DOM样式，统一修改
（2）对需要进行复杂操作的DOM元素，先设置display: none
（3）为html动画原件使用 absolute 布局或 fixed 布局，这样不会引起重排和重绘。
（4）减少使用table布局，因为稍加改动就会导致table的重新布局。
（5）将offsetTop等属性缓存成局部变量。

浏览器本地存储方案的比较

浏览器存储主要有 cookie 、localStorage 、sessionStorage。

其中 sessionStorage 和 localStorage 是 HTML5 新特性。
sessionStorage：为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）
localStorage：本地离线存储，在浏览器关闭，然后重新打开后数据仍然存在。

cookie

操作方式：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

参数说明

expires
如果设置过去的时间，则删除cookie；如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。

path
建立cookie目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。

localStorage

IE8+支持，每个域名限制5M。打开同域的新页面也能访问得到
操作方式：

window.localStorage.setItem(key, value)		// 保存
window.localStorage.getItem(key)		// 读取
window.localStorage.removeItem(key)		// 删除
window.localStorage.clear()			// 清除所有

sessionStorage

sessionStorage操作的方法与localStroage是一样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
刷新页面sessionStorage不会清除，但是打开同域新页面访问不到

cookie, localStorage, sessionStorage的区别

前端存储浅谈——cookie、sessionStorage、localStorage

cookie, localStorage, sessionStorage的区别
1. 存储大小不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存；cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3. 作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie在所有同源窗口中都是共享的。

浏览器缓存机制

哪些数据会被缓存？

1. DNS缓存
   浏览器在获取网站域名的实际IP地址后会对其IP进行缓存，减少网络请求的损耗。每种浏览器都有一个固定的DNS缓存时间，其中Chrome的过期时间是1分钟，在这个期限内不会重新请求DNS。
2. MemoryCache
   内存缓存，特点为：快速读取和时效性。
   1、快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
   2、时效性：一旦该进程关闭，则该进程的内存则会清空。
3. 浏览器缓存
   浏览器缓存，也称Http缓存，分为强缓存和协商缓存。强缓存的优先级大于协商缓存。
   1. 强缓存
      强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 Expires 和 Cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。
      Expires 是时间戳（过期时间），浏览器就会先对比本地时间和 Expires 的时间戳，如果本地时间小于 Expires 设定的过期时间，那么就直接去缓存中取这个资源。
      Cache-Control 利用 max-age （时间段/相对时间），如果访问间隔小于 Cache-Control 设定的时间段，那么就直接去缓存中取这个资源。
      两者可以同时启用，Cache-Control 相对于 expires 优先级更高。
   2. 协商缓存
      协商缓存通过 Last-Modified 和 Etag 实现，具体机制如下：浏览器向服务器去询问缓存的相关信息，如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。
      Last-Modified 是一个时间戳（更新时间），首次请求时随着 Response Headers 返回 Last-Modified（请求资源在服务器上一次修改时间），再次请求时，Request Header 会带上 If-Modified-Since 的时间戳字段，它的值正是上一次 response 返回给它的 last-modified 值。
      如果发生了变化，就会返回一个完整的响应内容，并在 Response Headers 中添加新的 Last-Modified 值；否则，返回如上图的 304 响应，Response Headers 不会再添加 Last-Modified 字段。
      Etag是一个唯一标识字符串，每次文件修改后服务器端就会生成一个新的 Etag，这个标识字符串可以是基于文件内容编码的，只要文件内容不同，它们对应的 Etag 就是不同的。再次请求资源时，Request Header 会带上 If-Modified-Since，询问 Etag 是否变动
      Etag 比 Last-Modified 优先级更高。

补充
Expires 缺点：
返回的到期时间是服务器端的时间，如果客户端的时间与服务器的时间相差很大，容易产生误差。

Last-Modified 缺点：
修改文件，但文件的内容未改变。服务器端并不清楚我们是否真正改变了文件，它仍然通过最后编辑时间进行判断。因此这个资源在再次被请求时，会被当做新资源，进而引发一次完整的响应。
当我们修改文件的速度过快时（比如花了 100ms 完成了改动），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，它感知不到这个改动的。

Etag 缺点：
Etag 的生成过程需要服务器额外付出开销，会影响服务端的性能。

Cache-Control中max-age=0和no cache的区别
当指定 max-age 值为 0，那么缓存服务器通常需要将请求转发给源服务器。

使用 no-cache 指令的目的是为了防止从缓存中返回过期的资源。 客户端发送的请求中如果包含 no-cache 指令，则表示客户端将不会接收缓存过的响应。于是，“中间”的缓存服务器必须把客户端请求转发给源服务器。
如果服务器返回的响应中包含 no-cache 指令，那么缓存服务器不能对资源进行缓存。源服务器以后也将不再对缓存服务器请求中提出的资源有效性进行确认，且禁止其对响应资源进行缓存操作。

垃圾回收机制

实现这个功能通常有两个策略：标记清除和引用计数。

1. 标记清除
   标记清除是 JavaScript 中最常用的垃圾收集方式。
   当变量进入环境（例如，在函数中声明一个变量）时，将这个变量标记为 “进入环境” 。当变量离开环境时，则将其标记为 “离开环境”。
   具体流程
   1. 垃圾回收器在运行的时候会给存储在内存中所有变量标记；
   2. 去掉环境中变量以及被环境中的变量引用的变量标记；
   3. 被标记的变量会被视为准备删除的变量；
   4. 垃圾回收器完成内存清除工作，销毁标记的值并回收他们的内存。
2. 引用计数
   引用计数的含义就是跟踪记录每个值被引用的次数。
   具体流程
   1. 当声明了一个变量并将一个引用类型值赋给该变量时，引用次数为 1。
   2. 如果同一个值被赋值给另一个变量，引用次数加 1。
   3. 如果包含对这个值的引用的变量取了另一个值，引用次数减 1。
   4. 当这个值的引用次数变为 0 时，说明已经没法再访问这个值了，
   5. 垃圾收集器下一次运行，释放引用次数为0的值的内存。

垃圾回收机制触发时间：
自动触发，周期运行，当触发时，浏览器会发生抖动，故频繁触发则会发生抖动。
优化策略： 分代垃圾回收。

引用计数策略有一个很严重的问题：循环引用。
如果对象 A 中包含一个指针指向对象 B，而对象 B 中也包含一个指针指向对象 A。那么这两个对象引用次数都是 2，若这种函数被反复多次调用，会导致大量内存得不到回收。所以尤其应该注意手动断开JS对象和DOM之间的连接。

局部变量的生命周期：
局部变量只在函数的执行过程中存在。
在这个过程中，首先会为局部变量在栈（或堆）内存上分配相应空间，以便存储他们的值。然后在函数中使用这些变量，直到函数执行结束。此时释放它们的内存以供将来使用。