前端JAVASCRIPT和HTML總結

JAVASCRIPT 篇

0、基礎語法

Javascript基礎語法包括：變量定義、數據類型、循環、選擇、內置對象等。

數據類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎類型,null和undefined是JS中的兩個特殊類型,object是引用類型。

Javascript能夠經過typeof來判斷基礎數據類型，但不可以準確判斷引用類型, 所以須要用到另一個方法，那就是Object的toString,關於數據類型及其判斷能夠參考如下博客：數據類型詳解 和 判斷JS數據類型的四種方法

JS經常使用的內置對象有Date、Array、JSON,RegExp等。 通常來說，Date和Array用的最頻繁，JSON能夠對對象和數組進行序列化和反序列化，還有一個做用就是實現對象的深拷貝。

RegExp即正則表達式，是處理字符串的利器。 關於數據類型和正則表達式的介紹能夠參考博客：ES5對數組加強的9個API 和 JS正則表達式精簡

一、函數原型鏈

Javascript雖然沒有繼承概念，但Javascript在函數Function對象中創建了原型對象prototype，並以Function對象爲主線，從上至下，在內部構建了一條原型鏈。

簡單來講就是創建了變量查找機制，當訪問一個對象的屬性時，先查找對象自己是否存在，若是不存在就去該對象所在的原型連上去找，直到Object對象爲止，若是都沒有找到該屬性纔會返回undefined。

所以咱們常常會利用函數的原型機制來實現JS繼承。關於函數原型鏈可參考博客：JS原型對象和原型鏈

二、函數做用域

函數做用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級做用域，只有函數做用域，所以JS中還存在着另一種怪異現象，那就是變量提高。關於做用域的介紹請參考博客：函數的做用域和做用域鏈

三、函數指針 this

this 存在於函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，所以須要對this做深刻的理解。

Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執行函數，bind通常在事件回調中使用，而call和apply的區別只是參數的傳遞方式不一樣。關於call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind

四、構造函數 new

JS中的函數便可以是構造函數又能夠看成普通函數來調用，當使用new來建立對象時，對應的函數就是構造函數，經過對象來調用時就是普通函數。

普通函數的建立有：顯式聲明、匿名定義、new Function() 等三種方式。

當經過new來建立一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，因而就在新對象和函數對象之間創建了一條原型鏈，經過新對象能夠訪問到函數對象原型prototype中的方法和屬性。new的詳細介紹請參考博客：理解JS中的new運算符

五、閉包

閉包實際上是一個主動執行的代碼塊，這個代碼塊的特殊之處是能夠永久保存局部變量，但又不污染全局變量，能夠造成一個獨立的執行過程，所以咱們常常用閉包來定義組件。關於閉包的介紹請參考：乾貨分享：讓你分分鐘學會JS閉包

六、單線程和異步隊列

setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背後的原理卻不簡單。

咱們知道，JS是單線程語言，在瀏覽器中，當JS代碼被加載時，瀏覽器會爲其分配一個主線程來執行任務(函數)，主線程會造成一個全局執行環境，執行環境採用棧的方式將待執行任務按順序依次來執行。

但在瀏覽器中有一些任務是很是耗時的，好比http請求、定時器、事件回調等，爲了保證其餘任務的執行效率不被影響，JS在執行環境中維護了一個異步隊列(也叫工做線程)，並將這些任務放入隊列中進行等待，這些任務的執行時機並不肯定，只有當主線程的任務執行完成之後，纔會去檢查異步隊列中的任務是否須要開始執行。這就是爲何setTimeout(fn,0) 始終要等到最後執行的緣由。關於單線程和異步隊列問題請參考：setTimeout（0）

七、異步通信 Ajax技術 

Ajax是瀏覽器專門用來和服務器進行交互的異步通信技術，其核心對象是XMLHttpRequest,經過該對象能夠建立一個Ajax請求。爲了防止XSS攻擊，瀏覽器對Ajax作了限制，不容許Ajax跨域請求服務器,就是隻能訪問當前域名下的url。

