第四章 現(xiàn)代前端交互框架

（需要進行理解，再完善筆記）

? 數(shù)據(jù)的處理和操作的核心就是DOM的處理和操作，即便是今天，所有前端JavaScript框架最終要解決的仍然是如何實現(xiàn)高效，高性能DOM交互操作的問題。

? DOM API類型分為以下幾種類型：節(jié)點查詢型，節(jié)點創(chuàng)建型，節(jié)點修改型，節(jié)點關系型，節(jié)點屬性型和內容加載型。

? JQuery主要實現(xiàn)了選擇器，DOM操作方法，事件綁定封裝，AJAX，Deferred這五個方面的封裝和常見的兼容性問題的處理，我們還可以基于jQuery擴展更多的方法功能來提高業(yè)務開發(fā)效率。

? SPA的思路是將整個應用的內容都在一個頁面中實現(xiàn)并完全通過異步交互來根據(jù)用戶操作加載不同的內容。

? 通過DOM交互框架已經可以比較高效地處理DOM操作和事件綁定等問題。這種高效的方式帶來了效率上的提升，但隨著頁面結構和交互復雜性的提升，僅靠這種方式會增加管理的難度。隨著AJAX技術的盛行，SPA應用開始被廣泛使用，而直接操作DOM的方式進行SPA的開發(fā)和維護是比較麻煩的。為解決這個問題，通常將頁面上與DOM相關的內容抽象成數(shù)據(jù)模型，視圖，事件控制函數(shù)三部分，這就有了前端MVC設計思路。

? MVC可以認為是一種開發(fā)設計模式，其基本思路是將DOM交互的內容分為數(shù)據(jù)模型，視圖和事件控制函數(shù)三個部分，并對他們進行統(tǒng)一管理。Model用來存放數(shù)據(jù)結果和數(shù)據(jù)對象，View用于頁面DOM的更新與修改，Controller則用于根據(jù)前端路由條件來調用不同的Model給View渲染不同的數(shù)據(jù)內容。

? 前端框架從直接的DOM操作到MVC設計模式，然后到MVP，再到MVVM框架，前端設計模式改進原則一直向著高效，易實現(xiàn)，易維護，易擴展的基本方向發(fā)展。雖然目前前端各類框架也已經成熟并開始向高版本迭代。但是還沒有結束，我們現(xiàn)在的編程對象依然沒有脫離DOM編程的基本套路，一次次框架的改進大大提高了開發(fā)效率，但是DOM元素運行的效率仍然沒有變。

4.3 Virtual DOM 交互模式

4.3.1 Virtual DOM 設計理念

? MVVM的前端交互模式大大提高了編程效率，自動雙向數(shù)據(jù)綁定讓我們可以將頁面邏輯實現(xiàn)的核心轉移到數(shù)據(jù)層的修改操作上，而不再是在頁面中直接操作DOM。但實際上，盡管MVVM改變了前端開發(fā)的邏輯方式，但是最終數(shù)據(jù)層反應到頁面上View層的渲染和改變仍是通過對應的指令進行DOM操作來完成的。而且通常一次ViewModel的變化可能會觸發(fā)頁面上多個指令操作DOM的變化，帶來大量的頁面結構層DOM操作來渲染。

? Virtual DOM是一個能夠直接描述一段HTML DOM結構的JavaScript對象，瀏覽器可以根據(jù)它的結構按照一定規(guī)則創(chuàng)建出確定唯一的HTML DOM結構。

? 整體來看，Virtual DOM的交互模式減少了MVVM或其他框架中對DOM的掃描和操作次數(shù)，并且在數(shù)據(jù)發(fā)生改變后只在合適的地方根據(jù)JavaScript對象來進行最小化的頁面DOM操作，避免大量重新渲染。

4.3.2 Virtual DOM的核心實現(xiàn)

? Virtual DOM模式來控制頁面DOM結構更新的過程：創(chuàng)建原始頁面或組件的Virtual DOM結構，用戶操作后需要進行DOM更新時，生成用戶操作后頁面或組件的Virtual DOM結構并與之前的結構進行比對，找到最小變化Virtual DOM的差異化描述對象，最后把差異化的Virtual DOM根據(jù)特定的規(guī)則渲染到頁面上。

? 所以核心操作可以抽象成三個步驟：

創(chuàng)建Virtual DOM

對比兩個Virtual DOM生成差異化Virtual DOM

將差異化Virtual DOM渲染到頁面上

其中 ：

? 創(chuàng)建Virtual DOM：創(chuàng)建Virtual DOM即把一段HTML字符串文本解析成一個能夠描述它的JavaScript對象。

