提高網頁訪問速度

前端技術的逐漸成熟，還衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技術。這些技術的出現和大量使用都和併發資源數有關。

 

• 按照普通設計，當網站cookie信息有1 KB、網站首頁共150個資源時，用戶在請求過程當中須要發送150 KB的cookie信息，在512 Kbps的常見上行帶寬下，須要長達3秒左右才能所有發送完畢。 儘管這個過程能夠和頁面下載不一樣資源的時間併發，但畢竟對速度形成了影響。 並且這些信息在js/css/images/flash等靜態資源上，幾乎是沒有任何須要的。 解決方案是啓用和主站不一樣的域名來放置靜態資源，也就是cookie free。
• 將css放置在頁面最上方應該是很天然的習慣，但第一個css內引入的圖片下載是有可能堵塞後續的其餘js的下載的。而在目前廣泛過百的整頁請求數的前提下，瀏覽器提供的僅僅數個併發，對於進行了良好優化甚至是前面有CDN的系統而言，是極大的性能瓶頸。 這也就衍生了domain hash技術來使用多個域名加大併發量（由於瀏覽器是基於domain的併發控制，而不是page），不過過多的散佈會致使DNS解析上付出額外的代價，因此通常也是控制在2-4之間。 這裏常見的一個性能小坑是沒有機制去確保URL的哈希一致性（即同一個靜態資源應該被哈希到同一個域名下），而致使資源被屢次下載。
• 再怎麼提速，頁面上過百的總資源數也仍然是很可觀的，若是能將其中一些不少頁面都用到的元素如經常使用元素如按鈕、導航、Tab等的背景圖，指示圖標等等合併爲一張大圖，並利用css background的定位來使多個樣式引用同一張圖片，那也就能夠大大的減小總請求數了，這就是css sprites的由來。
• 全站的js/css本來並很少，其合併技術的產生倒是有着和圖片不一樣的考慮。 因爲cs/js一般可能對dom佈局甚至是內容形成影響，在瀏覽器解析上，不連貫的載入是會形成屢次從新渲染的。所以，在網站變大須要保持模塊化來提升可維護性的前提下，js/css combine也就天然衍生了，同時也是minify、compress等對內容進行多餘空格、空行、註釋的整理和壓縮的技術出現的緣由。
• 隨着cookie free和domain hash的引入，網站總體的打開速度將會大大的上一個臺階。 這時咱們一般看到的問題是大量的請求因爲全站公有header/footer/nav等關係，其對應文件早已在本地緩存裏存在了，但爲了確保這個內容沒有發生修改，瀏覽器仍是須要請求一次服務器，拿到一個304 Not Modified才能放心。 一些比較大型的網站在創建了比較規範的發佈制度後，會將大部分靜態資源的有效期設置爲最長，也就是Cache-Control max-age爲10年。 這樣設置後，瀏覽器就不再會在有緩存的前提下去確認文件是否有修改了。 超長的有效期可讓用戶在訪問曾訪問過的網站或網頁時，得到最佳的體驗。 帶來的複雜性則體如今每次對靜態資源進行更新時，必須發佈爲不一樣的URL來確保用戶從新加載變更的資源。
• 即便是這樣作完，仍然還存在着一個很大的優化空間，那就是不少頁面瀏覽量很大，但其實用戶直接很大比例直接就跳走了，第一屏如下的內容用戶根本就不感興趣。 對於超大流量的網站如淘寶、新浪等，這個問題尤爲重要。 這個時候通常是經過將圖片的src標籤設置爲一個loading或空白的樣式，在用戶翻頁將圖片放入可見區或即將放入可見區時再去載入。 不過這個優化其實和併發資源數的關係就比較小了，只是對一些散佈不合理，或第一頁底部的資源會有必定的幫助。 主要意圖仍是下降帶寬費用。
• 瀏覽器併發數