1.简化您的资源构建高性能应用程序的一种有效方法是审核发送给用户的资源。虽然Chrome开发人员工具中的网络面板在总结给定页面上使用的所有资源方面做得很好，但如果您到目前为止还没有考虑性能，那么知道从哪里开始很重要。这里有一些建议：如果您使用Bootstrap或Foundation来构建您的UI，请问问自己是否有必要。这些资源添加了大量CSS，浏览器必须下载、解析这些CSS并将其应用到页面，所有这一切都发生在站点特定的CSS出现之前。Flexbox和Grid擅长用相对较少的代码创建简单和复杂的布局。由于CSS是渲染阻塞资源，CSS框架的开销会显着延迟渲染。您应该通过消除不必要的开销来加快渲染速度，尽可能多地依赖浏览器内的工具。JavaScript库很方便，但并不总是必需的。以jQuery为例：由于querySelector和querySelectorAll等方法，元素选择大大简化。使用addEventListener可以轻松实现事件绑定。addEventListener.classList、setAttribute和getAttribute提供了使用类和元素属性的便捷方法。如果您必须使用图书馆，请研究更精简的替代品。例如，Zepto是一个更小的jQuery替代品，而Preact是一个更小的React替代品。并非所有网站都需要是单页应用程序(SPA)，因为它们经常广泛使用JavaScript。JavaScript是Web上的大量资源，因为它不仅要下载，还要解析、编译和执行。例如，具有优化的前端架构的新闻和博客网站的性能与传统的多页面体验一样好。特别是如果正确配置了HTTP缓存，并且可以选择使用服务工作者。2.如何发送资源当您知道需要为您的应用发送哪些资源以使其外观和功能符合您的要求时，请考虑接下来如何发送它们。如何发送资源对于构建快速的用户体验至关重要。迁移到HTTP/2。HTTP/2解决了许多HTTP/1.1固有的性能问题，例如并发请求限制和缺少标头压缩。使用资源提示来加速资源传递。rel=preload就是这样一种资源提示，它允许在浏览器发现关键资源之前提前获取它们。这可以对页面呈现产生显着的积极影响，并在明智地使用时缩短交互时间。rel=preconnect是另一个资源提示，它可以掩盖为托管在第三方域上的资源打开新连接时的延迟。3.优化数据大小有了关于哪些资源适合发送以及_如何_发送它们的一些想法，我们将介绍一些限制_发送多少_数据的建议：缩小文本资源。缩小是删除基于文本的资源中不必要的空格、注释和其他内容。它可以在不影响功能的情况下显着减少您发送给用户的数据量。在JavaScript中使用uglification通过缩短变量和方法名称来进一步节省成本。由于SVG是一种基于文本的图像格式，因此可以使用SVGO对其进行优化。配置服务器以压缩资源。压缩资产可以大大减少您发送给用户的数据量，尤其是在涉及文本资产的情况下。GZIP是该领域的一种受人尊敬的格式，但Brotli.compression可以更进一步。但是，请理解压缩并不是性能问题的全部：一些隐式压缩的文件格式（例如JPEG、PNG、GIF、WOFF等）不响应压缩，因为它们已经被压缩。优化图像以确保您的网站发送尽可能少的图像数据。由于图像合成消耗了大部分性能，因此图像优化代表了提高性能的独特机会。如果您有时间，请考虑提供其他图像格式。WebP享有相当广泛的浏览器支持，并且可以在文件大小方面削弱既定格式，同时保持相似的视觉质量。JPEGXR是另一种受IE和Edge支持的替代格式，可提供类似的节省。响应传输图像。各种各样的设备及其屏幕提供了一个巨大的机会来提高性能，方法是发送最适合在其上查看的屏幕的图像。在最简单的用例中，您可以将srcset属性添加到元素以指定浏览器可以从中选择的图像数组。在更复杂的方面，您可以使用帮助浏览器选择最佳格式（例如，WebPoverJPEG或PNG），或者为不同的屏幕尺寸提供不同的图像处理。使用视频而不是GIF动画。动画GIF很大，但类似质量的视频要小得多，通常在80%左右。如果您的站点大量使用动画GIF，这可能是您可以提高加载性能的最有效方法。客户端提示可用于根据当前网络条件和设备特性定制资源交付。DPR、Width和Viewport-Width标头可以帮助您使用服务器端代码以更少的标记为设备提供最佳图像。Save-Data标头可以帮助您为明确要求您的用户提供更轻松的应用程序体验。NetworkInformationAPI公开有关用户网络连接的信息。此信息可用于修改较慢网络上用户的应用程序体验。
