前端性能优化

发表于

性能优化

性能优化的必要性？
随着web应用复杂的的提升，性能问题使我们作为前端开发者不得不去关注的一个地方同时也是一个很重要的方面，因为网站的打开速度直接关系到客户留存率，页面打开时间每多一秒就会有很多的客户流失，从而造成直接的经济损失，特别是对于体量特别大的网站，每损失1%用户都是巨额经济损失，良好的性能能提高用户体验，提高用户的满意度，提高转化率，所以我们一定要重视网站的性能。

性能优化可以大体上分为加载性能优化和渲染性能优化

加载性能优化

  • 文本内容 对HTML、CSS、JS 进行minifier 去掉空格、注释、并且对JS中的变量进行替换以减小文件的大小
  • GZIP压缩 服务器开启GIZP后文本文件可以达到减小70%以上的效果（对图片的影响不大）
  • 尽量不要依赖比较大的库，比如：jQuery，使用更轻量的方法替换引入整个库。
  • 图片
    1. 减少不必要图片的使用
    2. 选择合适的图片类型
    3. 删除图像元数据
    4. 适当降低图片的质量
    5. 裁剪图片仅显示重要内容
    6. 压缩图片
    7. 加载合适大小的图片
  • CSS文件合并 chrome浏览器对同一个域下的同时发出的请求数量限制六个，也就是说如果当页面首次加载的时候，我同时发出10个请求，那么其中4个请求就会等待，所以有些时候我们需要将静态文件合并以减少请求的数量
  • CSS雪碧图 合并图片请求
  • 将JavaScript文件放置在文件末尾防止加载JS文件延迟页面渲染
  • 部分页面渲染的JS代码可以放到HTML文件中，而不是发出一个额外的请求
  • 使用CDN去提供静态资源服务
  • 使用缓存
    1. Expires http1.0出现 设置对象的有效期 局限性：存在本地时间与服务器时间不一致
    2. last-modified http1.0 设置最后修改时间在请求时带上本地Cache的last-modified web server 接到请求后check 如果和服务器上的last-modified相同则返回本地cache 否则返回最新修改的局限性：同一秒修改多次
    3. E-tag http1.1 if-none-match
    4. Cache-Control http1.1
      max-age = num(s) 设置最大缓存时间
      private 不会被多个用户共享
      public 会被多个用户共享
      no-cache 不会缓存
      no-store 不会存储
  • 本地缓存
    1. localStroage
    2. sessionStroage
    3. indexedDB

渲染性能优化

  • WebAssembly
  • throttle debounce
  • 修改DOM的时候使用类名控制避免重复layout
  • 减少DOM的复杂度
  • lazyload preload
  • 大列表优化
  • MTU base64 inline
  • 小图 转换成 大图
  • progressive vs baseline
  • http 2.0