页面渲染

浏览器打开页面的过程

1. 解析 URL
2. DNS 解析

   
   浏定览器并不保证一会去解析域名，可能会根据当前的网络、负载等状况做决定

3. 建立 TCP/IP 链接

   或跨域

4. HTTP 请求和响应

   缓存：

   1. service worker 缓存
   2. 强缓存/协商缓存
   3. http/2 push 缓存

5. 页面渲染

页面渲染的步骤

1. 解析 HTML 标签并构建 DOM 树
2. 解析 CSS 标签并构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并成一个渲染树
4. 根据渲染树来布局，计算每个节点的几何信息
5. 将各个节点绘制到屏幕上

HTML 解析、JavaScript 加载与执行、CSS 加载与使用

HTML 解析的过程：

HTML 解析过程中的 CSS

1. 遇到外链的 css 时，网络进程会请求对应的资源，渲染进程继续解析 html
2. 遇到内联的 css 时？

HTML 解析过程中的 Javascript

当解析过程中遇到内联脚本或者 js 资源，渲染进程会被挂起，等待 js 资源加载并执行完毕后，再继续进行解析；

将 script 标签放在 body 底部；defer、async

根据标准规范，在 JavaScript 中可以访问 DOM。因此当遇到 JavaScript 后会阻塞 DOM 的解析。于此同时，为避免 CSS 与 JavaScript 之间的竞态，CSSOM 的构建会阻塞 JavaScript 的脚本执行。总结起来就是 —— JavaScript 会阻塞 DOM 构建，而 CSSOM 的构建又回阻塞 JavaScript 的执行。

JavaScript 会阻塞 DOM 构建，而 CSSOM 的构建又回阻塞 JavaScript 的执行。

1. 构建 CSSOM 的时机？再构建的过程中会不会阻塞？
2. 是否是等待 js 加载并执行完之后再继续解析？如果是立即执行的，那么遇到document.getElementById() 这样的代码该怎么办？
3. 服务器返回优化：stream response？无刷新、无 JavaScript 的页面更新？BFF？

---

display: none 并非是删除 DOM ，改变 DOM 树，而是改变渲染树；

资源加载和 readyState

readyState：loading ---> interactive(解析 html 完成，但依然在加载资源) -----> complete（资源加载完毕）
DOMContentLoaded：事件在 interactive 之后 complete 之前触发，即除异步脚本之外的资源都已加载完毕

JavaScript 运行优化

• requestAnimationFrame：下一次重绘之前执行
• requestIdleCallback：浏览器渲染线程空闲时的回调
• Passive event listeners：{passive: true} 不需要等待事件处理回调代码运行完，直接在触发时就渲染相应的 DOM 操作