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

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

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

不请求 - cache

• 最好的方式就是尽量引用公共资源，同时设置缓存，不去重新请求资源
• 也可以运用PWA的离线缓存技术，可以帮助wep实现离线使用
• 从策略上说，如果业务类型允许的话，可以做某些降级。比如，弱网优先使用缓存文件。网络状况分为 WiFi、4G、3G、2G、unknown ，其中 2G和unknown 被我们认为是弱网。先保证体验，再保证更新
• 避免资源属性为空或者错误。当、标签的 href 无效，或
  image.gif

  合并和拆分资源

  • 打包有很多方式，比如使用工具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静态资源缓存及优化

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

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