摘要：線程的劃分尺度小于進程，使得多線程程序的并發性高。線程在執行過程中與進程還是有區別的。用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。

前些日子在忙著面試，拿了心儀的 offer 以后閑下來整理了一些面試相關的基本概念。由于很多關于代碼細節的東西之前的博客都有更詳細的解釋，所以本文涉及代碼細節比較少，主要是面試相關的概念，也是前端比較零碎的一些知識。
以下內容包括我面試過程遇到的以及有些僅復習時遇到的內容，有不對的地方歡迎指正。

在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

創建新節點

createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

添加、移除、替換、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

查找

getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性

域名解析

發起TCP的3次握手

建立TCP連接后發起http請求

服務器端響應http請求，瀏覽器得到html代碼

瀏覽器解析html代碼，并請求html代碼中的資源

瀏覽器對頁面進行渲染呈現給用戶

攻擊：

XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。

SQL 注入攻擊：通過表單提交可運行的 sql 語句，以破壞數據庫數據。

CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。

dDos 拒絕服務攻擊：通過大量請求瘋狂占用服務器資源至其癱瘓。

CDN 攻擊：使用不合理數據發起請求或請求不合理接口。

身份偽造：冒充服務器或用戶獲取從另一方獲取信息。

防御：

XSS:

輸入驗證，過濾標簽、事件、腳本、SQL

http頭： X-XSS-Protection

cookie保護：set-cookie 頭加入 http-only

SQL 注入

輸入驗證，過濾標簽、事件、腳本、SQL

數據庫權限最小化

使用接口而非 SQL 語句

限制文件上傳類型

CSRF

驗證碼

驗證 http 頭 referer 項

在 http 中加入 taken

身份偽造

隱藏敏感信息

加密

session 定期失效

權限驗證、中間件校驗

數字簽名

CA 證書校驗

dDos 拒絕服務攻擊

流量防火墻

驗證碼

CDN 攻擊

對版本控制進行Hash驗證

跳轉驗證（重定向驗證）

ajax 是異步 javascript
readyState屬性狀態有5個可取值： 0=未初始化，1=啟動 2=發送，3=接收，4=完成

Ajax的特點

通過異步模式，提升了用戶體驗

優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用

Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。

Ajax優點是通過異步通信實現局部刷新

ajax的缺點

ajax不支持瀏覽器back按鈕。

安全問題 AJAX暴露了與服務器交互的細節。

對搜索引擎的支持比較弱。

破壞了程序的異常機制。

不容易調試。

有三種行為受到限制：1. Cookie、LocalStorage和IndexDB無法獲取；2. DOM無法獲得。3. AJAX請求不能發送。

一級域名相同，只是二級域名不同，瀏覽器允許通過設置 document.domain 共享 cookie 和 DOM

目前有三種方法，可以解決跨域窗口的通信問題：

onhashchange 事件 + #data 片段標識符

監聽子窗口 window.name 屬性的變化

window.postMessage(data, url), html5 新接口，監聽 onmessage 事件

其他方法：代理服務器，JSONP，WebSocket(http origin頭)，CORS(Access-Control-Allow-Origin)

漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級(graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

根據屏幕不同大小，縮小窗口出橫向滾動條在所難免，但理想情況下，頁面應該能適應不同客戶端瀏覽器和分辨率。實際操作通常又有三種情況：版面自適應、視覺自適應、內容自適應。

添加了保留字 protectedstatic 和 interface

在嚴格模式下不可以用with

在嚴格模式下變量必須顯示聲明varletconst

在嚴格模式下this默認是undefined

在嚴格模式下為只讀變量和不可擴展對象賦值會報錯 而不是靜默失敗

在嚴格模式下不可以在eval參數中定義變量和函數

在嚴格模式下有名參數是arguments參數的靜態副本而非引用

在嚴格模式下用delete刪除var聲明的變量和不可配置屬性時拋出異常而不是靜默失敗返回false

在嚴格模式下arguments和eval是關鍵字不能被修改

在嚴格模式下不可以用8進制

在嚴格模式下函數的形參不可以同名

在嚴格模式下不可以使用caller和arguments的屬性會報錯

偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。它們的本質是對象，其 key 為數字，而存在一個 key 為 "length" 的屬性表示其長度。典型的是函數的argument參數、NodeList對象。轉換方式有一下幾種：

var arr = Array.prototype.slice.call(fakeArray);

var arr = [...fakeArray];

var arr = Array.from(fakeArray);

在較高版本的瀏覽器中，js 提供了 sessionStorage 和 globalStorage。在HTML5中提供了 localStorage 來取代 globalStorage。html5中的Web Storage包括了兩種存儲方式：sessionStorage 和 localStorage。

cookie 在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

cookie 存儲空間很有限(50個 or 4kB)，sessionStorage和localStorage的存儲空間更大(5M)；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

sessionStorage 活到會話結束，而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的

首先我們需要理解：進程是系統資源分配的最小單位，而線程是程序代碼執行的最小單位

一個程序至少有一個進程,一個進程至少有一個線程。線程的劃分尺度小于進程，使得多線程程序的并發性高。另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。

壓縮js html css和圖片，使用 gzip 編碼傳輸，減少傳輸時間

選擇合適的圖片格式，合理利用緩存，減少傳輸時間

合并 js css 及 圖片(精靈圖)，減少請求數量

避免不必要的 repaint 和 reflow, 合理使用 GPU 加速渲染

避免不必要的重定向，使用長連接，優化網絡結構

使用 CDN 減短數據傳輸路徑

優化服務器，快速響應與負載均衡

null是一個表示”無”的對象，轉為數值時為0；undefined是一個表示”無”的原始值，轉為數值時為NaN。當聲明的變量還未被初始化時，變量的默認值為undefined。

null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。

undefined表示”缺少值”，就是此處應該有一個值，但是還沒有定義。典型用法是：

變量被聲明了，但沒有賦值時，就等于undefined。

調用函數時，應該提供的參數沒有提供，該參數等于undefined。

對象沒有賦值的屬性，該屬性的值為undefined。

函數沒有返回值時，默認返回undefined。

null表示”沒有對象”，即該處不應該有值。典型用法是：

作為函數的參數，表示該函數的參數不是對象。

作為對象原型鏈的終點。

1.創建一個空對象，并將this綁定在該對象；
2.該對象繼承構造函數的原型；
3.執行構造函數；
4.如果構造函數返回對象類型，則返回該對象，否則返回第一步新建的對象 this

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在，無意義的占用內存。

會導致內存泄露的事情：

綁定事件的元素是不能在remove時被清理的，應該在remove之前取消事件綁定。不過更好的辦法是用事件委托的方式綁定事件。

意外的全局變量，會使得實際函數結束就應該釋放的內存保留下來，造成資源浪費，包括以下兩種情況：

定時器中的變量定義，會在每次執行函數的時候重復定義變量，產生嚴重的內存泄漏。

如果閉包的作用域鏈中保存著一個DOM對象或者ActiveX對象，那么就意味著該元素將無法被銷毀:

通過createElement，createTextNode等方法創建的元素會在寫入DOM后被釋放

循環引用導致引用計數永遠不為0，內存無法釋放：

優點

因為 Node 是基于事件驅動和無阻塞的，所以非常適合處理并發請求，

因此構建在 Node 上的代理服務器相比其他技術實現的服務器表現要好得多。

與 Node 代理服務器交互的客戶端代碼是由 Javascript 語言編寫的，是同一種語言，這是非常美妙的事情。

缺點

Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，

而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

其實前兩個已經好多了，現在呢，就是坑比較多。

文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

簡單來說，分為4個步驟：

當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。

瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。

一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源并使用HTTP響應返回該資源，值為200的HTTP響應狀態表示一個正確的響應。

此時，Web服務器提供資源服務，客戶端開始下載資源。而后由瀏覽器完成頁面渲染

同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。這里的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符(不同瀏覽器有差異，保證可用性，以最小的為主)
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。

GET 方式需要使用 Request.QueryString 來取得變量的值，而 POST 方式通過 Request.Form 來獲取變量的值，也就是說 Get 是通過地址欄來傳值，而 Post 是通過提交表單來傳值。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

直觀的認識標簽 對于搜索引擎的抓取有好處，用正確的標簽做正確的事情！
html語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；
在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

新特性

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage 的數據在瀏覽器關閉后自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

處理兼容問題

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

區分 HTML 和 HTML5

中本質出發，HTML5 既然不是 SGML 的子集，其文檔類型聲明簡單：，而 HTML4.01及以下，需要引入 dtd 文件。

最大行數

更好用的 Flex

元素查詢（Element Queries）

CSS 分頁滾動

非矩形布局

流式 Grid 布局

cookie 在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

cookie 存儲空間很有限

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

this 是 js 的一個關鍵字，隨著函數使用場合不同，this 的值會發生變化。

this 默認指的是調用函數的那個對象，如果沒有明確指出這個調用對象，就指向全局對象。

this 一般情況下：是全局對象 global。 作為方法調用，那么this就是指這個對象。

函數的 this 可以使用 bind 改變，也可以通過 call, apply 改變調用時的 this 值。

核心點：this 指向誰是函數調用時決定的，而不是函數定義時決定的。

當執行一段JavaScript代碼（全局代碼或函數）時，JavaScript引擎會創建為其創建一個作用域又稱為執行上下文（Execution Context），在頁面加載后會首先創建一個全局的作用域，然后每執行一個函數，會建立一個對應的作用域，從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈，鏈頭是全局作用域，鏈尾是當前函數作用域。

作用域鏈的作用是用于解析標識符，當函數被創建時（不是執行），會將this、arguments、命名參數和該函數中的所有局部變量添加到該當前作用域中，當JavaScript需要查找變量X的時候（這個過程稱為變量解析），它首先會從作用域鏈中的鏈尾也就是當前作用域進行查找是否有X屬性，如果沒有找到就順著作用域鏈繼續查找，直到查找到鏈頭，也就是全局作用域鏈，仍未找到該變量的話，就認為這段代碼的作用域鏈上不存在x變量，并拋出一個引用錯誤（ReferenceError）的異常。

JavaScript中的每個對象都有一個prototype屬性，我們稱之為原型，而原型的值也是一個對象，因此它也有自己的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值為null。

原型鏈的作用是用于對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用作構造函數來創建實例時，該函數的原型屬性將被作為原型賦值給所有對象實例，比如我們新建一個數組，數組的方法便從數組的原型上繼承而來。

當訪問對象的一個屬性時, 首先查找對象本身, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(如果還找不到實際上還會沿著原型鏈向上查找, 直至到根). 只要沒有被覆蓋的話, 對象原型的屬性就能在所有的實例中找到，若整個原型鏈未找到則返回undefined。

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

參與項目，快速高質量完成實現效果圖，精確到1px；

與團隊成員，UI設計，產品經理的溝通；

做好的頁面結構，頁面重構和用戶體驗；

處理hack，兼容、寫出優美的代碼格式；

針對服務器的優化、擁抱最新前端技術。

先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；

頁面進行標注（例如 頁面 模塊 開始和結束）；

CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）；

JS 分文件夾存放 命名以該JS功能為準的英文翻譯。

圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

構造繼承(call apply)
原型繼承(共享)
實例繼承(先生成一個實例)
拷貝繼承(深拷貝)

父級div定義height。

結尾處加空div標簽clear:both。

父級div定義偽類:after和zoom。

父級div定義overflow:hidden。

父級div定義overflow:auto。

父級div也浮動，需要定義寬度。

父級div定義display:table。

結尾處加br標簽clear:both。

比較好的是第3種方式，好多網站都這么用。

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

display:none; 的缺陷搜索引擎可能認為被隱藏的文字屬于垃圾信息而被忽略屏幕閱讀器（是為視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。

visibility:hidden; 的缺陷這個大家應該比較熟悉就是隱藏的內容會占據他所應該占據物理空間

overflow:hidden; 一個比較合理的方法

height:0;width:0;

通過 position 把元素定位到可視區域以外

WebAssembly 是為 Web 而設計的、可以生成瀏覽器可執行的二進制文件的編程語言。并且于2017 年 2 月 28 日，四個主要的瀏覽器一致同意宣布 WebAssembly 的 MVP 版本已經完成，即將推出一個瀏覽器可以搭載的穩定版本。WebAssembly 的一個主要目標就是變快。當然，“快”是相對的概念。相比于 JavaScript 和其他動態語言，WebAssembly 的快主要是因為它的靜態類型特性和方便優化特性。WebAssembly 意在速度上能夠達到和本地執行一樣快，其實 asm.js 已經比較接近這一目標了，但是 WebAssembly 要進一步縮短和本地執行速度之間的差距。

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

iframe會阻塞主頁面的 Onload 事件；

搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO;

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

使用iframe之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript 動態給iframe添加 src 屬性值，這樣可以繞開以上兩個問題。

執行順序不一樣、

參數不一樣

事件加不加on

this指向問題

SVG可縮放矢量圖形(Scalable Vector Graphics)是基于可擴展標記語言(XML)，用于描述二維矢量圖形的一種圖形格式。 SVG 嚴格遵從 XML 語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。 除了 IE8 及更早的瀏覽器都支持該特性。SVG 具有以下特點：

任意放縮

用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。

文本獨立

SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。

較小文件

總體來講，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下載也很快。

超強顯示效果

SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。

超級顏色控制

SVG圖像提供一個 1600 萬種顏色的調色板，支持 ICC 顏色描述文件標準、 RGB 、線 X 填充、漸變和蒙版。

交互 X 和智能化。

SVG 面臨的主要問題一個是如何和已經占有重要市場份額的矢量??圖形格式 Flash 競爭的問題，另一個問題就是 SVG 的本地運行環境下的廠家支持程度。

WebGL（Web Graphics Library ）是一種 3D 繪圖標準，這種繪圖技術標準允許把 JavaScript 和 OpenGL 結合在一起，通過增加 OpenGL 的一個 JavaScript 綁定， WebGL 可以為 HTML5 Canvas 提供硬件 3D 加速渲染，這樣 Web 開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示 3D 場景和模型了，還能創建復雜的導航和數據視覺化。顯然， WebGL 技術標準免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜 3D 結構的網站頁面，甚至可以用來設計 3D 網頁游戲等等。

WebGL完美地解決了現有的 Web 交互式三維動畫的兩個問題：

它通過HTML腳本本身實現 Web 交互式三維動畫的制作，無需任何瀏覽器插件支持 ;

第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL接口實現的。

通俗說WebGL中 canvas 繪圖中的 3D 版本。因為原生的 WebGL 很復雜，我們經常會使用一些三方的庫，如 three.js 等，這些庫多數用于 HTML5 游戲開發。

TDD（測試驅動開發）即先寫測試用例，再一一實現功能
BDD（行為驅動開發）先寫功能，再對功能進行測試，更貼近人類思維方式

當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，即使函數是在當前詞法作用域之外執行。

可以用來保護局部變量、用作命名空間、定義模塊。

構成閉包需要以下幾個必要條件：

函數(作用域)嵌套函數

函數(作用域)內部可以引用外部的參數和變量

參數和變量不會被垃圾回收機制回收。

閉包的好處

希望一個變量長期駐扎在內存中

避免全局變量的污染

私有成員的存在

使用閉包需要注意以下幾點

閉包常駐內存，會增大內存使用量，大量使用影響程序性能。

使用不當很容易造成內存泄露。因為一般函數執行完畢后，局部活動對象就被銷毀，內存中僅僅保存全局作用域。但閉包不會！

HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，要比http協議安全
https 在 URL 前加 https:// 前綴表明是用SSL加密的。Web 服務器啟用 SSL 需要獲得一個服務器證書并將該證書與要使用 SSL 的服務器綁定。
http 和 https 使用的是完全不同的連接方式,用的端口也不一樣,前者是 80,后者是 443。http 的連接很簡單，是無狀態的,...

Array.isArray(obj);

obj instanceof Array;

obj.constructor === Array;

js 有以下6種錯誤，都繼承自 Error :

SyntaxError: SyntaxError是解析代碼時發生的語法錯誤

ReferenceError: ReferenceError是引用一個不存在的變量時發生的錯誤。將一個值分配給無法分配的對象，比如對函數的運行結果或者this賦值。

RangeError: RangeError是當一個值超出有效范圍時發生的錯誤。主要有幾種情況，一是數組長度為負數，二是Number對象的方法參數超出范圍，以及函數堆棧超過最大值。

TypeError: TypeError是變量或參數不是預期類型時發生的錯誤。比如，使用new字符串、布爾值、數值等原始類型和調用對象不存在的方法就會拋出這種錯誤，因為new命令的參數應該是一個構造函數。

URIError: URI相關函數的參數不正確時拋出的錯誤，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。

EvalError: eval()函數執行錯誤

JS阻塞

所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢后才開始繼續并行下載其他資源并呈現內容。這是由于瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以就會阻塞其他的下載和呈現。

CSS阻塞

CSS本來是可以并行下載的(IE6除外)，但當CSS后面跟著嵌入的JS的時候，該CSS就會出現阻塞后面資源下載的情況。而當把嵌入JS放到CSS前面，就不會出現阻塞的情況了。因為瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞后面的資源加載，所以就會出現上面CSS阻塞下載的情況。

css 選擇器主要分為：id 選擇器(#)，class 選擇器(.)，元素選擇器(a)，子元素選擇器(>)，兄弟選擇器(~)，屬性選擇器([])，后代選擇器( )，偽類選擇器(:)，相鄰選擇器(+)，并列選擇器(,)，通配符(*)

優先級計算： important(權無窮) > id選擇器(權1000) > class選擇器(權100) > 元素選擇器(權10) important > 行內樣式 > 內聯樣式 > 外部樣式 > 瀏覽器樣式

垃圾回收(Garbage Collection)，簡稱GC。簡單來講，GC就是把內存中不需要的數據釋放了，這樣這部分內存就可以存放其他東西了。在javascript中，如果一個對象不再被引用，那么這個對象就會被GC回收。具體回收策略包括以下3種：

標記回收

當從window節點遍歷DOM樹不能遍歷到某個對象，那么這個對象就會被標記為沒用的對象。由于回收機制是周期性執行的，這樣，當下一個回收周期到來時，這個對象對應的內存就會被釋放。

引用計數

當系統中定義了一個對象后，對于這一塊內存，javascript會記錄有多少個引用指向個部分內存，如果這個數為零，則這部分內存會在下一個回收周期被釋放。

手動釋放

就好比上一個例子中，利用delete關鍵字刪除變量或屬性，達到釋放內存的目的。分一下幾種情況：

//釋放一個對象
obj = null;

//釋放是個對象屬性
delete obj.propertyName;
delete globalVariable;  //沒有用var聲明的變量是window的屬性，用delete釋放。

//釋放數組
array.length = 0;

//釋放數組元素
array.splice(2,2);  //刪除并釋放第三個元素起的2個元素