前端性能優(yōu)化(四)-網(wǎng)頁加載更快的N種方式

站前端的用戶體驗，決定了用戶是否想要繼續(xù)使用網(wǎng)站以及網(wǎng)站的其他功能，網(wǎng)站的用戶體驗佳，可留住更多的用戶。除此之外，前端優(yōu)化得好，還可以為企業(yè)節(jié)約成本。那么我們應該如何對我們前端的頁面進行性能優(yōu)化呢？

前端性能優(yōu)化可以分為三個方面：接口訪問優(yōu)化、靜態(tài)資源優(yōu)化和頁面渲染速度優(yōu)化。

一、接口訪問優(yōu)化

1.1、減少http請求，合理設置 HTTP緩存

http協(xié)議是無狀態(tài)的應用層協(xié)議，每次發(fā)送http請求時，都需要建立連接、通信、斷開連接，在服務器端每個http都需要開啟獨立的線程去處理。所以盡量減少http請求，盡可能地提高訪問性能。

減少http請求的方法：

合并 js、css、圖片等文件，合并成一個文件，瀏覽器就只需請求一次就可以了。圖片合并要適當，不能想著優(yōu)化呢，盲目地都合并成一張圖片。
借用瀏覽器緩存。恰當?shù)木彺嬖O置可以大大減少http請求。不懂瀏覽器緩存的可參考《瀏覽器九大緩存方法》。
接口合并。前端交互，經(jīng)常需要請求多個并行或串行接口，此時可以通過接口合并方式，提高接口訪問速度。
能使用css的盡量不使用js，能使用js的盡量不用三方插件，避免三方插件大量的庫。

1.2、減少cookie傳輸

cookie 存在于 http 頭，在客戶端與服務器之間交換，盡可能地控制 cookie 的大小，cookie越小，響應速度越快，減少 cookie 傳輸，響應速度更快。

1.3、使用CDN提供靜態(tài)文件

使用 CDN 可以更快地在全球范圍內(nèi)獲取到你的靜態(tài)文件，加快網(wǎng)頁加載。

1.4、啟用 GZIP 壓縮

http 協(xié)議上 GZIP 編碼，是一種用來改進 web 應用程序的。開啟 GZIP 后，服務器會把網(wǎng)頁內(nèi)容壓縮后傳輸，一般能壓縮到原大小40%，這樣網(wǎng)頁傳輸速度就更快了。GZIP 有兩大好處：一是減少存儲空間，二是通過網(wǎng)絡傳輸文件時，可以減少傳輸時間。

1.5、分域存放資源

HTTP 客戶端一般對同一個服務器的并發(fā)連接個數(shù)都是有限制的，通常最大并行連接為四了，剩下的會進入等待隊列，等前邊的執(zhí)行完畢，等待的才會執(zhí)行。所以利用多域名主機存放資源，增加并行連接量，縮短資源加載時間。

1.6、減少頁面重定向

開啟 https 可以有效防范攻擊，保證用戶始終訪問到網(wǎng)站的加密連接，保護數(shù)據(jù)安全，同時省去 301/302 跳轉(zhuǎn)的時間，大大提升網(wǎng)站的安全系數(shù)和用戶體驗。

如果在網(wǎng)站設置當用戶訪問域名的時候強制 https 進行 301 或者 302 跳轉(zhuǎn)，但是這個過程中，用到 HTTP 因此容易發(fā)生劫持，受到第三方的攻擊。所以盡可能使用https安全。

1.7、避免使用iframe

iframe 相當于本頁面又嵌套了一個頁面，消耗性能，還要加載嵌套頁面的資源，所以更消耗時間。

1.8、借用瀏覽器緩存

ajax 請求到的數(shù)據(jù)，可以緩存到瀏覽器，下次使用的時候無需再次獲取，直接取緩存數(shù)據(jù)就可以。這個會根據(jù)具體的項目來做，比如常用的角色類型就會緩存，獲取到的普通數(shù)據(jù)為了保證實時性，不能使用緩存。

二、靜態(tài)資源優(yōu)化

2.1、壓縮 html、css、js 等文件

刪除不必要的空格、注釋和中行，減少文件大小，顯著減少用戶下載時間，加快網(wǎng)頁加載速度。可以直接使用壓縮工具，可以自動刪除所有不必要內(nèi)容。

2.2、在 js 之前引用 css

