文件位置對性能大影響

高性能網站

 

1,css樣式表放在頂部比在尾部的優點:

    a.放在頂部能夠防止白屏和無樣式內容的閃爍---瀏覽器的內容都是逐步呈現,放在底部時,樣式變化帶來重繪,所以瀏覽器會阻塞內容逐步呈現,直至樣式表下載完畢.

    b.css加載方式:link優於import.一個style塊能夠包含多個@import規則,但@import規則必須放在因此規則以前;@import規則會致使組件下載時的無序性,可能致使樣式表最後下載.

    c.HTML規範: link只能出如今文檔的HEAD節點中,爲了兼容老舊頁面,放在head節點外仍然可以呈現.

 

 

2.js腳本

 

    a.腳本會阻塞其後內容的呈現

 

    b.腳本會阻塞其後組件的下載.

 

    c.延遲腳本(Defferred),defer屬性代表腳本不包含document.write,瀏覽器能夠一步加載(但有此屬性的腳本,必定能夠放在頁面的底部.),在ff中,此屬性不起做用,依然會阻塞.

 

       注:js,css代碼精簡,混淆;  gzip壓縮對代碼的 精簡最明顯.

======================

    d.然而這裏還有一個問題須要注意，對於外部腳本，還涉及到一個腳本下載的過程，在早期的瀏覽器中，JavaScript文件的下載不只會阻塞頁面的解析，甚至還會阻塞頁面其餘資源的下載(包括其餘JavaScript腳本文件、外部CSS文件以及圖片等外部資源)。從IE八、firefox3.五、safari4和chrome2開始容許JavaScript並行下載，同時JavaScript文件的下載也不會阻塞其餘資源的下載(舊版本中，JavaScript文件的下載也會阻塞其餘資源的下載)。

注：不一樣瀏覽器對於同一個域名下的最大鏈接數有不一樣的限制，HTTP1.1協議規範中的要求是不能高於2個，可是大多數瀏覽器目前實際提供的最大鏈接數都多於2個，IE6/7都是2個，IE8提高到了6個，firefox和chrome也是6個，固然這個設置也是能夠修改的，詳細內容能夠參考：http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

    e.所以正常狀況下，JavaScript腳本的執行順序也是從上到下的，即頁面上先出現的代碼或先被引入的代碼老是被先執行，即便是容許並行下載JavaScript文件時也是如此。注意咱們這裏標紅了"正常狀況下"，緣由是什麼呢？咱們知道，在HTML中加入JavaScript代碼有多種方式，

 

 

======================

 

緩存:

    1.內聯樣式和腳本沒法進行緩存,可是內聯的內容加載速度相對更快.所以,適合使用內聯方式的例子是主頁;

 

    2.experie,cache-control

 

    3.dns解析:  Keep-Alive很重要,默認狀況下,一個持久的TCP鏈接將會一直使用,直到其空閒1分鐘爲止.因爲連接是持久的,所以無需DNS重複查找.

 

    4. 200(From cache)是直接點擊連接訪問，輸入網址按回車訪問觸發(這兩種狀況都不會有Etag)；
    304(Not Modified)是刷新頁面時觸發，或是設置了長緩存、或當Etag沒有移除時觸發。

先說說304
當你第一次請求一個資源的時候，server會同時生成並返回一個字符串在響應頭裏，叫Etag。
瀏覽器接到資源後，緩存資源的同時也會把這個Etag保存下來，成爲If-None_Match 。Etag能夠看做是一個資源的惟一標識，當你第二次請求這個資源的時候，請求頭裏會帶着這個Etag,server會拿server該資源如今的Etag跟請求頭中的If-None_Match作對比，而後看看If-Modified-Since過沒過時，若是同樣，直接告訴他：你就用本地的吧，我沒變，就不給你返回了。因此返回了304，304就是這樣。

再說說200 From Cache 這個雖然是200，但他根本就沒有跟server作交互，直接拉的本地緩存。 上邊已經說了From Cache的觸發條件，但若是想一直持續From Cache不想304怎麼辦？ 能夠在Server端配置移除Etag.