JavaScript学习3——页面的渲染过程

最新推荐文章于 2025-04-02 18:24:03 发布

Novicee

最新推荐文章于 2025-04-02 18:24:03 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/flying_coding/article/details/120550455

版权

3 篇文章

订阅专栏

请求html文件，得到后，将二进制文件解码为文本文件。将文本文件转化为token文件，每个token都有自己的属性值，而后将token转化为节点对象，再将这些节点对象连接在一起，构成dom树。dom是浏览器自己的语言。
html文件可以部分解析，在html文件解析过程中。头部遇见css文件链接时，请求下载css文件到本地。而后二进制->文本->token->cssom。
由dom和cssom合作构成渲染树。页面根据渲染树的结构样式进行渲染。渲染树上的样式是页面能够呈现的内容，没有在即html文件中的一些节点是不能在页面上呈现出来的。渲染树的任务是匹配dom和cssom，并且捕获可见内容。
布局。
获取渲染树的结构，节点位置和大小。布局依据盒子模型来进行的。每个元素都用一个盒子表示。
绘制
布局安排好之后，浏览器把渲染树以像素的形式绘制在页面上。页面可以呈现出来了。

<html>
<head>
	<link rel="stylesheet" type="text/css" href="...">
	<script src="..."></script>
</head>
<body></body>
</html>

解析html
遇到link，请求css文件，同时继续解析html构建dom（dom可以部分解析而cssom不可以部分解析，因为cssom部分解析就会生成已经解析的样式，但是可能有更细致的样式在等待解析，也就是部分解析的cssom不是我们期待的页面样式）
遇到script，请求js文件，暂停html解析
陆续返回css和js文件，进行这两个文件的解析（将二进制转化为文本）
但是即便是js文件先解析好了，也不能执行。
js文件只能等到cssom构建好了之后才能开始执行（无论是行内还是头部）因为cssom由于自身是样式表，所以不能部分解析，需要解析完整，构建出来cssom。而js又可以对cssom进行操作。所以就先完整构建出cssom然后执行js。此时的html解析是被阻塞的，因为js可以对dom和cssom操作。如果让dom解析完再执行js，则可能原来渲染好的东西又被执行的js删除了，所以一开始就让js执行，进行dom的修改工作。
继续解析html文件并构建dom
dom和cssom一起构建渲染树。布局。绘制。

【注】js只能等到cssom构建完成之后再执行
【注】总体流程为：dom构建中-cssom构建完成-js执行完成-dom构建完成-渲染树-布局-绘制