唯快不破：提升Web 应用必看的 13 个优化点.docxVIP

北大青鸟华美官网： 时过境迁，Web 应用比以往任何时候都更具交互性。搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用，看看哪些可以用来改善延迟，渲染时间以及整体性能吧！ 更快的 Web 应用 优化 Web 应用是一项费劲的工作。Web 应用不仅处于客户端和服务器端的两部分组件当中，通常来说也是由多种多样的技术栈构建而成：数据库，后端组件（一般也是搭建在不同技术架构之上的），以及前端（HTML +?JavaScript?+ CSS + 转译器）。运行时也是变化多端的：iOS，Android，Chrome，Firefox，Edge。如果你曾经工作在一个不同的单一庞大的平台之上，通常情况下性能优化只针对于单一目标（甚至只是目标的单一版本而已），但是现在的话你就可能会意识到任务复杂度要远超于此。这就对了。但这儿也有一些通用的优化指南可以大大优化一个应用。我们将会在接下来的章节中探讨这些指南的内容。 过早优化？ 优化最难的地方就是如何在开发生命周期中最适当的时候去做优化。Donald Knuth 有一句名言：「过早优化乃万恶之源」。这句话背后的原因非常简单：因为一不小心就会浪费时间去优化某个 1% 的地方，但是结果却并不会对性能造成什么重大影响。与此同时，一些优化还妨碍了可读性或者是可维护性，甚至还会引入新的 Bug。换句话说，优化不应当被认为是「意味着得到应用程序的最佳性能」，而是「探索优化应用的正确的方式，并得到最大的效益」。再换句话说，盲目的优化可能会导致效率的丢失，而收益却很小。在你应用以下技巧的时候请将此铭记在心。你最好的朋友就是分析工具：找到你可以进行通过优化获得最大程度改善的性能点，而不用损害应用开发的进程或者可维护性。 1. JavaScript 压缩和模块打包 JavaScript 应用是以源码形式进行分发的，而源码解析的效率是要比字节码低的。对于一小段脚本来说，区别可以忽略不计。但是对于更大型的应用，脚本的大小会对应用启动时间有着负面的影响。事实上，寄期望于使用 WebAssembly 而获得最大程度的改善，其中之一就是可以得到更快的启动时间。 另一方面，模块打包则用于将不同脚本打包在一起并放进同一文件。更少的 HTTP 请求和单个文件解析都可以减少加载时间。通常情况下，单独一种工具就可以处理打包和压缩。Webpack 就是其中之一。?示例代码： function?insert(i)?{ ????document.write(Sample??+?i); }for(var?i?=?0;?i??30;?++i)?{ ????insert(i); } 结果如下： !function(r){function?t(o){if(e[o])return?e[o].exports;var?n=e[o]={exports:{},id:o,loaded:!1};return?r[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var?e={};return?t.m=r,t.c=e,t.p=,t(0)}([function(r,t){function?e(r){document.write(Sample?+r)}for(var?o=0;30o;++o)e(o)}]);//#?sourceMappingURL=bundle.min.js.map1212 进一步打包 你也可以使用 Webpack 打包 CSS 文件以及合并图片。这些特性都可以有助于改善启动时间。研究一下 Webpack 文档来做些测试吧！ 2. 按需加载资源 资源（特别是图片）的按需加载或者说惰性加载，可以有助于你的 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处： 减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间） 减少浏览器的内存使用率（更少的图片，更少的内存） 减少服务器端的负载 大体上的理念就是只在必要的时候才去加载图片或资源（如视频），比如在第一次被显示的时候，或者是在将要显示的时候对其进行加载。由于这种方式跟你建站的方式密切相关，惰性加载的解决方案通常需要借助其他库的插件或者扩展来实现。举个例子，react-lazy-load?就是一个用于处理?React?惰性加载图片的插件： const?MyComponent?=?()?=?( ??div ????Scroll?to?load?images. ????div?className=filler?/ ????LazyLoad?height={762}?offsetVertical={300} ??????img?src=/apod/image/1502/HD