這兩天一直在看首屏優(yōu)化的文章，所以將其總結歸納一下，方便以后使用。
相對于移動端的首屏優(yōu)化，PC在有些方面要苛刻得多，主要是因為PC端有太多的東西想要讓用戶看到，這就
難免PC端的頁面大而“重”，與我們現(xiàn)在“富客戶端”的概念想相呼應。
本文目錄
一 什么是首屏？
以800x600像素尺寸為標準，當瀏覽器加載頁面后看到第一眼的顯示內容為首屏。而從開始加載到瀏覽器頁面顯示高度達到600像素且此區(qū)域有內容顯示的時間為首屏顯示時間。
以京東首頁為例：
當我們打開京東時，第一眼看到的內容即為首屏內容，也就是如上圖的內容。
二 為什么要做首屏優(yōu)化
一個頁面的“總加載時間”要比“首屏時間”長，但對于最終用戶體驗而言，當內容充滿首屏的區(qū)域時，用戶就可以看到網站的主要內容并可以進行各自的選擇了。首屏時間的快與慢，直接影響到了用戶對網站的認知度。
所以首屏時間的長短對于用戶的滯留時間的長短、用戶轉化率都尤為重要。
三 大公司是怎么做首屏優(yōu)化的
還是首先以京東為例：
當我們打開京東的網站（不要滾動鼠標和鍵盤），右鍵查看源代碼會發(fā)現(xiàn)京東首頁的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
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數(shù)據結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式