CSS樣式表屬性最佳書寫順序是怎樣的?

2019-5-9 18:30 來自本站原創 532 6 8
[摘要]

混亂的CSS屬性書寫順序會對網頁的加載渲染造成影響,拖慢頁面加載速度。一個規范的CSS屬性書寫屬性也是網頁優化的組成部分,值得每一位前端愛好者重視。

好久沒有更文了,博客都要荒廢了,慚愧一下下,剛好這段時間稍微整理了一下之前寫的樣式表,就來說下CSS樣式表中各個屬性的書寫順序是怎樣的。

像很多初學者一樣,飛鳥剛開始寫樣式表也是很佛系的,想到什么就在樣式里寫什么,毫無規律。其實這樣不僅不利于查看維護,更重要的是混亂的CSS屬性書寫順序會對網頁的加載渲染造成影響,拖慢頁面加載速度。

CSS樣式表屬性最佳書寫順序是怎樣的?

也就是說,一個規范的CSS屬性書寫屬性也是網頁優化的組成部分,值得每一位前端愛好者重視。

怎樣的書寫順序是比較合理的呢?飛鳥查閱資料后得出下面的排序

(1)定位屬性:position、display、float、left、top、right、bottom、overflow、clear、z-index

(2)自身屬性:width、height、padding、border、margin、background

(3)文字樣式:font-family、font-size、font-style、font-weight、font-varient? ?color

(4)文本屬性:text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow

(5)css3中新增屬性:content、box-shadow、border-radius、transform……

在進行樣式書寫的時候,建議按照1-5的順序來寫樣式。

那么為什么要這樣寫呢?其目的是減少瀏覽器reflow(回流),從而提升瀏覽器渲染dom的性能

原理:瀏覽器的渲染流程

①解析html構建dom樹,解析css構建css樹:將html解析成樹形的數據結構,將css解析成樹形的數據結構

②構建render樹:DOM樹和CSS樹合并之后形成的render樹。

③布局render樹:有了render樹,瀏覽器已經知道那些網頁中有哪些節點,各個節點的css定義和以及它們的從屬關系,從而計算出每個節點在屏幕中的位置。

④繪制render樹:按照計算出來的規則,通過顯卡把內容畫在屏幕上。

css樣式解析到顯示至瀏覽器屏幕上就發生在②③④步驟,可見瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分布render樣式,完成第②步,然后開始遍歷每個樹結點的css樣式進行解析,此時的css樣式的遍歷順序完全是按照之前的書寫順序。在解析過程中,一旦瀏覽器發現某個元素的定位變化影響布局,則需要倒回去重新渲染正如按照這樣的書寫書序:

width: 100px;
height: 100px;
background-color: red ;
position: absolute;

當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流,而之前卻是按照普通元素進行解析的,所以不得不重新渲染,解除該元素在文檔中所占位置,然而由于該元素的占位發生變化,其他元素也可能會受到它回流的影響而重新排位。最終導致③步驟花費的時間太久而影響到④步驟的顯示,影響了用戶體驗。

所以,不規范的屬性書寫順序會讓瀏覽器渲染過程中多次回流,做了很多“無用功”,而一套合理的樣式表則是事半功倍的。

可能上面這一大段很多初學朋友會覺得特別枯燥,那也沒關系,原理這個東西是比較高階的,飛鳥也是菜鳥,我們只需要記住 樣式屬性按照如下順序來即可

定位屬性>自身屬性>文字樣式>文本屬性>CSS3新增屬性

本文部分內容摘自CSDN

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 聲明:凡注明“本站原創”的所有文字圖片等資料,版權均屬 雅兮網 所有,歡迎轉載,但務請注明出處;
    已是本欄目最新文章
    目前評論:6   其中:訪客  6   博主  0
    加載中...
    1. 2個月前 (05-14) 6樓

      雅兮終于更新了!

    2. 2個月前 (05-12) 5樓

      前端很需要

    3. 2個月前 (05-11) 4樓

      不經常寫 還是記不住順序的..

    4. 2個月前 (05-11) 板凳

      好羨慕博主,會寫代碼...

    5. 2個月前 (05-11) 椅子

      [強] 每次看雅兮大佬教的基礎知識都很給力,看了有收獲

    6. 2個月前 (05-10) 沙發

      我就是不明白為啥不是文本屬性排在文字樣式前面,有點懵

    發表評論

    疑問 調皮 難過 摳鼻 嚇 微笑 可愛 壞笑 驚訝 發呆 疑問 大兵 偷笑 咒罵 發怒 白眼 鼓掌 得意 擦汗 親親 大哭 呲牙 暈 強

    分享 6 8 532
    Top dhc篮彩双层皂盒