前端面試筆試知識彙總2（含答案）

另外兩篇文章的連接配接如下：

前端面試筆試知識彙總1（含答案）；

前端面試筆試知識彙總3（含答案）；

結合我的秋招面經來看，效果更佳：2017年秋季校招前端面經（百度，騰訊，網易，華為，樂視等）

以及各個公司校招筆試題回憶錄：各個公司前端筆試題回顧

21、垃圾回收的兩種方法

标記清除：進入環境标記，離開環境，标記為離開

在引用計數中，每一個對象負責維護對象所有引用的計數值。當一個新的引用指向對象時，引用計數器就遞增，當去掉一個引用時，引用計數就遞減。當引用計數到零時，該對象就将釋放占有的資源。

22、判斷類型的方法：

23、正則和字元串

24、Prototype，construtor

Parent.prototype指向了原型對象，而Parent.prototype.construtor又指回了Parent；Parent的每一 個執行個體都包含一個内部屬性__proto__，該屬性指向Parent.prototype。執行個體雖然不包含方法和屬性，但卻可以通過查找獲得。

25、鍊式調用

26、事件委托

優點：通過上面的介紹，大家應該能夠體會到使用事件委托對于web應用程式帶來的幾個優點：

1.可以大量節省記憶體占用，減少事件注冊。

2.可以友善地動态添加和修改元素，不需要因為元素的改動而修改事件綁定

3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的記憶體洩漏發生的機率。

缺點：不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它浏覽器中）。

在管理滑鼠事件的時候有些需要注意的地方。如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風險可就大了，因為mousemove事件觸發非常頻繁。而mouseout則因為其怪異的表現而變得很難用事件代理來管理。

27、常用的正則總結

驗證數字：^[0-9]*$

驗證n位的數字：^\d{n}$

驗證至少n位數字：^\d{n,}$

驗證m-n位的數字：^\d{m,n}$

驗證零和非零開頭的數字：^(0|[1-9][0-9]*)$

驗證有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$

驗證有1-3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$

驗證非零的正整數：^\+?[1-9][0-9]*$

驗證非零的負整數：^\-[1-9][0-9]*$

驗證非負整數（正整數 + 0）  ^\d+$

驗證非正整數（負整數 + 0）  ^((-\d+)|(0+))$

驗證長度為3的字元：^.{3}$

驗證由26個英文字母組成的字元串：^[A-Za-z]+$

驗證由26個大寫英文字母組成的字元串：^[A-Z]+$

驗證由26個小寫英文字母組成的字元串：^[a-z]+$

驗證由數字和26個英文字母組成的字元串：^[A-Za-z0-9]+$

驗證由數字、26個英文字母或者下劃線組成的字元串：^\w+$

驗證使用者密碼:^[a-zA-Z]\w{5,17}$ 正确格式為：以字母開頭，長度在6-18之間，隻能包含字元、數字和下劃線。

驗證是否含有 ^%&',;=?$\" 等字元：[^%&',;=?$\x22]+

驗證漢字：^[\u4e00-\u9fa5],{0,}$

驗證Email位址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

驗證InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

驗證電話号碼：^(\d3,4|\d{3,4}-)?\d{7,8}$：--正确格式為：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。

驗證身份證号（15位或18位數字）：^\d{15}|\d{}18$

驗證一年的12個月：^(0?[1-9]|1[0-2])$ 正确格式為：“01”-“09”和“1”“12”

驗證一個月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$    正确格式為：01、09和1、31。

整數：^-?\d+$

非負浮點數（正浮點數 + 0）：^\d+(\.\d+)?$

正浮點數   ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮點數（負浮點數 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

負浮點數  ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮點數  ^(-?\d+)(\.\d+)?$

28、CDN

CDN的全稱是Content Delivery Network，即内容分發網絡。其基本思路是盡可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使内容傳輸的更快、更穩定。通過在網絡各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智能虛拟網絡，CDN系統能夠實時地根據網絡流量和各節點的連接配接、負載狀況以及到使用者的距離和響應時間等綜合資訊将使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需内容，解決 Internet網絡擁擠的狀況，提高使用者通路網站的響應速度。

29、CSS hack

