1.js耗时
js文件耗时最多，因为同等大小的文件 js要经过加载，解析，执行，而同等大小加载时间一致 但是解析js和执行js要比其他文件慢很多，所以js代码性能很关键，文件大小我们压缩文件，后两个的需要从代码里面解决 1.代码拆分(js拆分 按需加载js) 2.代码减重(不引入外部库的无用代码函数 比如moment)
用户来说 第一个元素渲染出来 第一个有意义内容渲染 第一个可交互的时间都是很重要的
2.v8引擎原理对js解析
v8引擎会对代码进行一个优化 我们在js层面就是要写出能够让引擎去优化的代码 避免反优化的代码 反优化就是指优化完后发现不能这样优化 引擎就会返回之前没优化的版本，这样减低效率
反优化举例
先一直增加两个数 然后突然加一个字符串 这样之前对这个函数的优化就没了 因为发现参数变化啦 结果就反优化啦
v8优化机制
1.脚本流：当一个js文件大于30k的时候 浏览器会边下载 一般开个线程同步解析文件
2.字节码缓存：使用频率高的js文件字节码 我们会缓存
3.懒解析:定义函数时候只记声明不去解析 真正执行的时候才去解析这个函数的声明
函数优化
因为我们知道v8引擎会懒解析函数，但是如果我们这时候立即执行函数，引擎就会立即解析函数(eger pasing)，这时候就降低啦性能，lazy-parsing和eger parsing一起进行就会降低性能
export default ()=>{
const add = ((a,b)=>a+b) //!最外层加上括号 表示我们要eger parsing
const num1 =1
const num2 =2
add(num1,num2)
}
对象优化
1.隐藏类型优化 我们最好属性顺序不变
car2的时候不能复用hc0 因为之前hc0的属性是color 而这次是seats，所以会创建隐藏属性hc2,以及color也会有hc3，我们要以相同的属性顺序赋值
2.追加属性 性能不好
3.array代替类数组对象
v8引擎会对数组进行优化 但是类数组不会优化，比如遍历类数组性能没有遍历数组好，对类数组arrObj可以以下遍历，但是效率低
//先转成数组 然后遍历 这个比直接遍历效率高
const arr = Array.prototype.slice.call(arrObj,0)
arr.forEach(item=>item)
4.避免读取超过数组的长度
因为数组也是对象 arr[length]会沿着原型链查找，时间会多6倍
5.避免元素类型转换
const arr = [1,2,3]//对这个数组设为packed_smi_elements 会有优化
arr.push(4.4) //但是加了浮点是 之前的优化就没了 要撤销类型 改成packed_double_elements 类型越具体优化越多 smi比double具体
3.html优化
1.减少iframe 这个iframe会阻塞主页面的加载以及创建dom都会有大开销 我们可以等待主页面加载完之后再去加载iframe
2.压缩空白符
3.减少节点深层嵌套，因为dom数是深度遍历来的
4.避免table布局 开销比div大
5.删除注释
6.css,js尽量外链
7.删除元素默认属性的书写
8.写html语义化标签
9.可以不写标签闭合的不写
10.js放到尾部加载 避免影响dom的加载
解决方案：html-minifier工具 webpack打包就会压缩
4.css优化
1.降低css对渲染的阻塞，加载需要的css 后面需要的懒加载
2.利用gpu执行动画的完成 即复合的transform单独抽出一个层
3.contain属性:contain:layout 告诉浏览器我里面怎么变化不会影响其他的变化，减少回流的开销
比如我们往第一个li元素里面插入一个方框 如果要回流我们后面999个元素全部位置要变化，但是我们加contain:layout 就表示这个li不影响别的元素，即使宽度高于原来li 我们只会影响这个li触发回流，其他的不会回流。
4.font-display:让字体提前展示
