代码优化

1. 解决方案

• code splitting 代码拆分，按需加载
• tree shaking 代码减重

2.减少主线程工作量

• 避免长任务
• 避免超过1kb的行间脚本
• 使用rAF和rIC进行时间调度

3.抽象语法树

• 源码 => 抽象语法树 => 字节码 => 机器码
• 编译过程会进行优化
• 运行时可能发生反优化

4.V8优化机制

• 脚本流
• 字节码缓存
• 懒解析（针对函数）：只有函数被调用的时候，V8才会去解析函数声明的函数体

5.函数优化

• 懒解析（默认） vs 饥饿解析（函数体用括号包裹，但是老版本的webpack打包的时候会被去掉）
• 利用Optimize.js优化初次加载时间（解决饥饿解析打包括号被去掉问题 ）

6.对象优化

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

class Obj {
    construtor(l, w){
        this.l = l
        this.w = w
    }
}
const r1 = new Obj(1, 2)
const r2 = new Obj(3, 4)

const car1 = {color: 'red'}
car1.seats = 4

const car2 = {seats: 2}
car2.color = "bule"

• 实例化后避免添加新属性

// bad
const car1 = {color: 'red'} //In-object 属性
car1.seats = 4 // normal/fast属性，存储在property store里，需要通过描述数组间接查找

• 尽量使用Array代替array-like（把类数组转化为数组）

• 避免读取超过数组的长度（数组越界）：==越界会造成沿原型链查找==

• 避免元素类型的转换

6 html优化

• 减少Iframes使用
• 压缩空白符
• 避免节点深层级别嵌套
• 避免使用table布局
• 删除注释
• css、js尽量外链
• 删除元素默认属性

7 css优化

• 降低css对渲染的阻塞
• 利用GPU进行完成动画
• contain：layout；告诉浏览器这个盒子与其他都没有关系，有变化只要单独处理这个盒子就可以了
• font-display属性