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

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

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

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

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

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

創(chuàng)建新節(jié)點

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

添加、移除、替換、插入

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

查找

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

域名解析

發(fā)起TCP的3次握手

建立TCP連接后發(fā)起http請求

服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼

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

瀏覽器對頁面進行渲染呈現(xiàn)給用戶

攻擊：

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

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

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

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

CDN 攻擊：使用不合理數(shù)據(jù)發(fā)起請求或請求不合理接口。

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

防御：

XSS:

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

http頭： X-XSS-Protection

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

SQL 注入

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

數(shù)據(jù)庫權(quán)限最小化

使用接口而非 SQL 語句

限制文件上傳類型

CSRF

驗證碼

驗證 http 頭 referer 項

在 http 中加入 taken

身份偽造

隱藏敏感信息

加密

session 定期失效

權(quán)限驗證、中間件校驗

數(shù)字簽名

CA 證書校驗

dDos 拒絕服務(wù)攻擊

流量防火墻

驗證碼

CDN 攻擊

對版本控制進行Hash驗證

跳轉(zhuǎn)驗證（重定向驗證）

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

Ajax的特點

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

優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

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

Ajax優(yōu)點是通過異步通信實現(xiàn)局部刷新

ajax的缺點

ajax不支持瀏覽器back按鈕。

安全問題 AJAX暴露了與服務(wù)器交互的細節(jié)。

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

破壞了程序的異常機制。

不容易調(diào)試。

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

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

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

onhashchange 事件 + #data 片段標識符

監(jiān)聽子窗口 window.name 屬性的變化

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

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

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

區(qū)別：

優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

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

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

添加了保留字 protectedstatic 和 interface

在嚴格模式下不可以用with

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

在嚴格模式下this默認是undefined

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

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

在嚴格模式下有名參數(shù)是arguments參數(shù)的靜態(tài)副本而非引用

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

在嚴格模式下arguments和eval是關(guān)鍵字不能被修改

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

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

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

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

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 在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會

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

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

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

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

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

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

從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。

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

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

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

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

避免不必要的重定向，使用長連接，優(yōu)化網(wǎng)絡(luò)結(jié)構(gòu)

使用 CDN 減短數(shù)據(jù)傳輸路徑

優(yōu)化服務(wù)器，快速響應(yīng)與負載均衡

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

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

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

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

調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。

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

函數(shù)沒有返回值時，默認返回undefined。

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

作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。

作為對象原型鏈的終點。

1.創(chuàng)建一個空對象，并將this綁定在該對象；
2.該對象繼承構(gòu)造函數(shù)的原型；
3.執(zhí)行構(gòu)造函數(shù)；
4.如果構(gòu)造函數(shù)返回對象類型，則返回該對象，否則返回第一步新建的對象 this

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

會導致內(nèi)存泄露的事情：

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

意外的全局變量，會使得實際函數(shù)結(jié)束就應(yīng)該釋放的內(nèi)存保留下來，造成資源浪費，包括以下兩種情況：

定時器中的變量定義，會在每次執(zhí)行函數(shù)的時候重復定義變量，產(chǎn)生嚴重的內(nèi)存泄漏。

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

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

循環(huán)引用導致引用計數(shù)永遠不為0，內(nèi)存無法釋放：

優(yōu)點

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

因此構(gòu)建在 Node 上的代理服務(wù)器相比其他技術(shù)實現(xiàn)的服務(wù)器表現(xiàn)要好得多。

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

缺點

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

而且缺少足夠多的第三方庫支持?？雌饋?，就像是Ruby/Rails當年的樣子。

其實前兩個已經(jīng)好多了，現(xiàn)在呢，就是坑比較多。

文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

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

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

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

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

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

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

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

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

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

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠。

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標語言

最主要的不同：

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

XHTML 元素必須被關(guān)閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

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

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

新特性

繪畫 canvas

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

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

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

新的技術(shù)webworker, websockt, Geolocation

移除的元素

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

處理兼容問題

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

區(qū)分 HTML 和 HTML5

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

最大行數(shù)

更好用的 Flex

元素查詢（Element Queries）

CSS 分頁滾動

非矩形布局

流式 Grid 布局

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

cookie 存儲空間很有限

sessionStorage和localStorage的存儲空間更大；

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

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

this 是 js 的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this 的值會發(fā)生變化。

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

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

函數(shù)的 this 可以使用 bind 改變，也可以通過 call, apply 改變調(diào)用時的 this 值。

核心點：this 指向誰是函數(shù)調(diào)用時決定的，而不是函數(shù)定義時決定的。

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

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

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

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

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

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

參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到1px；

與團隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通；

做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗；

處理hack，兼容、寫出優(yōu)美的代碼格式；

針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

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

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

標注樣式編寫人，各模塊都及時標注（標注關(guān)鍵樣式調(diào)用的地方）；

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

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

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

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

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

父級div定義height。

結(jié)尾處加空div標簽clear:both。

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

父級div定義overflow:hidden。

父級div定義overflow:auto。

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

父級div定義display:table。

結(jié)尾處加br標簽clear:both。

比較好的是第3種方式，好多網(wǎng)站都這么用。

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

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

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

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

visibility:hidden; 的缺陷這個大家應(yīng)該比較熟悉就是隱藏的內(nèi)容會占據(jù)他所應(yīng)該占據(jù)物理空間

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

height:0;width:0;

通過 position 把元素定位到可視區(qū)域以外

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

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）。
而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引擎。

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

JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

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

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

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

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

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

執(zhí)行順序不一樣、

參數(shù)不一樣

事件加不加on

this指向問題

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

任意放縮

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

文本獨立

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

較小文件

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

超強顯示效果

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

超級顏色控制

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

交互 X 和智能化。

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

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

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

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

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

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

TDD（測試驅(qū)動開發(fā)）即先寫測試用例，再一一實現(xiàn)功能
BDD（行為驅(qū)動開發(fā)）先寫功能，再對功能進行測試，更貼近人類思維方式

當函數(shù)可以記住并訪問所在的詞法作用域時，就產(chǎn)生了閉包，即使函數(shù)是在當前詞法作用域之外執(zhí)行。

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

構(gòu)成閉包需要以下幾個必要條件：

函數(shù)(作用域)嵌套函數(shù)

函數(shù)(作用域)內(nèi)部可以引用外部的參數(shù)和變量

參數(shù)和變量不會被垃圾回收機制回收。

閉包的好處

希望一個變量長期駐扎在內(nèi)存中

避免全局變量的污染

私有成員的存在

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

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

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

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

Array.isArray(obj);

obj instanceof Array;

obj.constructor === Array;

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

SyntaxError: SyntaxError是解析代碼時發(fā)生的語法錯誤

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

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

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

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

EvalError: eval()函數(shù)執(zhí)行錯誤

JS阻塞

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

CSS阻塞

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

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

優(yōu)先級計算： important(權(quán)無窮) > id選擇器(權(quán)1000) > class選擇器(權(quán)100) > 元素選擇器(權(quán)10) important > 行內(nèi)樣式 > 內(nèi)聯(lián)樣式 > 外部樣式 > 瀏覽器樣式

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

標記回收

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

引用計數(shù)

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

手動釋放

就好比上一個例子中，利用delete關(guān)鍵字刪除變量或?qū)傩裕_到釋放內(nèi)存的目的。分一下幾種情況：

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

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

//釋放數(shù)組
array.length = 0;

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