這兩天一直在看首屏優化的文章，所以將其總結歸納一下，方便以后使用。
相對於移動端的首屏優化，PC在有些方面要苛刻得多，主要是因為PC端有太多的東西想要讓用戶看到，這就難免PC端的頁面大而“重”，與我們現在“富客戶端”的概念想相呼應。
本文目錄
一 什么是首屏？
以800x600像素尺寸為標准，當瀏覽器加載頁面后看到第一眼的顯示內容為首屏。而從開始加載到瀏覽器頁面顯示高度達到600像素且此區域有內容顯示的時間為首屏顯示時間。
以京東首頁為例：
當我們打開京東時，第一眼看到的內容即為首屏內容，也就是如上圖的內容。
二 為什么要做首屏優化
一個頁面的“總加載時間”要比“首屏時間”長，但對於最終用戶體驗而言，當內容充滿首屏的區域時，用戶就可以看到網站的主要內容並可以進行各自的選擇了。首屏時間的快與慢，直接影響到了用戶對網站的認知度。
所以首屏時間的長短對於用戶的滯留時間的長短、用戶轉化率都尤為重要。
三 大公司是怎么做首屏優化的
還是首先以京東為例：
當我們打開京東的網站（不要滾動鼠標和鍵盤），右鍵查看源代碼會發現京東首頁的DOM樹出奇的簡單，頁面DOM中多含有mod_lazyload的類
<div class="J_f J_lazyload J_f_lift mod_lazyload need_ani chn" id="portal_8" data-backup="basic_8" data-source="cms:basic_8" data-tpl="portal_tpl">
再看下 localstorage
尤其是觀察location下面的鍵值對，會發現它們的值中多存在一串完整的類似於html的內容(內容太多刪除了值中的內容)
由上面的結構我們可知jd.com已經將它們的頁面結構放到了localstorage，不難想象這只是它頁面中的其中一個模塊的內容
分析到這里已經很明顯了，通過前端緩存和異步加載jd已經完美的實現了首屏快速加載，在PC端達到了秒開的級別。
把需要請求的路徑寫在 dom 上（例如:data-tpl="elevator_tpl"），用戶滾動時，一旦該模塊進入了視窗，則請求 dom 上對應的 data-tpl 地址，拿到渲染這個模塊所需要的腳本和數據，不過這中間還有一層本地緩存 localstorage，如果在本地緩存中匹配到了對應的 hash string 內容，則直接渲染，否則請求到數據之后更新本地緩存。localstorage中的 version 會在頁面加載時候，與后端文件 hash相對比，hash不變直接取localstorage中的內容（當然也可以使用cookie判斷版本）。
這里其實存在兩個請求，一個請求是加載數據和腳本，而這里的內容是：
為啥不在返回的內容中直接把腳本也輸出出來？為了讓數據充分緩存下了不少功夫。數據的變化頻率比較高，如果數據和初始化腳本包裝在一起，雖然節約了一個請求，但一旦數據變化，整個腳本都得重新加載，而將數據和腳本分離，腳本可以長期緩存在本地，單獨請求數據，這個量會小很多。直接改變上面的 version 版本號便可以讓瀏覽器重新請求最新腳本。
從上面可以看出，任何一個模塊的改動，在前端只會引起一個較小的加載變化，加上 http 的緩存策略，服務器的壓力也是很小的。
四 還需要注意些什么？
看了上面的內容相信大家對於京東關於首屏優化的方案有了一個大體的了解，下面我們再整理一下關於首屏顯示速度優化細節上的內容:
css靜態文件在哪里？
為了求快，首頁是沒有css外鏈的，這樣會再發起多次請求，相信對於我們來說，也是老生常談的前端優化了。
那有人可能會問沒有css外鏈，那如果一整個頁面的css是否會增加頁面的體積？其實上面就已經提到了，頁面切分為模塊化加載，對應模塊下的css交給js或jsonp請求返回
js文件怎么加載？
京東采用請求的方式減少了與服務器交互的時間
<script src="//misc.360buyimg.com/??/jdf/lib/jquery-1.6.4.js,/jdf/2.0.0/ui/ui/1.0.0/ui.js,/mtd/pc/index/gb/lib.min.js,/mtd/pc/base/1.0.0/base.js,/mtd/pc/common/js/o2_ua.js,/mtd/pc/index/home/index.min.js,/mtd/pc/index/home/init.min.js"></script>
js如何執行？
懶執行，有交互才執行，有興趣的可以看看小胡子哥的淘寶首頁性能優化實踐這篇文章
圖片如何處理？
圖片在其他屏（非首屏）都采用懶加載的模式，這樣既能節省流量，也能減少請求數或延遲請求數。
服務器需要做什么？
- 少量靜態文件的域名，圖片與iconfont均是放在同一個域下，減少DNS的解析事件，最好做到域名收斂。
- 模塊化接口的支持。
- 首屏內容最好做到靜態緩存。
以上基本上便是最近整理的一些內容，還有很多我們前端開發應該注意像script標簽的位置啊，div的嵌套深度啊等我們開發本身應該具備中的就不多說了。正所謂“一如前端深似海”。。。