請求優化首先我們來優化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

報紙版面截圖。