根據(jù)HTML字符串解析創(chuàng)建Virtual DOM的過程相當于實現(xiàn)一個HTML文本解析器，但是沒有生成DOM對象樹，只是生成一個操作效率更高的JavaScript對象，因此通常不會直接將HTML交給瀏覽器去解析，因為瀏覽器的DOM解析很慢，這也是Virtual DOM交互模式和普通DOM編程最本質的區(qū)別。

? 當用戶進行了頁面操作需要進行頁面視圖改變時，通常會生成一個新的Virtual DOM結構來表示改變后的狀態(tài)，而且不會將這個改變后的Virtual DOM內容立即重新渲染到頁面中，而是通過對比找出兩個Virtual DOM的差異性，得到一個差異樹對象。對于Virtual DOM的對比算法實際上是對于多叉樹結構的遍歷算法。對多叉樹遍歷就有廣度優(yōu)先算法和深度優(yōu)先算法。

? 經過Virtual DOM的差異性對比，我們獲得了用戶操作后的差異性Virtual DOM，差異性類型和差異性的位置，那么剩下的操作就是根據(jù)對比返回的結構將差異化內容經過DOM操作渲染到頁面上，整個交互過程就完成了。

Virtual DOM交互模式的優(yōu)勢 與以前交互模式相比，Virtual DOM最本質的區(qū)別在于減少了對DOM對象的操作，通過JavaScript 對象來代替DOM對象樹，并且在頁面結構改變進行最小代價的DOM渲染操作，提高了交互的性能和效率。這也是提高前端交互性能的根本原因。

4.4 前端MNV*時代

盡管Virtual DOM的交互模式能在頁面數(shù)據(jù)的渲染和變更時盡可能地減少DOM操作，但仍無法完成脫離DOM交互的模式，我們知道DOM的操作效率不高，在移動設備的Hybrid WebView上表現(xiàn)會更慢，所以為了進一步改進Hybrid應用中DOM性能，希望完全脫離DOM的編程模式來進行結構層的操作。

為什么可以這樣子實現(xiàn)：首先，目前，主要主流Hybrid App的Web內容通常是在原生應用中嵌入WebView來實現(xiàn)的，而原生應用的界面數(shù)據(jù)渲染可以通過調用原生控件來實現(xiàn)，它不僅沒有HTML DOM的性能缺陷，而且還可以調用Native系統(tǒng)底層的API；其次，Hybrid App可以通過統(tǒng)一的JavaScript交互協(xié)議來調用原生的方法和控件，所以使用JavaScript直接調用和產生原生控件進行界面數(shù)據(jù)渲染的方式是可以實現(xiàn)的。

4.4.1 MNV*模式簡介

我們把這種使用JavaScript調用原生控件或事件綁定生成應用程序的交互模式稱為前端MNV*開發(fā)模式。這種模式目前僅使用于移動端Hybrid應用，因為需要依賴原生控件的調用支持，而只有這種特殊的應用場景才滿足條件。

4.4.2 MNV* 模式的實現(xiàn)原理

主要是將JSBridge和DOM編程的方式進行結合，讓前端能夠快速構建開發(fā)原生界面的應用，從而脫離DOM的交互模式。

第五章 前端項目與技術實踐

現(xiàn)代前端技術飛速發(fā)展，最終形成了以效率和質量為核心的兩大趨勢。

5.1 前端開發(fā)規(guī)范

開發(fā)規(guī)范可以認為軟件開發(fā)工程師之間的另一種語言，它在一定程度上決定了團隊協(xié)作過程中開發(fā)的程序代碼是否具有一致性和易維護性，統(tǒng)一的開發(fā)規(guī)范可以降低代碼的出錯率和團隊開發(fā)的協(xié)作成本。

5.1.1 前端通用規(guī)范

三層結構分離

前端頁面開發(fā)應做到結構層（HTML），表現(xiàn)層（CSS），行為層（JavaScript）分離，保證它們之間的最小耦合，這對前端開發(fā)和后期維護都是至關重要。推薦相關樣式和JavaScript邏輯在外部引入的CSS和JavaScript文件中。

縮進

統(tǒng)一使用tab（或4個進行縮進）來進行縮進，可以在開發(fā)編輯器或IDE里進行設置。

內容編碼

在HTML文檔中使用<meta charset='utf-8'>來指定編碼，一避免出現(xiàn)頁面亂碼問題。

小寫

所有的HTML標簽，HTML標簽屬性，樣式名及規(guī)則建議使用小寫，我們一般習慣使用小寫英文字符。

