袁青旺
淘寶和天貓平臺作為國際電商領域的標杆，其平臺架構也一直受到眾多開發者的關注。要知道，在巨大的流量下，頁面中的任何細節都可能給網站帶來很大的影響。那麼淘寶和天貓首頁做了哪些特殊的優化處理使得其能應付龐大的流量衝擊呢？下面我來帶大家分析學習一下。
圖片惰性加載
淘寶和天貓作為商城平臺，網站上的圖片資源很多，如果這些圖片資源都是一次性加載的那就會造成服務器帶寬浪費，另外也嚴重影響了網站打開的速度。所以它們對圖片都是使用惰性加載的，即只顯示當前屏幕可視範圍之內的圖片，非屏幕可視範圍的圖片不顯示（顯示了也沒人看），這樣所有的圖片資源就是按需加載的，使得網站打開速度很快。
靜態資源使用獨立域名部署訪問（動靜分離）
將動態請求和靜態請求以不同域名的形式來做請求分流，這樣做的好處就是可以針對性進行優化。比如說靜態資源放在一臺服務器上部署，這臺服務器並不要求計算能力多強，重點要求的是硬盤容量大、讀寫速度快；動態程序則放在計算性能高的服務器上部署。
另外一方面，雖然現在主流瀏覽器眾多，但每款瀏覽器對於靜態資源請求也是有併發數限制的，使用不同域名可以分散這個併發數的限制，使得同一時間內可以並行請求更多的資源，從而加快渲染速度。
CDN加速
CDN是內容分發網絡，CDN技術通過部署在全國各地的Cache節點使得訪客可以“就近讀取”所需的資源。什麼意思呢？比方說淘寶的主服務器在北京，那江蘇省用戶訪問淘寶網站上的一些靜態資源並不是從北京那臺服務器獲取的，而是從江蘇省的某臺Cache服務器裡讀取的，這樣請求速度極快。
DNS預解析（DNS Prefetch）
上面說到了靜態資源可以使用多個域名來部署訪問，其實這樣做也會帶來另外的性能問題，那就是頁面中請求的域名過多，DNS解析也是存在時間開銷的。所以我們可以通過DNS Prefetch技術來緩存域名解析結果，減少DNS查詢次數，從而加快頁面解析速度。
目前主流瀏覽器支持DNS Prefetch，只需要在HTML源碼裡添加一個link標籤即可，如下圖示：
使用內嵌樣式
如果看過淘寶網站的HTML源碼後會發現，淘寶將主要的CSS樣式是直接寫在HTML頁面裡的，而不是使用外鏈的方式引入CSS的。
這樣做有什麼好處呢？主要有以下幾點：
減少了請求次數
避免了樣式加載失敗造成的頁面亂版
請求合併
對於一個大型網站而言，要使用的CSS及JS等文件是很多的，如果每個CSS和JS都是單獨加載的，那帶來的問題就是請求數過多。
所以就有了請求合併的優化措施，通過服務器端技術，我們可以將多個請求合併輸出，這樣請求數只算一次，大大減少了請求次數，頁面渲染速度更快。
我們看到淘寶的很多JS都是以一個
