網絡請求
- 減少HTTP資源請求次數(合并接口)
- 減小HTTP請求大小
- 避免頁面中空的href和src
- 減少頁面重定向
- 根據條件使用可緩存的AJAX
- 減少Cookie的大小并進行Cookie隔離
- 推薦使用異步JavaScript資源
- 消除阻塞渲染的CSS及JavaScript
- 避免使用CSS import引用加載CSS
頁面渲染
- 把CSS資源引用放到HTML文件頂部
- JavaScript資源引用放到HTML文件底部
- 不要在HTML中直接縮放圖片
- 減少DOM元素數量和深度
- 減少重繪和回流
- 盡量避免使用<table>晕城、<iframe>等慢元素
- 避免使用CSS表達式或CSS濾鏡(渲染速度慢)
其它
- 拼接蔚润、合并、壓縮、制作雪碧圖
- 使用靜態(tài)資源CDN托管存儲文件
- 盡量緩存能緩存的資源
- 將CSS或JavaScript放到外部文件中锣险,避免使用或標簽直接引入(可以有效利用瀏覽器的靜態(tài)資源緩存)
- 提高代碼質量
1)html:
dom的層級盡量不要太深,否則會增加dom樹構建的時間拉鹃,js訪問深層的dom也會造成更大的負擔窘疮。
meta標簽里需要定義文檔的編碼,便于瀏覽器解析
2)css:
減少 CSS 嵌套層級和選擇適當的選擇器
正確使用 Display 屬性炫乓,因為 Display 屬性會影響頁面的渲染
避免 CSS 表達式
移除空的 CSS 規(guī)則
不濫用 Web 字體刚夺、Float
不聲明過多的 Font-Size
值為 0 時不需要單位
標準化各種瀏覽器的前綴
避免讓選擇符看起來像正則表達式
3)js:
減少通過JavaScript代碼修改元素樣式,盡量使用修改class名方式操作樣式或動畫
訪問dom節(jié)點時需要對dom節(jié)點轉存末捣,防止循環(huán)中重復訪問dom節(jié)點造成性能損耗侠姑。
慎用 定時器 和 計時器, 使用完后需要銷毀箩做。
用于復雜計算的js代碼可以放在worker進程中運行
對于一些高頻的回調需要對其節(jié)流和消抖莽红,就是 debounce 和 throttle 這兩個函數。比如scroll和touch事件