由于不同廠商的流覽器或某浏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支援、 解析不一樣，導緻在不同浏覽器的環境中呈現出不一緻的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的浏覽器或不同版本寫特定的CSS 樣式，我們把這個針對不同的浏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的原理

由于不同的浏覽器和浏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先級對浏覽器展現效果的影響，我們可以據此針對不同的浏覽器情景來應用不同的CSS。

CSS hack分類

CSS Hack大緻有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE浏覽器不同版本之間的表現差異而引入的。

• 屬性字首法(即類内部Hack)：例如 IE6能識别下劃線"_"和星号" * "，IE7能識别星号" * "，但不能識别下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
• 選擇器字首法(即選擇器Hack)：例如 IE6能識别*html .class{}，IE7能識别*+html .class{}或者*:first-child+html .class{}。
• IE條件注釋法(即HTML條件注釋Hack)： 針對所有IE(注：IE10+已經不再支援條件注釋)： <!--[if IE]>IE浏覽器顯示的内容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>隻在IE6-顯示的内容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有代碼都會生效。

CSS hack利弊

一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及使用者體驗實作向下相容，不得已才使用hack。比如由于IE8及以下版本不支援CSS3,而我們的項目頁面使用了大量 CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法時,可能就得讓IE8- 的專屬hack出馬了。使用hack雖然對頁面表現的一緻性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。相信隻要大家一起努力，少用、慎用hack，未來一定會促使浏覽器廠商的标準越來越趨于統一，順利過渡到标準浏覽器的主流時代。抛棄那些陳舊的IE hack，必将減輕我們編碼的複雜度，少做無用功。

30、@import和link之間的差別

兩者都是外部引用CSS的方式，但是存在一定的差別：

• 老祖宗的差别。link是XHTML标簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS範疇，隻能加載CSS。
• 加載順序的差别。link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
• 相容性的差别。link是XHTML标簽，無相容問題；@import是在CSS2.1提出的，低版本的浏覽器不支援。
• 使用dom控制樣式時的差别。link支援使用Javascript控制DOM去改變樣式；而@import不支援。

@import url(style.css) 和@import url("style.css")是最優的選擇，相容的浏覽器最多。

31、web頁面重構怎麼操作？

頁面重構就是根據原有頁面内容和結構的基礎上，通過div+css寫出符合web标準的頁面結構。

具體實作要達到以下三點：

• 結構完整，可通過标準驗證
• 标簽語義化，結構合理
• 充分考慮到頁面在站點中的“作用和重要性”，并對其進行有針對性的優化

32、HTML5的離線儲存

使用 HTML5，通過建立 cache manifest 檔案，可以輕松地建立 web 應用的離線版本。

HTML5引入了應用程式緩存，這意味着 web 應用可進行緩存，并可在沒有網際網路連接配接時進行通路。 應用程式緩存為應用帶來三個優勢：

• 離線浏覽 – 使用者可在應用離線時使用它們
• 速度 – 已緩存資源加載得更快
• 減少伺服器負載 – 浏覽器将隻從伺服器下載下傳更新過或更改過的資源。

33、跨域資源共享 CORS 詳解

是一個W3C标準，所有浏覽器都支援該功能，IE浏覽器不能低于IE10。需要浏覽器和伺服器同時支援。整個CORS通信過程，都是浏覽器自動完成，不需要使用者參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差别，代碼完全一樣。浏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。是以，實作CORS通信的關鍵是伺服器。隻要伺服器實作了CORS接口，就可以跨源通信。

浏覽器将CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。隻要同時滿足以下兩大條件，就屬于簡單請求。

（1) 請求方法是以下三種方法之一：HEAD，GET，POST

（2）HTTP的頭資訊不超出以下幾種字段：Accept；Accept-Language；Content-Language；Last-Event-ID；Content-Type：隻限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain；

凡是不同時滿足上面兩個條件，就屬于非簡單請求。

簡單請求

對于簡單請求，浏覽器直接發出CORS請求。具體來說，就是在頭資訊之中，增加一個Origin字段。下面是一個例子，浏覽器發現這次跨源AJAX請求是簡單請求，就自動在頭資訊之中，添加一個Origin字段。

GET /cors HTT

P/1.1

；

Origin:

http://api.bob.com

；

Host: api.alice.com；

