前端知识

# 性能优化手段

加载优化：加载过程是最为耗时的过程，可能会占到总耗时的`80%时间(优化重点)

# 减少 HTTP 请求数

# 缓存资源

# 压缩代码

# 无阻塞

# JS 脚本置底加载

# inline 脚本异步执行

# CSS 放在 head 中

# 首屏加载

# 按需加载

# 预加载

# 压缩图像

# 避免重定向

# 异步加载第三方资源

执行优化：执行处理不当会阻塞页面加载和渲染

# CSS 写在头部，JS 写在尾部并异步

# 避免 img、iframe 等的 src 为空

空 src 会加载当前页面，影响速度和效率

# 避免重置图像大小

减少因图片大小重置造成的多次重绘

# 图像尽量避免使用 DataURL

渲染优化

# 设置 viewport

加速页面渲染
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

# 减少 DOM 节点

# 优化动画

  • 尽量使用 CSS3 动画
  • 合理使用 RequestAnimationFrame 动画代替 setTimeout
  • 适当使用 Canvas 动画：5 个元素以内使用 CSS 动画，5 个以上使用 Canvas，也可使用 WebGL

# 优化高频事件

  • 函数节流
  • 函数防抖
  • 使用 requestAnimationFrame 监听帧变化
  • 增加相应变化的时间间隔：减少重绘次数

# GPU 加速

样式优化

# 避免在 HTML 中书写 style

# 避免 CSS 表达式

# 移除 CSS 空规则

# 正确使用 display

  • display:inline后不应该再使用float、margin、padding、width和height
  • display:inline-block后不应该再使用float
  • display:block后不应该再使用vertical-align
  • display:table-*后不应该再使用float和margin

# 不滥用 float

# 不滥用 web 字体

# 不声明过多的 font-size

# 值为 0 时不需要任何单位

# 标准化各种浏览器前缀

  • 无前缀属性应放在最后
  • CSS动画属性只用-webkit-、无前缀两种
  • 其它前缀为-webkit-、-moz-、-ms-、无前缀四种：Opera改用blink内核，-o-已淘汰

# 避免让选择符看起来像正则表达式

脚本优化

# 减少重绘和回流

  • 避免不必要的DOM操作
  • 避免使用document.write
  • 减少drawImage
  • 尽量改变class而不是style，使用classList代替className

# 缓存 DOM 选择和计算

# 缓存 length 值

# 尽量使用 事件代理

# 尽量使用 id 选择器

# touch 事件优化

2-5-8 原则

# 2-5-8 原则

  • 用户在2秒内得到响应，会感觉页面的响应速度很快 Fast
  • 用户在2~5秒间得到响应，会感觉页面的响应速度还行 Medium
  • 用户在5~8秒间得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow
  • 用户在8秒后仍然无法得到响应，会感觉页面的响应速度垃圾死了

# 3秒钟首屏指标

此规则适用于移动端，顾名思义就是打开页面后3秒钟内完成渲染并展示内容。

← 重绘和回流 →