前端静态资源请求和加载优化总结

若是有这样一个项目，js脚本数量100+，其中50个是各类框架或库，css数量20+，图片若干 。那么，不用说，这个页面加载起来，必定快不了。

静态资源的请求和加载速度，直接影响页面呈现，应该怎么优化呢？

不请求 - 用cache

• 最好的方式就是尽可能引用公共资源，同时设置缓存，不去从新请求资源
• 也能够运用PWA的离线缓存技术，能够帮助wep实现离线使用
• 从策略上说，若是业务类型容许的话，能够作某些降级。好比，弱网优先使用缓存文件。网络情况分为 WiFi、4G、3G、2G、unknown ，其中 2G和unknown 被咱们认为是弱网。先保证体验，再保证更新
• 避免资源属性为空或者错误。当<link>、<a>标签的 href 无效，或<script>、<img>、<iframe>标签的 src 属性为无效，浏览器在渲染的过程当中仍会进行请求和加载，这种错误只会浪费性能
• 不要作页面重定向。页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约须要200毫秒不等的时间开销
• 若是没有必要，请求就不要带cookie（减小约1kb）
• 设置文件资源的 DNS 预解析，让浏览器提早解析获取静态资源的主机 IP，避免等到请求时才发起 DNS 解析请求，好比

<!--cdn域名预解析--> <meta http-equiv="x-dns-prefetch-control" content="on" > <link rel="dns-prefetch" href="//cdn.domain.com" >复制代码

合并请求 - combo

• CDN的combo技术能把多个资源文件合并引用，减小请求次数

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>复制代码

合并和拆分资源

• 打包有不少方式，好比使用工具webpack、rollup，能够实现打包js，打包小图片至js（内嵌base64），生成雪碧图，甚至把项目打包为单个html文件
• 拆分则是把开发时使用的库，单独剥离出来，以公共资源的方式引入
• 还有就是要把过大的包，拆分红多个较少的包，防止单个资源耗时过大

压缩资源

• 前端打包时压缩
• 服务器上的zip压缩
• 图片压缩（好比tiny），使用webp等高压缩比格式
• 尽可能保证页面的 HTML 内容在 1KB 之内，这样整个 HTML 的内容请求就能够在一个 RTT 内请求完成，最大限度地提升 HTML 载入速度。一般状况下，TCP 网络传输的最大传输单元（Maximum Transmission Unit，MTU）为 1500B

静态资源分域存放

• 从不一样域名请求资源。由于大多数浏览器的并发数量都控制在6之内，同一时间针对同一域名下的请求有必定数量限制，超过限制数目的请求会被阻塞。若是资源来自于多个域下，能够增大并行请求和下载速度。以下是jd img资源的域名

延迟、异步、预加载、懒加载

• 对于非首屏的资源，可使用 defer 或 async 的方式引入
• 也能够按需加载，在逻辑中，只有执行到时才作请求
• 对于多屏页面，滚动时才动态载入图片
• 对于移动端首屏加载后可能会被使用的资源，须要在首屏完成加载后尽快进行加载

参考资料

【FE】这么多前端优化点你都记得住吗？

Web静态资源缓存及优化

美团金融扫码付静态资源加载优化实践

浏览器缓存知识小结及应用