代碼位置優化
<head>
// css ....
</head>
<body>
// js ...
</body>
上文說到，CSS 要放在上面，JS 要放到下面，因爲一些阻塞關係
HTML
不會相互影響/ \相互阻塞
CSS ————— JS
相互阻塞
- CSS 爲什麼放在上面？
- 不阻塞 HTML 解析，儘早下載
- 防止被外部 JS 阻塞（雖然和 JS 是相互阻塞關係，但是對於用戶來說要先看到界面的樣子，如果先加載 JS 那麼界面可能會白屏、閃爍）
- JS 爲什麼放在下面？
- 可以直接訪問 DOM，無須監聽 DOM Ready
- 避免阻塞 HTML 解析
內聯 JS 放在哪裏？最上面，越快執行越好
代碼拆分（Code Split）
- JS
- runtime-xxx.js // webpack 提供的庫（裏面有 require 等）
- rendor-xxx.js // 第三方庫（Vue、Vuex 等）
- common-xxx.js // 共用 JS
- page-index-xxx.js // 每個頁面的 JS
- CSS
- reset / normolize.css
- rendor-xxx.css
- common-xxx.css
- page-index-xxx.css
JS 動態導入
const array = [1, 2, 3]
import('lodash').then(_ => {
const clone = _.cloneDeep(array)
})
// https://cn.vuejs.org/v2/guide/components-dynamic-async.html
const router = new VueRouter({
routes: [
{path: '/x', component: () => import('./xxx.vue')}
{path: '/', component: () => ({
component: import('./xxx.vue),
loading: LoadingComponent,
error: ErrorComponent,
})}
]
})
圖片懶加載
<img src="placeholder.png" data-src="product.jpg">
預加載
比如圖片懶加載時，用戶滾動過快還是加載過慢，所以當用戶快滾到的時候就提前開始加載
或者像 UC 瀏覽器一樣，看小說的時候，在點擊下一頁之前，就提前加載好下一頁內容
CSS 優化技巧
- 刪除無用的 CSS（使用 webpack 的插件或者 Coverage 工具找到無用的代碼，不推薦這種優化，無法確保正確刪除）
- 使用更高效的選擇器（即使
*通配符不高效，但是這已經是十幾年錢的技術了，瀏覽器早就優化了，只有當寫出* * div *這種纔會導致低效） - 減少重拍（reflow / relayout）
- 不要使用 @import url.css （因爲這是串行，會阻塞下面的 CSS，直接用 Link 標籤並行加載）
- 啓用 GPU 硬件加速（transform: translate3d(0,0,0); 這行代碼不會對元素產生任何影響，但是當有動畫的時候會有 GPU 加速）
- 使用縮寫（#ffffff => #ff，0.1 => .1，0px => 0）
- 看需求，減少無意義的動畫，一般動畫用戶看了三次以後就會看膩
JS 優化技巧
- 儘量不用全局變量（因爲全局變量太多會使變量查找變慢）
- 儘量少操作 DOM（比如說 10 個節點不要一個一個插入，而是一次性插入）
- 不要往頁面插入大量的 HTML（分片插入，比如 facebook Fiber 等）