這是一個小細節(jié)，js 執(zhí)行的時候會進入阻塞，如果放入 js 之后加載，會等待 js 執(zhí)行完成之后才能加載 css，渲染頁面，此時就會出現(xiàn)布局錯亂。所以 css 文件需要非阻塞引入，以防DOM 花費更多時間才能渲染。

2.3、非阻塞 js

js 會阻止 html 文檔的正常解析，當解析器到達 script 標記時，它會停止解析并執(zhí)行腳本。所以我們經(jīng)常把 script 引入的 js，放到 html 中最底下。如果需要讓腳本位于頁面頂部，建議添加非阻塞屬性。經(jīng)常使用 defer 和 async 來異步加載js文件。

<!--  使用defer  -->
<script defer src="foo.js" ></script>
<!--   使用async  -->
<script async src="foo.js"></script>

2.4、圖片壓縮

最常見的就是 css 雪碧，就是將很多很多的小圖標放在一張圖片上，就稱為雪碧圖。雪碧圖最大優(yōu)點就是可以減少http請求，除此也能壓縮圖片文件大小。使用的時候，通過設置 background-position ，移動圖片的位置。除此之外，網(wǎng)站用到的大圖，也需要在保證圖片質(zhì)量前提下優(yōu)化到最小。

2.5、矢量圖替代位圖

矢量圖（SVG）往往比圖像小很多，縮放的時候不失真，這些圖像還可以通過 css 進行動畫和修改，比位圖方便控制。可以的話，盡量用矢量圖多點。

2.6、js代碼相關優(yōu)化

盡量減少使用閉包，因為閉包所在的上下文不會被釋放。
js避免嵌套循環(huán)和死循環(huán)，一旦遇到死循環(huán)，瀏覽器會卡死。
在js封裝過程中，盡量做到低耦合高內(nèi)聚。減少頁面的冗余代碼。
盡量減少遞歸，避免死遞歸。
盡量使用window.requestAnimationFrame替代傳統(tǒng)的定時器。

三、頁面渲染速度

3.1、懶加載

素材類的網(wǎng)站，頁面一屏展示很多圖片，而且圖片還不能失真，圖片加載太多，網(wǎng)頁加載慢得很，所以就引用懶加載，只加載可視區(qū)的圖片，避免加載可以能不需要或不必要的圖像。改善頁面的響應時間。

3.2、避免響應式布局

響應式網(wǎng)站雖然能夠兼容所有終端設備，但是會出現(xiàn)隱藏部分無用內(nèi)容，浪費帶寬，加載時間還長，頁面的渲染時間也長。想更多了解響應式布局，請點擊《前端響應式布局為什么是個坑？》。

3.3、設置大小，避免重繪

遇到 img 標簽，會立馬發(fā)送一個 http 請求，下載圖片，頁面繼續(xù)向下渲染，等圖片加載成功了，發(fā)現(xiàn)圖片的寬高大小發(fā)生變化，影響后邊排版，所以頁面會重新再繪制一次這部分。所以盡可能設置圖片的大小。

3.4、減少DOM元素

解析 html 內(nèi)容，將標簽轉(zhuǎn)化為DOM節(jié)點，之后再解析其他文件，DOM元素越少，也就是標簽越少，文件轉(zhuǎn)化得越快，加載速度也就快了。

3.5、減少 Flash 的使用

flash 文件比較大，加載起來耗時。除此，flash 插件還需要運行才能運行，最主要有些瀏覽器flash插件馬上要下線了，建議盡量不用 flash。

3.6、文件順序

css文件放在最頂部，優(yōu)先渲染。js放在最底部，避免阻塞。

讓網(wǎng)頁如何加載更快，有好多的細節(jié)，還是要好好提升自己的技能~~~~~~~~~

點個關注！更多分享內(nèi)容。

景

做過前端開發(fā)都知道前端的工作內(nèi)容是很多的，對于HTML、CSS、Javascript、Image、Flash等各種內(nèi)容的使用。為了更好提升應用的性能，我們需要對各種資源內(nèi)容進行不同方面的優(yōu)化。

對用戶而言，優(yōu)化可以讓應用的響應速度加快，加載更加迅速，可以帶來更好的使用體驗。

對于服務商而言，前端優(yōu)化能夠減少頁面請求數(shù)量，寬帶所占帶寬，有效的節(jié)省資源。

前端優(yōu)化的內(nèi)容很多，按照粒度等級劃分可以大致分為兩類：頁面優(yōu)化級別和代碼級別優(yōu)化。