HTML屬性的id屬性可以使用駝峰大小寫組合的命名方式，因為id屬性常常只用于JavaScript的DOM查詢引用，而JavaScript語言標準推薦使用駝峰大小寫組合的命名方式，因此HTML頁面上的id屬性也盡量使用這種標準來寫。

代碼單行長度限制

代碼單行長度不要超過120字符（或80字符，根據(jù)團隊習慣決定），長字符串并接通常使用加號來連接換行的內容

注釋

盡可能為代碼寫上注釋，HTML，CSS 還是JavaScript，必要的注釋是不能少的。

行尾空格與符號

刪除行尾空格與多余的符號，這些內容是沒有必要存在的。

5.1.2 前端HTML規(guī)范

文檔類型定義

統(tǒng)一使用HTML5 的標準文檔類型<! DOCTYPE html>來定義，這樣更簡潔，而且向后兼容。不使用HTML4.01的DTD定義。

head內容

head中必須定義title，keyword，description，保證基本的SEO頁面關鍵字和內容描述。移動端頁面head要添加viewport控制頁面縮放，有利于提高頁面渲染性能。

省略type屬性

在引用CSS或JavaScript時，可以省略type屬性不寫，因為HTML5在引入CSS時默認type值為text/css，在引入JavaScript時默認type為text/javaScritp

使用雙引號包裹屬性值

所有的標簽屬性值必須要用雙引號包裹，不推薦單引號，不允許有的雙引號，有的單引號。

屬性值省略

非必要的屬性值可以省略，例如輸入框里的readonly，disabled，required等屬性值是非必要的，可以省略不寫。如<input type="text" disabled>

嵌套

所有元素必須正確嵌套，盡量使用語義化標簽，不允許交叉，也不允許在inline元素中包含block元素。

標簽閉合

非自閉合標簽必須添加標識，自閉合標簽無須關閉。

使用img的alt屬性

為img加上alt屬性

使用lable的for屬性

為表單內部元素<lable>加上for屬性或者將對應的控件放在<lable>標簽內部。這樣在點擊<lable>標簽時，會關聯(lián)到對應的input或textarea上選中，可以增加輸入的響應區(qū)域。

按模塊添加注釋

在每個大的模塊的開始和結束的地方添加起始注釋標記，便于開發(fā)者識別，維護。

標簽元素格式

塊級元素一般另起一行寫，行內元素可以根據(jù)情況換行，盡量保證行內元素代碼長度不超過一行，否則要考慮另起一行。HTML的子元素要盡量相對父級進行縮進，這樣更有層次。

語義化標簽

在合適的地方選擇合適的標簽。不要使用被HTML廢棄用于樣式表現(xiàn)的無語義標簽。

5.1.3 前端CSS規(guī)范

CSS引用規(guī)范

使用link的方式調用外部樣式文件，外部樣式文件可以復用并能用瀏覽器緩存提高加載速度。禁止在標簽內使用內聯(lián)樣式，否則后期很不容易管理，強烈不建議使用。

樣式的命名

CSS類名命名一般由單詞，中畫線，當然也有BEM方案，這里推薦一種規(guī)范-----所有命名都使用小寫，加上ui-等前綴，表示這個類名只用于控制元素的樣式展示，不推薦使用拼音作為樣式名，尤其是使用縮寫的拼音和英文混合的方式，很讓人費解。盡量不以info，current，news等單個單詞類名直接作為類名稱，單獨一級命名很容易造成沖突覆蓋，并且很難理解。

CSS高效實現(xiàn)規(guī)范

標簽名，與id或class組合的選擇器會造成冗余，而且降低CSS的解析速度，應避免。

使用預處理腳本編碼開發(fā)

使用預處理嵌套的方式描述元素之間的層次關系，盡可能使用預處理器的高效語法來提高開發(fā)效率，如嵌套，變量，嵌套屬性，注釋，繼承等，避免直接使用CSS開發(fā)。使用SASS來編寫CSS就高效很多。

簡寫方式

單位0的縮寫。如果屬性值為0，則不需要為0加單位，如果以0為個數(shù)為的小數(shù)，前面的0可以省略不寫。盡量帶上分號。如 opacity：.6

去掉url中引用資源的引號，這是沒必要的。如background-image:url(sprites.png)

顏色值寫法，所有的顏色值要使用小寫并盡量縮寫至3位 如#FF0000 可寫成#f00

屬性書寫順序

CSS屬性書寫順序遵循先布局后內容，即先寫元素的布局屬性，再寫元素的內容屬性。常用布局屬性有：position, display, float, overflow等

hack寫法