固然，若是確信你的站點不存在跨域的風險，能夠在服務端主動開啓跨域請求。 也能夠直接經過CORS或JSONP來實現。

JSONP是利用腳本(script)跨域能力來模擬Ajax請求。

CORS是一個W3C標準，全稱是」跨域資源共享」（Cross-origin resource sharing）。它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 關於CORS的介紹請參考：跨域資源共享 CORS 詳解

八、DOM對象 document

document對象裏保存着整個web頁面dom結構，在頁面上全部的元素最終都會映射爲一個dom對象。 document也提供了不少api來查找特定的dom對象，好比getElementById,querySelector等等。

九、事件系統 Event

事件是用戶與頁面交互的基礎，到目前爲止，DOM事件從PC端的 鼠標事件(mouse) 發展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)

因爲DOM結構可能會多層嵌套，所以也衍生出了兩種事件流：事件捕獲和事件冒泡，後者最經常使用。利用事件冒泡機制能夠實現不少功能，好比頁面點擊統計。關於兩種事件流的介紹請參考：事件冒泡和捕獲

除此以外，在頁面初始化、滾動、隱藏、返回等操做時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，若是想要捕獲這些事件，須要經過addEventLisener/attachEvent來進行綁定。

十、全局對象 window

在JS中，當一段JS代碼在瀏覽器中被加載執行，JS引擎會在內存中構建一個全局執行環境，執行環境的做用是保證全部的函數能按照正確的順序被執行，而window對象則是這個執行環境中的一個全局對象，window對象中內置了不少操做api和對象，document對象就是其中一個。關於JS執行環境的介紹請參考博客：深刻理解JS執行細節

CSS 篇

css是用來對html進行修飾的一門語言。

一、選擇器

css的選擇器有不少種，經常使用的有類選擇器、標籤選擇器、ID選擇器、後代選擇器、羣組選擇器、僞類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

二、定位

定位通常有相對定位(relative)、絕對定位(absolute)、固定定位(fixed)，relative和absolute在移動端用的最多，fixed 在移動端有兼容性問題，所以不推薦使用，在移動端替代fixed的方案是 absolute+內部滾動。

三、浮動

設置float爲left或right，就能使該元素脫離文檔流，向左或向右浮動。通常在作宮格模式佈局時會用到，若是子元素所有設置爲浮動，則父元素是塌陷的，這時就須要清除浮動，清除浮動的方法也不少，經常使用的方法是在元素末尾加空元素設置clear:both, 更高級一點的就給父容器設置before/after來模擬一個空元素，還能夠直接設置overflow:auto/hidden。除過浮動能夠實現宮格模式，行內盒子(inline-block)和table也能夠。

四、盒子模型

盒子模型是css最重要的一個概念，也是css佈局的基石。 常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，盒子最關鍵的幾個屬性包括margin、border、padding和content,這幾個元素能夠設置盒子和盒子之間的關係以及盒子和內容之間的關係。還有一個問題是計算盒子的大小，須要注意的是，box-sizing屬性的設置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

五、Flex佈局

Flex佈局的容器是一個伸縮容器，首先容器自己會更具容器中的元素動態設置自身大小；而後當Flex容器被應用一個大小時（width和height），將會自動調整容器中的元素適應新大小。Flex容器也能夠設置伸縮比例和固定寬度，還能夠設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，作頁面佈局的能夠方便不少了。注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

六、transition(過渡) 和 transform(旋轉)

應用transform能夠對元素進行平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內平滑的過渡。使用transition和transform就能夠實現頁面的滑動切換效果。

七、動畫 Animation

Animation首先須要設置一個動畫函數，而後以這個動畫的方式來改變元素的css屬性之的變化，動畫能夠被設置爲永久循環演示。 和transition相比，animation設置動畫效果更靈活更豐富，兩者還有一個區別是：transition只能經過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。

八、Sprite圖

