今天濟(jì)南網(wǎng)站建設(shè) 文匯傳媒小編給大家分享下CSS的小知識(shí) ，介紹瀏覽器功能的損耗 ，優(yōu)化網(wǎng)頁的打開速度！
那么樣式如何修改才能提高瀏覽器的性能 優(yōu)化網(wǎng)頁打開速度呢 ？不要著急 濟(jì)南網(wǎng)站建設(shè) 文匯傳媒小編為您來解答！
提升CSS性能：
后代選擇器
樣式選擇器中間的空格是什么？它的名字是 —— 后代選擇器。
后代選擇器或許會(huì)很耗性能
耗能與否取決于項(xiàng)目的體積，但不建議使用沒有意義的后代選擇器。例如：
為什么會(huì)更消耗性能呢?
因?yàn)闉g覽器首先會(huì)找到所有 p 標(biāo)簽，然后再向上查找包含 class 為 div 標(biāo)簽。這樣一來如果代碼中有很多 p 標(biāo)簽，無疑是會(huì)做很多重復(fù)工作的。
所以可以減少使用 HTML 標(biāo)簽來定義 CSS 的方式，換成使用具體的 class。
瀏覽器會(huì)從右到左解析 CSS 選擇器
瀏覽器會(huì)對(duì)上面的例子做如下的步驟處理：
從上面的步驟我們可以看出，越靠右的選擇器越具有唯一性，瀏覽器解析 CSS 屬性的效率就越高。
所以一定換成使用具體的 class 編寫 CSS 代碼。
避免 reflow 風(fēng)險(xiǎn)
我們知道修改某些 CSS 屬性會(huì)導(dǎo)致整個(gè)頁面布局的重繪( repaint )/重排( reflow )。
repaint 的速度遠(yuǎn)快于 reflow，所以避免 reflow 更重要。
導(dǎo)致 repaint 和 reflow 的原因
DOM 元素的添加、修改、刪除（repaint、reflow）
僅僅修改 DOM 元素的字體顏色（repaint，不需要調(diào)整布局）
應(yīng)用新的樣式或者修改任何影響元素外觀的屬性（repaint、reflow）
resize，頁面滾動(dòng)（repaint、reflow）
讀取元素的某些屬性（offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等）（repaint、reflow）
如果在大量的元素上更改這些屬性，那么計(jì)算和更新他們的位置/大小需要花費(fèi)很長(zhǎng)的時(shí)間。
更加消耗性能的 CSS 屬性
有一些 CSS 屬性會(huì)比其他屬性消耗能多的性能，即瀏覽器解析這些屬性需要花費(fèi)更多的時(shí)間。
如：border-radius、box-shadow、filter、:nth-child等
當(dāng)然這些屬性我們經(jīng)常使用，有些無法避免。要做出適當(dāng)?shù)娜∩帷?/p>
希望這幾個(gè) CSS 小知識(shí)可以對(duì)你有所幫助，然后給濟(jì)南文匯軟件小編點(diǎn)個(gè)贊再走唄！
