【】往往隻是当前当前局部網頁

請求優化首先我們來優化HTTP請求數由於用戶瀏覽的刷新刷新 ，往往隻是当前当前局部網頁，所以隻加載用戶可視範圍內的页面页面样也資源，就會減少一些不必要的白屏請求，也會減少瀏覽器加

喜歡的可以收藏轉發加關注現在許多公司往往注重後端優化，而忽略了前端優化想想如果辛苦優化了服務器，当前当前後台，页面页面样也排查了sql ，白屏卻在最後頁麵加載展示的刷新刷新時候很慢，也得不償失其實
，当前当前前後台優化都是页面页面样也相輔相成的後台優化好了，響應請求速度快，白屏前台展示的刷新刷新更迅速 ，前台優化了不必要的当前当前請求，後台壓力也會更小
。页面页面样也

請求優化首先我們來優化HTTP請求數由於用戶瀏覽的 ，往往隻是局部網頁，所以隻加載用戶可視範圍內的資源 ，就會減少一些不必要的請求 ，也會減少瀏覽器加載資源的消耗考慮到移動端可視範圍，網絡流量 ，性能，延遲加載作用尤為明顯

圖片延遲加載適合延遲加載的東西很多，最需要的當然是圖片圖片延遲加載的原理就首先將要延遲加載的圖片src替換為空白圖片或者參數指定的loading圖然後根據當前元素的位置(offset)來判斷是否在頁麵可視範圍(頁麵寬/高度+滾動寬/高度) 。

如果在
，就將真實圖片資源路徑替換回src讓瀏覽器加載防止瀏覽器解析到HTML中標簽的src屬性就開始下載資源 ，最好將原的src屬性去掉統一配置lazyload的參數去加載loading圖吧,如我們項目中這樣：

$(".main_content img").lazyload({ placeholder: "/images/loading.gif", threshold:200 }); 再來看到lazyload的源代碼，可視範圍判斷上下左右,寫的十分完善

$.belowthefold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); } else { fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.width() + $window.scrollLeft(); } else { fold = $(settings.container).offset().left + $(settings.container).width(); } return fold = $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollLeft(); } else { fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; $.inviewport = function(element, settings) { return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); };

關於圖片這裏 ，除了延遲加載外，用戶上傳的圖片以及我們所用的資源圖片都應該進行壓縮處理如需要進一步提高壓縮率，可以使用例如
：google開發的webp圖片格式等..不過不是所有瀏覽器都支持webp格式，需要針對瀏覽器響應

ajax局部加載數據根據上麵這段代碼
，其實我們就可以延遲加載其他內容了，總之呢，這裏我們的目的就是盡量減少不必要的請求比如現在用的很多的下拉式翻頁，就是判斷到頁麵底部之後再ajax獲取下頁內容如果考慮到網頁隻是局部更新的話 ，那使用ajax是很合適的

好處顯而易見
，無需重新請求整頁 ，小巧快速，網頁展示也友好一些善用ajax對前端性能，體驗都是有改善的但是也要考慮到對搜索引擎的友好
，如果頁麵整體功能改變了，或者頁麵改動量大就要進行取舍了預加載延遲加載的目的就是減少不必要的請求，在用戶有需求時才請求資源。

所以對於用戶來說 ，其實是有一點點“等待”的過程的一般會用loading圖，等待文字來改善這裏的用戶體驗但是有一些需求是希望盡量少出現這種“等待”過程的這裏我們就可以預加載資源 ，如下，我們先在js中加載圖片

var img = new Image(); img.src="test.png"; 提前加載好了圖片
，用戶進行下一步時，圖片則是從瀏覽器緩存中獲取多頁數據也可以類似處理  ，頁麵初始可以默認加載兩頁數據翻到第二頁時，就ajax去獲取第三頁內容

翻到第三頁時 ，就去獲取第四頁內容……總是提前預加載一頁數據如此可一定程度上減少一些等待的過程總的來說延遲加載是盡量少加載資源，預加載則是判斷可能要的資源  ，盡量去提前多加載，都是為了優化用戶的體驗，適用於不同場景

