运行环境

从输入 url 到渲染出页面的整个过程

网页请求过程

输入URL -> DNS寻址 -> 建立TCP连接 -> 客户端发起请求 -> 服务器响应请求 -> 断开连接 -> 渲染界面

加载资源的形式

html代码
javascript css
媒体文件,如图片、视频等......

加载资源的过程

DNS解析:域名->IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求,并返回给浏览器

渲染页面的过程

DomTree: 解析html构建DOM树。
CssomTree : 解析CSS生成CSSOM规则树。
RenderObjectTree: 将DOM树与CSSOM规则树合并在一起生成渲染对象树。
Layout: 遍历渲染树开始布局(layout),计算每个节点的位置大小信息。
Painting: 将渲染树每个节点绘制到屏幕。

遇到<script>则暂停渲染,优先加载并执行JS代码,完成再继续

ref:
前端阶段性总结(二):页面渲染机制与性能优化open in new window

最后更新时间:
贡献者: DESKTOP-ER5718D\zt