1、標(biāo)簽語(yǔ)義化和避免深層次嵌套（html的層級(jí)盡可能少，因?yàn)閷蛹?jí)多了影響布局（layout）計(jì)算時(shí)間）
2、css層級(jí)不宜過(guò)多，CSS選擇器渲染是從右到左（如.box ul li span a{color:red}這種方式層級(jí)過(guò)多，影響頁(yè)面渲染，使用sass/less深層嵌套是影響性能的）
3、盡早盡快地把CSS下載到客戶端（充分利用HTTP多請(qǐng)求并發(fā)機(jī)制，瀏覽器http請(qǐng)求的并發(fā)數(shù)在6-7個(gè)）
style（如果頁(yè)面樣式較少大概100-200行，直接使用style引入樣式）
link（link引入樣式放在頂部）
@import（@import引入樣式放在頁(yè)面底部）
4、避免阻塞的JS加載（JS放在頁(yè)面底部，合理使用defer、async）

image.png

5、避免DOM的重排/回流：
重繪：元素樣式的改變（但寬高、大小、位置不變）
重排(回流)：元素大小或位置發(fā)生變化（當(dāng)頁(yè)面布局和幾何信息發(fā)生變化），觸發(fā)了重新布局，導(dǎo)致渲染樹重新布局和渲染。
注意：重排一定會(huì)觸發(fā)重繪，而重繪不一定會(huì)重排
優(yōu)化方案：
1）放棄傳統(tǒng)操作DOM的時(shí)代，基于vue/react開始數(shù)據(jù)影響視圖模式；
2）分離讀寫操作（現(xiàn)在的瀏覽器都有渲染隊(duì)列機(jī)制）
3）樣式集中改變
4)緩存布局信息
5）元素批量修改
6）動(dòng)畫效果應(yīng)用到position屬性為absolute或fixed的元素上（脫離文檔流）
7）css硬件加速（GPU加速）
8）犧牲平滑度換取速度
9）避免table布局和使用css的javascript表達(dá)式（如width:calc(100% - 20px)這個(gè)就屬于css的js表達(dá)式）