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

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

2020前端面试系列（CSS）

2020前端面试系列（VUE）

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

1. 解析域名
   1. 客户机提出域名解析请求,并将该请求发送给本地的域名服务器.
   2. 当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回.
   3. 如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址.
   4. 本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址.
   5. 重复第四步,直到找到正确的纪录.
   6. 本地域名服务器把返回的结果保存到缓存,以备下一次使用,同时还将结果返回给客户机.
2. 通过返回的公网IP查找服务器。
3. 建立TCP连接。
4. 发起请求
5. 后端服务器处理分发
6. 渲染
7. 释放连接

浏览器渲染步骤

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的区别

4. 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 的生成过程需要服务器额外付出开销，会影响服务端的性能。

垃圾回收机制

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

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

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

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

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