Accept-Language: en-US；Connection: keep-alive；User-Agent: Mozilla/5.0...

上面的頭資訊中，Origin字段用來說明，本次請求來自哪個源（協定 + 域名 + 端口）。伺服器根據這個值，決定是否同意這次請求。

非簡單請求

非簡單請求是那種對伺服器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

浏覽器先詢問伺服器，目前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊字段。隻有得到肯定答複，浏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。下面是一段浏覽器的JavaScript腳本。

var url = 'http://api.alice.com/cors';

var xhr = new XMLHttpRequest();

xhr.open('PUT', url, true);

xhr.setRequestHeader('X-Custom-Header', 'value');

xhr.send();

上面代碼中，HTTP請求的方法是PUT，并且發送一個自定義頭資訊X-Custom-Header。

浏覽器發現，這是一個非簡單請求，就自動發出一個"預檢"請求，要求伺服器确認可以這樣請求。下面是這個"預檢"請求的HTTP頭資訊。

OPT

IONS /cors HTTP/1.1

；     

Access-Control-Request-Method: PUT

Access-Control-Request-Headers: X-Custom-Header

Host: api.alice.com；             Accept-Language: en-US

Connection: keep-alive；          User-Agent: Mozilla/5.0...

"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭資訊裡面，關鍵字段是Origin，表示請求來自哪個源。

一旦伺服器通過了"預檢"請求，以後每次浏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭資訊字段。伺服器的回應，也都會有一個Access-Control-Allow-Origin頭資訊字段。

CORS與JSONP的使用目的相同，但是比JSONP更強大。

JSONP隻支援GET請求，CORS支援所有類型的HTTP請求。JSONP的優勢在于支援老式浏覽器，以及可以向不支援CORS的網站請求資料。

34、Localstrage

判斷浏覽器是否支援

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

其他操作方法：點操作和[]

web Storage不但可以用自身的setItem,getItem等友善存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行資料存儲。

localStorage和sessionStorage的key和length屬性實作周遊

storage事件

storage還提供了storage事件，當鍵值改變或者clear的時候，就可以觸發storage事件，如下面的代碼就添加了一個storage事件改變的監聽：

35、Post  Get

在客戶機和伺服器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。

GET - 從指定的資源請求資料；POST - 向指定的資源送出要被處理的資料

GET 方法

請注意，查詢字元串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.asp?name1=value1&name2=value2；

POST 方法

請注意，查詢字元串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

POST /test/demo_form.asp HTTP/1.1；    

Host: w3schools.com；             name1=value1&name2=value2；

比較 GET 與 POST

下面的表格比較了兩種 HTTP 方法：GET 和 POST。

GET	POST
後退按鈕/重新整理	無害	資料會被重新送出（浏覽器應該告知使用者資料會被重新送出）。
書簽	可收藏為書簽	不可收藏為書簽
緩存	能被緩存	不能緩存
編碼類型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。為二進制資料使用多重編碼。
曆史	參數保留在浏覽器曆史中。	參數不會儲存在浏覽器曆史中。
對資料長度的限制	是的。當發送資料時，GET 方法向 URL 添加資料；URL 的長度是受限制的（URL 的最大長度是 2048 個字元）。	無限制。
對資料類型的限制	隻允許 ASCII 字元。	沒有限制。也允許二進制資料。
安全性	與 POST 相比，GET 的安全性較差，因為所發送的資料是 URL 的一部分。在發送密碼或其他敏感資訊時絕不要使用 GET ！	POST 比 GET 更安全，因為參數不會被儲存在浏覽器曆史或 web 伺服器日志中。
可見性	資料在 URL 中對所有人都是可見的。	資料不會顯示在 URL 中。

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

方法	描述
HEAD	與 GET 相同，但隻傳回 HTTP 報頭，不傳回文檔主體。
PUT	上傳指定的 URI 表示。
DELETE	删除指定資源。
OPTIONS	傳回伺服器支援的 HTTP 方法。
CONNECT	把請求連接配接轉換到透明的 TCP/IP 通道。

36、Cookie、sessionStorage 和 localStrorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以友善的在web請求之間儲存資料。有了本地資料，就可以避免資料在浏覽器和伺服器間不必要地來回傳遞。

