前端項目優化（一）

一，本文分爲兩部分

• 普通項目優化
• vue項目優化
• 防止XSS與XSRF（安全性）

二，普通項目優化:

• 頁面加載階段
• 頁面渲染階段

1、 頁面加載

1. dns預解析
2. 使用cdn
3. 靜態資源的壓縮與合併
4. 減小https請求
5. 異步加載defer，async
6. 服務端渲染ssr
7. 多使用內存和緩存

2、 頁面渲染

1. css放前面，js放後面
2. 減小dom查詢，屢次使用的保存爲變量
3. 減小dom操做，統一經過dom片斷操做
4. 事件函數的節流和防抖
5. 圖片懶加載
6. 儘早進行操做，domcontentload與load

3、vue項目優化：

• 代碼層面優化
• webpack層面優化
• web層面優化

1、代碼層面優化

1. Object.freeze(data);對於一些查詢類的頁面，調取接口回來後的數據可不進行數據劫持
2. v-if和v-for不要在一塊兒使用。v-if的條件經過函數來處理
3. v-for中加上key，對於虛擬dom樹查找提升性能
4. computed和watch注意區分使用場景。前者是有緩存的。後者是監聽到數據變化後的回調無緩存
5. created中發起請求，mounted鉤子中表明頁面dom加載完成能夠進行dom操做。
6. 長列表性能優化，只渲染可視區域的列表
7. 長表格性能優化，經過canvers來繪製表格
8. 合理使用$nextTick去操做dom，適用於更新了數據立刻就要操做dom的場景
9. 操做dom不要使用js原生的方式來操做。用vue提供的三種方式來操做 好比，ref、自定義指令el、事件中的話用e.target獲取dom
10. 儘可能不要在前端進行大量的數據處理
11. 合理使用keep-alive來緩存頁面數據，跳過created,mounted鉤子，他有本身特定的鉤子activted等
12. 路由懶加載經過import配合箭頭函數，還有其餘的方式require
13. 組件懶加載，異步加載
14. 儘可能少用float，能夠用flex佈局
15. 頻繁切換的使用v-show，不頻繁的使用v-if
16. 不要在模板中寫過多的樣式
17. 服務端渲染ssr，優化seo，與首屏白屏問題。
18. 經過addEventListenr添加的事件，須要自行銷燬
19. 把組件中的css提取成單獨的文件
20. 少使用閉包與遞歸，遞歸可作尾遞歸的優化
21. 使用字體圖標或者svg來代替傳統的Png等格式的圖片
22. 在Js中避免「嵌套循環」和「死循環」
23. 儘量的使用事件委託來處理事件的綁定，針對老項目jq

2、webpack層面優化

1. 去除無用代碼treeShaking.
   
2. babel編譯es6到es5的時候，會有多餘代碼產生
3. 減少app.js的體積，提取公共代碼
4. 減小vendor.js的體積，經過按需引入第三方庫，或者有些資源能夠經過script標籤引入
5. 代碼切割，有一些組件不必都打包到一塊兒。
6. 使用chunck
7. 使用SouceMap，來還原線上代碼，更方便的去定位線上問題
8. 構建結果，經過可視化插件，進行分析
9. webpack對圖片進行壓縮等處理，
10. 圖片可使用webp，優雅降級處理
11. 編譯優化
12. 模板預編譯，使用vue-template-loader，把模板編譯成渲染函數。

3、web層面優化

1. 瀏覽器緩存的使用
2. 開啓gzip壓縮
3. CDN的使用，減小路由轉發的次數，就近訪問資源
4. 使用chrome的性能分析工具，查找性能瓶頸
5. dns預解析
6. 靜態資源的壓縮與合併
7. 減小https請求
8. 異步加載defer，async
9. 靜態資源和服務不要放在同一臺機器上。多個域名去並行加載解析

4、安全性

基本後端來作，防注入等

@兩種

1. XSS跨站請求攻擊，

     輸入時，插入一段腳本，來獲取用戶信息的cookie

2.  XSRF跨站請求未僞造，好比支付請求成一個圖片請求，固然如今都沒有這種的

@解決方案：

1.XSS 前端替換關鍵字，建議後端也替換，如<>的替換，避免腳本的執行

2. XSRF增長驗證流程，好比輸入密碼，指紋，短信驗證碼，人臉識別等。