html頁面-浏覽器加載順序

1.浏覽器加載和渲染html的順序

1、IE下載下傳的順序是從上到下，渲染的順序也是從上到下，下載下傳和渲染是同時進行的。 2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載下傳完成（并不是說所有相關聯的元素都已經下載下傳完） 3、如果遇到語義解釋性的标簽嵌入檔案（JS腳本，CSS樣式），那麼此時IE的下載下傳過程會啟用單獨連接配接進行下載下傳。 4、并且在下載下傳後進行解析，解析過程中，停止頁面所有往下元素的下載下傳。阻塞加載 5、樣式表在下載下傳完成後，将和以前下載下傳的所有樣式表一起進行解析，解析完成後，将對此前所有元素（含以前已經渲染的）重新進行渲染。 6、JS、CSS中如有重定義，後定義函數将覆寫前定義函數

2. JS的加載

2.1 不能并行下載下傳和解析（阻塞下載下傳） 2.2 當引用了JS的時候，浏覽器發送1個js request就會一直等待該request的傳回。因為浏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，浏覽器為了防止出現JS修改DOM樹，需要重新建構DOM樹的情況，是以 就會阻塞其他的下載下傳和呈現.

3.如何加快HTML頁面加載速度

1，頁面減肥 頁面的肥瘦是影響加載速度最重要的因素 删除不必要的空格、注釋 将inline的script和css移到外部檔案 可以使用HTML Tidy來給HTML減肥，還可以使用一些壓縮工具來給JavaScript減肥 2，減少檔案數量 減少頁面上引用的檔案數量可以減少HTTP連接配接數 許多JavaScript、CSS檔案可以合并最好合并，人家财幫子都把自己的JavaScript. functions和Prototype.js合并到一個base.js檔案裡去了 3，減少域名查詢 DNS查詢和解析域名也是消耗時間的，是以要減少對外部JavaScript、CSS、圖檔等資源的引用，不同域名的使用越少越好 4，緩存重用資料 使用緩存吧 5，優化頁面元素加載順序 首先加載頁面最初顯示的内容和與之相關的JavaScript和CSS 然後加載DHTML相關的東西 像什麼不是最初顯示相關的圖檔、flash、視訊等很肥的資源就最後加載 6，減少inline JavaScript的數量 浏覽器parser會假設inline JavaScript會改變頁面結構，是以使用inline JavaScript開銷較大 不要使用document.write()這種輸出内容的方法，使用現代W3C DOM方法來為現代浏覽器處理頁面内容 7，使用現代CSS和合法的标簽 使用現代CSS來減少标簽和圖像，例如使用現代CSS+文字完全可以替代一些隻有文字的圖檔 使用合法的标簽避免浏覽器解析HTML時做“error correction”等操作，還可以被HTML Tidy來給HTML減肥 8，Chunk your content 不要使用嵌套tables <table>   <table>     <table>       ..     <table>   <table> <table> 而使用非嵌套tables或者divs <table>...</table> <table>...</table> <table>...</table> 将基于大塊嵌套的tables的layout分解成小tables，這樣顯示時不用加載整個頁面(或大table)的内容 9，指定圖像和tables的大小 如果浏覽器可以立即決定圖像或tables的大小，那麼它就可以馬上顯示頁面而不要重新做一些布局安排的工作 這不僅加快了頁面的顯示，也預防了頁面完成加載後布局的一些不當的改變 image使用height和width table使用table-layout: fixed并使用col和colgroup标簽指定columns的width 10，根據使用者浏覽器明智的選擇政策 IE、Firefox、Safari等等等等 11，頁面結構的例子 · HTML     · HEAD         · LINK ...         CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.         · SCRIPT. ...         JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.         Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.     · BODY     · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.         · SCRIPT. ...         Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.         Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.         If any images are used for rollover effects, you should preload them here after the page content has downloaded.

4.HTML頁面加載和解析流程

1.使用者輸入網址（假設是個html頁面，并且是第一次通路），浏覽器向伺服器送出請求，伺服器傳回html檔案；  2.浏覽器開始載入html代碼，發現＜head＞标簽内有一個＜link＞标簽引用外部CSS檔案；  3.浏覽器又發出CSS檔案的請求，伺服器傳回這個CSS檔案；  4.浏覽器繼續載入html中＜body＞部分的代碼，并且CSS檔案已經拿到手了，可以開始渲染頁面了；  5.浏覽器在代碼中發現一個＜img＞标簽引用了一張圖檔，向伺服器送出請求。此時浏覽器不會等到圖檔下載下傳完，而是繼續渲染後面的代碼；  6.伺服器傳回圖檔檔案，由于圖檔占用了一定面積，影響了後面段落的排布，是以浏覽器需要回過頭來重新渲染這部分代碼；  7.浏覽器發現了一個包含一行Javascript代碼的＜script＞标簽，趕快運作它；  8.Javascript腳本執行了這條語句，它指令浏覽器隐藏掉代碼中的某個＜div＞ （style.display=”none”）。杯具啊，突然就少了這麼一個元素，浏覽器不得不重新渲染這部分代碼；  9.終于等到了＜/html＞的到來，浏覽器淚流滿面……  10.等等，還沒完，使用者點了一下界面中的“換膚”按鈕，Javascript讓浏覽器換了一下＜link＞标簽的CSS路徑；  11.浏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大夥兒收拾收拾行李，咱得重新來過……”，浏覽器向伺服器請求了新的CSS檔案，重新渲染頁面。

5.Yahoo對網頁設計性能的建議，個人感覺是說得非常好的。

英文版：http://developer.yahoo.com/performance/rules.html

  中文翻譯：http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html

參考資料：

http://hideto.javaeye.com/blog/133384

http://blog.chinaacc.com/liuzhantao/blog/20100430-3015241029081.html http://renyongjie668.blog.163.com/blog/static/1600531201097062789/ 轉自：http://blog.sina.com.cn/s/blog_648738620100yumh.html