web性能优化指南

1、精简你的资源

构建高性能应用程序的有效方法是审核发送给用户的资源。虽然Chrome开发人员工具中的网络面板可以很好地总结给定页面上使用的所有资源，但如果您到目前为止尚未考虑性能，那么知道从哪里开始是很重要的。以下是一些建议：

如果您使用Bootstrap或Foundation来构建UI，请问自己是否有必要。这些资源添加了浏览器必须下载，解析和应用于页面的大量CSS，所有这些都是在特定于站点的CSS进入图片之前。 Flexbox和Grid在使用相对较少的代码创建简单和复杂布局方面非常出色。由于CSS是一种渲染阻塞资源，因此CSS框架的开销可能会显着延迟渲染。您应该通过消除不必要的开销来加速渲染，尽可能依赖于浏览器中的工具。
JavaScript库很方便，但并不总是必要的。以jQuery为例：由于querySelector 和 querySelectorAll等方法，元素选择得到了极大的简化。使用addEventListener可以轻松进行事件绑定。 addEventListener. classList, setAttribute, 和getAttribute提供了使用类和元素属性的简便方法。如果你必须使用图书馆，研究更精简的替代品。例如，Zepto是一个较小的jQuery替代品，Preact是React的一个小得多的替代品。
并非所有网站都需要是单页面应用程序（SPA），因为它们经常广泛使用JavaScript。 JavaScript是我们在字节的web字节上提供的最昂贵的资源，因为它不仅必须下载，还必须解析，编译和执行。例如，具有优化前端架构的新闻和博客站点可以像传统的多页体验一样表现良好。特别是如果正确配置了HTTP缓存，并且可选地，如果使用了service worker。

2、如何发送资源

当您知道需要为您的应用发送哪些资源以使其成为您想要的美观和功能时，请考虑下一步如何发送它们。如何发送资源对于构建快速用户体验至关重要。

迁移到HTTP / 2。 HTTP / 2解决了HTTP / 1.1中固有的许多性能问题，例如并发请求限制和缺少头压缩。
使用资源提示加快资源交付。 rel = preload是一个这样的资源提示，它允许在浏览器发现它们之前提前获取关键资源。这可以对页面呈现产生明显的积极影响，并在明智地使用时降低交互时间。 rel = preconnect是另一个资源提示，可以掩盖为第三方域上托管的资源打开新连接的延迟。

3、优化数据大小

有了一些关于哪些资源适合发送的想法以及_how_你应该发送它们，我们将介绍一些限制你发送的_how much_数据的建议：

缩小文本资源。缩小是在基于文本的资源中删除不必要的空格，注释和其他内容。它可以显着减少您发送给用户的数据量，而不会影响功能。在JavaScript中使用uglification以通过缩短变量和方法名称来进一步节省成本。由于SVG是基于文本的图像格式，因此可以使用SVGO进行优化。
配置服务器以压缩资源。压缩资源会大大减少您发送给用户的数据量，尤其是在涉及文本资产的情况下。 GZIP在这个领域是一种令人尊敬的格式，但Brotli.压缩可以更进一步。但是，要理解压缩并不是性能问题的全部：一些隐式压缩的文件格式（例如，JPEG，PNG，GIF，WOFF等）不响应压缩，因为它们已经被压缩。
优化图像以确保您的网站尽可能少地发送图像数据。由于图像构成消耗了大部分的性能，因此图像优化代表了提升性能的独特机会。
如果您有时间，请考虑提供其他图像格式。 WebP享有相当广泛的浏览器支持，并且可以在保持类似视觉质量的同时削弱文件大小的既定格式。 JPEG XR是IE和Edge支持的另一种替代格式，可提供类似的节省。
响应地传送图像。各种各样的设备及其屏幕提供了一个巨大的机会，通过发送最适合查看它们的屏幕的图像来提高性能。在最简单的用例中，您可以向元素添加srcset属性，以指定浏览器可以选择的图像数组。在更复杂的方面，您可以使用帮助浏览器选择最佳格式（例如，WebP over JPEG或PNG），或者为不同的屏幕尺寸提供不同的图像处理。
使用视频而不是动画GIF。动画GIF非常庞大，但质量相近的视频要小得多，通常大约80％左右。如果您的网站大量使用动画GIF，这可能是您可以做的最有效的事情，以提高加载性能。
客户端提示可用于根据当前网络条件和设备特征定制资源交付。 DPR，Width和Viewport-Width标头可以帮助您使用服务器端代码为设备提供最佳图像，并提供更少的标记。 Save-Data标头可以帮助您为明确要求您的用户提供更轻松的应用程序体验。
NetworkInformation API公开有关用户网络连接的信息。此信息可用于修改较慢网络上的用户的应用程序体验。