前端之DOM解析和渲染与CSS、JS之间的关系

DOM

DOM这里有两个概念,解析与渲染。

DOM解析:就是把你所写的各种html标签,生成一个DOM TREE,可以认为就是生成了一个最原始的页面,一点样式都没有,毫无CSS修饰的那种;

DOM渲染:浏览器会把本身默认的样式+用户自己写得样式整合到一起,形成一个CSS TREE,而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一起,生成一个Render TREE,呈现出一个带有样式的页面。

线程

DOM渲染对应GUI线程,js运行对应JS线程。两者互斥,不能同时运行。

结论

  1. css的加载不会阻塞DOM的解析
  2. css的加载阻塞DOM的渲染
  3. js的加载和执行阻塞DOM的解析
  4. js的加载和执行阻塞DOM的渲染
  5. css的加载阻塞js的执行,不会阻塞js的加载
  6. css的加载与js的加载之间是否有影响?不考虑,浏览器自身会偷看并预先下载
  7. 遇到script标签会触发渲染,以获得最新样式给js代码
posted @ 2022-06-30 10:07  亦茫茫  阅读(274)  评论(0编辑  收藏  举报