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