浏览器渲染页面的流程

最新推荐文章于 2023-02-20 22:37:37 发布

ananzhangwei

最新推荐文章于 2023-02-20 22:37:37 发布

阅读量296

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/ananzhangwei/article/details/123869885

版权

1.请求html文件

一般浏览器先向服务器请求html文件，html相当于网页的框架结构，不过一开始浏览器得到的是显示字节内容的html文件，

接着字节转化成看得懂的语言才行，所以字节转化成html代码

但HTML代码机器不能识别接着html代码转化成机器可以识别的代码，于是浏览器把字符转化成了token，可以把token理解为一个标记标签，比如遇到<body>就位起始标签，</body>为结束标签

这样不同的字符就变成有不同特殊意义的东西，

接着将token转化成节点对象

最后就是把这些节点对象都连在一起形成文本对象模型也就是Dom

浏览器在构建DOM的时候遇到link标签请求css文件

2.请求css文件

遇到link标签浏览器向服务器请求css文件，后面处理css文件与html文件十分类似先把字节转化成字符，字符转化为token，token转化为节点，接着节点结合css模型——cssom，虽然DOM和CSSOM是不一样的对象模型，但是一个网页的呈现离不开二者的结合，因为一个网页就是框架结构和css样式的结合，DOM和CSSOM相结合成渲染树。

3.渲染树

DOM和CSSOM并不是简单的结合在一起，因为渲染树上的节点是页面能够呈现的内容

也就是说一些css样式或者html标签不会被呈现出来，不会被呈现出来就不会挂在渲染树上比如link标签，display：none,等不会被呈现出来，渲染树的任务就是匹配DOM和CSSOM的节点并且捕获可见内容，在渲染树构建完成以后页面也不是马上被渲染的，还要进行布局：获取渲染书的结构，节点位置和大小，布局是依照盒子模型来进行的，也就是每个元素都用一个盒子去表示然后让盒子在页面上去进行排列和嵌套完成布局，接着渲染树以像素的的形式绘制在页面上，这样我们的页面就呈现出来了

4.总结

浏览器向服务器或者本地请求html文件在解析html文件的时候遇到了link标签接着去请求css文件 html继续向下解析接着请求js文件，服务器或者本地就会陆续返回响应的js和css文件，会先得到那个文件要看结合实际，但是如果先执行的是js文件那么会发生阻塞，我们不能先执行js文件必须等待CSSOM构建完成后才能执行js文件，CSSOM的构建是渲染中发生阻塞的一个重要因素，其实构建DOM也会发生阻塞但是DOM可以部分解析而CSSOM不行，因为css中子代选择器，要是父类的css已经解析完成但子类还没解析这就乱套了所以CSSOM不能部分解析。执行js文件也会阻塞DOM，因为js可以操纵dom和css；后面的流程就是dom构建完毕，形成渲染树，布局，绘制。