頁面優(yōu)化主要針對頁面加載環(huán)節(jié)，包括：HTTP請求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等內(nèi)容。代碼優(yōu)化包括：Javascript中的DOM操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及HTML結(jié)構(gòu)優(yōu)化等內(nèi)容。

代碼級別優(yōu)化則更關注數(shù)據(jù)請求，很重要的一條就是減少HTTP請求的數(shù)量。一個完整的HTTP請求需要經(jīng)過路由查找，TCP握手，發(fā)送請求，服務器響應和瀏覽器接收等一些列過程。對于小文件，實際下載文件的時間對于整個請求的時間占比很低，因此需要將小文件合并為大文件來傳輸。

頁面級別：提升頁面加載速度

加載優(yōu)化是為了解決頁面內(nèi)容加載速度受限于網(wǎng)絡帶寬，過于耗時的問題，主要手段有：

項目打包優(yōu)化

Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。通常我們使用Webpack將多種靜態(tài)資源js、css、less 轉(zhuǎn)換成一個靜態(tài)文件，減少了頁面的請求。

核心概念有：

Output：告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles,以及如何命名這些文件,默認值為 ./dist。

Module：Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：一個 Chunk 由多個模塊組合而成,用于代碼合并與分割。

Loader：loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊,然后你就可以利用 webpack 的打包能力,對它們進行處理。

Plugin：被用于轉(zhuǎn)換某些類型的模塊,而插件則可以用于執(zhí)行范圍更廣的任務。

雪碧圖（CSS Sprite）

CSS雪碧即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。

雪碧圖實現(xiàn)的基本原理是把我們從網(wǎng)上用到圖片整合在同一張圖片中，從而可以減少網(wǎng)站HTTP的請求數(shù)量。這一張圖片使用CSS background和background-position屬性渲染，

這意味著我們的標簽變得更加復雜，圖片是在CSS中定義，而非<img>標簽。

使用雪碧圖有兩個明顯的優(yōu)點：

降低網(wǎng)頁圖片內(nèi)容對服務器的請求次數(shù)

雪碧圖可以合并大多數(shù)的背景圖片和小圖標，方便我們在任何位置使用。不同位置的請求只會調(diào)用同一個圖片，大大減少頁面對服務器的請求次數(shù)，降低服務器的壓力；這樣也可以提高頁面的加載速度，節(jié)約服務器的流量。

提升頁面加載速度

雪碧圖拼接的圖片尺寸明顯小于所有圖片拼合之前的打小。

從這兩方面可以明顯對前端請求速度進行優(yōu)化。

在HTTP2之后，已經(jīng)不需要考慮減少請求數(shù)，故雪碧圖現(xiàn)在在前端頁面優(yōu)化性能的意義已經(jīng)不大。現(xiàn)在更加推薦使用字體圖標，文件很小并且是矢量圖標

CDN加速

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。其目的是通過在現(xiàn)有的Internet中增加一層新的CACHE(緩存)層，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡”邊緣“的節(jié)點，使用戶可以就近取得所需的內(nèi)容，提高用戶訪問網(wǎng)站的響應速度。從技術上全面解決由于網(wǎng)絡帶寬小、用戶訪問量大、網(wǎng)點分布不均等原因，提高用戶訪問網(wǎng)站的響應速度。

Cache層技術可以用來消除峰值數(shù)據(jù)訪問造成的節(jié)點設備阻塞。Cache服務器具有緩存功能，絕大部分的網(wǎng)頁對象的重復訪問不需要從原始網(wǎng)站重新傳送文件，只需要通過簡單認證將副本發(fā)送即可。緩存服務器的位置通常不輸在用戶端附近，所以可以獲得局域網(wǎng)的響應速度，有效減少廣域?qū)拵摹?/p>

對于提升響應速、節(jié)約帶寬、有效減輕源服務器的負載十分有效。

總結(jié)來說CDN對網(wǎng)絡的優(yōu)化作用主要體現(xiàn)在如下幾個方面：　

解決服務器端的“第一公里”問題　
緩解甚至消除了不同運營商之間互聯(lián)的瓶頸造成的影響　
減輕了各省的出口帶寬壓力　
緩解了骨干網(wǎng)的壓力　
優(yōu)化了網(wǎng)上熱點內(nèi)容的分布

gzip壓縮