盡可能減少對CSS hack的使用和依賴，可以使用其他的解決方案替代hack思路。如果必須要使用瀏覽器hack，盡量選擇穩(wěn)定，常用并易于理解的書寫方式。

5.1.4 ECMAScript5 常用規(guī)范

分號

JavaScript語句后面統(tǒng)一加上分號

空格

在所有運算符，符號與英文單詞之間添加必要的空格，利于開發(fā)者閱讀。

空行

一般推薦在代碼塊后面保留一行空行，顯得塊內容層次更加分明

引號

推薦JavaScript字符串最外層統(tǒng)一使用單引號

變量命名

標準變量采用駝峰式命名。常量使用全大寫形式命名，并采用下畫線連接。構造函數(shù)首字母大寫，jQuery對象推薦以"$"為開頭命名，便于分辨JQuery對象和普通對象。

對象

對象屬性名不需要加引號。對象屬性鍵值以縮進的形式書寫，不要寫在同一行。數(shù)組，對象屬性后不能有逗號，否則部分瀏覽器可能會解析出錯。

大括號
程序中的代碼塊推薦使用大括號包裹，要注意換行，這樣更加清晰，而且方便后面擴展增加內容。

條件判斷
盡量不要直接使用undefined進行變量判斷，使用typeof和字符串“undefined”對變量類型進行判斷。分別用===，！==代替==，！=更加嚴謹

不要在條件語句或循環(huán)語句中聲明函數(shù)

5.1.5 ECMAScript 6+ 參考規(guī)范

正確使用ECMAScript 6 的變量聲明關鍵字

字符串拼接使用字符串模板完成

解析賦值盡量使用一層結構，否則聲明變量嵌套太深難以理解

數(shù)組拷貝推薦使用…實現(xiàn)，更加簡潔高效

數(shù)組循環(huán)遍歷使用for...of非必須情況下不推薦使用forEach，map，簡單循環(huán)

使用ECMAScript6 的類來代替之前的實現(xiàn)方式，盡量使用constructor進行屬性成員變量賦值

模塊化多變量導出時盡量使用對象解構，不使用全局導出。盡量不要把import和export寫在一行

導出類名時，保持模塊名稱和文件名相同，類名首字母需要大寫

生成器中yield進行異步操作時需要使用try...catch包裹，方便對異常進行處理。

推薦使用promise，避免使用第三方庫或直接回調，原生的異步處理性能更好而且符合語言規(guī)范。

如果不是必須，避免使用迭代器

不要使用統(tǒng)一碼，中文的正則匹配和計算較消耗時間，而且容易出問題

合理使用Generator，推薦使用ascyn/await，更加簡潔

5.1.6 前端防御性編程規(guī)范

防御性編程是指通過檢測任何可能存在的邏輯異常問題的代碼實現(xiàn)，提高腳本執(zhí)行過程的健壯性的一種編程手段。防御性編程要求我們對程序的實現(xiàn)進行更加全面，嚴謹?shù)目紤]。

對外部數(shù)據(jù)的安全檢測判斷

規(guī)范化的錯誤處理
對于常用的AJAX請求或長時間文件讀寫等可能失敗的異步操作，需要進行錯誤情況的處理或異常捕獲處理，而不應該被靜默，否則一旦出錯，用戶得不到正常的提示，對用戶體驗影響極大。

5.2 前端組件規(guī)范

什么是組件規(guī)范?
為什么需要組件規(guī)范?
組件規(guī)范和開發(fā)規(guī)范有什么區(qū)別和聯(lián)系呢?
組件通常是指采用代碼管理中的分治思想，將復雜的項目代碼結構拆分成多個獨立、簡單、解耦合的結構或文件的形式進行分開管理，達到讓項目代碼和模塊更加清晰的目的。
組件規(guī)范則是我們進行拆分、組織、管理項目代碼方法的一種約定。
所以，和開發(fā)規(guī)范相似，組件規(guī)范也是一種約定。不同的是，開發(fā)規(guī)范關注文件內部代碼級別的一致性， 組件規(guī)范則更關注項目中業(yè)務功能模塊內容組織的一致性。 一定程度上，組件規(guī)范包含了開發(fā)規(guī)范，因為若開發(fā)規(guī)范不統(tǒng)一，開發(fā)出來的組件風格便不一致，組件規(guī)范便也無從說起了。組件規(guī)范能夠幫助我們對功能模塊進行統(tǒng)一的約定管理， 通過這一約定， 任何一個獨立的功能模塊之間都應該是無耦合并能和其他模塊很好對接和組合的。
目前前端主流的一些組件相關規(guī)范: UI (User Interface， 用戶界面)組件規(guī)范、模塊化規(guī)范、項目組件化設計規(guī)范。注意這三者的區(qū)別和聯(lián)系，UI規(guī)范一般指UI層設計和實現(xiàn)的規(guī)范及統(tǒng)一性， 而模塊化主要指的是JavaScript 模塊化開發(fā)的文件模塊封裝方式，項目組件規(guī)范則指的是實際開發(fā)中整個項目業(yè)務代碼之間的組織形式。

