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

时间 2019-11-09

原文原文链接

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

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

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

Loading Performance（加载性能）

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

咱们一般须要获取几十个（有时甚至是几百个）不一样的资源，全部这些资源加起来的数据量高达几兆字节，而且必须在短短几百毫秒内汇聚起来，以实现咱们想要达到的即时网络体验。git

在知足上述要求的前提下实现即时网络体验绝非易事，优化内容效率相当重要的缘由就在于此：避免没必要要的下载、经过各类压缩技术优化每一个资源的传送编码以及尽量利用缓存来避免多余的下载。github

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

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

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

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

以上就是性能优化的主要方式。把这些连接点点，把文章看看，你会发现性能优化是如此的有趣。固然，自此作性能优化也就变得简单了起来，哈哈。