摘要：預(yù)讀取預(yù)讀取是一項使瀏覽器主動去執(zhí)行域名解析的功能。在某些圖片較多的頁面中，在發(fā)起圖片加載請求之前預(yù)先把域名解析好將會有至少的圖片加載速度提升。但由于域名解析本身也是耗時的，所以也不是越多越好，最大支持路并發(fā)，所以一般設(shè)置個域名較為合適。

文章本來是給公司內(nèi)部分享用的，現(xiàn)在發(fā)表出來，歡迎大家提出寶貴建議。

讓官網(wǎng)首頁加載速度更快，對用戶的操作響應(yīng)得更及時，給用戶提供更為友好的體驗。

減少頁面請求數(shù)，減小請求所占帶寬，節(jié)省資源。

按粒度分為兩類：

頁面級別優(yōu)化（HTTP請求數(shù)，資源合并壓縮，資源加載時機等）

代碼級別優(yōu)化（DOM操作優(yōu)化、CSS選擇符優(yōu)化、HTML結(jié)構(gòu)優(yōu)化）

頁面級別的優(yōu)化目標基本就是如何減少HTTP請求數(shù)，減少請求資源的體積。每個請求都是有成本的，既包含時間成本也包含資源成本（一個完整的請求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個 “漫長” 而又復(fù)雜的過程）

根據(jù)靜態(tài)文件的類型，可以借助gulp工具將js文件和css文件進行合并和壓縮。
例如官網(wǎng)項目里css文件有七個，js文件有十幾二十多個,合并壓縮靜態(tài)資源后可以減少http的開銷。

我們將不經(jīng)常改變的資源(例如jquery、各種lib庫、插件等)全部合并壓縮成一個文件，命名為vender.css、vender.js。經(jīng)常改變上線的文件合并壓縮成一個文件，命名為index.css，index.js,并且加上hash戳，index等文件每次上線內(nèi)容基本都是會改變的，那么gulp自動構(gòu)建后加上的hash戳也是不一樣的，而vender類型不變，這樣我們就能合理利用瀏覽器的緩存機制了。

使用jq的lazyload插件實現(xiàn)圖片懶加載。等滾動條滾動到對應(yīng)的地方再加載所需要的圖片資源。

不直接使用設(shè)計給的兩倍圖，用css的devicePixelRatio檢查設(shè)備的像素比，輔助區(qū)分視網(wǎng)膜設(shè)備還是非視網(wǎng)膜設(shè)備來決定加載兩倍圖還是原始大小的圖片。

圖片上傳到cdn之前在保證不失真的情況下，用gulp-imagemin工具壓縮下大小。

將下圖這樣的小圖片全部做成雪碧圖，單色可以考慮用icon-font來實現(xiàn)。或者直接在頁面寫svg代碼和轉(zhuǎn)成base64寫到頁面也行，總之是要減少http的請求數(shù)。

將首屏第一時間呈現(xiàn)給用戶。
具體的做法是除了首屏dom元素之外,將所有的dom元素用一個template元素進行包裹，等window監(jiān)聽到load事件后，將剩余的dom部分全部插到頁面中。（tips：為避免用戶可能還沒等到window的load事件就開始滾動頁面，可以將首屏的范圍擴大。）

DNS預(yù)讀取是一項使瀏覽器主動去執(zhí)行域名解析的功能。DNS請求需要的帶寬非常小，但是延遲卻有點高。
下面是引用MDN的一句話：

在某些瀏覽器中這個預(yù)讀取的行為將會與頁面實際內(nèi)容并行發(fā)生（而不是串行）。正因如此，某些高延遲的域名的解析過程才不會卡住資源的加載。
這樣可以極大的加速（尤其是移動網(wǎng)絡(luò)環(huán)境下）頁面的加載。在某些圖片較多的頁面中，在發(fā)起圖片加載請求之前預(yù)先把域名解析好將會有至少 5% 的圖片加載速度提升。

具體做法：
head標簽里加上

data.dadaabc.com為靜態(tài)資源的域名，如還有其他鏈接的域名，都一起加進去。

