前端的性能優化主要分為三部分： HTML優化 避免 HTML 中書寫 CSS 代碼，因為這樣難以維護。 使用Viewport加速頁面的渲染。 使用語義化標簽，減少 CSS 代碼，增加可讀性和 SEO。 減少標簽的使用，DOM解析是一個大量遍歷的過程，減少不必要的標簽，能降低遍歷的次數。 避免 src ...
前端的性能優化主要分為三部分：
HTML優化
避免 HTML 中書寫 CSS 代碼，因為這樣難以維護。
使用Viewport加速頁面的渲染。
使用語義化標簽，減少 CSS 代碼，增加可讀性和 SEO。
減少標簽的使用，DOM解析是一個大量遍歷的過程，減少不必要的標簽，能降低遍歷的次數。
避免 src、href等的值為空，因為即時它們為空，瀏覽器也會發起 HTTP 請求。
減少 DNS 查詢的次數。
CSS優化
優化選擇器路徑：使用 .c {} 而不是 .a .b .c {}。
選擇器合併：共同的屬性內容提起出來，壓縮空間和資源開銷。
精準樣式：使用padding-left: 10px 而不是 padding: 0 0 0 10px。
雪碧圖：將小的圖標合併到一張圖中，這樣所有的圖片只需要請求一次。
避免通配符：.a .b * {} 這樣的選擇器，根據從右到左的解析順序在解析過程中遇到通配符 * {} 會遍歷整個DOM，性能大大損耗。
少用 float：float 在渲染時計算量比較大，可以使用 flex佈局。
為 0 值去單位：增加相容性。
壓縮文件大小，減少資源下載負擔。
JavaScript優化
儘可能把 <script> 標簽放在 body 之後，避免JS 的執行卡住 DOM 的渲染，最大程度保證頁面儘快地展示出來。
儘可能合併 JS代碼：提取公共方法，進行面向對象設計等……
CSS 能做的事情，儘量不用JS 來做，畢竟 JS 的解析執行比較粗暴，而CSS 效率更高。
儘可能逐條操作 DOM，並預定好 CSS 樣式，從而減少 reflow 或者 repaint的次數。
儘可能少地創建 DOM，而是在HTML 和 CSS中使用 display: none 來隱藏，按需顯示。
壓縮文件大小，減少資源下載負擔。