5.2.1 UI組件規(guī)范

簡單來說，UI 組件規(guī)范強調了一個網站中所有網頁結構層和表現(xiàn)層實現(xiàn)的一致性。 多個地方出現(xiàn)的相同按鈕樣式可以通過公共定義的樣式規(guī)范類來描述，而不用每個地方都重復書寫樣式，避免使用不同的代碼實現(xiàn)同一個效果。試想如果沒有規(guī)范的存在，相同作用的按鈕有時是紅色，有時是綠色，開發(fā)維護時就比較難統(tǒng)一處理了。 從Web前端的角度來看，UI層的規(guī)范能帶來一些明顯的好處。

UI層風格統(tǒng)一化。UI層風格統(tǒng)一化避免了不同頁面的差異化設計風格，能讓用戶使
用Web站點的不同網頁外觀風格是一致的。

增加UI層復用性。使用UI規(guī)范的情況下，UI層代碼復用性增強，可以提高開發(fā)效率，
相同功能的結構和樣式不用重復實現(xiàn)。

更符合用戶的體驗習慣。例如紅色按鈕統(tǒng)一 用來表示警告，綠色按鈕統(tǒng)一 表示安全或
成功操作等。

增加了 開發(fā)規(guī)范的統(tǒng)一-性。 遵循統(tǒng)一的規(guī)范， 避免重復開發(fā)，避免產生多種風格的代碼。

在實際團隊開發(fā)中，UI組件規(guī)范的完成可能需要以下幾個方面的協(xié)作：

UI設計一致2.

開發(fā)實現(xiàn)一致。這就涉及開始說的編碼開發(fā)規(guī)范，盡可能讓所有UI層實現(xiàn)使用同樣的開發(fā)規(guī)范和方式。例如樣式定義，圖片引用，命名規(guī)范等，就圖片引用來說，圖標使用base64實現(xiàn)還是使用小圖片實現(xiàn)，又或者使用iconfont實現(xiàn)，都需要統(tǒng)一，不能多種方法混合，否則增加UI組件的使用復雜度。

從開發(fā)實現(xiàn)上，如果想設計一個具有通用組件規(guī)范的UI庫，必須考慮以下幾個方面的問題。

統(tǒng)一的頁面布局方案。頁面布局使用網格布局還是REM方案，是否需要支持響應式，
如果是移動端應該怎樣適配，這些是需要優(yōu)先考慮的。

基礎UI結構和樣式實現(xiàn)。樣式reset、 按鈕、圖片、菜單、表單等基礎結構與樣式的統(tǒng)一化設計實現(xiàn)，可以極大提高頁面內容的復用性和開發(fā)效率。

組件化UI結構和樣式實現(xiàn)。例如按鈕組、字體圖標、下拉菜單、輸入框組、導航組、面包屑、分頁、標簽、輪播、彈出框、列表、多媒體、警告框等常用組件的實現(xiàn)。當然網站可能不會一次性用到這么 多，但是如果要考慮設計一個通用的UI組件庫，這些仍然是要考慮的。

響應式布局。如果需要支持頁面響應式，布局、結構、樣式、媒體、javascript響應式。

5.2.2 模塊化規(guī)范

模塊化規(guī)范是JavaScript文件之間相互依賴引用的一種通用語法約定，就是按照一定的規(guī)范來寫JavaScript文件，讓它可以方便地被其他JavaScript文件引用。
就規(guī)范種類來說，主要包括AMD（異步模塊定義），CMD（通用模塊定義），CommonJS，import/export等。

AMD
AMD是運行在瀏覽器端的模塊異步加載規(guī)范，主要以requireJS為代表。基本原理是定義define和require方法異步請求對應的JavaScript模塊文件到瀏覽器端運行。模塊執(zhí)行導出時可以使用函數(shù)中的return返回結果。

