最强前端性能优化，Google已经为你准备好了

经常有同学会问我，什么是性能优化，哪里学性能优化的知识。
我之前买了本《Web性能权威指南》里面也只是讲了大量的网络通信的理论知识，并没有过多提出软件开发过程中的实践操作。
当你苦苦找寻性能优化的系统教程，殊不知Google已经为你准备好了一份饕餮盛宴

我觉得对于软件工程来说，身为一个合格的开发者，要善于探索和发现。互联网给了我们丰富的开源技术和海量的信息，为何不去饥渴的去探索呢。下面就一起去探索这份全面而强大的性能优化指南吧。

一个网站的性能，可以分为两个方面，一个叫Loading Performance（加载性能），一个叫Rendering Performance（渲染性能）。

Loading Performance（加载性能）

怎么知道自己的网站有哪些性能问题呢？那当然要借助一些工具来检查：What are the different performance tools?

我们通常需要获取几十个（有时甚至是几百个）不同的资源，所有这些资源加起来的数据量高达几兆字节，并且必须在短短几百毫秒内汇聚起来，以实现我们想要达到的即时网络体验。

在满足上述要求的前提下实现即时网络体验绝非易事，优化内容效率至关重要的原因就在于此：避免不必要的下载、通过各种压缩技术优化每个资源的传送编码以及尽可能利用缓存来避免多余的下载。

JavaScript 启动优化也包括几点，如下：

要编写高性能的网站和应用，您需要了解浏览器如何处理 HTML、JavaScript 和 CSS，并确保您编写的代码（和您要包括的其他第三方代码）尽可能高效地运行。

您在工作时需要了解并注意五个主要区域。这些是您拥有最大控制权的部分，也是像素至屏幕管道中的关键点：

JavaScript。一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。
样式计算。此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。
布局。在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，例如元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。
绘制。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。
合成。由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。