同域下瀏覽器能并發(fā)的請求有限，為了增加并發(fā)，尤其是一些靜態(tài)資源上，可以使用多個域名。但由于域名DNS解析本身也是耗時的，所以也不是越多越好，chrome最大支持6路并發(fā)，所以一般設(shè)置2-4個域名較為合適。
具體的做法是：再增加cdn域名來下載靜態(tài)資源。比如圖片全部用img.dadaabc.com/域名,css資源全部用css.dadaabc.com/域名，這些域名最終全部指向同樣的cdn服務(wù)器。靜態(tài)資源域名加前綴可以用gulp-rev-replace來實現(xiàn)。

統(tǒng)計代碼全部放到window的load事件之后執(zhí)行。為了便于管理統(tǒng)計代碼，例如頁面加上一些埋點，增加刪除統(tǒng)計產(chǎn)品，我們可以借助Google Tag Manager工具來統(tǒng)一管理。
具體做法是：頁面只拉取Google Tag Manager提供的gtm代碼，該js代碼含有全部的統(tǒng)計產(chǎn)品，例如百度、Inspelect等， 這些統(tǒng)計產(chǎn)品也都是通過創(chuàng)建script標簽來動態(tài)插入到頁面中的。另外需要注意的是，google提供的gtm代碼是在google服務(wù)器上的，為了讓獲取該代碼的速度更快，我們可以在自己的服務(wù)器上執(zhí)行crontab定時任務(wù)，每分鐘獲取一次，然后gtm代碼直接從自己服務(wù)器上獲取。

css文件全部放到head里，script文件全部放到body的最底部。
原因：
把樣式表移到head里允許頁面逐步渲染。
瀏覽器負責(zé)渲染的GUI渲染線程與JS引擎線程是互斥的，當(dāng)JS引擎執(zhí)行時GUI線程會被掛起（相當(dāng)于被凍結(jié)了），GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執(zhí)行。

參考資料：從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

多個屬性改變一次性寫：

舉個例子：

var ele = document.getElementById("myDiv");
ele.style.borderLeft = "1px";
ele.style.borderRight = "2px";
ele.style.padding = "5px";

三個樣式屬性被改變，每一個都會影響元素的幾何結(jié)構(gòu)，雖然大部分現(xiàn)代瀏覽器都做了優(yōu)化，只會引起一次重排，但是像上文一樣，如果一個及時的屬性被請求，那么就會強制刷新隊列，而且這段代碼四次訪問DOM，一個很顯然的優(yōu)化策略就是把它們的操作合成一次，這樣只會修改DOM一次：

var ele = document.getElementById("myDiv");
ele.style.cssText = "border-left: 1px; border-right: 2px; padding: 5px;";

總結(jié)：同一個DOM的多個屬性改變可以寫在一起（減少DOM訪問，同時把強制渲染隊列刷新的風(fēng)險降為0）

fragment元素的應(yīng)用：

fragment是個輕量級的document對象，它的設(shè)計初衷就是為了完成更新和移動節(jié)點這樣的任務(wù)。fragment的一個便利的語法特性是當(dāng)你附加一個片斷到節(jié)點時，實際上被添加的是該片斷的子節(jié)點，而不是片斷本身。只觸發(fā)了一次重排，而且只訪問了一次實時的DOM。
例如：

var fragment = document.createDocumentFragment();

var li = document.createElement("li");
li.innerHTML = "apple";
fragment.appendChild(li);

var li = document.createElement("li");
li.innerHTML = "watermelon";
fragment.appendChild(li);

document.getElementById("fruit").appendChild(fragment);

觸發(fā)大量回調(diào)函數(shù)的事件，例如拖拽時的mousemove事件，window對象的resize、scroll事件，文字輸入、自動完成的keyup事件等，需要合理使用函數(shù)防抖和函數(shù)節(jié)流機制。具體可以參考我的另外一篇文章函數(shù)防抖和函數(shù)節(jié)流

CSS選擇器的解析式其實是從右到左的，例如：

#div1 a {
    color: red
}

如上面的選擇器，瀏覽器必須遍歷查找所有的a元素，再去找ID為div1的元素，這樣查找的方式顯然很低效。

blog鏈接

參考資料：
Web前端應(yīng)該從哪些方面來優(yōu)化網(wǎng)站?
重排和重繪