前端的性能優化主要分為三部分：
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 來隱藏，按需顯示。
壓縮文件大小，減少資源下載負擔。