优化函数html代码,前端性能优化-代码优化

JS开销和如何缩短解析时间

代码解决方案

Code splitting代码拆分，按需加载

Tree shaking代码减重

减少主线程工作量

避免长任务

避免超过1KB的行间脚本

使用rAF(requestAnimationFrame)和rIC(requestIdleCallback)进行时间调度

逐步引导(progressive bootstrapping)

可见不可交互vs最小可交互资源集

配合V8有效优化代码

抽象语法树

源码 => 抽象语法树 => 字节码Bytecode => 机器码

编译过程会进行优化

运行时可能发生反优化

V8优化机制

脚本流

字节码缓存

懒解析

函数优化

lazy parsing懒解析vs eager parsing饥饿解析 – (function Fn() {})

利用Optimize.js优化初次加载时间

对象优化

以相同顺序初始化对象成员，避免隐藏类型的调整

class RectArea { // HC0

constructor(l, w) {

this.l = l // HC1

this.w = w // HC2

}

}

const rect1 = new RectArea(3, 4)

const rect2 = new RectArea(5, 6)

// 隐藏类型无法复用

const car1 = {color: 'red'} // HC0

car1.seats = 4 // HC1

const car2 = {seats: 2} // HC2

car1.color = 'blue' // HC3

实例化后避免添加新属性

const car1 = {color: 'red'} // In-object属性

car1.seats = 4 // Normal/Fast属性，存储property store里，需要通过描述数组间接查找

尽量使用Array代替array-like对象

Array.prototype.forEach.call(arrObj, (value, index) => { // 不如在真实数组上效率高

console.log(`${index}:${value}`)

})

const arr = Array.prototype.slice.call(arrObj, 0) // 转换的代价比影响优化小

arr.forEach((value, index) => {

console.log(`${index}:${value}`)

})

避免读取超过数组的长度

function foo(array) {

for(let i = 0; i <= array.length; i++) { // 越界比较

if(array[i] > 1000){ // 1、造成undefined跟数字比较 2、沿原型链的查找

console.log(array[i]) // 业务上无效

}

}

}

避免元素类型转换

const array = [3, 2, 1] // PACKED_SMI_ELEMENTS

array.push(4.4) // PACKED_DOUBLE_ELEMENTS

HTML优化

减少iframes使用

压缩空白符

避免节点深层级嵌套

避免table布局

删除注释

CSS&JavaScript尽量外链

删除元素默认属性

借助工具

html-minifier

CSS优化

降低CSS对渲染的阻塞

利用GPU进行完成动画

使用contain属性

使用font-display属性

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/4329.html