chrome和Firefox瀏覽器渲染頁面的不一樣

時間 2019-11-11

標籤 chrome firefox 瀏覽器渲染頁面不一樣欄目 Chrome 简体版

原文原文鏈接

一直很好奇chrome和firefox這兩大瀏覽器的頁面渲染有什麼不一樣，今天本身寫了些html代碼來作了下檢驗。javascript

先作html編碼，代碼以下：css

<!DOCTYPE html>
<html>
    <head>
        <title>測試瀏覽器渲染</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <img src="images/marx.png">
        <div>Render html</div>
        <div id="test">正在執行...</div>
        <script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
        <script>
            var end = 1000000;

            for(i=1;i<=end;i++)
            {
                $("#test").html("執行js"+i);
            }
        </script>
        <link rel="stylesheet" type="text/css" href="css/renderA.css">
    </body>
</html>html

在css文件引入的前面寫了段耗時較長的js代碼，目的就是想檢驗一下css未引入時，兩個瀏覽器渲染頁面有什麼不一樣，而後我作了件看起來可有可無的事，將這個頁面部署在tomcat server裏，再啓動tomcat，在瀏覽器裏查看渲染效果，看起來有點畫蛇添足，可是不這樣作的話，firefox瀏覽器控制檯下面的網絡欄看不到文件加載的具體詳情，這個我還沒找到爲啥，先去查查資料吧。好了，啓動server，在瀏覽器裏查看渲染效果。java

先看看在chrome 裏的渲染效果（我這裏沒安裝chrome瀏覽器，用的是360瀏覽器，並切換至多標籤模式，這模式就是使用chrome瀏覽器的內核，吐槽：該死的瓜子二手車，尼瑪這廣告無處不在）。jquery

能夠看到renderA.css文件處於pending狀態，寫的樣式chrome

body {
background-color: navy;
color:#ffffff;瀏覽器

}tomcat

也暫時未生效，可是img圖片和文字是先加載出來了的，隨後，在那個超長的for循環完成以後，css文件加載上來了，渲染生效了網絡

同時，我在firefox裏也作了實驗，先輸入地址，看到效果倒是這樣子的測試

由於那段for循環未執行完，css也未加載上來，整個html未讀取完，因此網頁內容仍然是設置的默認頁面，除了個jquery文件處於pending狀態，什麼都沒有加載上來，頁面上什麼都沒有，仍是原來的默認頁面內容。

隨後，js那段for循環執行完畢，css加載完畢，html讀取完畢，才渲染整個頁面。

看到了區別，大體總結了一下chrome和firefox瀏覽器渲染的不一樣：

一、chrome無論html讀取完沒有，老是有一個預加載的，img圖片或者其餘元素都是預先加載上來了的，雖然樣式有點醜；

firefox沒有這個預加載的過程，中規中矩的等待整個html文件讀取完畢，再行加載各元素。

二、chrome渲染雖然也是等整個html文件讀取完畢，再行渲染，可是它的預加載爲他加分很多，這樣子作的缺點在於有一個超級醜的展現過程，看着難受；

firefox雖然沒有這個預加載，沒有那個特醜的展現過程，只要渲染完畢，展現給用戶的就是一個好看的有樣式的頁面，可是缺點在於若是這一下渲染的東西過多，或者同時還要下發請求查詢數據什麼的，瀏覽器壓力恐怕有些大，尤爲是部分較低版本的firefox瀏覽器穩定性並很差，這時候有掛掉的可能。

固然也有共同點：

一、js腳本執行阻塞了頁面的渲染；

二、樣式的渲染都是css文件加載完以後纔開始的；

大體就寫這兒多吧，關於瀏覽器渲染差異的探討還要繼續，加油本身！

相關文章

相關標籤/搜索

瀏覽器渲染原理

瀏覽器渲染原理及流程

瀏覽器兼容

網絡瀏覽器

圖片瀏覽器

谷歌瀏覽器

瀏覽器信息

XLink 和 XPointer 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<