Gzip是GNUzip的縮寫，是一個GNU自由軟件的文件壓縮程序，在使用中基本可以壓縮50%的文本文件大小。在說Gzip之前，我們先介紹一個概念，HTTP 壓縮。HTTP 壓縮是一種內(nèi)置到網(wǎng)頁和網(wǎng)頁客戶端中以改進傳輸速度和帶寬利用率的方式。在使用 HTTP 壓縮的情況下，HTTP 數(shù)據(jù)在從服務器發(fā)送前就已壓縮：兼容的瀏覽器將在下載所需的格式前宣告支持何種方法給服務器；不支持壓縮方法的瀏覽器將下載未經(jīng)壓縮的數(shù)據(jù)。

HTTP 壓縮就是以縮小體積為目的，對 HTTP 內(nèi)容進行重新編碼的過程。

Gzip就是HTTP壓縮的經(jīng)典例題。

減少文件大小會帶來兩個明顯的好處：

減少存儲空間
通過網(wǎng)絡傳輸時可以減少傳輸時間

Gzip 壓縮背后的原理，是在一個文本文件中找出一些重復出現(xiàn)的字符串、臨時替換它們，從而使整個文件變小。也正是因為這個原理，文件中代碼的重復率越高，Gzip壓縮的效率就越高，使用 Gzip 的收益也就越大。反之亦然。

代碼級別：減少數(shù)據(jù)請求次數(shù)

前面我們列舉了在頁面初始加載時的優(yōu)化方法，然而在某些場景下這還不夠，因為經(jīng)常會出現(xiàn)頁面展示和使用時，頻繁請求服務來更新信息的場景。

例如在開發(fā)類Excel在線協(xié)同系統(tǒng)時，因為單元格業(yè)務相互獨立，全屏刷新無法滿足需求。我們只能定時從服務器獲取每個單元格的值，檢測到變化后展示在頁面上。而每個單元格分別調(diào)用api獲取內(nèi)容，就會產(chǎn)生大量網(wǎng)絡請求。大量的請求一方面拖累了加載速度，頁面也會發(fā)生卡頓。

在這種場景下，WebSocket是一個很好的選擇，通過長鏈接的方式保持與服務器的同步，服務端主動推送更新到客戶端，減少了網(wǎng)絡的開銷。但是WebSocket也有自身的缺點，開發(fā)成本高，無論是客戶端還是服務端都需要考慮斷開重連、頻繁推送、資源占用等問題。所以，我們還需要通過優(yōu)化，盡量減少請求頻率。

優(yōu)化思路

如何減少數(shù)據(jù)請求數(shù)量？我們可以通過請求隊列的方式，對邏輯進行優(yōu)化。

（通過請求隊列優(yōu)化Web請求）

經(jīng)過優(yōu)化，類Excel在線協(xié)同系統(tǒng)獲取數(shù)據(jù)的邏輯變成了如下的樣子：

當單元格發(fā)送請求時，請求先添加ID，并通過ID緩存callback方法，然后進入請求隊列，隊列管理器定時或者根據(jù)隊列中請求數(shù)量多少像服務端發(fā)送請求包。
服務端接收到請求包后批量處理，處理后封裝新的返回包
前端接受到返回包后根據(jù)請求的唯一ID，調(diào)用對應的callback方法執(zhí)行，完成單元格的請求

使用此方法進行優(yōu)化，優(yōu)點是顯而易見的：

實現(xiàn)簡單，代碼改動小，原本的ajax請求改為隊列調(diào)用即可，請求后的callbak無需修改。服務端添加一個新接口拆分請求即可。
根據(jù)實際場景設置請求頻率或者一次請求中數(shù)據(jù)的數(shù)量，兼顧更新頻率和相應次數(shù)。

應用實例

下面代碼是GETNUMBERFROMSERVER的實現(xiàn)，該函數(shù)負責調(diào)用服務器的getData接口，傳遞參數(shù)，獲取顯示內(nèi)容并展示在單元格。為了確保異步更新單元格的用戶體驗，這個函數(shù)源自SpreadJS的異步函數(shù)。

var GetNumberFromServer = function () {
};
GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETNUMBERFROMSERVER", 1, 2);
GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
fetch("/spread/getData?data="+arg1)
.then(function(response) {
return response.text();
})
.then(function(text) {
context.setAsyncResult(text);
});
};
GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETNUMBERFROMSERVER", new GetNumberFromServer());

為了減少請求，我們首先需要使用一個緩存對象存放請求數(shù)據(jù)，定時調(diào)用接口處理。

let callStack = {}; //收集請求數(shù)據(jù)
let callingStack = {}; //緩存正在請求中的數(shù)據(jù)信息
let callStackCount = 0; //請求數(shù)量，當作請求ID，用于區(qū)分請求內(nèi)容
let timingId = 0; //用于判斷當前是否有定時器等待請求中

