前端性能优化

这周我花了一些时间研究前端性能优化。说实话，看到那么多关于如何实现前端最佳性能提升的结果和方法，我有点不知所措。我列出了一些开发人员用来提升网站/Web 应用性能的最佳实践。

减少 HTTP 请求

提高前端性能的主要要点之一是尽量减少网站中的DNS或域名系统查找次数。

当您在浏览器中输入网站主机名（例如www.xyz-website.com ）时，浏览器会获取该主机名并将其映射到 DNS 中对应的 IP 地址。浏览器完成查找并从 DNS 解析器接收响应大约需要20 到 120 毫秒。这个时间看起来并不长，但如果网站中使用的资源依赖于不同域中的多个主机，则时间会成倍增加，从而增加网站的加载时间。

如果您的网站只需解析一个主机名即可加载所需资源，那么客户端体验将会更快、更高效。正因如此，CDN（内容分发网络）在开发者中非常受欢迎。

图像优化

图像是网页中最耗费资源的元素之一，在很多情况下会减慢加载时间。

通过有损或无损压缩优化网站或应用程序的图片，无疑可以缩短加载时间，减少源服务器的负载，并提升用户体验。另一种提升加载速度的方法是使用图片延迟加载技术。这项技术会优先加载用户视口中可见的图片，而不会加载未显示的图片。当未加载的图片接近视口边界时，才会加载。

这是我在Medium的前端周刊上找到的一个关于图像优化的博客。

缓存优化

缓存基本上是将文件的副本存储在用户的本地缓存（或者可以说是本地驱动器）中，以便可以轻松访问内容。

HTTP 缓存标头在浏览器的缓存管理中至关重要，因为其策略包括如何缓存资源、在何处缓存以及资源过期前的最长期限。

文件缩小或压缩

我们知道，您的网站是由一系列文件构建的，这些文件包括 HTML、CSS、JavaScript 和其他代码文件。因此，如果网站最终变得复杂，代码文件就会变得更大、更重，最终导致加载时间更长。

Gzip是一种非常流行的文件压缩方法，它可以将代码文件压缩多达 60% 到 80%。当文件大小缩小到原始大小的一小部分时，网站的前端性能会显著提升。

优化动画

为了确保最大限度地减少网页动画的JANK并使您的网站前端体验尽可能流畅，您可以使用 CSS 属性will-change来优化动画，让浏览器知道哪些属性和元素即将被更改，从而潜在地提高动画的性能。

以下是关于此特定 CSS 属性的必要文档，或许对您有所帮助。不过，文档建议将此属性作为解决现有性能问题的最后手段。

奖金

Udacity上其实有一门完整的免费课程，讲解 Google 的网站性能优化。这门课程重点讲解 Chrome 开发者工具，以及如何利用它提升移动端和桌面端的 Web 性能。

今天就到这里。
祝您安全编码愉快！