對於大型站點，爲了減小http請求的次數，通常會將經常使用的小圖標排到一個大圖中，頁面加載時只需請求一次網絡， 而後在css中經過設置background-position來控制顯示所須要的小圖標。

九、字體圖標 iconfont

所謂字體圖標就是將經常使用的圖標轉化爲字體資源存在文件中，經過在CSS中引用該字體文件，而後能夠直接經過控制字體的css屬性來設置圖標的樣式。

HTML 篇

一、Web語義化 和 SEO

html 常規標籤有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了不少語義化的標籤，好比header,acticle,aside,section,footer,audio,radio 等等。

Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，可以讓人和搜索引擎都容易理解。

SEO是指在瞭解搜索引擎天然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的天然排名，得到更多的展示量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。

搜索引擎經過爬蟲技術獲取的頁面就是由一堆html標籤組成的代碼,，人能夠經過可視化的方式來判斷頁面上哪些內容是重點，而機器作不到。 但搜索引擎會根據標籤的含義來判斷內容的權重，所以，在合適的位置使用恰當的標籤，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，並予以較高的權值。好比h1~h6這幾個標籤在SEO中的權值很是高，用它們做頁面的標題就是一個簡單的SEO優化。

二、頁面渲染機制

頁面渲染就是瀏覽器的渲染引擎將html代碼根據CSS定義的規則顯示在瀏覽器窗口中的過程。大體工做原理以下：

• 用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件；

• 渲染引擎開始載入html代碼，並將HTML中的標籤轉化爲DOM節點，生成DOM樹；

• 若是中引用了外部css文件，則發出css文件請求，服務器返回該文件；

• 若是中引用了外部js文件，則發出js文件請求，服務器返回該文件後開始運行；

• 渲染引擎繼續載入html中的部分的代碼，並開始解析前面返回的css文件，而後根據css選擇器計算出節點的樣式，建立渲染樹；

• 從根節點遞歸調用，計算每個元素的大小、位置等，給每一個節點所應該出如今屏幕上的精確座標；

• 若是body中的引用了圖片資源，則當即向服務器發出請求，此時渲染引擎不會等待圖片下載完畢，而是繼續渲染後面的代碼；

• 服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排版，所以引擎須要回過頭來從新渲染這部分代碼；

• 若是此時js腳本中運行了style.display=」none」, 佈局被改變，引擎也須要從新渲染這部分代碼；

• 直到爲止，頁面渲染完畢。

三、重繪和迴流

當渲染樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流。好比上面的img文件加載完成後就會引發迴流，每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。

當渲染樹中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

從上面能夠看出，迴流必將引發重繪，而重繪不必定會引發迴流。

會引發重繪和迴流的操做

• 添加、刪除元素(迴流+重繪)

• 隱藏元素，display:none(迴流+重繪)，visibility:hidden(只重繪，不迴流)

• 移動元素，好比改變top,left,transform的值，或者移動元素到另一個父元素中。(重繪+迴流)

• 對style的操做(對不一樣的屬性操做，影響不同)

• 還有一種是用戶的操做，好比改變瀏覽器大小，改變瀏覽器的字體大小等(迴流+重繪)

四、本地存儲

本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，能夠設置過時時間。 可是 cookie 不適合大量數據的存儲，由於每請求一次頁面，cookie 都會發送給服務器，這使得 cookie 速度很慢並且效率也不高。所以cookie的大小被限制爲4k左右(不一樣瀏覽器可能不一樣,分HOST)，以下所示：

• Firefox和Safari容許cookie多達4097個字節，包括名（name）、值（value）和等號。

• Opera容許cookie多達4096個字節，包括：名（name）、值（value）和等號。

• Internet Explorer容許cookie多達4095個字節，包括：名（name）、值（value）和等號。

在全部瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。

html5提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲數據，前者是永久存儲，後者的存儲期限僅限於瀏覽器會話(session),即當瀏覽器窗口關閉後，sessionStorage中的數據被清除。

