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公然有关用户收集衔接的信息。此信息可用于修正较慢收集上的用户的运用程序体验。
