#### 避免頁面卡頓 JS修改樣式 --> style計算 --> 被影響的元素重新布局 --> 布局好的效果放到一個畫布上 --> paint成像素 --> 畫布刷新到頁面上 js --> style --> layout --> paint --> composite #### 拆分代碼段 ``` var tasks = []; //存儲任務 function draw() { window.requestAnimationFrame(function() { if(tasks.length) { var task = tasks.shift(); task(); window.requestAnimationFrame(() => draw()) } }) } ``` 在web動畫、app動畫中，我們經常通過setInterval或setTimeout定時修改DOM、CSS實現動畫，不過如此動畫的方式極為耗費資源，經常是這樣的結果，剛開始比較流暢，5分鐘之后動畫就卡住了。 requestAnimationFrame的方式的優勢如下： 1.經過瀏覽器優化，動畫更流暢 2.窗口沒激活時，動畫將停止，省計算資源 3.更省電，尤其是對移動終端 #### 其他優化方法 * 減少頁面重繪，能用trnasform就別使用position/width/height做動畫 * 簡化DOM結構 #### 加快頁面打開速度 所有放在head中的js和css都會阻塞渲染。 有兩種解決方法： * 把script標簽放在body最下面 * 給script標簽加上defer屬性，其將會異步加載 具體優先級為： * document.readyState為loading * 如果head中有非defer和async的script，老老實實等它加載完吧 * body中的外部引入script最先加載 * body中的內聯script其次 * 此時document.readyState變為interactive * 開始加載那些延遲的script * 延遲script加載完成后，document.readyState變為complete * window.onload開始執行 document.readyState： * loading: document正在加載 * interactive: 文檔已加載完成，且已被解析，但仍有資源還未加載完成 * complete: 所有一切都準備就緒，開始觸發onload吧 document.readyState一旦發生變化，就會觸發document.readyStateChange方法。 head標簽里面的defer腳本和body里面的腳本有啥不一樣嗎？寫在head里的腳本會阻塞渲染，加上defer后它的加載優先級是最低最低的。 #### 減少css代碼量 * 不要放太多和太大的base64 * 如果css比較小，用內聯吧，不要外引 #### 優化圖片 * 使用響應式圖片 * 延遲加載圖片（懶加載） #### 其他優化方案 * DNS預讀取：`<link rel="dns-prefecth" href="https://www.google.com"/>` * HTML去掉注釋并壓縮