性能优化是前端的一个老生常谈的话题，本文不讲理论，只总结分析下最近自己在首屏加载优化上所做的手段，方便日后回顾。下文所列出的所有方法，都是经过我们自己生产环境验证了的。
相信一说到前端性能优化，大部分人都会和我一样会立即在头脑中冒出缓存、压缩这两个词汇，没错，缓存和压缩是最常见、通用的优化手段，且易实施，简单粗暴。
缓存
缓存的功能是在用户首次访问系统时，在用户本地保存一份静态资源的副本，当用户后续再访问时，这些静态资源都从用户本地获取，而不是继续从服务器下载。这样不仅能缓解服务器的压力，也能提高用户以后再次访问界面时的加载性能。
我们的缓存配置是配置在代理上的，代理用的是HAProxy，相关的配置内容为:
http-response set-header Cache-Control private,max-age=2592000 if { capture.req.uri -m end .js .css .svg .jpg }
压缩
压缩的功能是减小我们通过webpack打包的代码产物的体积，可以加快用户在访问系统时静态资源的传输和下载速度，特别是对于网络环境不是很理想的情况下提升很大。
我们的前端代码是部署在tomcat服务器上的，相关的配置内容为:
compression="on"
compressionMinSize="2048"
compressableMimeType="text/html,text/javascript,application/x-javascript,application/javascript,text/css,text/plain,application/json"
上面的compressableMimeType是配置哪些类型的文件需要压缩，这个需要结合业务情况进行配置。
非核心静态资源异步加载
在请求非核心的静态资源的script上加上defer属性，让这些资源异步加载， 并且在整个document解析完毕后才会执行这些文件。
<script src="example.js" defer></script>
升级HTTP2.0
HTTP2.0已经出来好几年了，它的优势不用多说，只要有条件升级的，只管升就对了。 我们是在代理上进行配置，使用的HAProxy，具体配置如下:
bind *:443 ssl crt /etc/haproxy/cert_nopassphrase.pem crt /etc/haproxy/haproxy.pem alpn h2,http/1.1
非核心接口延迟请求
升级了HTTP2.0后，打开页面加载资源的速度变快了不少，但是经过我们的分析，如果在刚打开页面时就触发大量的请求，对页面的加载性能仍然有一定的影响。因此，在首屏只触发必须的请求也是很有必要的。我们就有好几个公共的接口需要发送请求，但是这些请求都不是核心接口，我们采取的手段是将这些请求放在window.onload之后才触发。
window.onload = function() {
// 在此处发送非核心的接口
}
打包构建产物优化
这个手段的整体原则就是减少打包产物大小，减少需要请求的静态资源的数量。