然后，我們定義新的隊列化請求方法，代替在函數(shù)中直接調(diào)用API接口。

// data 請求數(shù)據(jù)
// context 異步函數(shù)context, 網(wǎng)絡請求結(jié)束后回調(diào)時使用
// callback 回調(diào)函數(shù)
function stackCall(data, context, callback){
let id = callStackCount++;
callStack[id] = {};
callStack[id].data = data;
callStack[id].context = context;
callStack[id].callback = callback;
if(timingId === 0){ // 同時只有一個定時器
timingId = setTimeout(function(){
callingStack = callStack;
callStack = {};
let newData = "" //合并請求數(shù)據(jù)，根據(jù)實際業(yè)務情況整理
for(let cId in callingStack){
newData += (cId + "," + callingStack[cId].data + ";");
}
// 發(fā)送請求，這里模擬數(shù)據(jù)，發(fā)送什么返回什么
fetch("/spread/getData?data=" + newData)
.then(function(response) {
return response.text();
})
.then(function(text) {
let resData = newData.split(";");
let spread = designer.getWorkbook();
spread.suspendPaint(); //暫定頁面繪制
//解析返回的數(shù)據(jù)
for(let resId in resData){
if(resData[resId]){
let ress = resData[resId].split(",");
// 根據(jù)Id，獲取函數(shù)的context，調(diào)用callback回調(diào)
callingStack[ress[0]].callback.call(null, callingStack[ress[0]].context, ress[1])
}
}
spread.resumePaint(); //重啟統(tǒng)一繪制
timingId = 0;
});
}, 1000)
}
}

最后更新異步函數(shù)的實現(xiàn)方式，在函數(shù)中調(diào)用stackCall堆棧函數(shù)，批量調(diào)用成功后執(zhí)行callback回調(diào)中的setAsyncResult方法，最終實現(xiàn)業(yè)務邏輯。

GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
stackCall(arg1, context, function(context, text){
context.setAsyncResult(text);
})
};

經(jīng)過這次優(yōu)化，當頁面有大量異步請求時，這些請求會放到隊列中，定時統(tǒng)一處理，一次刷新。

此外，我們還可以使用SpreadJS的doNotRecalculateAfterLoad導入選項，在首次加載時不計算，改用json中原始值；以及calcOnDemand開啟按需計算。進一步優(yōu)化頁面初始化的速度和體驗。

json.calcOnDemand = true;
spread.fromJSON(json, { doNotRecalculateAfterLoad: true });

總結(jié)

本文分類介紹了幾種前端性能優(yōu)化的方法。這些最佳實踐覆蓋了頁面加載和數(shù)據(jù)請求環(huán)節(jié)。在文章的后半部分，我們通過類Excel在線協(xié)同編輯的實例，詳細介紹了“數(shù)據(jù)請求隊列化”的實現(xiàn)，希望對您的前端開發(fā)有幫助。

邊學習javascript一邊跟大家分享成果，喜歡就關注我吧，大家一起學習！

今天分享當頁面加載完成后自動執(zhí)行函數(shù)我們寫的函數(shù)

1錯誤用法

當window.onload的方法使用兩次的時候，js引擎只會執(zhí)行最后一個window.onload

結(jié)果如下

下面分享正確的方法

正確方法1

結(jié)果如下

正確方法2

結(jié)果如下

方法解讀：先把現(xiàn)有的window.onload事件用一個變量（oldonload）存起來，如果在window.onload中沒有綁定事件則把fun函數(shù)添加給他；如果window.onload已經(jīng)有綁定函數(shù)了，則把fun追加到后面執(zhí)行。

javascript學習結(jié)果分享給大家，如有錯誤歡迎指正，大家喜歡歡迎轉(zhuǎn)發(fā)收藏，歡迎大家一起在評論區(qū)交流

在線咨詢

上一篇：HTML簡單的 <nav> 標簽
下一篇：純CSS實現(xiàn)水杯和心形兩個復雜圖標，讓你輕松實現(xiàn)自己的圖標庫

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

前端性能優(yōu)化(四)-網(wǎng)頁加載更快的N種方式

一、接口訪問優(yōu)化

二、靜態(tài)資源優(yōu)化

三、頁面渲染速度

景

頁面級別：提升頁面加載速度

代碼級別：減少數(shù)據(jù)請求次數(shù)

優(yōu)化思路

應用實例

總結(jié)

您的項目需求