浏览器加载页面

179 阅读1分钟

url输入

1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接(三次握手)。 5、HTTP发起请求。 6、服务器处理请求,浏览器接收HTTP响应。 7、渲染页面,构建DOM树。 8、关闭TCP连接(四次挥手)。

正常元素

解析HTML —> 构建DOM树

加载样式 —> 解析样式 —> 构建样式规则树

加载javascript —> 执行javascript代码

把DOM树和样式规则树匹配构建渲染树

计算元素位置进行布局

绘制

如果是img

解析HTML【遇到标签加载图片】 —> 构建DOM树

加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树

加载javascript —> 执行javascript代码

把DOM树和样式规则树匹配构建渲染树【遍历DOM树时加载对应样式规则上的背景图片】

计算元素位置进行布局

绘制【开始渲染图片】