了解浏览器背后的运行机制
了解浏览器背后的运行机制就是了解浏览器的内核，现在市面上主流浏览器的内核名称分别如下：
- chrome: blink内核
- Opera: blink内核
- Safari: webkit内核
- FireFox: Gecko内核
- IE: Trident内核
** 注：blink内核其实是基于webkit内核衍生出的一个新分支 **
获取到的html/css/JS资源经过浏览器内核的处理生成图像呈现在浏览器上，那么下面我们就详细说说浏览器内核在拿到资源之后是经过哪些处理来生成我们最终所看到的页面。
浏览器内核主要的功能模块
浏览器在处理资源的过程中是由多个模块协同工作的，主要关注下面几个模块：
- HTML解析器：解析HTML文件，最终输出dom树
- CSS解析器：解析CSS文件，最终输出样式层叠表
- 图层布局计算模块：布局计算每个对象的大小和位置
- 视图绘制模块：将图层布局计算模块的结果形成像素并绘制到屏幕上
- js模块：编译和执行js
浏览器渲染过程
- 解析HTML：执行所有的加载逻辑，在解析HTML的过程中发出渲染页面所需的所有请求。
- 计算样式：解析CSS文件，生成层叠样式表并于HTML结合生成渲染树(:before,:after这样的伪类是在该过程中生成的)
- 计算图层布局：精确计算所有DOM节点的大小以及在页面中的位置
- 绘制图层：在这一步浏览器会根据上一步结果将各个图层转化成像素，并对所有媒体文件进行解码
- 整合图层，生成页面：浏览器合成所有图层，将数据由cpu传递给GPU进行图像的绘制。
上面整个过程就是浏览器渲染页面的主要过程，在这个过程中主要是按顺序生成了下面几棵树：
- DOM树：DOM树是浏览器解析HTML，将HTML标签抽象成的一颗树。
- CSS树：CSS树是浏览器解析CSS，根据内容生成的一颗树，生成CSS树是和DOM树并行的。
- Render树：是由DOM树和CSS树相整合，形成的一颗渲染树。
- 布局渲染树：浏览器根据Render树递归计算，确定DOM树上每个节点的位置和大小形成的一颗布局渲染树。
- 绘制渲染树：GPU根据布局渲染树结果进行图像绘制形成的一颗树。
基于渲染过程的CSS优化
在渲染过程这部分内容我们了解到在渲染过程中会根据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文件，也就是我们平常将所有的CSS文件放在head标签中去加载。
至此我们已经对CSS树的形成和Render树的形成做了优化，那么CSS还有可优化的点吗？答案是有的，在上述的渲染过程中在Render树后面还形成了一棵布局渲染树，那么在这棵树的形成过程中我们能做哪些优化呢？布局渲染树是浏览器根据Render树去计算每个DOM节点的大小以及所在页面中的位置，这些计算是依赖我们编写的css声明，比如：
.wrap {
position: relative;
height: 100px;
background-color: #ff0000;
}
为了能够让浏览器快速的计算节点的位置和大小我们应该遵循CSS的声明顺序：
- 显隐属性：display || visibility(如果display:none，浏览器就不会去计算大小和位置了)
- 定位属性：position、top、left、bottom、right、z-index、float、clear(这些属性影响了节点的位置，越早去些，浏览器越早去计算)
- 盒模型：width、height、padding、margin、border(这些属性影响了节点的大小，越早写的化，浏览器可以越早去计算)
- 排版：line-height、text-align、font等
- 视觉：color、background-color等
至此关于CSS的优化已经结束了，下面来说说渲染过程中JS的一些优化
基于渲染过程的JS优化
看到这我们会发现上面很少提及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树的生成。那么对于这种情况我们有哪些优化呢？
- 1.将js放在最后去编写或者引用，这也是我们经常去做的。
- 2.合理的使用async和defer引入js
async和defer的作用：
- async：异步加载，加载成功之后立马执行，也就是说script标签中增加async会使js在加载过程中不会阻止dom的解析
- defer：异步加载，等HTML加载完成之后再执行。
js中for循环优化总结_如何提高程序的执行效率
在程序开发中，经常会使用到for循环的，但是很多人写的for循环效率都是比较低的，下面就举例说明，并总结优化for循环的方法，来提高我们程序的执行效率。
网站打开速度优化_如何提高网页访问速度技巧方法总结
网站的加载速度不仅影响着用户体验，也会影响搜索引擎的排名，在百度推出“闪电算法”以来，将网站首屏打开速度被列入优化排名行列，作为前端开发的我们需要如果来优化网站的打开速度呢？下面就整理挖掘出很多细节上可以提升性能的东西分享给大家
JS性能优化之文档片段createDocumentFragment
DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中
深入浅出代码优化﹣if/else
对于代码裡面的 if else，我们可以使用逻辑判断式，或更好的三元判断式来优化代码。除了可以降低维护项目的成本之外，还可以提升代码可读性。就让我们从最简单的 if else 例子开始吧。
微信小程序性能优化入门指南
小程序从发布到现在也已经有将近两年的时间，越来越来多的公司开始重视小程序生态带来的流量，今年也由于小程序平台对外能力的越来越多的开放以及小程序平台的自身优化，越来越多的开发者也自主的投入到小程序的开发当中
网络串流播放_HTML5如何优化视频文件以便在网络上更快地串流播放
无论你正在将 GIF 动图转换为 MP4 视频，还是手头已经有一大堆 MP4 视频，你都可以优化文件结构，以使得这些视频更快地加载和播放。通过重组 atoms 将 moov 放到文件开头，浏览器可以避免发送额外的 HTTP range request 请求来搜寻和定位 moovatom
web项目优化_Web 服务器性能与站点访问性能优化
要优化 Web 服务器的性能，我们先来看看 Web 服务器在 web 页面处理上的步骤:Web 浏览器向一个特定的服务器发出 Web 页面请求; Web 服务器接收到 web 页面请求后，寻找所请求的 web 页面，并将所请求的 Web 页面传送给 Web 浏览器; 显示出来
前端性能优化之重排和重绘
浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）
微信小程序代码优化总汇
写篇文章的目的，是以开放小程序代码的层面的优化。包括：条件判断将wx:if换成了hidden 、页面跳转请销毁之前使用的资源、列表的局部更新、小程序中多张图片懒加载方案、Input状态下隐藏input，应预留出键盘收起的时间
我是如何将页面加载时间从6S降到2S的？
生活在信息爆炸的今天，我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的，这就意味着用户对你站点投入的时间可能是及其吝啬的（当然有一些刚需站点除外）。如何给用户提供迅速的响应就显得十分重要了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!