2018年前端性能优化清单 - 第 2 部分：关键技术和策略

2018年，前端性能优化比以往任何时候都更加重要。随着网站变得越来越复杂，用户对快速加载和响应迅速的网站的期望也越来越高。如果你的网站加载速度慢，用户很可能会转而访问其他网站。

优化前端性能有很多种方法。在本文中，我们将探讨2018年的一些关键技术和策略。

1. AMP和即时文章

谷歌的AMP（加速移动页面）和Facebook的即时文章是两种可以帮助你创建快速加载的移动网页的技术。这些技术使用一种特殊的标记语言来创建页面，这种标记语言比传统的HTML更精简，因此加载速度更快。

2. 页面加载速度

页面加载速度是影响用户体验的最重要因素之一。根据谷歌的研究，如果一个网站的加载时间超过3秒，53%的用户会放弃访问该网站。你可以使用各种工具来测量网站的加载速度，比如谷歌的PageSpeed Insights和YSlow。

3. 渐进式Web应用

渐进式Web应用（PWA）是可以在任何设备上运行的网站。它们使用现代Web技术构建，比如Service Workers和缓存，因此它们可以离线工作，并且具有类似于原生应用的功能。

4. 前端框架

React、Angular和Vue.js是三种流行的前端框架。这些框架可以帮助你构建复杂的Web应用程序，而无需编写大量的代码。它们还提供了许多内置的功能来帮助你优化性能，比如虚拟DOM和不变性检查。

5. 离线可用性

离线可用性对于那些在没有互联网连接的情况下仍然需要访问网站的用户来说非常重要。你可以使用Service Workers来实现离线可用性。Service Workers是驻留在浏览器中的脚本，它们可以缓存网站的资源，以便在没有互联网连接的情况下仍然可以访问这些资源。

6. WebAssembly

WebAssembly是一种新的字节码格式，它可以在浏览器中运行。WebAssembly比JavaScript运行速度更快，因此它非常适合用于计算密集型任务，比如3D渲染和音频处理。

7. 无服务器架构

无服务器架构是一种云计算模型，它允许你构建和部署应用程序，而无需管理服务器。无服务器架构可以帮助你降低成本并提高可扩展性。

8. 响应式设计

响应式设计是一种创建网站的方式，使网站可以在任何设备上正确显示。响应式设计使用灵活的布局和样式来确保网站在不同设备上的可读性和可用性。

9. Web Workers

Web Workers是驻留在浏览器中的脚本，它们可以独立于主线程运行。这使得它们非常适合用于执行耗时的任务，比如图像处理和视频编码。

10. 懒加载

懒加载是一种技术，它允许你只加载用户当前正在查看的图像和内容。这可以帮助你减少页面加载时间并提高性能。

11. HTTP/2

HTTP/2是HTTP协议的新版本，它可以提高网站的加载速度和性能。HTTP/2使用多路复用和压缩等技术来减少网络延迟。

12. Service Workers

Service Workers是驻留在浏览器中的脚本，它们可以拦截和修改网络请求。这使得它们非常适合用于缓存网站的资源、推送通知和实现离线可用性。

13. 压缩

压缩可以减少网站的大小，从而提高加载速度。你可以使用各种工具来压缩网站的资源，比如Gzip和Brotli。

14. 缓存

缓存可以将网站的资源存储在浏览器的内存中，以便在用户下次访问网站时可以更快地加载这些资源。你可以使用Service Workers或HTTP/2来实现缓存。

15. 代码分割

代码分割是一种技术，它允许你将网站的代码分成多个更小的块。这可以帮助你减少页面加载时间并提高性能。

16. 树状摇晃

树状摇晃是一种技术，它允许你从网站的代码中删除未使用的代码。这可以帮助你减少网站的大小并提高性能。

17. 预加载

预加载是一种技术，它允许你提前加载网站的资源，以便在用户需要这些资源时可以更快地加载。你可以使用Link标签或预加载指令来实现预加载。

18. 预取

预取是一种技术，它允许你告诉浏览器在用户需要这些资源之前就开始加载网站的资源。这可以帮助你减少页面加载时间并提高性能。

19. 关键渲染路径

关键渲染路径是网站中加载页面所需的最重要资源的集合。优化关键渲染路径可以帮助你提高网站的加载速度。

20. 渐进增强

渐进增强是一种设计网站的方式，使网站可以在所有设备上工作，即使这些设备不支持最新的Web技术。渐进增强可以帮助你确保你的网站对所有用户来说都是可访问的。

21. 可访问性

可访问性是指网站对所有用户来说都是可用的，包括残疾用户。你可以使用各种工具来提高网站的可访问性，比如屏幕阅读器和辅助技术。

结论

优化前端性能对现代web开发至关重要。本文重点介绍了2018年前端性能优化的关键技术和策略，包括AMP、Instant Articles、Apple News、页面加载速度、渐进式Web应用、框架、离线可用性、WebAssembly、无服务器架构、响应式设计、Web Workers、懒加载、HTTP/2、Service Workers、压缩、缓存、代码分割、树状摇晃、预加载、预取、关键渲染路径、渐进增强和可访问性。