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

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

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

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

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

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

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

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

瀏覽器的渲染過程？

當(dāng)瀏覽器獲得一個html文件時，會“自上而下”加載，并在加載過程中進行解析渲染。

解析：

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

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

c. 根據(jù)DOM樹和CSS規(guī)則樹來構(gòu)造 Rendering Tree（渲染樹）。注意：Rendering Tree并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。

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

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

關(guān)于順序：

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

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

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

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

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

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

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

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

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

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

   b. 元素位置改變；

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

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

   e. 頁面渲染初始化；

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

4) 聰明的瀏覽器

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

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

   a. offsetTop, offsetLeft, offsetWidth, offsetHeight

   b. scrollTop/Left/Width/Height

   c. clientTop/Left/Width/Height

   d. width,height

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

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

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

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

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

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

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

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

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

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

  PS:如果對你有幫助，就順手點個贊吧~

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

網(wǎng)站名稱：前端必備的瀏覽器知識（渲染過程、回流和重繪等）-創(chuàng)新互聯(lián)
文章來源：http://chinadenli.net/article16/ddicdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站收錄、做網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)