1. 加載優(yōu)化

1. 壓縮合并

2. 代碼分割(code spliting)颂郎，可以基于路由或動態(tài)加載

3. 第三方模塊放在CDN

4. 大模塊異步加載，例如: Echarts蛤肌，可以使用require.ensure，在加載成功后究反，在顯示對應(yīng)圖表

5. 小模塊適度合并寻定，將一些零散的小模塊合并一起加載，速度較快

6. 可以使用pefetch預(yù)加載精耐，在分步場景中非常適合

2. 圖片優(yōu)化

1. 小圖使用精靈圖狼速，iconFont，base64內(nèi)聯(lián)

2. 圖片使用懶加載

3. webp代替其他格式

4. 圖片一定要壓縮

5. 可以使用的img的srcset卦停，根據(jù)不同分辨率顯示不同尺寸圖片向胡，這樣既保證顯示效果恼蓬，又能節(jié)省帶寬，提高加載速度

3. css優(yōu)化

1. css寫在頭部

2. 避免css表達式

3. 移除空置的css規(guī)則

4. 避免行內(nèi)style樣式

4. js優(yōu)化

1. js寫在body底部

2. js用defer放在頭部僵芹，提前加載時間处硬，又不阻塞dom解析

3. script標簽添加crossorigin，方便錯誤收集

4.DOM　　

a.HTML Collection（HTML收集器拇派，返回的是一個數(shù)組內(nèi)容信息）

在腳本中 document.images荷辕、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合件豌，在平時使用的時候大多將它作為數(shù)組來使用疮方，因為它有 length屬性，也可以使用索引訪問每一個元素茧彤。不過在訪問性能上則比數(shù)組要差很多骡显，原因是這個集合并不是一個靜態(tài)的結(jié)果，它表示的僅僅是一個特定的查詢曾掂，每次訪問該集合時都會重新執(zhí)行這個查詢從而更新查詢結(jié)果惫谤。所謂的“訪問集合” 包括讀取集合的 length屬性、訪問集合中的元素珠洗。

因此溜歪，當(dāng)你需要遍歷 HTML Collection的時候，盡量將它轉(zhuǎn)為數(shù)組后再訪問险污，以提高性能痹愚。即使不轉(zhuǎn)換為數(shù)組富岳，也請盡可能少的訪問它蛔糯，例如在遍歷的時候可以將 length屬性、成員保存到局部變量后再使用局部變量窖式。

b. Reflow & Repaint

除了上面一點之外蚁飒， DOM操作還需要考慮瀏覽器的Reflow和Repaint ，因為這些都是需要消耗資源的萝喘。

5. 慎用 with

with(obj){ p = 1}; 代碼塊的行為實際上是修改了代碼塊中的執(zhí)行環(huán)境 淮逻，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪問非局部變量是都是先從 obj上開始查找阁簸，如果沒有再依次按作用域鏈向上查找爬早，因此使用 with相當(dāng)于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的启妹，過長的作用域鏈會導(dǎo)致查找性能下降筛严。

因此，除非你能肯定在 with代碼中只訪問 obj中的屬性饶米，否則慎用 with桨啃，替代的可以使用局部變量緩存需要訪問的屬性车胡。

6.避免使用 eval和 Function

每次 eval 或Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼照瘾。這是很消耗資源的操作 —— 通常比簡單的函數(shù)調(diào)用慢 100倍以上匈棘。

eval 函數(shù)效率特別低，由于事先無法知曉傳給 eval 的字符串中的內(nèi)容析命，eval在其上下文中解釋要處理的代碼主卫，也就是說編譯器無法優(yōu)化上下文，因此只能有瀏覽器在運行時解釋代碼鹃愤。這對性能影響很大队秩。

Function 構(gòu)造函數(shù)比 eval略好，因為使用此代碼不會影響周圍代碼 ;但其速度仍很慢昼浦。

此外馍资，使用 eval和 Function也不利于Javascript 壓縮工具執(zhí)行壓縮。

7.減少作用域鏈查找

前文談到了作用域鏈查找問題关噪，這一點在循環(huán)中是尤其需要注意的問題鸟蟹。如果在循環(huán)中需要訪問非本作用域下的變量時請在遍歷之前用局部變量緩存該變量，并在遍歷結(jié)束后再重寫那個變量使兔，這一點對全局變量尤其重要建钥，因為全局變量處于作用域鏈的最頂端，訪問時的查找次數(shù)是最多的虐沥。

低效率的寫法：

更高效的寫法：

此外熊经，要減少作用域鏈查找還應(yīng)該減少閉包的使用。

8.數(shù)據(jù)訪問

Javascript中的數(shù)據(jù)訪問包括直接量 (字符串欲险、正則表達式 )镐依、變量、對象屬性以及數(shù)組天试，其中對直接量和局部變量的訪問是最快的槐壳，對對象屬性以及數(shù)組的訪問需要更大的開銷。當(dāng)出現(xiàn)以下情況時喜每，建議將數(shù)據(jù)放入局部變量：

a. 對任何對象屬性的訪問超過 1次

b. 對任何數(shù)組成員的訪問次數(shù)超過 1次

