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

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

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

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

---

Loading Performance（加载性能）

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

优化内容效率

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

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

优化内容效率的主要措施：

• 避免不必要的下载
• 优化资源编码&大小（优化基于文本的资产的编码和传送大小）
• 图像优化
• 自动优化图像
• 用视频替换动画GIF
• 网页字体优化
• HTTP 缓存

JavaScript 启动优化

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

• HTTP 缓存
• CSS 和 JS 代码覆盖率
• 分析其 webpack 软件包
• 防止内存泄漏
• PRPL 模式
• JavaScript 启动性能
• Chrome 开发峰会 2017 - 现代加载最佳做法

优化JavaScript

• 使用Tree Shaking减少JavaScript负载
• 使用代码拆分减少JavaScript负载

永远不要加载相同的资源两次

• 离线指南
• 网页存储

延迟加载资源

Intersection Observer API

关键渲染路径（CRP：Critical Rendering Path）

• 构建对象模型
• 渲染树构建、布局及绘制
• 阻塞渲染的 CSS
• 使用 JavaScript 添加交互
• 评估关键渲染路径
• 分析关键渲染路径性能
• 优化关键渲染路径
• PageSpeed 规则和建议

HTTP/2

资源优先级

• 预加载
• 预连接
• 预提取

使用webpack进行Web性能优化

---

Rendering Performance（渲染性能）

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

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

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

优化 JavaScript 执行

缩小样式计算的范围并降低其复杂性

避免大型、复杂的布局和布局抖动

简化绘制的复杂度、减小绘制区域

坚持仅合成器的属性和管理层计数

使输入处理程序去除抖动

---

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

还有一些相关的工具，也罗列一下：

• HTML文档检查工具
• 网站性能分析工具：GTmetrix
• Google 的网页性能优化工具
• 页面api速度检测
• HTTP Archive
• 网页性能测试：WebPageTest.org
• Lighthouse 审查网络应用
• Audits 面板

转载于:https://juejin.im/post/5cec05e95188251e030fe411