前端開發中的基礎思考題

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

什麼是盒子模型？

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

簡述一下src與href的區別

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

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

簡述同步和異步的區別

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

怎樣添加、移除、移動、複製、建立和查找節點？

• 建立新節點

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

• 添加、移除、替換、插入

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

• 查找

getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性

一次完整的HTTP事務是怎樣的一個過程？

1. 域名解析
2. 發起TCP的3次握手
3. 創建TCP鏈接後發起http請求
4. 服務器端響應http請求，瀏覽器獲得html代碼
5. 瀏覽器解析html代碼，並請求html代碼中的資源
6. 瀏覽器對頁面進行渲染呈現給用戶

你所瞭解到的Web攻擊技術，如何防止被攻擊？

攻擊：

• XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
• SQL 注入攻擊：經過表單提交可運行的 sql 語句，以破壞數據庫數據。
• CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。
• dDos 拒絕服務攻擊：經過大量請求瘋狂佔用服務器資源至其癱瘓。
• CDN 攻擊：使用不合理數據發起請求或請求不合理接口。
• 身份僞造：冒充服務器或用戶獲取從另外一方獲取信息。

防護：

• XSS:

1. 輸入驗證，過濾標籤、事件、腳本、SQL
2. http頭： X-XSS-Protection
3. cookie保護：set-cookie 頭加入 http-only

• SQL 注入

1. 輸入驗證，過濾標籤、事件、腳本、SQL
2. 數據庫權限最小化
3. 使用接口而非 SQL 語句
4. 限制文件上傳類型

• CSRF

1. 驗證碼
2. 驗證 http 頭 referer 項
3. 在 http 中加入 taken

• 身份僞造

1. 隱藏敏感信息
2. 加密
3. session 按期失效
4. 權限驗證、中間件校驗
5. 數字簽名
6. CA 證書校驗

• dDos 拒絕服務攻擊

1. 流量防火牆
2. 驗證碼

• CDN 攻擊

1. 對版本控制進行Hash驗證
2. 跳轉驗證（重定向驗證）

ajax是什麼?ajax的交互模型?

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

Ajax的特色

1. 經過異步模式，提高了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用
3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
4. Ajax優勢是經過異步通訊實現局部刷新

ajax的缺點

1. ajax不支持瀏覽器back按鈕。
2. 安全問題 AJAX暴露了與服務器交互的細節。
3. 對搜索引擎的支持比較弱。
4. 破壞了程序的異常機制。
5. 不容易調試。

如何解決跨域問題?

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

• 一級域名相同，只是二級域名不一樣，瀏覽器容許經過設置 document.domain 共享 cookie 和 DOM
• 目前有三種方法，能夠解決跨域窗口的通訊問題：

1. onhashchange 事件 + #data 片斷標識符
2. 監聽子窗口 window.name 屬性的變化
3. 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的屬性會報錯

在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

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

1. var arr = Array.prototype.slice.call(fakeArray);
2. var arr = [...fakeArray];
3. 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用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的

線程與進程的區別

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

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

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

請說出三種減小頁面加載時間的方法。

1. 壓縮js html css和圖片，使用 gzip 編碼傳輸，減小傳輸時間
2. 選擇合適的圖片格式，合理利用緩存，減小傳輸時間
3. 合併 js css 及 圖片(精靈圖)，減小請求數量
4. 避免沒必要要的 repaint 和 reflow, 合理使用 GPU 加速渲染
5. 避免沒必要要的重定向，使用長鏈接，優化網絡結構
6. 使用 CDN 減短數據傳輸路徑
7. 優化服務器，快速響應與負載均衡

null和undefined的區別？

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

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

• 變量被聲明瞭，但沒有賦值時，就等於undefined。
• 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
• 對象沒有賦值的屬性，該屬性的值爲undefined。
• 函數沒有返回值時，默認返回undefined。

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

• 做爲函數的參數，表示該函數的參數不是對象。
• 做爲對象原型鏈的終點。

new操做符具體幹了什麼呢?

1.建立一個空對象，並將this綁定在該對象；
2.該對象繼承構造函數的原型；
3.執行構造函數；
4.若是構造函數返回對象類型，則返回該對象，不然返回第一步新建的對象 this

哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在，無心義的佔用內存。

會致使內存泄露的事情：

• 綁定事件的元素是不能在remove時被清理的，應該在remove以前取消事件綁定。不過更好的辦法是用事件委託的方式綁定事件。
• 意外的全局變量，會使得實際函數結束就應該釋放的內存保留下來，形成資源浪費，包括如下兩種狀況：
• 定時器中的變量定義，會在每次執行函數的時候重複定義變量，產生嚴重的內存泄漏。
• 若是閉包的做用域鏈中保存着一個DOM對象或者ActiveX對象，那麼就意味着該元素將沒法被銷燬:
• 經過createElement，createTextNode等方法建立的元素會在寫入DOM後被釋放
• 循環引用致使引用計數永遠不爲0，內存沒法釋放：

對 Node 的優勢和缺點提出了本身的見解？

