最近在看浏览器的渲染加载,然后看到网上有篇文章写的不错,特别拿过来学习下
- 用户输入网址,浏览器向服务器发出请求,接着,服务器返回html文件,
- 浏览器开始载入html代码,开始解析为DOMtree,如果此时head标签内有一个link标签,则引入外部的css文件,浏览器发出css文件的请求,服务器返回这个css文件,然后解析css文件并生成css rule tree。
- 浏览器继续载入html中 body代码,此时因为有哦dom tree 和css rule tree,所以浏览器也开始渲染页面,这些都是同时进行的
- 有了render tree,浏览器就已经知道网页中的哪些节点,各个节点的css定义和节点之间的从属关系,然后就是布局,layout,简单来说就是计算看每个节点在屏幕中的位置
- 最后一步是绘制,遍历render树,并使用ui后端层绘制每个节点(?)