网络优化策略

  • 减少 HTTP 请求数，合并JS、CSS, 合理内嵌CSS、JS
  • 合理设置服务端缓存，提高服务器处理速度。 (强制缓存、对比缓存)
  • 避免重定向，重定向会降低响应速度 (301,302)
  • 采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理 6 个 TCP 链接问题。
  • 采用CDN加速加快访问速度。(指派最近、高度可用)
  • gzip压缩优化 对传输资源进行体积压缩 (html,js,css)
  • 使用dns-prefetch, 进行DNS预解析
  • 加载数据优先级 :
    • preload（预先请求当前页面需要的资源）
    • prefetch（将来页面中使用的资源） 将数据缓存到 HTTP 缓存中

优化策略

  • 关键资源个数越多，首次页面加载时间就会越长
  • 关键资源的大小，内容越小，下载时间越短
  • 优化白屏：内联css和内联js移除文件下载, 较小文件体积
  • 预渲染，打包时进行预渲染
  • 使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。 首屏利用服务端渲染，后续交互采用客户端渲染

dns-prefetch

  1. <link rel="dns-prefetch" href="//gw.alicdn.com">

defer/async

  1. <script async src="script.js"></script>
  2. <script defer src="script.js"></script>

defer 和 async 机制都是异步（相较于 HTML 解析）加载 js 脚本，但是执行时机不同：

  • defer 是在所有元素解析完成，DOMContentLoaded 事件触发之前完成执行。（使用 defer 加载脚本在 head 末尾，这比将脚本放在 body 底部效果来的更好）
    • 它相比于 preload 加载的优势在于浏览器兼容性好
    • defer 只能作用于脚本文件，对于样式、图片等资源就无能为力了，可以使用 preload
  • async 是在脚本获取后就立即执行

preload/prefetch

  • preload 对当前页面所需的脚本、样式等资源进行预加载
  • prefetch 利用浏览器空闲时间，预加载的是其他页面会用到的资源

    对当前页面需要的资源，使用 preload 进行预加载。对其它页面需要的资源进行 prefetch 预加载。

  1. preload link必须设置as属性来声明资源的类型（font/image/style/script等)，
  2. 否则浏览器可能无法正确加载资源。
  4. <link href="/heopappmgr-web/static/js/app.117e76b3.js" rel="preload" as="script">