浏览器页面渲染

182 阅读1分钟

1、从URL到页面的渲染过程

1、浏览器根据DNS服务器找到域名的IP地址
2、向这个IP地址的机器发送HTTP(S)请求
3、服务接收请求后处理并返回HTTP(S)请求
4、浏览器得到内容后返回

2、浏览器渲染页面的过程

1、根据HTML生成DomTree
2、根据Css生成CSSOM
3、根据CSSOM和DomTree生成RenderTree
4、渲染RenderTree
5、如果遇到<script>标签会被阻塞
ps:
1、为什么<script>会阻塞呢?因为<script>里面的js语句可以改变Dom结构
2、RenderTree和DomTree的区别?RenderTree和DomTree里面的声明结构一致,但是DomTree每个节点都没有对应的样式,但是RenderTree每个对应的节点都有对应的CSS。

3、onLoad与DOMContentLoaded的区别

1、onLoad是在页面上所有执行完了之后再执行,包括图片视频这些全部加载完毕之后加载
2、DOMContentLoaded是DomTree加载完之后就可以执行。不必等待图片、视频加载完之后