首先,頁面加載順序:
解析HTML結構。
加載外部腳本和樣式表文件。
解析并執行腳本代碼。
構造HTML DOM模型。
加載圖片等外部文件。
頁面加載完畢。
也就是:
html → head → title → #text(網頁標題) → style → 加載樣式 → 解析樣式 → link → 加載外部樣式表文件 → 解析外部樣式表 → script → 加載外部腳本文件 → 解析外部腳本文件 → 執行外部腳本 → body → div → script → 加載腳本 → 解析腳本 → 執行腳本 → img → script → 加載腳本 → 解析腳本 → 執行腳本 → 加載外部圖像文件 → 頁面初始化完畢。
JS 的初始化裝載。
**瀏覽器加載顯示html的順序**是按下面的順序進行的:
1、IE下載的順序是從上到下,渲染的順序也是從上到下,下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時,其上面的所有部分都已經下載完成(并不是說所有相關聯的元素都已經下載完)。
3、如果遇到語義解釋性的標簽嵌入文件(JS腳本,CSS樣式),那么此時IE的下載過程會啟用單獨連接進行下載。
4、并且在下載后進行解析,解析過程中,停止頁面所有往下元素的下載。
5、樣式表在下載完成后,將和以前下載的所有樣式表一起進行解析,解析完成后,將對此前所有元素(含以前已經渲染的)重新進行渲染。
6、JS、CSS中如有重定義,后定義函數將覆蓋前定義函數。
簡單地說,頁面渲染就是瀏覽器將html代碼根據CSS定義的規則顯示在瀏覽器窗口中的這個過程。先來大致了解一下瀏覽器都是怎么干活的:
> 1. 用戶輸入網址(假設是個html頁面,并且是第一次訪問),瀏覽器向服務器發出請求,服務器返回html文件;
> 2. 瀏覽器開始載入html代碼,發現標簽內有一個標簽引用外部CSS文件;
> 3. 瀏覽器又發出CSS文件的請求,服務器返回這個CSS文件;
> 4. 瀏覽器繼續載入html中部分的代碼,并且CSS文件已經拿到手了,可以開始渲染頁面了;
> 5. 瀏覽器在代碼中發現一個標簽引用了一張圖片,向服務器發出請求。此時瀏覽器不會等到圖片下載完,而是繼續渲染后面 的代碼;
> 6. 服務器返回圖片文件,由于圖片占用了一定面積,影響了后面段落的排布,因此瀏覽器需要回過頭來重新渲染這部分代碼;
> 7. 瀏覽器發現了一個包含一行Javascript代碼的標簽,趕快運行它;
> 8. Javascript腳本執行了這條語句,它命令瀏覽器隱藏掉代碼中的某個 (style.display=”none”)。杯具啊,突然就少了這么一個元素,瀏覽器不得不重新渲染這部分代碼;
> 9. 終于等到了的到來,瀏覽器淚流滿面……
> 10. 等等,還沒完,用戶點了一下界面中的“換膚”按鈕,Javascript讓瀏覽器換了一下標簽的CSS路徑;
> 11. 瀏覽器召集了在座的各位們,“大伙兒收拾收拾 行李,咱得重新來過……”,瀏覽器向服務器請求了新的CSS文件,重新渲染頁面。
http://blog.csdn.net/legend1988/article/details/7010793
http://www.jb51.net/article/44367.htm
********以上內容來自網絡********
- CSS知多少
- css知多少——目錄
- css知多少(1)——我來問你來答
- css知多少(2)——學習css的思路
- css知多少(3)——樣式來源與層疊規則
- css知多少(4)——解讀瀏覽器默認樣式
- css知多少(5)——選擇器
- css知多少(6)——選擇器的優先級
- css知多少(7)——盒子模型
- css知多少(8)——float上篇
- css知多少(9)——float下篇
- css知多少(10)——display
- css知多少(11)——position
- CSS深入理解
- HTML加載順序
- CSS網頁實戰案例
- CSS偽類選擇器
- 重溫css的選擇器
- CSS3的nth-child() 選擇器,表格奇偶行變色
- CSS選擇器演示
- 那些年踩過的坑之:first-child偽類選擇器
- CSS border-image
- CSS3 border-image詳解、應用及jQuery插件
- css3:border-image邊框圖像詳解
- CSS3 Border-image
- Flex布局
- Flex 布局教程:語法篇
- Flex 布局教程:實例篇
- Flex 布局示例