一直很好奇chrome和firefox這兩大瀏覽器的頁面渲染有什么不同，今天自己寫了些html代碼來做了下檢驗。
先做html編碼，代碼如下：
<!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>
在css文件引入的前面寫了段耗時較長的js代碼，目的就是想檢驗一下css未引入時，兩個瀏覽器渲染頁面有什么不同，然后我做了件看起來無關緊要的事，將這個頁面部署在tomcat server里，再啟動tomcat，在瀏覽器里查看渲染效果，看起來有點多此一舉，但是不這樣做的話，firefox瀏覽器控制台下面的網絡欄看不到文件加載的具體詳情，這個我還沒找到為啥，先去查查資料吧。好了，啟動server，在瀏覽器里查看渲染效果。
先看看在chrome 里的渲染效果（我這里沒安裝chrome瀏覽器，用的是360瀏覽器，並切換至多標簽模式，這模式就是使用chrome瀏覽器的內核，吐槽：該死的瓜子二手車，尼瑪這廣告無處不在）。
可以看到renderA.css文件處於pending狀態，寫的樣式
body {
background-color: navy;
color:#ffffff;
}
也暫時未生效，但是img圖片和文字是先加載出來了的，隨后，在那個超長的for循環完成之后，css文件加載上來了，渲染生效了
同時，我在firefox里也做了實驗，先輸入地址，看到效果卻是這樣子的
因為那段for循環未執行完，css也未加載上來，整個html未讀取完，所以網頁內容仍然是設置的默認頁面，除了個jquery文件處於pending狀態，什么都沒有加載上來，頁面上什么都沒有，還是原來的默認頁面內容。
隨后，js那段for循環執行完畢，css加載完畢，html讀取完畢，才渲染整個頁面。
看到了區別，大致總結了一下chrome和firefox瀏覽器渲染的不同：
1、chrome不管html讀取完沒有，總是有一個預加載的，img圖片或者其他元素都是預先加載上來了的，雖然樣式有點丑；
firefox沒有這個預加載的過程，中規中矩的等待整個html文件讀取完畢，再行加載各元素。
2、chrome渲染雖然也是等整個html文件讀取完畢，再行渲染，但是它的預加載為他加分不少，這樣子做的缺點在於有一個超級丑的展示過程，看着難受；
firefox雖然沒有這個預加載，沒有那個特丑的展示過程，只要渲染完畢，展示給用戶的就是一個好看的有樣式的頁面，但是缺點在於如果這一下渲染的東西過多，或者同時還要下發請求查詢數據什么的，瀏覽器壓力恐怕有些大，尤其是部分較低版本的firefox瀏覽器穩定性並不好，這時候有掛掉的可能。
當然也有共同點：
1、js腳本執行阻塞了頁面的渲染；
2、樣式的渲染都是css文件加載完之后才開始的；
大致就寫這兒多吧，關於瀏覽器渲染差別的探討還要繼續，加油自己！