了解浏览器背后的运行机制就是了解浏览器的内核，现在市面上主流浏览器的内核名称分别如下：
** 注：blink内核其实是基于webkit内核衍生出的一个新分支 **
获取到的html/css/js资源经过浏览器内核的处理生成图像呈现在浏览器上，那么下面我们就详细说说浏览器内核在拿到资源之后是经过哪些处理来生成我们最终所看到的页面。
浏览器在处理资源的过程中是由多个模块协同工作的，主要关注下面几个模块：
上面整个过程就是浏览器渲染页面的主要过程，在这个过程中主要是按顺序生成了下面几棵树：
在渲染过程这部分内容我们了解到在渲染过程中会根据CSS来形成CSS树，那么能在这个过程中做哪些优化呢？在说明CSS优化的方法之前先介绍一下CSS的解析规则。
我们在编写css的过程中，一般是从左到右去进行编写，比如我们想给类名为test_parent下的p标签去增加样式的时候，一般会这样写：
.test_parent p {
font: 16px/20px Microsoft YaHei;
}
但是这样些会造成很大的性能问题，为什么呢？因为浏览器在解析CSS的过程中对于声明是从右往左进行匹配的。对于上面这种写法浏览器的做法会先找到DOM树中的所有标签为p的节点，然后再去这些p节点中去找哪些p节点的父节点的类为test_parent。由于p节点在我们的页面中可能会有很多很多，这样就导致寻找的过程会变长。
从上面的内容中我们就可以得出第一个CSS优化的思路，优化css声明的编写，有下面几种优化方式：
介绍完css选择器的优化之后，我们再来回想一下上面的渲染过程，页面形成的过程中一颗重要的树Render树是由DOM树和CSS树合力生成的，那么如果没有CSS树Render树也就不会形成，更不必谈最终的页面了，所以第二个优化思路就是尽快让CSS树去形成，而CSS树的形成是浏览器解析CSS文件生成的，那么为了让CSS树形成，我们可以采取下面的方式去优化：
至此我们已经对CSS树的形成和Render树的形成做了优化，那么CSS还有可优化的点吗？答案是有的，在上述的渲染过程中在Render树后面还形成了一棵布局渲染树，那么在这棵树的形成过程中我们能做哪些优化呢？布局渲染树是浏览器根据Render树去计算每个DOM节点的大小以及所在页面中的位置，这些计算是依赖我们编写的css声明，比如：
.wrap {
position: relative;
height: 100px;
background-color: #ff0000;
}
为了能够让浏览器快速的计算节点的位置和大小我们应该遵循CSS的声明顺序：
至此关于CSS的优化已经结束了，下面来说说渲染过程中JS的一些优化
广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com
看到这我们会发现上面很少提及JS，不是JS不重要哈，是在渲染过程中JS基本上不需要，那么为什么要提及JS呢，因为JS会阻塞HTML的解析，比如下面这段代码
<body>
<div>js之前的html</div>
<script>
console.log(‘js执行了‘);
</script>
<div>js之后的html</div>
</body>
浏览器解析时，遇到上面的js时浏览器会把控制权交给js引擎，这时浏览器就会停止DOM树的解析。这样就延迟了DOM树的生成。那么对于这种情况我们有哪些优化呢？
async和defer的作用：
原文：https://www.cnblogs.com/xiaonian8/p/13666456.html