前端性能基础优化

数据操作

• 数组元素和对象成员访问比局部变量和字面量慢（如：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属性异步加载并等待解析元素完成后再执行

如果是async、defer方法的话将script标签放在head部，便于更早加载。

资源优化

常用：

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

不常用：

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