前端性能优化

加载优化(这个是比较重要的)

• 雅虎35条军规

• dns预解析

• 升级http协议

• 提前请求api 并缓存api结果

• 对于图片多的页面可以使用数据万象图片处理（ https://cloud.tencent.com/document/product/460/36543 ）

• 代码分割

• 压缩传输的数据内容对于数据量比较大并且重复的字段特别多而且需要频繁请求的时候（一般都是一些图表类,平时很少用）

   // 例子 如： （）
   [{
    title:'我的标题1',
    name:'我的名字1',
    age:1,
    describe:'我的描述1'
    },{
    title:'我的标题2',
    name:'我的名字2',
    age:2,
    describe:'我的描述2'
    }]
   可以转成
    [
        ['我的标题1','我的名字1',1,我的描述1'],
        ['我的标题2'+'我的标题2',2,'我的描述2'],
    ]
    
  

css原子化（减少css文件的大小）

    .fl{
        float:left;
    }
    .fr{
        float:right;
    }

预加载 懒加载 动态按需加载 import(), IntersectionObserver()

Application Cache Service Cache 等缓存

• 服务端渲染（提前首瓶展示）
• 预渲染（纯静态的时候效果明显点）

渲染优化

• 样式先写关于元素位置的样式先进行布局的计算后写背景颜色等这些绘制的样式
• 关于图形分层跟后边的图层合成其实是靠GPU计算的
  • 什么时候会分层

    脱标的时候 z-index的时候 position: absolute; 使用一些css3的动画属性的时候，translate transfrom ，还有BFC模式也会独立分层，还有明确告诉浏览器那些属性是将要变化的比如 will-change: width;也会生成分层，等

  • 什么时候用分层? 什么时候不使用

    使用的动画的时候使用分层，可以不影响其他的图层，就不会导致其他图层不断的重排了，就节省了渲染性能，还有需要强制手机开启GPU加速的时候需要使用transtrom增加GPU功耗,对于元素正常的排版就没有必要开启分层了,因为开启分层需要会增加GPU功耗

• 对长图进行截取处理，图片高度不超过屏幕高度一半。
• css样式class嵌套不得超过 3层。
• 减少首次加载过程中动画的执行，尽量在mounted之后在执行。
• div内部深度尽量注意不要太深。

运行优化

• 减少同步js代码执行。比如设置完dom就直接获取是不可取的一般更新dom都是异步的如果你后边直接就取的话他会强制同步更新dom的
• 对于复杂的计算的同步代码可以多开一个线程去执行 (web worker)

• 提高同步js代码执行效率。(优化代码，减少变量的查找跟减少代码执行次数等等)

//  错误的示范   多次取值进行存储取来
var tempObj = {
    a: 1
}
var b = 0;
if(tempObj.a){
    b = tempObj.a
}
// 正确是示范 
var tempObj = {
    a: 1
}
var a = tempObj.a
var b = 0;
if(a){
    b = a
}

// 尽量使用js原生自带的方法因为这些原生方法就是用c/c++写的，并且底层已经做好了各种算法的优化了，比如一个数组求和
var arr = Array(20).map(() => {
    return 1
}) // 他不出来 说明有优化了数组中的空项直接跳过去了 一次也不执行
var arr = Array(5000).fill(1)
// 一般的写法
console.time(1)
var totleOne = 0;
for(var i = 0;i < arr.length;i++ ){
    totleOne += arr[i]
}
console.timeEnd(1)
// 简单优化
console.time(2)
var totleTwo = 0;
for(var i = 0;i < arr.length;i+=2 ){
    totleTwo += (arr[i] + arr[i+1])
}
console.timeEnd(2)
// 优雅的写法
console.time(3)
var totleThree = 0;
totleThree = arr.reduce((total,currentValue)=>{
    return total + currentValue
},0)
console.timeEnd(3)


还有一些数组有唯一值得时候需要双层便利取指的时候可以生成一个对象或者map 把 n2的复杂度变成了 n

介绍几个浏览器的API
requestAnimationFrame（根据屏幕的刷新频率）
MutationObserver （监听dom变化的）
IntersectionObserver（监听目标元素可见性变化的）

体验优化

• 骨架屏
• 按钮点击放大等易操作性
• 动画切换画面流畅
• 节流防抖等

总结：性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，有的时候是为了维持一个开发效率，可维护性，可读性，性能上的一个平衡