CMD
CMD是seajs提出的一種模塊化規(guī)范，在瀏覽器端調用類似CommonJs的書寫方式進行模塊引用，但卻不是完全的CommonJs規(guī)范，CMD遵循按需執(zhí)行依賴的原則，只有在用到某個模塊的時候才會執(zhí)行模塊內部的require語句，同時加載完某個依賴模塊文件后并不會立即執(zhí)行，在所有依賴模塊加載完成后進入主模塊邏輯，遇到模塊運行語句的時候才執(zhí)行對應的模塊，這和AMD是有區(qū)別的。

CommonJs
CommonJs是Node端使用的JavaScript模塊化規(guī)范，使用require進行模塊引入，并使用modules.exports來定義模塊導出。與前面兩種方法來比，它的寫法更加清晰簡潔。

import/export
import/export是ECMAScript6定義的JavaScript模塊引用方式，是唯一一個遵循JavaScript語言標準的模塊化規(guī)范，使用import引入其他模塊，export來進行模塊導出。

5.2.3 項目組件化設計規(guī)范

目前組件化的方案已經越來越多，Web Component組件化，MVVM框架組件化，基于Virtual DOM框架組件化，直接基于目錄管理的組件化等
高效組件化規(guī)范應該解決哪些問題：

組件之間獨立、松耦合。組件之間的HTML、JavaScript、 CSS之間相互獨立，盡量不重復，相同部分通過父級或基礎組件來實現(xiàn)，最大限度減少重復代碼

組件間嵌套使用。組件可以嵌套使用，但嵌套后仍然是獨立、松耦合的。

組件間通信。主要指組件之間的函數(shù)調用或通信，例如A組件完成某個操作后希望B組件執(zhí)行某個行為，這種情況就可以使用監(jiān)聽或觀察者模式在B組件中注冊該行為的事件監(jiān)聽或加入觀察者，然后選擇合適的時機在A組件中觸發(fā)這個事件監(jiān)聽或通知觀察者來觸發(fā)B組件中的行為操作，而不是在A組件中直接拿到B組件的引用并直接進行操作，因為這樣組件之間的行為就會產生耦合。

組件公用部分設計。組件的公用部分應該被抽離出來形成基礎庫，用來增加代碼的復用性。

組件的構建打包。構建工具能夠自動解析和打包組件內容。

異步組件的加載模式。在移動端，通常考慮到頁面首屏，異步的場景應用非常廣泛，所有異步組件不能和同步組件一起處理。這時可以將異步組件區(qū)別于普通組件的目錄存放，并在打包構建時進行異步打包處理。

組件繼承與復用性。對于類似的組件要做到基礎組件復用來減少重復編碼。

私有組件的統(tǒng)一管理。為了提高協(xié)作效率，可以通過搭建私有源的方式來統(tǒng)- - 管理組件庫，例如使用包管理工具等。但這點即使在大的團隊里面也很難實施，因為業(yè)務組件的實現(xiàn)常常需要定制化而且經常變更，這樣維護組件庫成本反而更大，目前可以做的是將公用的組件模塊使用私有源管理起來。

根據(jù)特定場景進行擴展或自定義。如果當前的組件框架不能滿足需求，我們應該能夠很便捷地拓展新的框架和樣式，這樣就能適應更多的場景需求。比如在通過目錄管理組件的方案下，既可以使用MVVM框架進行開發(fā)，也可以使用Virtual DOM框架進行開發(fā)，但要保持基本的規(guī)范結構不變。

5.3 自動化構建

5.3.1 自動化構建的目的

前端構建工具的作用可以認為是對源項目文件或資源進行文件級處理，將文件或資源處理成需要的最佳輸出結構和形式。在處理過程中，我們可以對文件進行模塊化引入、依賴分析，資源合并、壓縮優(yōu)化、文件嵌入、路徑替換、生成資源包等多種操作，這樣就能完成很多原本需要手動完成的事情，極大地提高開發(fā)效率。

5.3.2 自動化構建的原理

構建的流程主要分為7個基本步驟（不同構建工具各有差異，但基本原理是類似的）：

讀取入口文件 -> 分析模塊引用 -> 按照引用加載模塊 -> 模塊文件編譯處理 -> 模塊文件合并 -> 文件優(yōu)化處理 -> 寫入生成目錄

5.4 前端性能優(yōu)化

? 前端優(yōu)化的最終目的都是 提升用戶體驗，改善頁面性能。

? 前端性能可以認為是用戶獲取所需要頁面數(shù)據(jù)或執(zhí)行某個頁面動作的一個實時性指標，一般以用戶希望獲取的數(shù)據(jù)操作到用戶實際獲得數(shù)據(jù)的時間間隔來衡量。

? 例如用戶希望獲得數(shù)據(jù)的操作時打開某個頁面，那么這個操作的前端性能就可以用用戶操作開始到屏幕展示頁面內容給用戶的這段時間間隔來評判。

