前端常用性能基础优化

1812 82 0 技术 2019-10-31

数据操作

  • 数组元素和对象成员访问比局部变量和字面量慢(如:var data = res.data
  • 变量会从局部作用域到全局作用域搜索过程越长越慢
  • 对象嵌套(或在原型链中)越深读取越慢

DOM操作

  • 减少访问或者操作DOM的次数(缓存数据到变量中,读变量比读DOM快)
  • 减少回流,回流必定导致重绘,但是重绘不一定导致回流(如:多次无法避免的回流可以先让元素脱离文档流,处理完后再回归)
  • 事件委托

流程控制操作

  • 缓存循环次数,避免重复计算( var i = 0,len = data.length;i < len;i++
  • 避免使用for in(使用Object.keys方法转key数组在用for遍历)
  • 倒序循环可以稍微快一点点,测试了好像没差( let i = a.length - 1; i >= 0; i --
  • 普通循环比函数循环(Array.forEach)快8倍
  • map表映射

脚本加载

  • script标签会阻塞页面解析渲染,所以放在body底部
  • async属性异步加载后并执行
  • defer属性异步加载并等待解析元素完成后再执行

如果是asyncdefer方法的话将script标签放在head部,便于更早加载。

资源优化

常用:

  • 压缩静态资源(css,js,图片…)
  • 懒加载
  • 延迟加载大的组件
  • 骨架屏
  • 减少http请求,并将资源尽量放在同域名下,以减少DNS查询
  • 不滥用cookie

不常用:

  • 当css文件过大的时候用critical css抽取首屏用的css优先加载
  • H5新增的rel(dns-prefetch、preconnect、prefetch、prerender、)特性
  • SSR服务器首屏渲染
  • 使用静态import导入初始依赖模块。其他情况下使用动态import按需加载依赖
© 2020 peal.cc 粤ICP备2020133024号