笔记-前端

URL 输入到渲染的过程

域名解析，找到服务地址
构建 TCP 连接，若有 https，则多一层 TLS 握手，
特殊响应码处理 301 302
解析文档
构建 dom 树和 csscom
生成渲染树：从DOM树的根节点开始遍历每个可见节点，对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们，根据每个可见节点以及其对应的样式，组合生成渲染树
Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的集合信息
Painting（重绘）：根据渲染树及其回流得到的集合信息，得到节点的绝对像素。
绘制，在页面上展示，这一步还涉及到绘制层级、GPU相关的知识点
加载js脚本，加载完成解析js脚本

回流(重排)与重绘

回流：浏览器中的页面是采用流式布局来绘制的，从左到右，从上到下，当其中一个节点的空间属性发生了变化，那么就会影响到其他节点的空间布局，需要重新收集节点信息，再进行绘制，而这个过程及回流的过程，页面节点重新调整排列，因此也叫重排。
重绘：我们对页面节点元素的外观做处理的过程，例如修改颜色，背景，阴影等。
回流一定重绘，但重绘不一定回流
触发回流的场景
1.添加或删除可见的DOM元素
2.元素的位置发生变化
3.元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
4.内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
5.页面一开始渲染的时候（这肯定避免不了）
6.浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
获取位置信息，因为需要回流计算最新的值

回流的优化
对树的局部甚至全局重新生成是非常耗性能的，所以要避免频繁触发回流
现代浏览器已经帮我们做了优化，采用队列存储多次的回流操作，然后批量执行，但获取布局信息例外，因为要获取到实时的数值，浏览器就必须要清空队列，立即执行回流。
编码上，避免连续多次修改，可通过合并修改，一次触发
对于大量不同的 dom 修改，可以先将其脱离文档流，比如使用绝对定位，或者 display:none ，在文档流外修改完成后再放回文档里中
通过节流和防抖控制触发频率
css3 硬件加速，transform、opacity、filters，开启后，会新建渲染层

https://segmentfault.com/a/1190000021966814
https://juejin.cn/post/6844904073737535496