web性能优化

减少 DNS 解析,减少不同域名请求数量

减少 HTTP 请求

使用浏览器缓存,通过设置 HTTP 头的 cache-control 和 expires 属性,设定缓存时间

服务端启用 GZIP 压缩,合并 HTML、CSS、Javascript 文件

CSS Sprites,合并图片,这也可以减少 HTTP 请求

LazyLoad Images 只加载首屏图片,滚动之后再加载需要看到的图片

CSS 放 header,JS 放底部,防止 JS 阻塞

异步请求数据

JS 代码优化

  • 减少操作 DOM 次数
  • 慎用 with
  • 避免使用 eval 和 Function
  • 减少作用域查找
  • JS 对直接量和局部变量查找最快,如果对 JS 对象属性查找超过一次,设置局部变量
  • 字符串拼接,+效率低,如果字符串较多,放到数组,使用 join 拼接

CSS 编写优化

  • 不使用 import
  • 合理使用继承
  • 抽离,拆分,不加载所有 CSS,只在需要的时候加载
  • 减少 reflow/repaint
  • 指定图像尺寸
  • 精简页面样式
  • 慎重使用高性能属性,如浮动,定位
  • 不要使用 CSS 表达式
  • CSS 选择器查找为从右向左,避免使用通配选择器
  • 避免单规则属性选择器
  • 避免类正则选择器

CDN 加速

反向代理,负载均衡

react 性能优化

组件化,模块化

UI 组件不涉及业务,上层组件统一处理业务逻辑

使用 shouldComponentUpdate 和 PureComponent

PureComponent 自动实现了 shouldComponentMount, 如果 props、state 未改变,则不会重新 render,此比较为浅比较,不包含对象属性

多个相同组件,设置 Key 值

如果多个相同组件处于同一层级,要设置 key 值,这样可以减少组件更新,确切地更新到需要更新的组件
注意:key 值要稳定不变的唯一值,所以尽量不要使用数组下标做 key 值

在 componentWillUnmount 做必要的销毁