#### 数据操作 - 数组元素和对象成员访问比局部变量和字面量慢(如:`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按需加载依赖

前端性能基础优化

1399 81 前端 2019-10-31

© 2020 peal.cc 粤ICP备2020133024号