web性能优化指南

一、精简你的资源

构建高性能应用程序的有效方法是审核发送给用户的资源。虽然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。

二、如何发送资源

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

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

三、优化数据大小

有了一些关于哪些资源适合发送的想法以及_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公开有关用户网络链接的信息。此信息可用于修改较慢网络上的用户的应用程序体验。