从地址栏输入url到页面渲染发生了什么
- 根据 url 进行 dns 解析，获取主机 ip
- 根据主机 ip 请求服务器，建立连接（TCP。三次握手连接/四次挥手断连）。https 会增加 TSL(SSL) 连接。
- 从服务器获取对应文件。 第一次直接从服务器读取，后续同 url 请求会根据设置的缓存机制决定是否从缓存读取。
- 获取 HTML 文件，构建 DOM 树。通常请求的是 HTML 文件，然后根据文件中的 link 获取 CSS 及 JS 文件。解析过程是边下载边解析。
- 获取相关资源文件（CSS 及 JS）。
- 根据 CSS 文件构建 CSSOM 树。边下载边解析。
- 根据 DOM 树及 CSSOM 树构建渲染树，设置样式。主要是将对应的 CSS 样式赋给对应的 DOM 节点。
- 构建布局树。确定节点渲染位置，以及隐藏 “display: none” 节点。
- 构建分层树。主要是构建 z 轴层级关系。
- 将分层树块化。利用光栅找到视图窗口下对应的位图，主要是避免渲染视窗外的部分，提升性能。
- 渲染进程渲染页面。
JS 及 CSS 引入顺序的差异
CSS 放在 head 中，JS放在 </body> 前。
优点：
- 防止 JS 解析阻碍树的构建
- 防止在 JS 中获取不到对应的 DOM 节点
缺点：
- JS 解析时间过长依旧会影响整个系统的响应时间。
什么是重绘/重排，以及如何避免
重绘： 指同布局下对 DOM 节点的样式修改导致的浏览器重新绘制。
重排： 指会改变 DOM 节点结构的样式修改操作。修改节点的宽高及位置等会引起浏览器对整个布局的重新计算。
重绘影响较小，重排影响较大。
避免方式
js 尽量减少对样式的操作，能用 css 完成的就用 css
对 dom 操作尽量少，能用 createDocumentFragment 的地方尽量用
如果必须要用 js 操作样式，能合并尽量合并不要分多次操作
resize 事件 最好加上防抖，能尽量少触发就少触发 加载图片的时候，提前写好宽高作者：杰杰的风
链接：juejin.cn/post/688884…
重点在于减少 JS 对 DOM 及样式的操作频率及操作次数。
浏览器缓存机制
缓存方式
协商缓存及强缓存两种。前者是通过请求头来“商量”什么时候直接从缓存读取即可，什么时候从服务器重新获取。后者是强制从缓存中读取。
实现方式
缓存控制请求头
cache-control
- max-age: 缓存过期时间，是一个相对时间
- public: 表示客户端和代理服务器都会缓存
- private: 表示只在客户端缓存
- no-cache: 协商缓存标识符，表示文件会被缓存但是需要和服务器协商
- no-store: 表示文件不会被缓存
强缓存
http1.0 中设置 Expires 为绝对值。http1.1 中设置 max-age:600。
协商缓存
-
Last-Modified/if-Modified-Since
对比改动时间，来决定是否重新从服务器获取。精度为秒级 -
Etag/If-None-Match
根据文件内容生成标记，对比标记决定是否重新获取。
缓存位置
- from memeory cache
- from dist cache
- 大文件缓存至 dist，需要再读取，小文件缓存至内存中。
- css 一般不常变化，一般存dist。
- 具体情况由浏览器决定。
