浏览器相关

接下来开始极客时间《浏览器工作原理与实践》阅读，在这之前，搜集一些问题，让我们带着问题来阅读。

从输入 URL 到页面加载的过程

这一道题不断深入可以完善自己的前端知识体系！

1. 浏览器构建请求头，准备发送请求

2. 检查有无本地缓存 =>引申 HTTP 缓存

3. 无缓存，开始 DNS 查询，从本地目录开始查找缓存一直到根目录 => 引申 DNS 查询 => 如果请求协议是 HTTPS，那么还需要建立 TLS 连接。 // 准备 IP 地址和端口

4. 查询到 IP 后，检查 TCP 队列是否已满，浏览器限定同时存在 6 个连接

5. 建立 TCP 连接，开始 3 次握手

6. 开始数据传输，到后台处理完毕，结束传输，开始 4 次挥手

7. 浏览器接受到数据，通过 Content-Type 区分，如果是下载类型就交给浏览器的下载管理器结束本次导航，如果是 HTML ，浏览器进程提交文档到渲染进程开始渲染

   Chrome 的默认策略是，每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance。

8. 渲染阶段

   1. DOM 生成
   2. 样式计算
   3. 布局阶段
   4. 生成 LayerTree 《层叠上下文》 (opens new window)

了解跨域吗，一般什么情况会导致跨域

跨域，是指浏览器不能执行其他页面的脚本，触发了浏览器的同源策略，是一种针对Js的安全策略。

同源策略，是指域名，协议和端口均相同，同源策略限制了ajax请求发送，js对象和DOM读取以及Cookie和local等的访问

浏览器的 EventLoop 了解吗

浏览器有一个主线程进行通过一个for循环不断进行事件执行然后退出，另外维护了一个消息队列，遵循先进先出的策略，当for循环执行完一个事件，就将队头的事件推入for循环执行。在消息队列中维护的事件就是宏任务事件，为了处理一些高优先级的事件，浏览器又在每个宏任务中维护了一个微任务列表，他的执行时间介于一个主函数执行结束之后，下一个宏任务之前。常见的微任务有mutationOberserver和Promise.

requestAnimationFrame 属于宏任务还是微任务

浏览器是怎么渲染的

如何根据浏览器渲染机制加快首屏速度

回流和重绘是什么？如何避免回流和重绘

重排，它需要重新根据 CSSOM 和 DOM 来计算布局树，这样生成一幅图片时，会让整个渲染流水线的每个阶段都执行一遍，如果布局复杂的话，就很难保证渲染的效率了。 重绘因为没有了重新布局的阶段，操作效率稍微高点，但是依然需要重新计算绘制信息，并触发绘制操作之后的一系列操作。 为了提升每帧的渲染效率，Chrome 引入了分层和合成的机制

什么是 GPU 加速，如何使用 GPU 加速，GPU 加速的缺点

will-change

了解 V8 的垃圾回收吗

V8的垃圾回收 分为 栈内回收和堆内回收，栈保存简单变量，堆保存对象这种复杂变量

栈内回收比较简单，就函数执行上下文出栈后，指针下移，V8就会进行变量回收

堆回收，V8将回收区域分成 新生代 和 老生代 通过不同的回收策略进行回收

首先是新生代，他采用了标记-整理的方式，V8 将新生代分成 空闲区域和对象区域，采用Savger算法，业技术当对象被访问到就进行标记，当空间快满时就进行一次整理，将已标记的变量复制到对象区域，并清理空闲区域，同时将两个区域互换，实现可循环。当一个变量被标记两次以上或者太大，就会进入到老生代。

老生代，采用的是标记清理方式，因为这里的对象都比较大，所以复制会很消耗性能，所以，这里会选取一个根元素进行遍历，没被标记的就会被视作垃圾数据，标记完成后不做清理，而是向一端移动，然后清理边界之外的垃圾元素

然后并行标记， 使用空闲时间进行清理和整理操作