sessionStorage 、localStorage 和 cookie 之間的差別：

共同點：都是儲存在浏覽器端，且同源的。

差別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在浏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie隻屬于某個路徑下。存儲大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，是以cookie隻适合儲存很小的資料，如會話辨別。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期不同，sessionStorage：僅在目前浏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或浏覽器關閉也一直儲存，是以用作持久資料；cookie隻在設定的cookie過期時間之前一直有效，即使視窗或浏覽器關閉。作用域不同，sessionStorage不在不同的浏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制，可以将資料更新的通知發送給監聽者。Web Storage 的 api 接口使用更友善。

userdata，隻有ie支援，單個容量64kb，每個域名最多可存10個共計640k資料。預設儲存在C:\Documents and Settings\Administrator\UserData\目錄下，儲存格式為xml。關于userdata更多資料參考

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp

sessionStorage用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀。是以sessionStorage不是一種持久化的本地存儲，僅僅是會話級别的存儲。

localStorage用于持久化的本地存儲，除非主動删除資料，否則資料是永遠不會過期的。

為什麼選擇Web Storage而不是Cookie？

與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：

1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他浏覽器實作略有不同，但都比Cookie要大很多。

2. 存儲内容不會發送到伺服器：當設定了Cookie後，Cookie的内容會随着請求一并發送的伺服器，這對于本地存儲的資料是一種帶寬浪費。而Web Storage中的資料則僅僅是存在本地，不會與伺服器發生任何互動。

3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得資料操作更為簡便。

4. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，是以不會造成資料混亂。

37、html5（websocket等）

1. 新的Doctype ：盡管使用<!DOCTYPE html>，即使浏覽器不懂這句話也會按照标準模式去渲染

2. Figure元素

用<figure>和<figcaption>來語義化地表示帶标題的圖檔

3. 重新定義的<small>

<small>已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明

4. 去掉link和script标簽裡面的type屬性

5. 加/不加 括号 ：HTML5沒有嚴格的要求屬性必須加引号，閉合不閉合，但是建議加上引号和閉合标簽

6. 讓你的内容可編輯，隻需要加一個contenteditable屬性

7. Email Inputs ：如果我們給Input的type設定為email，浏覽器就會驗證這個輸入是否是email類型，當然不能隻依賴前端的校驗，後端也得有相應的校驗

8. Placeholders ：這個input屬性的意義就是不必通過javascript來做placeholder的效果了

9. Local Storage ：使用Local Storage可以永久存儲大的資料片段在用戶端（除非主動删除），目前大部分浏覽器已經支援，在使用之前可以檢測一下window.localStorage是否存在

10. 語義化的header和footer

11. 更多的HTML5表單特性

12. IE和HTML5 ：預設的，HTML5新元素被以inline的方式渲染，不過可以通過下面這種方式讓 其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

    display: block;

}      

不幸的是IE會忽略這些樣式，可以像下面這樣fix:

13. hgroup ：一般在header裡面用來将一組标題組合在一起，如

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>      

14. Required屬性：required屬性定義了一個input是否是必須的，你可以像下面這樣聲明

<input type=”text” name=”someInput” required>

或者

<input type=”text” name=”someInput” required=”required”>

15. Autofocus屬性：正如它的詞義，就是聚焦到輸入框裡面

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

16. Audio支援：HTML5提供了<audio>标簽，你不需要再按照第三方插件來渲染音頻，大多數現代浏覽器提供了對于HTML5 Audio的支援，不過目前仍舊需要提供一些相容處理，如

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio>      

17. Video支援：和 Audio很像，<video>标簽提供了對于video的支援，由于HTML5文檔并沒有給video指定一個特定的編碼，是以浏 覽器去決定要支援哪些編碼，導緻了很多不一緻。Safari和IE支援H.264編碼的格式，Firefox和Opera支援Theora和Vorbis 編碼的格式，當使用HTML5 video的時候，你必須都提供：

18. 預加載視訊：preload屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面加載的時候去預加載視訊

<video preload>

19. 顯示視訊控制：<video preload controls>

20. 正規表達式：由于pattern屬性，我們可以在你的markup裡面直接使用正規表達式了

