CSS与JS对DOM解析和渲染的影响

1,570 阅读1分钟

要想弄清楚标题的内容,首先必须明白浏览器从获取到代码到页面展示过程发生了什么,首先是解析DOM,生成DOM树,解析CSS文件,生成CSS树,然后DOM树和DOM树合并生成渲染树,再渲染生成页面。 结论1:由于DOM解析和CSS解析是分开的,所以CSS文件并不会阻塞DOM的解析。

页面渲染需要DOM树和DOM树合并生成渲染树,所以CSS文件会阻塞页面渲染。 结论2:CSS文件会阻塞页面渲染。

对于JS,首先要知道JS是单线程执行的,JS可以对DOM的结构进行操作,比如删除、修改、新增dom。所以遇到JS文件,页面会停止DOM解析,如果不停止DOM解析,即一边执行JS,一边解析DOM,解析完DOM之后,发现JS修改了DOM结构,那么之前解析的DOM不就白费了吗?浏览器才不会这么傻呢?所以 结论3:遇到JS文件,页面会停止DOM解析

JS文件还会去读取CSS,所以执行JS还必须等到CSS文件解析完之后,这就相等与CSS文件阻塞了JS 结论4:CSS文件会阻塞JS