运行环境
从输入 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代码,完成再继续