一，寫出高效的css**
首先弄清瀏覽器解析html**的過程：構建乙個dom樹，頁面要顯示的各元素都會建立到這個dom樹當中。每當乙個新元素加入到這個dom樹當中，瀏覽器便會通過css引擎查遍css樣式表，找到符合該元素的樣式規則應用到這個元素上。css引擎查詢樣式表，對每條規則都按從右到左的順序去匹配。
了解過程後，我們可以看出可以從兩方面優化我們的css**：1，定義的css樣式規則條數越少越好，所以趕緊刪除css檔案中不必要的樣式定義；2，優化每條規則的選擇符書寫方式，盡量讓css引擎一看就知道這個規則是否需要應用到當前這個元素上，讓引擎少走不必要的彎路。
如以下幾種效率不高的css書寫方式：
a, 用萬用字元作為關鍵選擇符（關鍵選擇符指的是每條規則最右側的選擇符）
複製**
**如下:
bo *
.hide-scrollbars *
b, 用標籤做關鍵選擇符
複製**
**如下:
ul li a
#footer h3
* html #atticpromo ul li a
c, 畫蛇添足的寫法
複製**
**如下:
ul#top_blue_n**
form#userlogin
d, 給非連線標籤新增 :hover 偽類，這會對用了strict doctype的頁面在ie7和ie8下變的很慢。
複製**
**如下:
h3:hover
.foo:hover
#foo:hover
div.faa :hover
優化建議：
a, 避免使用萬用字元；
b, 讓css引擎快速辨別該規則是否適用於當前元素：多用id或class選擇符，少用標籤選擇符；
c, 不要畫蛇添足把id和class或標籤和class等連著寫；
d, 盡量避免使用後代選擇符，去除不必要的祖先元素，可以考慮使用class選擇符來替換後代選擇符；
複製代qggsoz碼
**如下:
/*給無序和有序的li定義不同顏色，你可能會這樣寫：*/
ul li
ol li
/*給li新增class，這樣定義效率會更高：*/
.unordered-list-item
.ordered-list-item
e, 避免給非連線標籤新增 :hover 偽類。
二，避免使用css表示式
css表示式僅在ie瀏覽器下才起作用，微軟已在ie8後不推薦使用，因為它會嚴重影響頁面效能：任何時候，不管任何乙個事件被觸發，例如視窗的www.cppcns.com resize 事件，滑鼠的移動等等，css表示式都會重新計算一遍。
三，把css檔案放在頁面頂部
把外聯或內聯樣式表放在body部分會影響頁面渲染的速度，因為瀏覽器只有在所有樣式表**完成後才會繼續**頁面其他內容。另外，內聯樣式表（放在
vue渲染頁面的流程 Vue中DOM渲染的過程
vue中dom渲染過程 1 響應式 監聽data屬性的getter setter 2 模板編譯 模板到render函式再到vnode。模板不是html，有指令 插值 js表示式，能夠實現迴圈 判斷。html是標籤語言，只有js才能實現迴圈判斷。因此，模板一定要轉化成js，即編譯模板。模板編譯為ren...
瀏覽器的渲染頁面的過程
1 瀏覽器把獲取到的html 解析成1個dom樹，html中的每個標籤都是dom樹中的1個節點，根節點就是常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素。2 瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體，在解...
vue渲染頁面的流程 vue原始碼實現的整體流程解析
一 前言 最近一直在使用vue做專案，閒暇之餘查閱了一些關於vue實現原理的資料，一方面對所了解到的知識做個總結，另外一方面希望能對看到此文章的同學有所幫助。本文如有不足之處，還請過往的大佬批評指正。二 vue實現原理概述 vue作為乙個前端漸進式的mvvm開發庫，將廣大的前端勞苦大眾從dom操作中...