21. 檢測屬性支援：除了Modernizr之外我們還可以通過javascript簡單地檢測一些屬性是否支援，如：

22. Mark元素：把<mark>元素看做是高亮的作用，當我選擇一段文字的時候，javascript對于HTML的markup效果應該是這樣的：

23. 什麼時候用<div> ：HTML5已經引入了這麼多元素，那麼div我們還要用嗎？div你可以在沒有更好的元素的時候去用。

26. Data屬性

<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>

CSS中使用：

27. Output元素：<output>元素用來顯示計算結果，也有一個和label一樣的for屬性

28. 用Range Input來建立滑塊：HTML5引用的range類型可以建立滑塊，它接受min, max, step和value屬性

可以使用css的:before和:after來顯示min和max的值

38、form表單

action 屬性定義在送出表單時執行的動作。如果省略 action 屬性，則 action 會被設定為目前頁面。如果要正确地被送出，每個輸入字段必須設定一個 name 屬性。

本例隻會送出 "Last name" 輸入字段：

執行個體

用 <fieldset> 組合表單資料

<fieldset> 元素組合表單中的相關資料

<legend> 元素為 <fieldset> 元素定義标題。

屬性
accept-charset	規定在被送出表單中使用的字元集（預設：頁面字元集）。
action	規定向何處送出表單的位址（URL）（送出頁面）。
autocomplete	規定浏覽器應該自動完成表單（預設：開啟）。
enctype	規定被送出資料的編碼（預設：url-encoded）。
method	規定在送出表單時所用的 HTTP 方法（預設：GET）。
name	規定識别表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate	規定浏覽器不驗證表單。
target	規定 action 屬性中位址的目标（預設：_self）。

39、input type 屬性

值
button	定義可點選的按鈕（大多與 JavaScript 使用來啟動腳本）
checkbox	定義複選框。
color	定義拾色器。
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時、分、秒（帶有 time 控件）
email	定義用于 e-mail 位址的文本字段
file	定義輸入字段和 "浏覽..." 按鈕，供檔案上傳
hidden	定義隐藏輸入字段
image	定義圖像作為送出按鈕
number	定義帶有 spinner 控件的數字字段
password	定義密碼字段。字段中的字元會被遮蔽。
radio	定義單選按鈕。
range	定義帶有 slider 控件的數字字段。
reset	定義重置按鈕。重置按鈕會将所有表單字段重置為初始值。
search	定義用于搜尋的文本字段。
submit	定義送出按鈕。送出按鈕向伺服器發送資料。
tel	定義用于電話号碼的文本字段。
text	預設。定義單行輸入字段，使用者可在其中輸入文本。預設是 20 個字元。
url	定義用于 URL 的文本字段。

40、Label for屬性

for 屬性規定 label 與哪個表單元素綁定。

隐式和顯式的聯系：标記通常以下面兩種方式中的一種來和表單控件相聯系：将表單控件作為标記标簽的内容，這樣的就是隐式形式，或者為 <label> 标簽下的 for 屬性命名一個目标表單 id，這樣就是顯式形式。

例如，在 XHTML 中：

第一個标記是以顯式形式将文本 "Social Security Number:" 和表單的社會安全号碼的文本輸入控件 ("SocSecNum") 聯系起來，它的 for 屬性的值和控件的 id 一樣，都是 SSN。第二個标記 ("Date of Birth:") 不需要 for 屬性，它的相關控件也不需要 id 屬性，它們是通過在 <label> 标簽中放入 <input> 标簽來隐式地連接配接起來的。

41、MVC模式

MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟體設計典範，用一種業務邏輯、資料、界面顯示分離的方法組織代碼，将業務邏輯聚集到一個部件裡面，在改進和個性化定制界面及使用者互動的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用于映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化使用者界面的結構中。

MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是應用程式中用于處理應用程式資料邏輯的部分。通常模型對象負責在資料庫中存取資料。

View（視圖）是應用程式中處理資料顯示的部分。通常視圖是依據模型資料建立的。

Controller（控制器）是應用程式中處理使用者互動的部分。通常控制器負責從視圖讀取資料，控制使用者輸入，并向模型發送資料。

MVC 分層有助于管理複雜的應用程式，因為您可以在一個時間内專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注于視圖設計。同時也讓應用程式的測試更加容易。

MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發視圖、控制器邏輯和業務邏輯。

42、Angular

1、優點

模闆功能強大豐富，并且是聲明式的，自帶了豐富的 Angular 指令；

是一個比較完善的前端MV*架構，包含模闆，資料雙向綁定，路由，子產品化，服務，依賴注入等所有功能

自定義 Directive，比 jQuery 插件還靈活，但是需要深入了解 Directive 的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在 directive 使用 $parse

ng子產品化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的代碼，對于靈活開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中疊代産品，但是js的代碼基本上很少改動

補充：Angular支援單元測試和e2e-testing

2、缺點

驗證功能錯誤資訊顯示比較薄弱，需要寫很多模闆标簽，沒有JQuery Validate友善，是以我們自己封裝了驗證的錯誤資訊提示，詳細參考 why520crazy/w5c-validator-angular · GitHub

ngView隻能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對于URL的控制不是很靈活，必須是嵌套式的（也許我沒有深入了解或者新版本有改進）

對于特别複雜的應用場景，貌似性能有點問題，特别是在Windows下使用chrome浏覽器，不知道是記憶體洩漏了還是什麼其他問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中

這次從1.0.X更新到1.2.X，貌似有比較大的調整，沒有完美相容低版本，更新之後可能會導緻一個相容性的BUG，具體詳細資訊參考官方文檔 AngularJS ，對應的中文版本：Angular 1.0到1.2 遷移指南

ng提倡在控制器裡面不要有操作DOM的代碼，對于一些JQuery 插件的使用，如果想不破壞代碼的整潔性，需要寫一些directive去封裝一下JQ插件，但是現在有很多插件的版本已經支援Angular了，如：jQuery File Upload Demo

Angular 太笨重了，沒有讓使用者選擇一個輕量級的版本，當然1.2.X後，Angular也在做一些更改，比如把route，animate等子產品獨立出去，讓使用者自己去選擇

43、排序算法總結

44、循環周遊

1、For in

枚舉過程中将會列出所有的屬性。是以中間可以用hasOwnProperty，确定對象是否有自己的屬性。

45、定義不可修改屬性

46、清除浮動

1、使用空标簽清除浮動

空标簽可以是div标簽，也可以是P标簽。也有很多人用<hr>，隻是需要另外 為其清除邊框，但理論上可以是任何标簽。對于使用額外标簽清除浮動（閉合浮動元素），是W3C推薦的 做法。

這種方式是在需要清除浮動的父級元素内部的所有浮動元素後添加這樣一個标簽清除浮動，并為其定義CSS代 碼：clear:both。此方法的弊端在于增加了無意義的結構元素。

2、使用overflow屬性。

此方法有效地解決了通過空标簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！”zoom:1″用于相容IE6,也可以用width:100%。

不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不确定的，你最好是能在多個浏覽器上測試你的頁面；

3、使用after僞對象清除浮動。

 該方法隻适用于非IE浏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的僞對象中設定height:0，否則該元素會比實際高出若幹像 素；二、content屬性是必須的，但其值可以為空，藍色理想讨論該方法的時候content屬性的值設為”.”，但我發現為空亦是可以的。

47、浏覽器核心

JavaScript引擎是SpiderMonkey。

1、Trident

核心的常見浏覽器有IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1]  360安全浏覽器（1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink）獵豹極輕浏覽器，360極速浏覽器（7.5之前為Trident+Webkit，7.5為Trident+Blink）

2、Gecko

Gecko核心常見的浏覽器：[1]  Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon；

3、Presto

Presto(Opera前核心) (已廢棄)： Opera12.17及更早版本曾經采用的核心，現已停止開發并廢棄，該核心在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極緻，然而代價是犧牲了網頁的相容性。

4、WebKit

WebKit核心常見的浏覽器：傲遊浏覽器3、[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機浏覽器、Android 預設浏覽器，

5、Blink

Blink是一個由Google和Opera Software開發的浏覽器排版引擎，Google計劃将這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月的時候公布了這一消息。 這一渲染引擎是開源引擎WebKit中WebCore元件的一個分支，并且在Chrome（28及往後版本）、Opera（15及往後版本）和 Yandex浏覽器中使用。

樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特