• 優勢

1. 由於 Node 是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
2. 所以構建在 Node 上的代理服務器相比其餘技術實現的服務器表現要好得多。
3. 與 Node 代理服務器交互的客戶端代碼是由 Javascript 語言編寫的，是同一種語言，這是很是美妙的事情。

• 缺點

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
2. 並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。
3. 其實前兩個已經好多了，如今呢，就是坑比較多。

你如何對網站的文件和資源進行優化?

• 文件合併
• 文件最小化/文件壓縮
• 使用CDN託管
• 緩存的使用

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

簡單來講，分爲4個步驟：

• 當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
• 瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
• 一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
• 此時，Web服務器提供資源服務，客戶端開始下載資源。然後由瀏覽器完成頁面渲染

HTTP 常見狀態碼

狀態碼	狀態字	描述
100	Continue	繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200	OK	正常返回信息
201	Created	請求成功而且服務器建立了新的資源
202	Accepted	服務器已接受請求，但還沒有處理
301	Moved Permanently	請求的網頁已永久移動到新位置。
302	Found	臨時性重定向。
303	See Other	臨時性重定向，且老是使用 GET 請求新的 URI。
304	Not Modified	自從上次請求後，請求的網頁未修改過。
400	Bad Request	服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401	Unauthorized	請求未受權。
403	Forbidden	禁止訪問。
404	Not Found	找不到如何與 URI 相匹配的資源。
500	Internal Server Error	最多見的服務器端錯誤。
503	Service Unavailable	服務器端暫時沒法處理請求（多是過載或維護）。

請解釋一下 JavaScript 的同源策略。

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

GET和POST的區別，什麼時候使用POST？

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

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

然而，在如下狀況中，請使用 POST 請求：

• 沒法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。

