前端性能优化

网络优化

DNS预解析

<link rel="dns-prefetch" href="//yuchengkai.cn" />

优化请求策略

• 减少请求数量

  • 合并css
  • 合并JS
  • 合并图片制作精灵图，或使用 base64 数据加载图片
  • 请求节流：多次一样的请求缓存第一次请求，过期后再发起新请求
  • 懒加载：部分资源可以在需要的时候再加载

• 提高请求速度

  • 图片，第三方库使用cdn加速
  • 支持http/2.0

• 减少请求数据量

  • 压缩图片，使用webp等压缩效果更好的格式
  • 服务端开启Gzip等压缩功能
  • 优化cookie体积

使用缓存

• 强缓存

  • expires：HTTP/1.0，特定事件后过期
  • cache-control：HTTP/1.0，具体时间长度后过期

• 协商缓存

  • last-modefined，etag对资源做标记，浏览器在发现强缓存过期后携带标记向服务端请求，由服务端决定是否决定缓存。

HTML优化

• 提高加载速度

  • 样式在上，脚本在下，视觉上提速
  • 预加载、预渲染指定地址页面

• 提高更新速度

  • 避免使用table布局，table布局容易发生重排

• 提高体验

  • 增加描述信息
  • 使用语义化标签
  • 使用html5新元素提高体验

css优化

• 加载优化

  • 避免使用@import：@import的文件需要在当前css文件加载完毕后才会去加载，而浏览器会等待所有的css加载完毕才开始渲染，就会导致@import阻塞了页面。

• 匹配优化

  • 避免使用通配符
  • 避免嵌套多层选择器

• 属性优化

  • 使用transform属性而不是宽高、定位
  • 添加设备特有属性如ios的scroll-behaviour:smooth平滑滚动页面

javascript优化

• 优化dom操作

  • 减少js的样式操作，交给css处理
  • 减少重绘重排
    • 操作dom时应缓存dom元素
    • dom离线：新隐藏dom（display:none）,再操作，最后重新显示。只触发两次重排
    • 缓存dom属性，获取某些dom元素会导致重排
  • 使用requestAnimationFrame，使动画更流畅

• 注意内存占用

  • 小心使用闭包

• 注意计算消耗

  • 重复使用的数据应该缓存起来而不是每次获取

• 数据读取：局部作用域使用变量缓存数据，而不是使用时调用

• 循环：

  • 减少遍历的次数，完成目的后结束循环
  • 避免在循环中做大量的运算

首屏优化

• 非关键文件进行异步加载或者懒加载
• 考虑服务端渲染
• 合理利用本地储存缓存数据
• 优化用户感知：使用骨架屏或者加载图，避免白屏