桌面浏览器前端优化策略

通过性能测速和分析，我们基本可以获取收集到页面上大部分的具体性能数据，如何根据这些数据采取适当的方法和手段对当前的页面进行优化呢？目前来看，前端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则等，总结起来主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。

网络加载类

1．减少HTTP资源请求次数

  • 使用缓存（强缓存：expiress, cache-control, 协商缓存：）
  • 使用service worker
  • 按需加载路由

  • 防抖和节流

    2. 减少单次请求所花费的时间

  • 使用webpack tree-shaking 减少代码体积

  • 采用gzip压缩代码
  • 图片采用合适的的格式，或者base64转码
  • CND缓存
  • 对大数据量的接口进行压缩

    2．减小HTTP请求大小

    除了减少HTTP资源请求次数，也要尽量减小每个HTTP请求的大小。如减少没必要的图片、JavaScript、CSS及HTML代码，对文件进行压缩优化，或者使用gzip压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小HTTP请求的大小。

    3．将CSS或JavaScript放到外部文件中，避免使用