加載優(yōu)化(這個(gè)是比較重要的)

• 雅虎35條軍規(guī)

• dns預(yù)解析

• 升級(jí)http協(xié)議

• 提前請求api 并緩存api結(jié)果

• 對于圖片多的頁面可以使用數(shù)據(jù)萬象圖片處理（ https://cloud.tencent.com/document/product/460/36543 ）

• 代碼分割

• 壓縮傳輸?shù)臄?shù)據(jù)內(nèi)容對于數(shù)據(jù)量比較大并且重復(fù)的字段特別多而且需要頻繁請求的時(shí)候（一般都是一些圖表類,平時(shí)很少用）

   // 例子 如： （）
   [{
    title:'我的標(biāo)題1',
    name:'我的名字1',
    age:1,
    describe:'我的描述1'
    },{
    title:'我的標(biāo)題2',
    name:'我的名字2',
    age:2,
    describe:'我的描述2'
    }]
   可以轉(zhuǎn)成
    [
        ['我的標(biāo)題1','我的名字1',1,我的描述1'],
        ['我的標(biāo)題2'+'我的標(biāo)題2',2,'我的描述2'],
    ]
    
  

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

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

預(yù)加載 懶加載 動(dòng)態(tài)按需加載 import(), IntersectionObserver()

Application Cache Service Cache 等緩存

• 服務(wù)端渲染（提前首瓶展示）
• 預(yù)渲染（純靜態(tài)的時(shí)候效果明顯點(diǎn)）

渲染優(yōu)化

• 樣式先寫關(guān)于元素位置的樣式先進(jìn)行布局的計(jì)算后寫背景顏色等這些繪制的樣式
• 關(guān)于圖形分層跟后邊的圖層合成其實(shí)是靠GPU計(jì)算的
  • 什么時(shí)候會(huì)分層

    脫標(biāo)的時(shí)候 z-index的時(shí)候 position: absolute; 使用一些css3的動(dòng)畫屬性的時(shí)候，translate transfrom ，還有BFC模式也會(huì)獨(dú)立分層，還有明確告訴瀏覽器那些屬性是將要變化的比如 will-change: width;也會(huì)生成分層，等

  • 什么時(shí)候用分層? 什么時(shí)候不使用

    使用的動(dòng)畫的時(shí)候使用分層，可以不影響其他的圖層，就不會(huì)導(dǎo)致其他圖層不斷的重排了，就節(jié)省了渲染性能，還有需要強(qiáng)制手機(jī)開啟GPU加速的時(shí)候需要使用transtrom增加GPU功耗,對于元素正常的排版就沒有必要開啟分層了,因?yàn)殚_啟分層需要會(huì)增加GPU功耗

• 對長圖進(jìn)行截取處理，圖片高度不超過屏幕高度一半。
• css樣式class嵌套不得超過 3層。
• 減少首次加載過程中動(dòng)畫的執(zhí)行，盡量在mounted之后在執(zhí)行。
• div內(nèi)部深度盡量注意不要太深。

運(yùn)行優(yōu)化

• 減少同步j(luò)s代碼執(zhí)行。比如設(shè)置完dom就直接獲取是不可取的一般更新dom都是異步的如果你后邊直接就取的話他會(huì)強(qiáng)制同步更新dom的
• 對于復(fù)雜的計(jì)算的同步代碼可以多開一個(gè)線程去執(zhí)行 (web worker)

• 提高同步j(luò)s代碼執(zhí)行效率。(優(yōu)化代碼，減少變量的查找跟減少代碼執(zhí)行次數(shù)等等)

//  錯(cuò)誤的示范   多次取值進(jìn)行存儲(chǔ)取來
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原生自帶的方法因?yàn)檫@些原生方法就是用c/c++寫的，并且底層已經(jīng)做好了各種算法的優(yōu)化了，比如一個(gè)數(shù)組求和
var arr = Array(20).map(() => {
    return 1
}) // 他不出來 說明有優(yōu)化了數(shù)組中的空項(xiàng)直接跳過去了 一次也不執(zhí)行
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)
// 簡單優(yōu)化
console.time(2)
var totleTwo = 0;
for(var i = 0;i < arr.length;i+=2 ){
    totleTwo += (arr[i] + arr[i+1])
}
console.timeEnd(2)
// 優(yōu)雅的寫法
console.time(3)
var totleThree = 0;
totleThree = arr.reduce((total,currentValue)=>{
    return total + currentValue
},0)
console.timeEnd(3)


還有一些數(shù)組有唯一值得時(shí)候需要雙層便利取指的時(shí)候可以生成一個(gè)對象或者map 把 n2的復(fù)雜度變成了 n

介紹幾個(gè)瀏覽器的API
requestAnimationFrame（根據(jù)屏幕的刷新頻率）
MutationObserver （監(jiān)聽dom變化的）
IntersectionObserver（監(jiān)聽目標(biāo)元素可見性變化的）

體驗(yàn)優(yōu)化

• 骨架屏
• 按鈕點(diǎn)擊放大等易操作性
• 動(dòng)畫切換畫面流暢
• 節(jié)流防抖等

總結(jié)：性能優(yōu)化是把雙刃劍，有好的一面也有壞的一面。好的一面就是能提升網(wǎng)站性能，壞的一面就是配置麻煩，或者要遵守的規(guī)則太多。并且某些性能優(yōu)化規(guī)則并不適用所有場景，需要謹(jǐn)慎使用，有的時(shí)候是為了維持一個(gè)開發(fā)效率，可維護(hù)性，可讀性，性能上的一個(gè)平衡