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

文章本來是給公司內部分享用的，現在發表出來，歡迎大家提出寶貴建議。

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

減少頁面請求數，減小請求所占帶寬，節省資源。

按粒度分為兩類：

頁面級別優化（HTTP請求數，資源合并壓縮，資源加載時機等）

代碼級別優化（DOM操作優化、CSS選擇符優化、HTML結構優化）

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

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

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

使用jq的lazyload插件實現圖片懶加載。等滾動條滾動到對應的地方再加載所需要的圖片資源。

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

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

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

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

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

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

具體做法：
head標簽里加上

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

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

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

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

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

多個屬性改變一次性寫：

舉個例子：

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

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

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

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

fragment元素的應用：

fragment是個輕量級的document對象，它的設計初衷就是為了完成更新和移動節點這樣的任務。fragment的一個便利的語法特性是當你附加一個片斷到節點時，實際上被添加的是該片斷的子節點，而不是片斷本身。只觸發了一次重排，而且只訪問了一次實時的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);

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

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

#div1 a {
    color: red
}

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

blog鏈接

參考資料：
Web前端應該從哪些方面來優化網站?
重排和重繪