? 用戶的等待延時可以分為兩部分：可控等待延時和不可控等待延時。可控等待延時可以理解為能通過技術手段和優(yōu)化來改進縮短的部分，例如減少圖片大小讓請求加載更快，減少HTTP請求數(shù)等。不可控等待延時則是不能或很難通過前后端技術手段來改進優(yōu)化的，例如CPU計算時間延時，ISP網絡傳輸延時等。

? 前端中，所有優(yōu)化大師針對可控等待延時這部分來進行的。

5.4.1 前端性能測試

獲取和衡量一個頁面的性能，主要可以通過以下幾個方面：Performance Timing API，Profile工具，頁面埋點計時，資源加載時序圖分析。

5.4.2 桌面瀏覽器前端優(yōu)化策略

網絡加載類

減少HTTP資源請求次數(shù)

在前端頁面中，通常建議盡可能合并靜態(tài)資源圖片、JavaScript 或CSS代碼，減少頁面請求數(shù)和資源請求消耗，這樣可以縮短頁面首次訪問的用戶等待時間。通過構建工具合并雪碧圖、CSS、JavaScript 文件等都是為了減少HTTP資源請求次數(shù)。另外也要盡量避免重復的資源，防止增加多余請求。

減小HTTP請求大小.
除了減少HTTP資源請求次數(shù)，也要盡量減小每個HTTP請求的大小。如減少沒必要的圖片、JavaScript、 CSS及HTML代碼，對文件進行壓縮優(yōu)化，或者使用gzip壓縮傳輸內容等都可以用來減小文件大小，縮短網絡傳輸?shù)却龝r延。前面我們使用構建工具來壓縮靜態(tài)圖片資源以及移除代碼中的注釋并壓縮，目 的都是為了減小HTTP請求的大小。

將CSS或JavaScript放到外部文件中，避免使用<style>或<script>標簽直接引入

避免頁面中空的href和src

為HTML指定Cache-Control或Expires

為HTML內容設置Cache-Control或Expires可以將HTML內容緩存起來，避免頻繁向服務器端發(fā)送請求。前面講到，在頁面Cache-Control或Expires 頭部有效時，瀏覽器將直接從緩存中讀取內容，不向服務器端發(fā)送請求。

<meta http-equiv="Cache-Control" content= "max-age=7200" / >
<meta http-equiv="Expires" content="Mon， 20 Jul 2016 23:00:00 GMT" />

合理設置Etag和Last-Modified

合理設置Etag和Last-Modified使用瀏覽器緩存，對于未修改的文件，靜態(tài)資源服務器會向瀏覽器端返回304，讓瀏覽器從緩存中讀取文件，減少Web資源下載的帶寬消耗并降低服務器負載。

<meta http-equiv="last -modified" content="Mon, 03 Oct 2016 17:45:57 GMT"/>

減少頁面重定向

頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約需要600毫秒的時間開銷，為了保證用戶盡快看到頁面內容，要盡量避免頁面重定向。

使用靜態(tài)資源分域存放來增加下載并行數(shù)

瀏覽器在同一時刻向同一個域名請求文件的并行下載數(shù)是有限的，因此可以利用多個域名的主機來存放不同的靜態(tài)資源，增大頁面加載時資源的并行下載數(shù),縮短頁面資源加載的時間。通常根據(jù)多個域名來分別存儲JavaScript、CSS和圖片文件。

使用靜態(tài)資源CDN來存儲文件

使用CDN Combo下載傳輸內容

使用可緩存的AJAX

使用GET來完成AJAX請求

使用XMLHttpRequest時,瀏覽器中的POST方法發(fā)送請求首先發(fā)送文件頭,然后發(fā)送HTTP正文數(shù)據(jù)。而使用GET時只發(fā)送頭部，所以在拉取服務端數(shù)據(jù)時使用GET請求效率更高。

減少Cookie的大小并進行Cookie隔離

HTTP請求通常默認帶上瀏覽器端的Cookie一起發(fā)送給服務器，所以在非必要的情況下，要盡量減少Cookie來減小HTTP請求的大小。對于靜態(tài)資源，盡量使用不同的域名來存放，因為Cookie默認是不能跨域的，這樣就做到了不同域名下靜態(tài)資源請求的Cookie隔離。

縮小favicon.ico并緩存

推薦使用異步JavaScript資源

異步的JavaScript 資源不會阻塞文檔解析，所以允許在瀏覽器中優(yōu)先渲染頁面，延后加載腳本執(zhí)行。例如JavaScript的引用可以如下設置，也可以使用模塊化加載機制來實現(xiàn)。

