0755-29686488Web前端技術(shù)由html、css和javascript三大部分構(gòu)成，是一個龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語言。而我們在學(xué)習(xí)它的時候往往是先從某一個點切入，然后不斷地接觸和學(xué)習(xí)新的知識點，因此對于初學(xué)者很難理清楚整個體系的脈絡(luò)結(jié)構(gòu)。本文將對Web前端知識體系進(jìn)行簡單的梳理，對應(yīng)的每個知識點點到為止，不作詳細(xì)介紹。目的是幫助大家審查自己的知識結(jié)構(gòu)是否完善，如有遺漏或不正確的地方，希望共勉。
JAVASCRIPT 篇
0、基礎(chǔ)語法
Javascript基礎(chǔ)語法包括：變量定義、數(shù)據(jù)類型、循環(huán)、選擇、內(nèi)置對象等。
數(shù)據(jù)類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎(chǔ)類型,null和undefined是JS中的兩個特殊類型,object是引用類型。
Javascript可以通過typeof來判斷基礎(chǔ)數(shù)據(jù)類型，但不能夠準(zhǔn)確判斷引用類型, 因此需要用到另外一個方法，那就是Object的toString,關(guān)于數(shù)據(jù)類型及其判斷可以參考以下博客：數(shù)據(jù)類型詳解 和 判斷JS數(shù)據(jù)類型的四種方法
JS常用的內(nèi)置對象有Date、Array、JSON,RegExp等。 一般來講，Date和Array用的最頻繁，JSON可以對對象和數(shù)組進(jìn)行序列化和反序列化，還有一個作用就是實現(xiàn)對象的深拷貝。
RegExp即正則表達(dá)式，是處理字符串的利器。 關(guān)于數(shù)據(jù)類型和正則表達(dá)式的介紹可以參考博客：ES5對數(shù)組增強(qiáng)的9個API 和 JS正則表達(dá)式精簡
1、函數(shù)原型鏈
Javascript雖然沒有繼承概念，但Javascript在函數(shù)Function對象中建立了原型對象prototype，并以Function對象為主線，從上至下，在內(nèi)部構(gòu)建了一條原型鏈。
簡單來說就是建立了變量查找機(jī)制，當(dāng)訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。
因此我們經(jīng)常會利用函數(shù)的原型機(jī)制來實現(xiàn)JS繼承。關(guān)于函數(shù)原型鏈可參考博客：JS原型對象和原型鏈
2、函數(shù)作用域
函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。在JS中沒有會塊級作用域，只有函數(shù)作用域，因此JS中還存在著另外一種怪異現(xiàn)象，那就是變量提升。關(guān)于作用域的介紹請參考博客：函數(shù)的作用域和作用域鏈
3、函數(shù)指針 this
this 存在于函數(shù)中，它指向的是該函數(shù)在運行時被調(diào)用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。
Function對象還提供了call、apply和bind等方法來改變函數(shù)的this指向，其中call和apply主動執(zhí)行函數(shù)，bind一般在事件回調(diào)中使用，而call和apply的區(qū)別只是參數(shù)的傳遞方式不同。關(guān)于call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind
4、構(gòu)造函數(shù) new
JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來調(diào)用，當(dāng)使用new來創(chuàng)建對象時，對應(yīng)的函數(shù)就是構(gòu)造函數(shù)，通過對象來調(diào)用時就是普通函數(shù)。
普通函數(shù)的創(chuàng)建有：顯式聲明、匿名定義、new Function() 等三種方式。
當(dāng)通過new來創(chuàng)建一個新對象時，JS底層將新對象的原型鏈指向了構(gòu)造函數(shù)的原型對象，于是就在新對象和函數(shù)對象之間建立了一條原型鏈，通過新對象可以訪問到函數(shù)對象原型prototype中的方法和屬性。new的詳細(xì)介紹請參考博客：理解JS中的new運算符
5、閉包
閉包其實是一個主動執(zhí)行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個獨立的執(zhí)行過程，因此我們經(jīng)常用閉包來定義組件。關(guān)于閉包的介紹請參考：干貨分享：讓你分分鐘學(xué)會JS閉包
6、單線程和異步隊列
setTimeout和setInterval是JS內(nèi)置的兩個定時器，使用很簡單，但這兩個方法背后的原理卻不簡單。
我們知道，JS是單線程語言，在瀏覽器中，當(dāng)JS代碼被加載時，瀏覽器會為其分配一個主線程來執(zhí)行任務(wù)(函數(shù))，主線程會形成一個全局執(zhí)行環(huán)境，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來執(zhí)行。
但在瀏覽器中有一些任務(wù)是非常耗時的，比如http請求、定時器、事件回調(diào)等，為了保證其他任務(wù)的執(zhí)行效率不被影響，JS在執(zhí)行環(huán)境中維護(hù)了一個異步隊列(也叫工作線程)，并將這些任務(wù)放入隊列中進(jìn)行等待，這些任務(wù)的執(zhí)行時機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后，才會去檢查異步隊列中的任務(wù)是否需要開始執(zhí)行。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。關(guān)于單線程和異步隊列問題請參考：setTimeout（0）
7、異步通訊 Ajax技術(shù)
Ajax是瀏覽器專門用來和服務(wù)器進(jìn)行交互的異步通訊技術(shù)，其核心對象是XMLHttpRequest,通過該對象可以創(chuàng)建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求服務(wù)器,就是只能訪問當(dāng)前域名下的url。
當(dāng)然，如果確信你的站點不存在跨域的風(fēng)險，可以在服務(wù)端主動開啟跨域請求。 也可以直接通過CORS或JSONP來實現(xiàn)。
JSONP是利用腳本(script)跨域能力來模擬Ajax請求。
CORS是一個W3C標(biāo)準(zhǔn)，全稱是”跨域資源共享”（Cross-origin resource sharing）。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 關(guān)于CORS的介紹請參考：跨域資源共享 CORS 詳解
8、DOM對象 document
document對象里保存著整個web頁面dom結(jié)構(gòu)，在頁面上所有的元素最終都會映射為一個dom對象。 document也提供了很多api來查找特定的dom對象，比如getElementById,querySelector等等。
9、事件系統(tǒng) Event
事件是用戶與頁面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)
由于DOM結(jié)構(gòu)可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機(jī)制可以實現(xiàn)很多功能，比如頁面點擊統(tǒng)計。關(guān)于兩種事件流的介紹請參考：事件冒泡和捕獲
除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內(nèi)置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進(jìn)行綁定。
10、全局對象 window
在JS中，當(dāng)一段JS代碼在瀏覽器中被加載執(zhí)行，JS引擎會在內(nèi)存中構(gòu)建一個全局執(zhí)行環(huán)境，執(zhí)行環(huán)境的作用是保證所有的函數(shù)能按照正確的順序被執(zhí)行，而window對象則是這個執(zhí)行環(huán)境中的一個全局對象，window對象中內(nèi)置了很多操作api和對象，document對象就是其中一個。關(guān)于JS執(zhí)行環(huán)境的介紹請參考博客：深入理解JS執(zhí)行細(xì)節(jié)
CSS 篇
css是用來對html進(jìn)行修飾的一門語言。
1、選擇器
css的選擇器有很多種，常用的有類選擇器、標(biāo)簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。
2、定位
定位一般有相對定位(relative)、絕對定位(absolute)、固定定位(fixed)，relative和absolute在移動端用的最多，fixed 在移動端有兼容性問題，因此不推薦使用，在移動端替代fixed的方案是 absolute+內(nèi)部滾動。
3、浮動
設(shè)置float為left或right，就能使該元素脫離文檔流，向左或向右浮動。一般在做宮格模式布局時會用到，如果子元素全部設(shè)置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設(shè)置clear:both, 更高級一點的就給父容器設(shè)置before/after來模擬一個空元素，還可以直接設(shè)置overflow:auto/hidden。除過浮動可以實現(xiàn)宮格模式，行內(nèi)盒子(inline-block)和table也可以。
4、盒子模型
盒子模型是css最重要的一個概念，也是css布局的基石。 常見的盒子模型有塊級盒子(block)和行內(nèi)盒子(inline-block)，盒子最關(guān)鍵的幾個屬性包括margin、border、padding和content,這幾個元素可以設(shè)置盒子和盒子之間的關(guān)系以及盒子和內(nèi)容之間的關(guān)系。還有一個問題是計算盒子的大小，需要注意的是，box-sizing屬性的設(shè)置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。
5、Flex布局
Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態(tài)設(shè)置自身大小；然后當(dāng)Flex容器被應(yīng)用一個大小時（width和height），將會自動調(diào)整容器中的元素適應(yīng)新大小。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
6、transition(過渡) 和 transform(旋轉(zhuǎn))
應(yīng)用transform可以對元素進(jìn)行平移(translate)、旋轉(zhuǎn)(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內(nèi)平滑的過渡。使用transition和transform就可以實現(xiàn)頁面的滑動切換效果。
7、動畫 Animation
Animation首先需要設(shè)置一個動畫函數(shù)，然后以這個動畫的方式來改變元素的css屬性之的變化，動畫可以被設(shè)置為永久循環(huán)演示。 和transition相比，animation設(shè)置動畫效果更靈活更豐富，二者還有一個區(qū)別是：transition只能通過主動改變元素的css值才能觸發(fā)動畫效果，而animation一旦被應(yīng)用，就開始執(zhí)行動畫。
8、Sprite圖
對于大型站點，為了減少http請求的次數(shù)，一般會將常用的小圖標(biāo)排到一個大圖中，頁面加載時只需請求一次網(wǎng)絡(luò)， 然后在css中通過設(shè)置background-position來控制顯示所需要的小圖標(biāo)。
9、字體圖標(biāo) iconfont
所謂字體圖標(biāo)就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中，通過在CSS中引用該字體文件，然后可以直接通過控制字體的css屬性來設(shè)置圖標(biāo)的樣式。
HTML 篇
1、Web語義化 和 SEO
html 常規(guī)標(biāo)簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語義化的標(biāo)簽，比如header,acticle,aside,section,footer,audio,radio 等等。
Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點擊訪問網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目標(biāo)。
搜索引擎通過爬蟲技術(shù)獲取的頁面就是由一堆html標(biāo)簽組成的代碼,，人可以通過可視化的方式來判斷頁面上哪些內(nèi)容是重點，而機(jī)器做不到。 但搜索引擎會根據(jù)標(biāo)簽的含義來判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個頁面的語義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識別頁面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁面的標(biāo)題就是一個簡單的SEO優(yōu)化。
2、頁面渲染機(jī)制
頁面渲染就是瀏覽器的渲染引擎將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的過程。大致工作原理如下：
3、重繪和回流
當(dāng)渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當(dāng)渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。
會引起重繪和回流的操作
4、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對的形式保存，可以設(shè)置過期時間。 但是 cookie 不適合大量數(shù)據(jù)的存儲，因為每請求一次頁面，cookie 都會發(fā)送給服務(wù)器，這使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠(yuǎn)不會被設(shè)置。
html5提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲數(shù)據(jù)，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session),即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分 HOST)，這個相當(dāng)于一個5M大小的前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲數(shù)據(jù)超過了localStorage的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和indexedDB,允許前端以關(guān)系型數(shù)據(jù)庫的方式來存儲本地數(shù)據(jù)，相對來說，這個功能目前應(yīng)用的場景比較少，此處不作介紹。
5、瀏覽器緩存機(jī)制
瀏覽器緩存機(jī)制是指通過 HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機(jī)制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時長是600秒（從發(fā)出請求算起）。在接下來600秒內(nèi)，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求，而是直接使用本地緩存的文件。
Last-Modified 是標(biāo)識文件在服務(wù)器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務(wù)查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1 標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時間。當(dāng)這兩個字段同時出現(xiàn)時，Cache-Control 是高優(yōu)化級的。
Etag 也是和 Last-Modified 一樣，對文件進(jìn)行標(biāo)識的字段。不同的是，Etag 的取值是一個對文件進(jìn)行標(biāo)識的特征字串。在向服務(wù)器查詢文件是否有更新時，瀏覽器通過 If-None-Match 字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認(rèn)為文件沒有更新。
另外有兩種特殊的情況：
6、History路由機(jī)制
用戶訪問網(wǎng)頁的歷史記錄通常會被保存在一個類似于棧對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了一些方法來操作頁面的前進(jìn)和后退：
HTML5 對History Api 進(jìn)行了增強(qiáng)，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當(dāng)前歷史。
當(dāng)點擊瀏覽器后退按鈕或js調(diào)用history.back都會觸發(fā)onpopstate事件, 與其類似的還有一個事件: onhashchange 。
onhashchange是老API, 瀏覽器支持度高, 本來是用來監(jiān)聽hash變化的, 但可以被利用來做客戶端前進(jìn)和后退事件的監(jiān)聽，onpopstate是專門用來監(jiān)聽瀏覽器前進(jìn)后退的, 不僅可以支持hash, 非hash的同源url也支持。
7、HTML5離線緩存
HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區(qū)，如果要在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個部分：
– CACHE MANIFEST – 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
– NETWORK – 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存
– FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應(yīng)用帶來三個優(yōu)勢：
8、Canvas和SVG
Canvas 通過Javascript 來繪制 2D 圖形。Canvas 是逐像素進(jìn)行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。你可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
Canvas和SVG相比，canvas更依賴于分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對象會被頻繁繪制，而svg則比較適用于類似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序。
粵公網(wǎng)安備 44030602001356號
0755-29686488