前端之DOM解析和渲染与CSS、JS之间的关系
DOM
DOM这里有两个概念,解析与渲染。
DOM解析:就是把你所写的各种html标签,生成一个DOM TREE,可以认为就是生成了一个最原始的页面,一点样式都没有,毫无CSS修饰的那种;
DOM渲染:浏览器会把本身默认的样式+用户自己写得样式整合到一起,形成一个CSS TREE,而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一起,生成一个Render TREE,呈现出一个带有样式的页面。
线程
DOM渲染对应GUI线程,js运行对应JS线程。两者互斥,不能同时运行。
结论
- css的加载不会阻塞DOM的解析
- css的加载会阻塞DOM的渲染
- js的加载和执行会阻塞DOM的解析
- js的加载和执行会阻塞DOM的渲染
- css的加载会阻塞js的执行,不会阻塞js的加载
- css的加载与js的加载之间是否有影响?不考虑,浏览器自身会偷看并预先下载
- 遇到script标签会触发渲染,以获得最新样式给js代码