常用哪幾種瀏覽器測(cè)試？有哪些瀏覽器內(nèi)核(Rendering Engine)?

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、云和網(wǎng)站維護(hù)、網(wǎng)站推廣。

(Q1)瀏覽器：Chrome，IE，F(xiàn)ireFox，Safari，Opera。

(Q2)對(duì)應(yīng)內(nèi)核：Webkit，Trident，Gecko，Webkit，Presto。（國(guó)內(nèi)的瀏覽器，除了傲游是直接基于Webkit開發(fā)的，其他基本都是基于谷歌在webkit上開發(fā)的Chromium，當(dāng)然谷歌自己也是用的Chromium。另外值得的一提的是手機(jī)的系統(tǒng)（安卓、蘋果）默認(rèn)瀏覽器都是基于webkit內(nèi)核的）

如何理解瀏覽器內(nèi)核？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。后來(lái)JS引擎越來(lái)越獨(dú)立（比如谷歌的V8引擎），內(nèi)核就傾向于只指渲染引擎。

渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

JS引擎：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

瀏覽器的渲染過(guò)程？

當(dāng)瀏覽器獲得一個(gè)html文件時(shí)，會(huì)“自上而下”加載，并在加載過(guò)程中進(jìn)行解析渲染。

解析：

a. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹，DOM 樹的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

b. 將CSS解析成 CSS規(guī)則樹（Style Rule） 。

c. 根據(jù)DOM樹和CSS規(guī)則樹來(lái)構(gòu)造 Rendering Tree（渲染樹）。注意：Rendering Tree并不等同于 DOM 樹，因?yàn)橐恍┫?Header 或 display:none 的東西就沒(méi)必要放在渲染樹中了。

d. 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為L(zhǎng)ayout（布局），就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的坐標(biāo)。

e. 再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

關(guān)于順序：

上述這個(gè)過(guò)程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載過(guò)程遇到的其余內(nèi)容（比如css、js文件，但遇到j(luò)s文件會(huì)阻塞頁(yè)面后續(xù)內(nèi)容，css不會(huì)阻塞；另外圖片的下載優(yōu)先級(jí)比較低，一般都會(huì)在整個(gè)頁(yè)面其他資源下載完了才下載圖片）。

Javascript的加載和執(zhí)行的特點(diǎn)：

（1）載入后馬上執(zhí)行；

（2）執(zhí)行時(shí)會(huì)阻塞頁(yè)面后續(xù)的內(nèi)容（包括頁(yè)面的渲染、其它資源的下載）。原因：因?yàn)闉g覽器需要一個(gè)穩(wěn)定的DOM樹結(jié)構(gòu)，而JS中很有可能有 代碼直接改變了DOM樹結(jié)構(gòu)，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進(jìn)行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修 改DOM樹，需要重新構(gòu)建DOM樹的情況，所以 就會(huì)阻塞其他的下載和呈現(xiàn)。所以js通常放在頁(yè)面尾部，即body結(jié)束前。

如何理解Reflow（回流）和 Repaint（重繪）？

1) 當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。在回流的時(shí)候，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹和layout，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過(guò)程稱為重繪。

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

注意：回流必將引起重繪，而重繪不一定會(huì)引起回流。

3) 當(dāng)頁(yè)面布局和幾何屬性改變時(shí)就需要回流。下述情況會(huì)發(fā)生瀏覽器回流：

   a. 添加或者刪除可見的DOM元素；

   b. 元素位置改變；

   c. 元素尺寸改變——邊距、填充、邊框、寬度和高度

   d. 內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計(jì)算值寬度和高度改變；

   e. 頁(yè)面渲染初始化；

   f. 瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)；

4) 聰明的瀏覽器

從上個(gè)實(shí)例代碼中可以看到幾行簡(jiǎn)單的JS代碼就引起了6次左右的回流、重繪。而且我們也知道回流的花銷也不小，如果每句JS操作都去回流重繪的話，瀏覽器可能就會(huì)受不了。所以很多瀏覽器都會(huì)優(yōu)化這些操作，瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列，把所有會(huì)引起回流、重繪的操作放入這個(gè)隊(duì)列，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔，瀏覽器就會(huì)flush隊(duì)列，進(jìn)行一個(gè)批處理。這樣就會(huì)讓多次的回流、重繪變成一次回流重繪。

雖然有了瀏覽器的優(yōu)化，但有時(shí)候我們寫的一些代碼可能會(huì)強(qiáng)制瀏覽器提前flush隊(duì)列，這樣瀏覽器的優(yōu)化可能就起不到作用了。當(dāng)你請(qǐng)求向?yàn)g覽器請(qǐng)求一些 style信息的時(shí)候，就會(huì)讓瀏覽器flush隊(duì)列，比如：

   a. offsetTop, offsetLeft, offsetWidth, offsetHeight

   b. scrollTop/Left/Width/Height

   c. clientTop/Left/Width/Height

   d. width,height

   e. 請(qǐng)求了getComputedStyle(), 或者 IE的 currentStyle

當(dāng)你請(qǐng)求上面的一些屬性的時(shí)候，瀏覽器為了給你最精確的值，需要flush隊(duì)列，因?yàn)殛?duì)列中可能會(huì)有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發(fā)生或改變的布局信息無(wú)關(guān)，瀏覽器都會(huì)強(qiáng)行刷新渲染隊(duì)列。

5) 如何減少回流、重繪？

①　直接改變className，這樣能多條規(guī)則一次性改變；如果動(dòng)態(tài)改變樣式，則使用cssText（考慮沒(méi)有優(yōu)化的瀏覽器）

②　讓要操作的元素進(jìn)行”離線處理”，處理完后一起更新

 a) 使用DocumentFragment進(jìn)行緩存操作,引發(fā)一次回流和重繪；

 b) 使用display:none技術(shù)，只引發(fā)兩次回流和重繪；( 只是減少重繪和回流的次數(shù)，display：none 是會(huì)引起重繪并回流，相對(duì)來(lái)說(shuō)，visibility: hidden只會(huì)引起重繪 )

         c) 使用cloneNode(true or false) 和 replaceChild 技術(shù)，引發(fā)一次回流和重繪；

③　不要經(jīng)常訪問(wèn)會(huì)引起瀏覽器flush隊(duì)列的屬性，如果你確實(shí)要訪問(wèn)，利用緩存

④　讓元素脫離動(dòng)畫流，減少回流的Render Tree的規(guī)模。舉例：$("#block1").animate({left:50}); （不過(guò)我沒(méi)理解）

  PS:如果對(duì)你有幫助，就順手點(diǎn)個(gè)贊吧~

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

網(wǎng)頁(yè)題目：前端必備的瀏覽器知識(shí)（渲染過(guò)程、回流和重繪等）-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/ddicdg.html