資源合並我們項目內往往會引用多個javascript腳本
，和多個css樣式文件所以可以把多個腳本合並到一個js文件內 ，然後統一引用它就能減少http請求這裏uglify-js和 clean-css 都支持多個文件合並壓縮輸出

>uglifyjs js1.js js2.js -m -o merge.js >cleancss -o megar.css style1.css style2.css 也可以在服務器內合並輸出 ，比如我們看淘寶的合並：

他們則是在web服務器內做了處理，請求多個文件
，會自動合並有條件的同學也可以這樣進行合並引用優化引用css放在內 ，引用js放在結束標簽前，現在很多朋友都會這麽做了css加載是異步的
，更早的加載出樣式就能更早呈現出頁麵

js放在尾部，防止瀏覽器加載js而阻塞頁麵
，造成頁麵“白屏”現象單獨域名存放資源如果有條件的話 ，我們還可以啟用額外的服務器 ，域名來存放資源這樣能減少主域名的HTTP請求數，讓主服務器更快響應請求還能減少主域名的cookie請求

離線存儲離線存儲在我之前一篇文章裏也提到過，在移動端應用的比較多它和緩存不同 ，它設置好了之後，連離線也能訪問 ，無論用戶刷新或者新窗口，鏈接等等使用manifest

在html上添加manifest，其中文件格式內容如 ：CACHE MANIFEST ##需要離線的內容 CACHE: Script/jquery.js Script/gameconfig.js Image/home.png Image/logo.png ##總是訪問網絡的內容 NETWORK: * ##訪問A失敗時訪問B FALLBACK

瀏覽器將緩存chache內所有的內容
，並且可以離線訪問
，隻要文件發生任何改變都將會重新讀取並刷新全部緩存 ，所以更改注釋是個更新緩存的好方法這裏要注意的是1 ，添加了manifest的當前網頁也會被緩存 所以推薦的方式是頁麵緩存，頁麵動態內容全部用ajax獲取，所以在移動網站項目設計開始就要注意這個問題

2，頁麵中添加iframe 然後子頁麵引用manifest想達到緩存資源而不緩存當前頁麵內容，是無效的本地存儲localStorage本地存儲數據一直是網頁端的弱項 ，在沒有HTML5的localStorage前 ，用cookie可以保存一點數據 。

但付出的代價很大
，cookie能保存的數據很少，並且它會伴隨著每一次請求一起發送localStorage就好多了  ，默認5MB的大小，除非用戶手動清除 ，否則一直不過期
，就連IE8瀏覽器都支持這裏要注意，localStorage和cookie一樣受到跨域的限製

可以使用domain控製document.domain=""； css3替換js動畫在js中，我們實現動畫，就是利用定時器循環改變dom元素的屬性來達到動畫效果但是許多屬性更改之後會造成瀏覽器重繪 ，增加性能消耗

當然瀏覽器更新換代也做了許多優化，我們優化js ，css減少重繪，也能改進動畫性能但是想一想，究竟應不應該讓js去實現頁麵動畫呢？css3就是往這方麵發展 ，讓js更純粹的去實現業務邏輯頁麵效果之類的事情就讓css去做吧

並且css3在動畫效率上麵也有增強，瀏覽器會單獨處理css3動畫
，不占用js主線程，還可以硬件加速將來還有提升的可能 
，所以快把我們的js動畫替換為css3吧 ！替換flash同樣更迭的還有flash ，當初flash是為了彌補網頁展現的不足而出現的“插件”

而現在網頁標準一次次升級 ，html5的出現，再加上flash自身也有各種漏洞 ，性能問題尤其是現在flash在移動端的支持很少，都加快了我們替換flash的步伐學習前端的夥伴可以私信回複小編“前端”領取全套免費前端學習資料 、視頻

免責聲明：本站所有信息均搜集自互聯網 ，並不代表本站觀點，本站不對其真實合法性負責
。如有信息侵犯了您的權益，請告知
，本站將立刻處理。聯係QQ：1640731186