Web性能优化系列（1）：Web性能优化分析

可以看看这个视频，了解由 Patrick Meenan 讲解的关于webpagetest的更多信息（需要FQ）。

渲染阻塞

如果你知道浏览器如何运行，那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道，请看下图。

点击how a browser works了解更多浏览器工作原理（作者为Tali Garsiel 和Paul Irish）.

浏览器渲染的步骤

1. 首先浏览器解析HTML标记去构造DOM树（DOM = Document Object Model 文档对象模型）
2. 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
3. 在将DOM和CSSOM树结合成渲染树之前，JS文件被解析和执行。

现在你知道浏览器如何进行解析了，让我们看看是哪一部分阻塞了渲染树的生成。

1. 阻塞渲染的CSS

有人认为CSS阻塞了渲染。在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面中被使用。

为了解决这个渲染阻塞，跟着下面的两个步骤做

1. 将关键CSS内嵌入页面中，即将最重要的（首次加载时可见的部分页面所使用到的）style写入head中的 <style></style>里。
2. 移除没用到的CSS。

那么我是如何找出没用到的CSS的呢。

1. 使用Pagespeed Insight 去得到像未使用的CSS，阻塞渲染的CSS和JS文件等等的统计数据。例如：Flipkart的Pagespeed Insight统计结果。
2. 使用Gulp任务，如gulp-uncss或是使用Grunt 任务，如grunt-uncss。如果你不知道他们是什么，请阅读我之前的文章。

##专业小贴士

1. 使用CSS Stats保证页面中完全没有未被用到的元素，唯一的样式和字体等等。
2. Pagespeed Insight Chrome 插件.
3. Tag Counter Chrome 插件.

2. 渲染阻塞的JavaScript

如果在解析HTML标记时，浏览器遇到了JavaScript，解析会停止。只有在该脚本执行完毕后，HTML渲染才会继续进行。所以这阻塞了页面的渲染。

为了解决它

在<script></script>标签中使用 async或defer特性。

1. <script async>将会在HTML解析时下载该文件并在下载完成后马上执行。
2. <script defer> 将会在HTML解析式下载该文件并在HTML解析完成后执行。

例如: async and defer都在Google Analytics中使用

点击查看async 和defer的浏览器支持。

内存泄漏

内存泄漏和页面臃肿 是前端开发者所要面对的问题之一。让我们来看看如何发现并解决内存泄漏。

在JavaScript中寻找内存泄漏

使用Chrome Task Manager（任务管理器）去检测app所使用的内存以及js内存（总体内存+实时内存）。如果你的内存一直随着你的每次操作而提高，那么你可以怀疑有内存泄漏了。

下面是Chrome Task Manager的截图。

Chrome DevTools分析

使用 Heap Profiler 去查看内存泄漏。打开Chrome devTools 然后点击profiles 标签，接着选中 take heap snapshot。如果你不了解Chrome DevTools，请阅读之前的文章.

Heap Profiler有四个快照视图(snapshot view)

1. Summary 视图 – 展示对象的总体数量以及它们的实例总数，浅部（Shallow）大小（对象本身的内存大小）以及保留（Retained）大小（自动GC发生后所释放的内存大小+无法执行到的对象的内存大小）。
2. Comparison 视图- 用于比较一个操作的前后的两个或多个快照，可以检测内存泄漏。
3. Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow 对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
4. Dominators 视图- 展示了 dominators 树的堆图。

点击了解更多 Heap profiler。

DOM泄漏

对DOM元素的引用会导致DOM泄漏并且阻碍自动垃圾回收（GC）的进行。

来看一个例子

将它的引用设置为null即可修复DOM泄漏。

上面就是前端开发者常遇到的问题。今天就讲到这。如果你喜欢我的文章，请分享或者在下面评论。谢谢！！