1、css偽類選擇器講解，css中如何做出鼠標懸浮？

css如何設置鼠標懸浮時的樣式首先是通過css的hover屬性值來顯示的，hover偽類：在鼠標移到元素上時向此元素添加特殊的樣式。比較普通的就是一個url，當你鼠標放上去后，會變顏色。

在現實的應用場景也非常之多。最常見的是網站的懸浮導航，當鼠標放到導航條上時，會出現顏色變化或者元素自動伸出菜單欄。

2、CSS選擇器first？

.content[data-role=page]:nth-child(2){} 使用:first-child偽類時一定要保證前面沒有兄弟節點，你前面有個content所以會失效

1

2

3

3、瀏覽器響應用戶的機制是什么？

1. 瀏覽器是多進程的

GPU進程

最多一個，用于3D繪制等

Browser進程

負責瀏覽器界面顯示，與用戶交互。如前進，后退等

負責各個頁面的管理，創建和銷毀其他進程

將Renderer進程得到的內存中的Bitmap，繪制到用戶界面上

網絡資源的管理，下載等

第三方插件進程

每種類型的插件對應一個進程，僅當使用該插件時才創建

瀏覽器渲染進程（瀏覽器內核）

默認每個tab頁一個進程

頁面渲染，腳本執行，事件處理等

2. 瀏覽器渲染進程是多線程的

GUI渲染線程

負責渲染瀏覽器界面，解析HTML，CSS，構建DOM樹和RenderObject樹，布局和繪制等。

當界面需要重繪（Repaint）或由于某種操作引發回流(reflow)時，該線程就會執行

注意，GUI渲染線程與JS引擎線程是互斥的，當JS引擎執行時GUI線程會被掛起（相當于被凍結了），GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。

js引擎線程

也稱為JS內核，負責處理Javascript腳本程序。（例如V8引擎）

JS引擎線程負責解析Javascript腳本，運行代碼。

JS引擎一直等待任務隊列中任務的到來，然后加以處理，一個Tab頁（renderer進程）中只有一個JS線程在運行

同樣注意，GUI渲染線程與JS引擎線程是互斥的。所以如果JS執行的時間過長，要放在body下面，否則就會導致頁面渲染加載阻塞。

事件觸發線程

管理著事件隊列

監聽事件，符合條件時把回調函數放入事件隊列中

定時觸發器線程

setInterval與setTimeout在此線程中計時完畢后，把回調函數放入事件隊列中

瀏覽器定時計數器并不是由JavaScript引擎計數的,（因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態就會影響記計時的準確），因此通過單獨線程來計時并觸發定時（計時完畢后，添加到事件隊列中，等待JS引擎空閑后執行）

注意，W3C在HTML標準中規定，規定要求setTimeout中低于4ms的時間間隔算為4ms。

異步http請求線程

檢測到XHR對象狀態變化時，將回調函數放入事件隊列中

event loop整體流程

3. repaint、reflow

repaint

repiant或者redraw遍歷所有的節點檢測各節點的可見性、顏色、輪廓等可見的樣式屬性，然后根據檢測的結果更新頁面的響應部分。

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪

reflow

reflow指的是計算頁面布局。某個節點reflow時會重新計算節點的尺寸和位置，而且還有可能觸發其子節點、祖先節點和頁面上的其他節點reflow。在這之后再觸發一次repaint。

當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流,每個頁面至少需要一次回流，就是在頁面第一次加載的時候。

導致reflow的操作

調整窗口大小

改變字體

增加或者移除樣式表

內容變化，比如用戶在input框中輸入文字

激活 CSS 偽類，比如 :hover (IE 中為兄弟結點偽類的激活)

操作 class 屬性

腳本操作 DOM

計算 offsetWidth 和 offsetHeight 屬性

設置 style 屬性的值

它們會大大影響web性能，如何減少reflow、repaint

不要通過父級來改變子元素樣式，最好直接改變子元素樣式，改變子元素樣式盡可能不要影響父元素和兄弟元素的大小和尺寸

盡量通過class來設計元素樣式，切忌用style多次操作單個屬性

實現元素的動畫，對于經常要進行回流的組件，要抽離出來，它的position屬性應當設為fixed或absolute

權衡速度的平滑。比如實現一個動畫，以1個像素為單位移動這樣最平滑，但reflow就會過于頻繁，CPU很快就會被完全占用。如果以3個像素為單位移動就會好很多。

不要用tables布局的另一個原因就是tables中某個元素一旦觸發reflow就會導致table里所有的其它元素reflow。在適合用table的場合，可以設置table-layout為auto或fixed，

這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍。

css里不要有表達式expression

減少不必要的 DOM 層級（DOM depth）。改變 DOM 樹中的一級會導致所有層級的改變，上至根部，下至被改變節點的子節點。這導致大量時間耗費在執行 reflow 上面。

避免不必要的復雜的 CSS 選擇器，尤其是后代選擇器（descendant selectors），因為為了匹配選擇器將耗費更多的 CPU。

盡量不要過多的頻繁的去增加，修改，刪除元素，因為這可能會頻繁的導致頁面reflow，可以先把該dom節點抽離到內存中進行復雜的操作然后再display到頁面上。

請求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，瀏覽器會發生reflow，建議將他們合并到一起操作，可以減少回流的次數。

4、CSS中有哪些常用選擇器？

一、CSS選擇器有哪些

CSS中的選擇器很多，比如：ID選擇器，類選擇器，通配符選擇器，偽類選擇器等等，接下來主要介紹常用的幾個。

1.標簽選擇器

語法：標簽名{}，eg：h1{}//為所有的h1元素設置樣式。

2.ID選擇器

語法：#id名{}//id值唯一不能重復,eg:#top{}//為id為top的元素設置樣式。

3.類選擇器

語法：.class{},eg：.box{}//為所有的class值為box的元素設置樣式。

4.組選擇器

語法：選擇器1，選擇器2，選擇器N{},eg:#box1,.box2,p{}//為id為box1，class為box2和p的元素共同設置樣式。

5、通配符選擇器

語法：*{}，eg：*{font-size：16px}//將整個頁面字體大小設為16px。

6.后代選擇器

語法：選擇器1選擇器2{}，eg：p.aa{}//選中指定祖先元素p的指定后代.aa。

7.子元素選擇器

語法：父元素>子元素{},eg：p>.box{}//選中父元素p的指定子元素.box。注意與后代元素選擇器的區別

8.偽類選擇器

偽類可以用來表示一些特殊的狀態,如：

：link-未訪問過的超鏈接。

：visited-已訪問過的超鏈接。

：hover-鼠標經過的元素。

：active-正在點擊的元素。

eg：a:hover{color:red}//鼠標經過a標簽時，顏色變為紅色。

二、CSS選擇器的優先級順序

當同一屬性的不同值都作用到了同一個元素時，如果定義的屬性之間有沖突，那么應該用誰的值的，這個時候就涉及到CSS的優先級順序了。

1.在屬性后面使用!important會覆蓋頁面內任何位置定義的元素樣式。

2.作為style屬性寫在元素內的內部樣式

3.id選擇器

4.類選擇器

5.標簽選擇器

6.通配符選擇器

7.瀏覽器自定義或繼承的