- 網(wǎng)絡(luò)請(qǐng)求
- 減少HTTP資源請(qǐng)求次數(shù)（合并接口）
- 減小HTTP請(qǐng)求大小
- 避免頁(yè)面中空的href和src
- 減少頁(yè)面重定向
- 根據(jù)條件使用可緩存的AJAX
- 減少Cookie的大小并進(jìn)行Cookie隔離
- 推薦使用異步JavaScript資源
- 消除阻塞渲染的CSS及JavaScript
- 避免使用CSS import引用加載CSS
- 頁(yè)面渲染
- 把CSS資源引用放到HTML文件頂部
- JavaScript資源引用放到HTML文件底部
- 不要在HTML中直接縮放圖片
- 減少DOM元素?cái)?shù)量和深度
- 減少重繪和回流
- 盡量避免使用<table>、<iframe>等慢元素
- 避免使用CSS表達(dá)式或CSS濾鏡(渲染速度慢)
- 其它
- 拼接定鸟、合并、壓縮徽千、制作雪碧圖
- 使用靜態(tài)資源CDN托管存儲(chǔ)文件
- 盡量緩存能緩存的資源
- 將CSS或JavaScript放到外部文件中，避免使用或標(biāo)簽直接引入（可以有效利用瀏覽器的靜態(tài)資源緩存）
- 提高代碼質(zhì)量
1）html：
- dom的層級(jí)盡量不要太深斋泄，否則會(huì)增加dom樹構(gòu)建的時(shí)間图筹，js訪問(wèn)深層的dom也會(huì)造成更大的負(fù)擔(dān)。
- meta標(biāo)簽里需要定義文檔的編碼沛慢，便于瀏覽器解析
2）css：
- 減少 CSS 嵌套層級(jí)和選擇適當(dāng)?shù)倪x擇器
- 正確使用 Display 屬性，因?yàn)?Display 屬性會(huì)影響頁(yè)面的渲染
- 避免 CSS 表達(dá)式
- 移除空的 CSS 規(guī)則
- 不濫用 Web 字體达布、Float
- 不聲明過(guò)多的 Font-Size
- 值為 0 時(shí)不需要單位
- 標(biāo)準(zhǔn)化各種瀏覽器的前綴
- 避免讓選擇符看起來(lái)像正則表達(dá)式
3）js：
- 減少通過(guò)JavaScript代碼修改元素樣式团甲，盡量使用修改class名方式操作樣式或動(dòng)畫
- 訪問(wèn)dom節(jié)點(diǎn)時(shí)需要對(duì)dom節(jié)點(diǎn)轉(zhuǎn)存，防止循環(huán)中重復(fù)訪問(wèn)dom節(jié)點(diǎn)造成性能損耗黍聂。
- 慎用 定時(shí)器 和 計(jì)時(shí)器躺苦， 使用完后需要銷毀。
- 用于復(fù)雜計(jì)算的js代碼可以放在worker進(jìn)程中運(yùn)行
- 對(duì)于一些高頻的回調(diào)需要對(duì)其節(jié)流和消抖产还，就是
debounce和throttle這兩個(gè)函數(shù)匹厘。比如scroll和touch事件
如何做好H5性能優(yōu)化？
前端性能優(yōu)化——桌面瀏覽器前端優(yōu)化策略
頁(yè)面渲染機(jī)制與性能優(yōu)化
