在這個前端用戶體驗越來越重要的時代，你的頁面稍微有點卡頓，都難以挽留用戶。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。今天，就來談一談那些前端性能優化的加載技術，利用這些技術可以很好地提高網站的響應速度和用戶體驗。
頁面渲染
在理解真正的優化技術之前，我們需要先了解為什么需要優化？這得從瀏覽器的渲染引擎談起。瀏覽器從獲取HTML文檔開始，就進入了渲染引擎的工作階段，其目的是將網頁的內容顯示在瀏覽器屏幕上。大體可以描述為從解析HTML內容，構造DOM節點再到DOM元素布局定位最后再繪制DOM元素的這樣一個過程。更加詳細的內容可以參考How browser works, 要看中文的童鞋可以看這篇譯文。
在頁面渲染的這樣一個過程中，有一個關鍵點是如果在解析內容的過程中遇到了腳本標簽，如：<script src="example.js"></script>，瀏覽器就會暫停內容的解析，轉而開始下載腳本。并且只有等腳本下載完并執行結束后，渲染引擎才會繼續解析。那么這樣一來，頁面顯示的時間必然會被延長。因此我們需要優化的點就是盡可能地讓頁面更早地被渲染出來。
腳本加載的優化
要解決上面說到的腳本加載問題，通常有三種解決方案：將腳本放在HTML末尾、動態加載腳本以及異步加載腳本。最常用的應該就是將所有腳本放置在HTML文檔的末尾了。這應該是每個前端剛入門時，被教的最多的。對于這個方法，這里就不多做介紹，直接上重頭戲。
動態加載
所謂動態加載腳本就是利用javascript代碼來加載腳本，通常是手工創建script元素，然后等到HTML文檔解析完畢后插入到文檔中去。這樣就可以很好地控制腳本加載的時機，從而避免阻塞問題。
function loadJS(src) {
const script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
loadJS('http://example.com/scq000.js');
異步加載
我們都知道，在計算機程序中同步的模式會產生阻塞問題。所以為了解決同步解析腳本會阻塞瀏覽器渲染的問題，采用異步加載腳本就成為了一種好的選擇。利用腳本的async和defer屬性就可以實現這種需求：
<script type="text/javascript" src="./a.js" async></script>
<script type="text/javascript" src="./b.js" defer></script>
雖然利用了這兩個屬性的script標簽都可以實現異步加載，同時不阻塞腳本解析。但是使用async屬性的腳本執行順序是不能得到保證的。而使用defer屬性的腳本執行順序可以得到保證。另一方面，defer屬性是在html文檔解析完成后，DOMContentLoaded事件之前就會執行js。async一旦加載完js后就會馬上執行，最遲不超過window.onload事件。所以，如果腳本沒有操作DOM等元素，或者與DOM時候加載完成無關，直接使用async腳本就好。如果需要DOM，就只能使用defer了。
這里介紹的兩種方法在實際運用過程中需要權衡一下的，渲染速度變快也就意味著腳本加載時間會變長。
解決異步加載腳本的問題
上面介紹的異步加載腳本并不是十分完美的。如何處理加載過程中這些腳本的互相依賴關系，就成了實現異步加載過程中所需要考慮的問題。一方面，對于頁面中那些獨立的腳本，如用戶統計等插件就可以放心大膽地使用異步加載。而另一方面，對于那些確實需要處理依賴關系的腳本，業界已經有很成熟的解決方案了。如采用AMD規范的RequireJS,甚至有采用了hack技術（通過欺騙瀏覽器下載但不執行腳本)的labjs（已過時)。如果你熟悉promise的話，就知道這是在JS中處理異步的一種強有力的工具。下面以promise技術來實現處理異步腳本加載過程中de的依賴問題：
// 執行腳本
function exec(src) {
const script = document.createElement('script');
script.src = src;
// 返回一個獨立的promise
return new Promise((resolve, reject) => {
var done = false;
script.onload = script.onreadystatechange = () => {
if (!done && (!script.readyState || script.readyState === "loaded" || script.readyState === "complete")) {
done = true;
// 避免內存泄漏
script.onload = script.onreadystatechange = null;
resolve(script);
}
}
script.onerror = reject;
document.getElementsByTagName('head')[0].appendChild(script);
});
}
function asyncLoadJS(dependencies) {
return Promise.all(dependencies.map(exec));
}
asyncLoadJS(['https://code.jquery.com/jquery-2.2.1.js', 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js']).then(() => console.log('all done'));
可以看到，我們針對每個腳本依賴都會創建一個promise對象來管理其狀態。采用動態插入腳本的方式來管理腳本，然后利用腳本onload和onreadystatechange(兼容性處理)事件來監聽腳本是否加載完成。一旦加載完畢，就會觸發promise的resovle方法。最后，針對依賴的處理，是promise的all方法，這個方法只有在所有promise對象都resolved的時候才會觸發resolve方法，這樣一來，我們就可以確保在執行回調之前，所有依賴的腳本都已經加載并執行完畢。
懶加載(lazyload)
懶加載是一種按需加載的方式，也通常被稱為延遲加載。主要思想是通過延遲相關資源的加載，從而提高頁面的加載和響應速度。在這里主要介紹兩種實現懶加載的技術：虛擬代理技術以及惰性初始化技術。
虛擬代理加載
所謂虛擬代理加載，即為真正加載的對象事先提供一個代理或者說占位符。最常見的場景是在圖片的懶加載中，先用一種loading的圖片占位，然后再用異步的方式加載圖片。等真正圖片加載完成后就填充進圖片節點中去。
// 頁面中的圖片url事先先存在其data-src屬性上
const lazyLoadImg = function() {
const images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++) {
if(images[i].getAttribute('data-src')) {
images[i].setAttribute('src', images[i].getAttribute('data-src'));
img.onload = () => img.removeAttribute('data-src');
}
}
}
惰性初始化
惰性初始模式是在程序設計過程中常用的一種設計模式。顧名思義，這個模式就是一種將代碼初始化的時機推遲（特別是那些初始化消耗較大的資源），從而來提升性能的技術。
jQuery中大名鼎鼎的ready方法就用到了這項技術，其目的是為了在頁面DOM元素加載完成后就可以做相應的操作，而不需要等待所有資源加載完畢后。與瀏覽器中原生的onload事件相比，可以更加提前地介入對DOM的干涉。當頁面中包含大量圖片等資源時，這個方法就顯出它的好處了。在jQuery內部的實現原理上，它會設置一個標志位來判斷頁面是否加載完畢，如果沒有加載完成，會將要執行的函數緩存起來。當頁面加載完畢后，再一一執行。這樣一來，就將原本應該馬上執行的代碼，延遲到頁面加載完畢后再執行。感興趣的可以去閱讀這一部分的源碼，里面還包括了瀏覽器兼容等處理。
選擇時機
選擇時機：比較常見的兩種
- 滾動條監聽
- 事件回調（需要用戶交互的地方）
當然，你也可以根據具體的業務場景選擇延遲加載的時機。
滾動條監聽
滾動條監聽，常常用在大型圖片流等場景下。通過對用戶滾動結束的區域進行計算，從而只加載目標區域中的資源。這樣就可以實現節流的目的。
// 簡單的節流函數
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果達到了規定的觸發時間間隔，觸發 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 沒達到觸發間隔，重新設定定時器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 判斷元素是否在可視范圍內
function elementInViewport(element) {
const rect = element.getBoundingClientRect();
return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
}
function lazyLoadImgs() {
const count = 0;
return function() {
[].slice.call(images, count).forEach(image => {
if(elementInViewport(elementInViewport(image))) {
image.setAttribute('src', image.getAttribute('data-src'));
count++;
}
});
}
}
const images = document.getElementByTagName('img');
// 采用了節流函數, 加載圖片
window.addEventListener('scroll',throttle(lazyLoadImgs(images),500,1000));
事件回調
這種場景就是那些需要用戶交互的地方，如點擊加載更多之類的。這些資源往往通過在用戶交互的瞬間（如點擊一個觸發按鈕），發起ajax請求來獲取資源。比較簡單，在此不再贅述。
利用webpack實現腳本加載優化
現如今，對于大型項目大家都會用上打包工具。現代化的工具使得我們不必再寫那些又長又難懂的代碼。針對懶加載，webpack也提供了十分友好的支持。這里主要介紹兩種方式。
import()方法
我們知道，在原生es6的語法中，提供了import和export的方式來管理模塊。而其import關鍵字是被設置成靜態的，因此不支持動態綁定。不過在es6的stage 3規范中，引入了一個新的方法import()使得動態加載模塊成為可能。所以，你可以在項目中使用這樣的代碼：
$('#button').click(function() {
import('./dialog.js')
.then(dialog => {
//do something
})
.catch(err => {
console.log('模塊加載錯誤');
});
});
//或者更優雅的寫法
$('#button').click(async function() {
const dialog = await import('./dialog.js');
//do something with dialog
});
由于該語法是基于promise的，所以如果需要兼容舊瀏覽器，請確保在項目中使用es6-promise或者promise-polyfill。同時，如果使用的是babel，需要添加syntax-dynamic-import插件。
require.ensure
require.ensure與import()類似，同樣也是基于promise的異步加載模塊的一種方法。這是在webpack 1.x時代官方提供的懶加載方案。現在，已經被import()語法取代了。為了文章的完整性，這里也做一些介紹。
在webpack編譯過程中，會靜態地解析require.ensure中的模塊，并將其添加到一個單獨的chunk中，從而實現代碼的按需加載。
語法如下：
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
一個十分常見的例子是在寫單頁面應用的時候，使用該技術實現基于不同路由的按需加載：
const routes = [
{path: '/comment', component: r => require.ensure([], r(require('./Comment')), 'comment')}
];
預加載
首屏加載的問題解決后，用戶在具體的頁面使用過程中的體驗也很重要。如果能夠通過預判用戶的行為，提前加載所需要的資源，則可以快速地響應用戶的操作，從而打造更加良好的用戶體驗。另一方面，通過提前發起網絡請求，也可以減少由于網絡過慢導致的用戶等待時間。因此，“預加載”的技術就閃亮登場了。
preload規范
preload 是w3c新出的一個標準。利用link的rel屬性來聲明相關“proload"，從而實現預加載的目的。就像這樣：
<link rel="preload" href="example.js" as="script">
其中rel屬性是用來告知瀏覽器啟用preload功能，而as屬性是用來明確需要預加載資源的類型，這個資源類型不僅僅包括js腳本(script)，還可以是圖片(image)，css(style)，視頻(media)等等。瀏覽器檢測到這個屬性后，就會預先加載資源。
這個規范目前兼容性方面還不是很好，所以可以先稍微了解一下。webpack現在也已經有相關的插件，如果感興趣的話，請移步preload-webpack-plugin。對于更加詳細的技術細節，這里推薦一篇博客https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/。
DNS Prefetch 預解析
還有一個可以優化網頁速度的方式是利用dns的預解析技術。同preload類似，DNS Prefetch在網絡層面上優化了資源加載的速度。我們知道，針對DNS的前端優化，主要分為減少DNS的請求次數，還有就是進行DNS預先獲取。DNS prefetch就是為了實現這后者。其用法也很簡單，只要在link標簽上加上對應的屬性就行了。
<meta http-equiv="x-dns-prefetch-control" content="on" /> /* 這是用來告知瀏覽器當前頁面要做DNS預解析 */
<link rel="dns-prefetch" >
在支持該標準的瀏覽器上，會自動對鏈接中的地址域名做DNS解析緩存。不過，像Goolge、火狐這樣的現代瀏覽器即使不設置這個屬性，也能在后臺做自動預解析。如果你的頁面中需要大量訪問不同域名的資源，可以利用這項技術加快資源的獲取，從而獲得更好的用戶體驗。需要注意的是，DNS預解析雖好，但是也不能濫用。如果對多頁面重復DNS預解析，會增加DNS的查詢次數。
總結
通常對于大型應用來說，完整加載所有javascript代碼是十分耗時的工作。因此，通常會將JavaScript分為兩個部分（一部分是渲染初始化頁面所必須的，另一部分則是剩下的腳本）來進行加載。這樣就可以盡可能快速地渲染出網頁。通過監聽onload事件，可以很好地控制回調的時機，同時采用異步加載等技術能夠同時并行加載多個腳本，從而大大提高最終頁面的渲染速度。最好是把在onload事件之前執行的代碼拆分成一個單獨的文件。當然，在處理腳本加載這一過程中還存在著幾個問題：1.如何找到需要拆分的代碼？ 2 怎樣處理競爭狀態 ？3.如何延遲加載其余部分的代碼？希望這篇文章能夠給你啟發！對于文中有錯漏之處，歡迎指出。鑒于本人水平有限，也歡迎大家來多多交流。
參考資料
《Javascript性能優化》
http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/
http://2ality.com/2017/01/import-operator.html
https://segmentfault.com/a/1190000000684923
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