另外务唐，還應(yīng)當(dāng)盡可能的減少對對象以及數(shù)組深度查找。

9.字符串拼接

在 Javascript中使用”+”號來拼接字符串效率是比較低的带兜，因為每次運行都會開辟新的內(nèi)存并生成新的字符串變量枫笛，然后將拼接結(jié)果賦值給新變量。與之相比更為高效的做法是使用數(shù)組的 join方法刚照，即將需要拼接的字符串放在數(shù)組中最后調(diào)用其 join方法得到結(jié)果刑巧。不過由于使用數(shù)組也有一定的開銷，因此當(dāng)需要拼接的字符串較多的時候可以考慮用此方法。

5. 渲染優(yōu)化

1. 盡量減少reflow和repaint

涉及到樣式海诲，尺寸繁莹，節(jié)點增減的操作，都會觸發(fā)reflow和repaint特幔。

1.1 用變量緩存dom樣式咨演，不要頻繁讀取

1.2 通過DocumentFragment或innerHTML批量操作dom

1.3 dom隱藏，或復(fù)制到內(nèi)存中蚯斯，類似virtual dom薄风，進行修改，完成后再替換回去

1.4 動畫元素一定要absolute拍嵌，脫離文檔流遭赂，不影響其他元素。動畫不要用left横辆，top等操作撇他，要使用transform和opacity，同時開啟渲染層(will-change或translate3d(0,0,0))

1.5 動畫盡量用requestAnimationFrame狈蚤，不要用定時器

1.6 移動端硬件加速困肩，觸發(fā)GPU渲染，還是translate3d(0,0,0)

2. 盡量用css動畫代替js動畫脆侮，canvas動畫代替js動畫

3. 初始渲染锌畸，可以使用骨架屏或loading，提升體驗

4. PWA靖避，可以本地緩存資源潭枣，提升體驗

5. 頻繁觸發(fā)的事件，防抖幻捏、節(jié)流盆犁，例如：scroll，input等

6. 長列表粘咖，使用分頁或滾動加載蚣抗，虛擬列表侈百，移除屏外dom

6. 首屏優(yōu)化

原則：顯示快瓮下，滾動流暢，懶加載钝域，懶執(zhí)行讽坏，漸進展現(xiàn)

1. 代碼分離，將首屏不需要的代碼分離出去

2. 服務(wù)端渲染或預(yù)渲染例证，加載完html直接渲染路呜，減少白屏?xí)r間

3. DNS prefetch，使用dns-prefetch減少dns查詢時間，PC端域名發(fā)散胀葱，移動端域名收斂

4. 減少關(guān)鍵路徑css漠秋，可以將關(guān)鍵的css內(nèi)聯(lián)，這樣可以減少加載和渲染時間

7. 打包優(yōu)化

主要是webpack優(yōu)化

1. 拆包 externals dllPlugin

2. 提取公共包 commonChunkPlugin或splitChunks

3. 縮小范圍 各種loader配置include和exclude抵屿，noParse跳過文件

4. 開啟緩存 各種loader開啟cache

5. 多線程加速 happypack或thead-loader

6. tree-shaking ES模塊分析庆锦，移除死代碼

7. Scope Hoisting ES6模塊分析，將多個模塊合并到一個函數(shù)里轧葛，減少內(nèi)存占用搂抒，減小體積，提示運行速度

8. webpack長緩存優(yōu)化

1. js文件使用chunkhash尿扯，不使用hash

2. css文件使用contenthash求晶，不使用chunkhash，不受js變化影響

3. 提取vendor衷笋，公共庫不受業(yè)務(wù)模塊變化影響

4. 內(nèi)聯(lián)webpack runtime到頁面芳杏，chunkId變化不影響vendor

5. 保證module Id穩(wěn)定，不使用數(shù)字作為模塊id辟宗，改用文件內(nèi)容的hash值蚜锨，使用HashedModuleIdsPlugin，模塊的新增或刪除慢蜓，會導(dǎo)致其后面的所有模塊id重新排序亚再，為避免這個問題

6. 保證chunkhash穩(wěn)定，使用webpack-chunk-hash晨抡，替代webpack自己的hash算法氛悬。webpack自己的hash算法，對于同一個文件耘柱，在不同開發(fā)環(huán)境下如捅，會計算出不用的hash值，不能滿足跨平臺需求调煎。

8. vue優(yōu)化

1. 路由懶加載組件

2. keep-alive緩存組件镜遣，保持原顯示狀態(tài)

3. 列表項添加key，保證唯一

4. 列表項綁定事件士袄，使用事件代理(v-for)

5. v-if和v-for不要用在一個標簽上悲关，它會在每個項上進行v-if判斷

9. react優(yōu)化

1. 路由組件懶加載，使用react-loadable

2. 類組件添加shouldComponent或PureComponent

3. 函數(shù)組件添加React.memo

4. 列表項添加key娄柳，保證唯一

5. 函數(shù)組件使用hook優(yōu)化寓辱，useMemo，useCallback

10. SEO優(yōu)化

1. 添加各種meta信息

2. 預(yù)渲染

3. 服務(wù)端渲染