css树-《百毒不侵（二）》调侃“浏览器渲染”

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

大家好，林三鑫又来了。 《康熙王朝》《雍正王朝》我看了十几遍。 明天给大家讲讲《九龙夺权》，顺便聊聊浏览器渲染（可能是浏览器渲染，顺便聊聊《九龙夺权》）。 夺取传承”，呵呵），如果你觉得说得好，记得点赞哦。

其实我也是一个有梦想的作家！

主角介绍（模块介绍）

请记住对应关系，这将有助于您更好地理解模块之间的关系

康熙（浏览器）

说到我们康熙皇帝，那就厉害了，擒住鳌拜，三巡，征伐噶尔丹。 而且这并不妨碍他的才华。 “九子夺位”，说白了，就是九个臭小子互相争夺母亲的王位，难怪那些臭小子，谁让康熙皇帝生了这么多孩子呢？ 事实上，九个儿子中最显赫的就是兄长胤禔（HTML解析器）、二弟胤智（绘图模块）、二弟胤祯（JS引擎）、四弟胤羲（CSS解析器）。 ）、老十三（布局模块）

大哥（HTML解析器）八哥（CSS解析器）四哥（JS引擎）十三哥（布局模块）三哥（绘图模块）大致渲染流程

老大哥（HTML解析器）遇到HTML标签就解析它们，并构造一棵DOM树。 老大哥（CSS解析器）解析link标签中的CSS样式，构建CSS树。 大哥和八哥把各自的DOM树和CSS树交给四哥（JS引擎）和四哥（JS引擎）来处理脚本中的js代码，并根据js代码css树，完成绑定风暴，改变CSS树和DOM树等操作十三哥（布局Layout模块）将改变后的CSS树和DOM树合成为渲染树，并设计布局图，交给三阿哥（绘图模块）康熙（浏览器）来请求各种图片资源，音频资源等。对于三哥，三哥（绘图模块）可是绘画高手，立即按照这张图和皇阿玛给的材料，画出来整个页面给大家展示你们兄弟之间的关系（模块之间的关系）

在阅读下面的内容之前，首先要明白一个道理：解析和渲染是两个过程。 解析之后，不一定能渲染出来（也就是看不到页面的效果）。 有钱（分析），不一定能买豪宅（效果图），而买了豪宅（效果图），说明你真的很有钱（分析）

HTML解析器

 
     // 6万行css样式
     .box { background: red } // 最后一行
 
 <div class="box"></div>
 <div></div>
 <div></div>
 <div></div>

HTML 解析器和 CSS 解析器

 // index.css里
  // 6万行css样式
  .box { background: red } // 最后一行
 // html代码
 <link href="index.css"></link> // 引入
 
</div>
 <div></div>
 <div></div>
 <div></div>

使用 CDN 节点加速外部资源 压缩外部样式文件（使用打包工具，如 webpack、gulp 等） 优化样式文件的代码 HTML 解析器和 JS 引擎

// index.js文件
  // 6万多行代码，对dom进行了一系列操作
// html页面
 <script src="index.js"></script> // 引入
 
</div>
 <div></div>
 <div></div>
 <div></div>

添加async属性，JS代码会异步加载执行（多个script标签的情况下，不会按照页面脚本的顺序执行，而是先加载完谁就执行）添加defer属性，JS代码会异步加载（如果有多个设置了defer的script标签，所有脚本会按顺序执行，并且会在DOMCotentLoaded之前执行） 将script标签放在页面末尾，以优化JS代码提升CSS解析器和JS引擎的执行速度

和前面的HTML解析器和JS引擎是一样的，只是DOM树和CSS树的区别

JS引擎和JS引擎

<script src="jquery.js">
<script src="bootstrap.js"></script>

会先执行下面的脚本，然后再执行下面的脚本，因为底层脚本可能依赖于上面的脚本代码（上面的例子中bootstrap依赖于jquery）

<script src="index1.js">
<script src="index2.js"></script>
<div></div>

首先执行后面的脚本，然后再执行下面的脚本。 由于上层脚本可能会改变dom，下层脚本也会改变dom，所以必须一一排队，不然就乱了。

<script src="index1.js" defer>
<script src="index2.js" defer></script>

会异步加载，即底部可能比顶部加载得快，最终的代码执行仍会按照从上到下的顺序，但是在 DOMContentLoaded 之前

<script src="index1.js" async>
<script src="index2.js" async></script>

会异步加载执行，即谁先加载完成，谁先执行，不按顺序

有点怀疑

问：为什么 CSS 解析器只能阻止 HTML 渲染而不能阻止 HTML 解析，而 JS 引擎却可以同时阻止 HTML 解析和渲染？

答：由于 CSS 无法操作 DOM，因此无需阻止 HTML 解析。 而JS引擎则不同，它可以随意操作DOM，所以需要阻塞HTML解析，防止HTML解析器做无用的工作。

DOMContentLoaded 和 onload

我们看一下一般的渲染流程：

老大哥（HTML解析器）遇到HTML标签就解析它们，并构造一棵DOM树。 老大哥（CSS解析器）解析link标签中的CSS样式css树，构建CSS树。 大哥和八哥把各自的DOM树和CSS树交给四哥（JS引擎） //DOMContentLoaded是四哥（JS引擎）处理脚本中的js代码时发生的，根据js代码，完成绑定风暴，更改CSS树和DOM树等操作十三兄弟（布局模块）将更改后的CSS树和DOM树合成为渲染树，并设计布局图，交给三哥（绘图模块）康熙（浏览器）请求各种图像资源、音频资源等，都会交给三哥，三哥（绘图模块）可是画画的高手，立即按照这张图和黄阿玛给的素材，把整个页面画出来给大家看 //onload发生在这个尾声

JavaScript是运行在浏览器中的大脑，而最受浏览器（康熙）偏爱的一定是JavaScript（四阿哥），所以最后一定是四阿哥胤禛获胜。 恭喜雍正皇帝！

雍正也是我最喜欢的一位。 他实行火耗归公、与亩分担、百官差事共同交粮的政策，派年羹尧镇压罗布赞丹增阿拉布坦政变，等等，都非常出色！

有兴趣的话可以去看一下与《大明王朝》并列中国古装剧巅峰的《雍正王朝》！