性能优化

代码优化

  • link代替import
  • 减少重绘回流
    • 回流
      • 操作DOM
      • 元素位置发生改变
      • 尺寸
      • 内容
      • 获取浏览器信息
      • 浏览器窗口尺寸
    • 减少方式
      • 替换class的方式修改样式
      • 文档碎片
      • display：none
  • 事件委托
  • webworkers
  • CSS选择器优化
  • flex布局
  • 使用transform实现动画，避免重绘回流

图片优化

  • 图片延迟加载

    1
    2
    3
    <img data-src="https://avatars0.githubusercontent.com/u/22117876?s=460&u=7bd8f32788df6988833da6bd155c3cfbebc68006&v=4">
    const img = document.querySelector('img')
    img.src = img.dataset.src

  • 响应式图片

  • 降低图片质量

    • 采用image-webpack-loader
    • 配置CDN压缩图片
    • 利用在线网站压缩
    • 微信（doge）

  • 采用webp格式

资源压缩方面

  • webpack打包压缩
  • 采用字体图标代替图片图标

网络请求方面

高并发表示系统在短时间内能够处理大批量请求

  • 使用缓存，避免重复请求

  • 静态资源上传CDN

    • CDN原理（内容分发网络）（Content Delivery Network）

      在现有网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的调度，使就近用户获取资源，降低网络拥塞，提高用户访问的响应速度和命中率。

      CDN——近距离给用户分发网络内容，加速服务。

      CDN：拉近距离，加速

      • 加速：压缩代码
      • 拉近距离：在全球建立多个CDN服务器，提前备份源服务器资源，在用户请求时，就近分发给用户。

    z3VzG9.md.png

  • 避免高频刷新页面，可以每5s刷新一次

  • 将多次请求合并为一次、

    z3Vh5Q.png

    可以看出资源的下载时间仅仅占了总时间的13.05 / 204.16 = 6.39%