从输入URL到网页显示的完整过程
步骤
1. 网络请求
- DNS查询（得到IP），建立TCP连接（三次握手）
- 浏览器发起HTTP请求
- 收到请求响应，得到HTML源代码
- 继续请求静态资源
- 解析HTML过程中，遇到静态资源还会继续发起网络请求
- JS CSS 图片 视频等
- 注意：静态资源可能有强缓存，此时不必请求
2.解析：字符串-> 结构化数据
- HTML 构建 DOM树
- CSS 构建 CSSOM 树（style tree）
- 两者结合，形成render tree
解析过程
- CSS可能来自<style><link>
- JS可能内嵌、或者外链，还有defer async逻辑
- img 可能内嵌（base64），可能外链
优化解析
- CSS放在<head>中，不要异步加载CSS
- JS放在<body>最下面（或合理使用defer async）
- <img> 提前定义 width height
3. 渲染：render tree 绘制到页面
- 计算各个DOM的尺寸、定位，最后绘制到页面
- 遇到JS可能会执行（参考defer async）
- 异步CSS、图片加载，可能会触发重新渲染
总结：
- 网络请求：DNS解析，HTTP请求
- 解析：DOM树，CSSOM树，render tree
- 渲染：计算、绘制，同时执行JS
划重点
- 现代浏览器的渲染机制非常复杂，不要纠细节
- 要深入理解“字符串->结构化数据” 这一步
- 记住流程图