<script src="main. js" defer></script><script src="main.js" async></script>

消除阻塞渲染的CSS及JavaScript

對于頁面中加載時間過長的CSS或JavaScript文件，需要進行合理拆分或延后加載，保證關鍵路徑的資源能快速加載完成。

避免使用CSS import引用加載CSS

CSS中的@import可以從另一個樣式文件中引入樣式，但應該避免這種用法，因為這樣會增加CSS資源加載的關鍵路徑長度，帶有@import的CSS樣式需要在CSS文件串行解析到@import時才會加載另外的CSS文件，大大延后CSS渲染完成的時間。

頁面渲染類

把CSS資源引用放在HTML文件頂部

一般推薦將所有CSS資源盡早指定在HTML文檔<head>中，這樣瀏覽器可以優(yōu)先下載CSS并盡早完成頁面渲染。

JavaScript資源引用放到HTML文件底部

JavaScript資源放到HTML文檔底部可以防止JavaScript的加載和解析執(zhí)行對頁面渲染造成阻塞。由于JavaScript資源默認是解析阻塞的，除非被標記為異步或者通過其他的異步方式加載，否則會阻塞HTMLDOM解析和CSS渲染的過程。

不要在HTML中直接縮放圖片

減少DOM元素數(shù)量和深度

HTML中標簽元素越多，標簽的層級越深，瀏覽器解析DOM并繪制到瀏覽器中所花的時間就越長，所以應盡可能保持DOM元素簡潔和層級較少。

盡量避免使用<table>、<iframe>等慢元素

<table>內容的渲染是將table的DOM渲染樹全部生成完并–次性繪制到頁面上的，所以在長表格渲染時很耗性能，應該盡量避免使用它，可以考慮使用列表元素<u1>代替。盡量使用異步的方式動態(tài)添加iframe,因為iframe內資源的下載進程會阻塞父頁面靜態(tài)資源的下載與CSS及HTML DOM的解析。

避免運行耗時的JavaScript

長時間運行的JavaScript會阻塞瀏覽器構建DOM樹、DOM渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的邏輯功能都應該延遲加載執(zhí)行，這和JavaScript資源的異步加載思路是一致的。

避免使用CSS表達式或CSS濾鏡

5.6 前端搜索引擎優(yōu)化基礎

搜索引擎優(yōu)化簡稱SEO

5.6.1 title, keywords, description的優(yōu)化

title、keywords、description 是可以在HTML的<meta>標簽內定義的，有助于搜索引擎抓取到網頁的內容。要注意的是，一般title的權重是最高的，也是最重要的，因此我們應該好好利用title來提高頁面的權重。keywords相對權重較低，可以作為頁面的輔助關鍵詞搜索。description的描述一般會直接顯示在搜索結果的介紹中，可以使用戶快速了解頁面內容的描述文字，所以要盡量讓這段文字能夠描述整個頁面的內容，增加用戶進入頁面的概率。

title的優(yōu)化

一般title的設置要盡量能夠概括頁面的內容，可以使用多個title關鍵字組合的形式，并用分隔符連接起來。分隔符一般有“_”, “-”, “”, “，”等，其中 “_” 分隔符比較容易被百度搜索引擎檢索到，“-”分隔符則容易被谷歌搜索引擎檢索到，“,”則在英文站點中使用比較多，可以使用空格。title的長度在桌面瀏覽器端一般建 議控制在30個字以內，在移動端控制在20個字以內，若長度超出時瀏覽器會默認截斷并顯示省略號。

關于title格式的優(yōu)化設置可以遵循以下規(guī)則:

每個網頁都應該有獨一無二的標題，切忌所有的頁面都使用同樣的默認標題

標題主題明確， 應該包含網頁中最重要的信息

簡明精練， 不應該羅列與網頁內容不相關的信息

用戶瀏覽通常從左到右的， 建議將重要的內容放到title靠前的位置

使用用戶所熟知的語言描述，如果有中、英文兩種網站名稱，盡量使用用戶熟知的語 言作為標題描述

對于網站不同頁面title的定義可以設置如下:

首頁:網站名稱_提供服務介紹或產品介紹

列表頁: 列表名稱_網站名稱

文章頁:文章標題_文章分類_網站名稱

5.6.2 語義化標簽的優(yōu)化

使用具有語義化的HTML5標簽結構

唯一的H1標題

<img>添加alt屬性

總結

以上是生活随笔為你收集整理的《现代前端技术解析》第4-5章 阅读笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。