appendix.md

附录一 现代前端优化

开发业界曾经有一句名言：“不要过早优化”。它的意思是，先着眼于系统的架构和稳定性，等架构和稳定性没问题了，再考虑去优化。否则一旦架构上有失误，系统可能会推倒重来，那先前做的优化就付之东流了。

这句话在绝大多数场合都是金玉良言。但目前看来，有一个场景例外，它就是前端。前端优化相对来说独立于架构，是可以立即实施并且不影响产品的其它方面的。

前端优化是一个古老的话题。二十年前就有各种前端优化的实践。例如合并js文件，压缩http请求之类的。随着时间的推移，很多这些技巧都已经过时了。而且，前端优化项目细碎繁多，动辄总结出二三十条经验，极大的增加了实践上的难度。在这里，我们只总结现代前端优化中最重要的四点。只要针对这四点对网站进行改造，就可以以最小的代价，得到最大的回报。

1. 服务端渲染

   服务端渲染在首次加载的时候，全量直出HTML。仅仅这一项，就能够使加载速度提升3 ~ 5倍。纯客户端渲染的Web App，无论如何优化，首屏加载速度永远也无法达到服务端渲染的水平。

2. 浏览器cache

   页面中会有一些固定不变的资源，如图片，js，字体等。如果他们在浏览器端有了cache，那么浏览器连网络调用都不会发起（注意，是完全不发起，而不是发起请求然后得到不含body的response。），直接拿本地的cache做渲染。因此，对于这样的资源，我们尽量用“对象存储 + CDN”的方式来开启浏览器端cache。一般，我们会把缓存时间设置成一年。并且，我们从不修改资源的内容。在需要修改资源内容的场合，我们会新建一个资源。

3. 取消ES6+语法的转译

   现代网站一般都用ES6以上的语法来编写。而Babel默认会把ES6以上的语法转译成ES5的语法，以兼容低版本的浏览器。如果我们不需要兼容低版本浏览器，则可以取消转译，直接把ES6以上的语法丢给浏览器执行。这样，js的速度会加快20% ~ 30%。

   取消转译只需要在babel.config.js中增加以下几行。

   presets: [
     [
       'next/babel',
       {
         'preset-env': {
           targets: {
             chrome: '80',
             node: '14'
           }
         }
       }
     ]
   ],

4. 并发

   如果页面中有多个网络请求，尤其是在加载的时候有多个网络请求，可以使用Promise.all将这些请求并行发送。这样会比串行发送请求快很多倍。

5. CDN

   静态资源挂CDN，并且把缓存时间设置成一年。动态资源也挂CDN，并且不缓存。这样，可以极大的提高网站打开速度。

   做好这五点，页面速度就已经足够快了（200ms ~ 500ms左右完成加载，俗称“半秒开”）。剩下一些不是特别重要的前端优化手段，比如启用HTTP/2(HTTP/3)，图片编码优化，Lazy load等等，可以稍微关注一下。Next.js框架提供了服务端渲染和浏览器cache。因此，直接使用Next.js就可以极大的提升前端性能。

   网页打开速度快，不仅仅可以提升页面的体验，也会给移动开发界带来深彻的变革。如果每一页都能做到“半秒开”，我们在移动端就可以大量使用网页来替代native窗口，和小程序。由于网页的开发成本很低、开发效率很高，在手机不断提速、内存不断增大的今天，越来越多的内容会以H5的页面来呈现。而WebView支持通过网页来唤起原生代码，所以未来的移动端开发，会向着hybrid开发的方向前进，并且H5的比重会越来越大。