localStorage的存儲空間大約5M左右(不一樣瀏覽器可能不一樣，分 HOST)，這個至關於一個5M大小的前端頁面的數據庫，相比於cookie能夠節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage的存儲空間後會拋出異常。

此外，H5還提供了逆天的websql和indexedDB,容許前端以關係型數據庫的方式來存儲本地數據，相對來講，這個功能目前應用的場景比較少，此處不做介紹。

五、瀏覽器緩存機制

瀏覽器緩存機制是指經過 HTTP 協議頭裏的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機制。

Cache-Control 用於控制文件在本地緩存有效時長。最多見的，好比服務器回包：Cache-Control:max-age=600 表示文件在本地應該緩存，且有效時長是600秒（從發出請求算起）。在接下來600秒內，若是有請求這個資源，瀏覽器不會發出 HTTP 請求，而是直接使用本地緩存的文件。

Last-Modified 是標識文件在服務器上的最新更新時間。下次請求時，若是文件緩存過時，瀏覽器經過 If-Modified-Since 字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。若是沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；若是有修改，則返回200，同時返回最新的文件。

Cache-Control 一般與 Last-Modified 一塊兒使用。一個用於控制緩存有效時間，一個在緩存失效後，向服務查詢是否有更新。

Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個時間點以前，緩存都是有效的。

Expires 是 HTTP1.0 標準中的字段，Cache-Control 是 HTTP1.1 標準中新加的字段，功能同樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control 是高優化級的。

Etag 也是和 Last-Modified 同樣，對文件進行標識的字段。不一樣的是，Etag 的取值是一個對文件進行標識的特徵字串。在向服務器查詢文件是否有更新時，瀏覽器經過 If-None-Match 字段把特徵字串發送給服務器，由服務器和文件最新特徵字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和 Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要知足基中一個條件，就認爲文件沒有更新。

另外有兩種特殊的狀況：

• 手動刷新頁面（F5)，瀏覽器會直接認爲緩存已通過期（可能緩存尚未過時），在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。

• 強制刷新頁面（Ctrl+F5)，瀏覽器會直接忽略本地的緩存（有緩存也會認爲本地沒有緩存），在請求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務從新拉取文件。

六、History路由機制

用戶訪問網頁的歷史記錄一般會被保存在一個相似於棧對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了一些方法來操做頁面的前進和後退：

• window.history.back() 返回到上一個頁面

• window.history.forward() 進入到下一個頁面

• window.history.go([delta]) 跳轉到指定頁面

HTML5 對History Api 進行了加強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate

pushState是往history對象裏添加一個新的歷史記錄，即壓棧。

replaceState 是替換history對象中的當前歷史。

當點擊瀏覽器後退按鈕或js調用history.back都會觸發onpopstate事件, 與其相似的還有一個事件: onhashchange 。

onhashchange是老API, 瀏覽器支持度高, 原本是用來監聽hash變化的, 但能夠被利用來作客戶端前進和後退事件的監聽，onpopstate是專門用來監聽瀏覽器前進後退的, 不只能夠支持hash, 非hash的同源url也支持。

七、HTML5離線緩存

HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，若是要在這個緩存中保存數據，可使用一個描述文件（manifest file），列出要下載和緩存的資源。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分爲三個部分：

– CACHE MANIFEST – 在此標題下列出的文件將在首次下載後進行緩存

– NETWORK – 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存

– FALLBACK – 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

離線緩存爲應用帶來三個優點：

• 離線瀏覽 – 用戶可在應用離線時使用它們

• 速度 – 已緩存資源加載得更快

• 減小服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。

八、Canvas和SVG

Canvas 經過Javascript 來繪製 2D 圖形。Canvas 是逐像素進行渲染的。在 Canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。你能夠爲某個元素附加 JavaScript 事件處理器。在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas和SVG相比，canvas更依賴於分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型遊戲，其中的許多對象會被頻繁繪製，而svg則比較適用於相似谷歌地圖帶有大型渲染區域的應用程序。