---	GET	POST
後退/刷新	無害	數據會從新提交
書籤	可藏爲書籤	沒法藏爲書籤
緩存	能夠緩存	不能夠緩存
MIME類型	application/x-www-from-urlencode	application/x-www-from-urlencode或 multipart/form-data (二進制爲多重編碼
歷史記錄	參數保留在歷史記錄中	參數不會留在歷史記錄
數據長度	URL最長2048個字符(2kB)	無限
數據類型	ASCII字符	無限
安全性	差	較
可見性	數據可見	數據不可見

XHTML和HTML有什麼區別

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

最主要的不一樣：

• XHTML 元素必須被正確地嵌套。
• XHTML 元素必須被關閉。
• 標籤名必須用小寫字母。
• XHTML 文檔必須擁有根元素。

語義化的 HTML 的好處?

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

常見的瀏覽器內核有哪些？

Browser	內核	JS 引擎
Safari	Webkit	Nitro
Chrome	Blink	V8
IE	Trident	Chakra
Android	Webkit
iOS	Webkit
Edge	Webkit
Opera	Presto(<12.16), Webkit(>12.16)	Carakan(>=10.50)
Firefox	Gecko	OdinMonkey(>=22.0)

HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

1. 新特性

• 繪畫 canvas
• 用於媒介回放的 video 和 audio 元素
• 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
• sessionStorage 的數據在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，好比 article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術webworker, websockt, Geolocation

1. 移除的元素

• 純表現的元素：basefont，big，center，font, s，strike，tt，u；
• 對可用性產生負面影響的元素：frame，frameset，noframes；

1. 處理兼容問題

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

1. 區分 HTML 和 HTML5

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

在你的平常開發中遇到過哪些經常使用佈局是沒法用純 CSS 實現的？

• 最大行數
• 更好用的 Flex
• 元素查詢（Element Queries）
• CSS 分頁滾動
• 非矩形佈局
• 流式 Grid 佈局

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

• cookie 在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
• cookie 存儲空間頗有限
• sessionStorage和localStorage的存儲空間更大；
• sessionStorage和localStorage有更多豐富易用的接口；
• sessionStorage和localStorage各自獨立的存儲空間；

談談This對象的理解。

• this 是 js 的一個關鍵字，隨着函數使用場合不一樣，this 的值會發生變化。
• this 默認指的是調用函數的那個對象，若是沒有明確指出這個調用對象，就指向全局對象。
• this 通常狀況下：是全局對象 global。 做爲方法調用，那麼this就是指這個對象。
• 函數的 this 可使用 bind 改變，也能夠經過 call, apply 改變調用時的 this 值。
• 核心點：this 指向誰是函數調用時決定的，而不是函數定義時決定的。

談一談JavaScript做用域鏈

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

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

如何理解JavaScript原型鏈

JavaScript中的每一個對象都有一個prototype屬性，咱們稱之爲原型，而原型的值也是一個對象，所以它也有本身的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值爲null。

原型鏈的做用是用於對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，好比咱們新建一個數組，數組的方法便從數組的原型上繼承而來。

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

對前端工程師這個職位你是怎麼樣理解的？

1. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好
2. 參與項目，快速高質量完成實現效果圖，精確到1px；
3. 與團隊成員，UI設計，產品經理的溝通；
4. 作好的頁面結構，頁面重構和用戶體驗；
5. 處理hack，兼容、寫出優美的代碼格式；
6. 針對服務器的優化、擁抱最新前端技術。

平時如何管理你的項目？

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

1. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
2. 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
3. 頁面進行標註（例如 頁面 模塊 開始和結束）；
4. CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
5. JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。
6. 圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

JavaScript如何實現繼承？

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

清除浮動有哪些方式？比較好的方式是哪種？

• 父級div定義height。
• 結尾處加空div標籤clear:both。
• 父級div定義僞類:after和zoom。
• 父級div定義overflow:hidden。
• 父級div定義overflow:auto。
• 父級div也浮動，須要定義寬度。
• 父級div定義display:table。
• 結尾處加br標籤clear:both。

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

box-sizing經常使用的屬性有哪些？分別有什麼做用？

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

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

Doctype做用？標準模式與兼容模式各有什麼區別?

<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

如何視覺隱藏網頁內容？

1. display:none; 的缺陷搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
2. visibility:hidden; 的缺陷這個你們應該比較熟悉就是隱藏的內容會佔據他所應該佔據物理空間
3. overflow:hidden; 一個比較合理的方法
4. height:0;width:0;
5. 經過 position 把元素定位到可視區域之外

你以爲WebAssembly爲何比asm.js快？

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

HTML5 爲何只須要寫 <!DOCTYPE HTML>？

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

頁面導入樣式時，使用link和@import有什麼區別？

1. link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
2. 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
3. import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。

介紹一下你對瀏覽器內核的理解？

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

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

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

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

iframe 有哪些缺點

• iframe會阻塞主頁面的 Onload 事件；
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO;
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用 iframe ，最好是經過 javascript 動態給iframe添加 src 屬性值，這樣能夠繞開以上兩個問題。

IE和DOM事件流的區別

1. 執行順序不同、
2. 參數不同
3. 事件加不加on
4. this指向問題

說說你對 SVG 理解?

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

• 任意放縮

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

• 文本獨立

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

• 較小文件

整體來說，SVG文件比那些 GIF 和 JPEG 格式的文件要小不少，於是下載也很快。

• 超強顯示效果

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

• 超級顏色控制

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

• 交互 X 和智能化。

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

說說你對 webGL 的理解

WebGL（Web Graphics Library ）是一種 3D 繪圖標準，這種繪圖技術標準容許把 JavaScript 和 OpenGL 結合在一塊兒，經過增長 OpenGL 的一個 JavaScript 綁定， WebGL 能夠爲 HTML5 Canvas 提供硬件 3D 加速渲染，這樣 Web 開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現 3D 場景和模型了，還能建立複雜的導航和數據視覺化。顯然， WebGL 技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜 3D 結構的網站頁面，甚至能夠用來設計 3D 網頁遊戲等等。

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

1. 它經過HTML腳本自己實現 Web 交互式三維動畫的製做，無需任何瀏覽器插件支持 ;
2. 第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。

通俗說WebGL中 canvas 繪圖中的 3D 版本。由於原生的 WebGL 很複雜，咱們常常會使用一些三方的庫，如 three.js 等，這些庫多數用於 HTML5 遊戲開發。

TDD 和 BDD 是什麼？

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

閉包是什麼，能夠用來作什麼？閉包有什麼好處？使用閉包須要注意什麼？

當函數能夠記住並訪問所在的詞法做用域時，就產生了閉包，即便函數是在當前詞法做用域以外執行。

能夠用來保護局部變量、用做命名空間、定義模塊。

構成閉包須要如下幾個必要條件：

• 函數(做用域)嵌套函數
• 函數(做用域)內部能夠引用外部的參數和變量
• 參數和變量不會被垃圾回收機制回收。

閉包的好處

• 但願一個變量長期駐紮在內存中
• 避免全局變量的污染
• 私有成員的存在

使用閉包須要注意如下幾點

• 閉包常駐內存，會增大內存使用量，大量使用影響程序性能。
• 使用不當很容易形成內存泄露。由於通常函數執行完畢後，局部活動對象就被銷燬，內存中僅僅保存全局做用域。但閉包不會！

http 和 https 有什麼區別？

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

怎麼判斷一個對象是否是數組，儘量多的說出你知道的方法？

1. Array.isArray(obj);
2. obj instanceof Array;
3. obj.constructor === Array;

js 中有哪些常見的錯誤

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()函數執行錯誤

那些地方會出現 CSS 阻塞，哪些地方會出現 js 阻塞？

• JS阻塞

全部瀏覽器在下載JS的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。這是因爲瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現。

• CSS阻塞

CSS原本是能夠並行下載的(IE6除外)，但當CSS後面跟着嵌入的JS的時候，該CSS就會出現阻塞後面資源下載的狀況。而當把嵌入JS放到CSS前面，就不會出現阻塞的狀況了。由於瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞後面的資源加載，因此就會出現上面CSS阻塞下載的狀況。

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和 important 哪一個優先級高？

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個元素