Web前端面試題（前端開發人員必備）
阿新 • • 發佈：2019-01-28
本人也在學習前端方面的技術，為以後轉行前端做好準備：
HTML:
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範（html/Xhtml）一般為 嚴格 過度 基於框架的html文件
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
Ie(Ie核心) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3畫素問題 使用float引起的 使用dislpay:inline -3px
3.超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級新增position:relative
5.Png 透明 使用js程式碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe巢狀
8.為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供資訊
12.描述css reset的作用和用途。
Reset重置瀏覽器的css預設屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
14.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什麼模式
15.你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用
16.什麼是語義化的HTML?
直觀的認識標籤 對於搜尋引擎的抓取有好處
17.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增加無意義的標籤）
2.使用overflow:auto（空標籤元素清除浮動而不得不增加無意程式碼的弊端,,使用zoom:1用於相容IE）
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
18、常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?
瀏覽器：IE，Chrome，FireFox，Safari，Opera。
核心：Trident，Gecko，Presto，Webkit。
19、 說下行內元素和塊級元素的區別？行內塊元素的相容性使用？（IE8 以下）
行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
相容性：display:inline-block;*display:inline;*zoom:1;
20、 清除浮動有哪些方式？比較好的方式是哪一種？
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
比較好的是第3種方式，好多網站都這麼用。
21、box-sizing常用的屬性有哪些？分別有什麼作用？
box-sizing: content-box|border-box|inherit;
content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
22、Doctype作用？標準模式與相容模式各有什麼區別?
告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
23、HTML5 為什麼只需要寫<!DOCTYPE html> ？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
24、 頁面匯入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。
25、介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。
26、html5有哪些新特性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
JavaScript:
1.解釋jsonp的原理，以及為什麼不是真正的ajax?
動態建立script標籤，回撥函式
Ajax是頁面無重新整理請求資料操作
2. apply和call的用法和區別:
用法:
都能繼承另一個物件的方法和屬性,區別在於引數列表不一樣
區別:
Function.apply(obj, args) args是一個數組,作為引數傳給Function
Function.call(obj, arg1, arg2,...) arg*是引數列表
apply一個妙用: 可以將一個數組預設的轉化為一個引數列表
舉例說明: 有一個數組arr要push進一個新的陣列中去, 如果用call的話需要把陣列中的元素一個個取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)
3. bind函式的相容性
用法:
bind()函式會建立一個新函式, 為繫結函式。當呼叫這個繫結函式時,繫結函式會以建立它時傳入bind方法的第一個引數作為this,傳入bind方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式.
一個繫結函式也能使用new操作符建立物件：這種行為就像把原函式當成構造器。提供的 this 值被忽略，同時呼叫時的引數被提供給模擬函式。
4. 解釋下事件代理
事件委託利用了事件冒泡, 只指定一個事件處理程式, 就可以管理某一型別的所有事件.
例: html部分: 要點選li彈出其id
html 程式碼效果預覽
12345678
<ul id="list">
<li id="li-1">Li 2</li>
<li id="li-2">Li 3</li>
<li id="li-3">Li 4</li>
<li id="li-4">Li 5</li>
<li id="li-5">Li 6</li>
<li id="li-6">Li 7</li>
</ul>
javascript 程式碼效果預覽
12345678
//js部分
document.getElementById("list").addHandler("click", function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase == "LI"){
console.log("List item", e,target.id, "was clicked!");
}
});
5. 解釋下js中this是怎麼工作的?
this 在 JavaScript 中主要由以下五種使用場景。
作為函式呼叫，this 繫結全域性物件，瀏覽器環境全域性物件為 window 。
內部函式內部函式的 this 也繫結全域性物件，應該繫結到其外層函式對應的物件上，這是 JavaScript的缺陷，用that替換。
作為建構函式使用，this 繫結到新建立的物件。
作為物件方法使用，this 繫結到該物件。
使用apply或call呼叫 this 將會被顯式設定為函式呼叫的第一個引數。
6. 繼承
參考：js怎麼實現繼承？
7. AMD vs. CommonJS？
AMD是依賴提前載入
CMD是依賴延時載入
8. 什麼是雜湊表?
雜湊表（Hash table，也叫散列表），是根據關鍵碼值(Key value)而直接進行訪問的資料結構。也就是說，它通過把關鍵碼值對映到表中一個位置來訪問記錄，以加快查詢的速度。這個對映函式叫做雜湊函式，存放記錄的陣列叫做散列表。
使用雜湊查詢有兩個步驟:
使用雜湊函式將被查詢的鍵轉換為陣列的索引。在理想的情況下，不同的鍵會被轉換為不同的索引值，但是在有些情況下我們需要處理多個鍵被雜湊到同一個索引值的情況。
所以雜湊查詢的第二個步驟就是處理衝突。處理雜湊碰撞衝突。有很多處理雜湊碰撞衝突的方法，比如拉鍊法和線性探測法。
元素特徵轉變為陣列下標的方法就是雜湊法。雜湊法當然不止一種，下面列出三種比較常用的：
1，除法雜湊法
最直觀的一種，上圖使用的就是這種雜湊法，公式： index = value % 16
學過彙編的都知道，求模數其實是通過一個除法運算得到的，所以叫“除法雜湊法”。
2，平方雜湊法
求index是非常頻繁的操作，而乘法的運算要比除法來得省時（對現在的CPU來說，估計我們感覺不出來），所以我們考慮把除法換成乘法和一個位移操作。公式： index = (value * value) >> 28 （右移，除以2^28。記法：左移變大，是乘。右移變小，是除。）
如果數值分配比較均勻的話這種方法能得到不錯的結果，但我上面畫的那個圖的各個元素的值算出來的index都是0——非常失敗。也許你還有個問題，value如果很大，value * value不會溢位嗎？答案是會的，但我們這個乘法不關心溢位，因為我們根本不是為了獲取相乘結果，而是為了獲取index。
3，斐波那契（Fibonacci）雜湊法
解決衝突的方法:
1. 拉鍊法
將大小為M 的陣列的每一個元素指向一個條連結串列，連結串列中的每一個節點都儲存雜湊值為該索引的鍵值對，這就是拉鍊法.
對採用拉鍊法的雜湊實現的查詢分為兩步，首先是根據雜湊值找到等一應的連結串列，然後沿著連結串列順序找到相應的鍵。
2. 線性探測法:
使用陣列中的空位解決碰撞衝突
參考：淺談演算法和資料結構: 十一 雜湊表 雜湊表的工作原理
9. 什麼是閉包? 閉包有什麼作用?
閉包是指有權訪問另一個函式作用域中的變數的函式. 建立閉包常見方式,就是在一個函式內部建立另一個函式.
作用:
匿名自執行函式 (function (){ ... })(); 建立了一個匿名的函式，並立即執行它，由於外部無法引用它內部的變數，因此在執行完後很快就會被釋放，關鍵是這種機制不會汙染全域性物件。
快取, 可保留函式內部的值
實現封裝
實現模板
參考: js閉包的用途
10. 偽陣列:
什麼是偽陣列:
偽陣列是能通過Array.prototype.slice 轉換為真正的陣列的帶有length屬性的物件
比如arguments物件,還有像呼叫getElementsByTagName,document.childNodes之類的，它們都返回NodeList物件都屬於偽陣列
我們可以通過Array.prototype.slice.call(fakeArray)將偽陣列轉變為真正的Array物件: 返回新陣列而不會修改原陣列
參考：偽陣列
11. undefined和null的區別, 還有undeclared:
null表示沒有物件, 即此處不該有此值. 典型用法:
（1） 作為函式的引數，表示該函式的引數不是物件。
（2） 作為物件原型鏈的終點。
( 3 ) null可以作為空指標. 只要意在儲存物件的值還沒有真正儲存物件,就應該明確地讓該物件儲存null值.
undefined表示缺少值, 即此處應該有值, 但還未定義.
（1）變數被聲明瞭，但沒有賦值時，就等於undefined。
（2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。
（3）物件沒有賦值的屬性，該屬性的值為undefined。
（4）函式沒有返回值時，預設返回undefined。
undeclared即為被汙染的命名, 訪問沒有被宣告的變數, 則會丟擲異常, 終止執行. 即undeclared是一種語法錯誤
參考: undefined與null的區別
12. 事件冒泡機制:
從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函式，這些函式都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。
13. 解釋下為什麼接下來這段程式碼不是 IIFE(立即呼叫的函式表示式)：function foo(){ }();?
而函式定義（語句以function關鍵字開始）是不能被立即執行的，這無疑會導致語法的錯誤（SyntaxError）。當函式定義程式碼段包裹在括號內，使解析器可以將之識別為函式表示式，然後呼叫。IIFE: (function foo(){})()
區分 (function(){})(); 和 (function(){}()); 其實兩者實現效果一樣。
函式字面量：首先宣告一個函式物件，然後執行它。(function () { alert(1); })();
優先表示式：由於Javascript執行表示式是從圓括號裡面到外面，所以可以用圓括號強制執行宣告的函式。(function () { alert(2); }());
14. "attribute" 和 "property" 的區別是什麼？
DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”，property翻譯為“屬性”。
attribute是一個特性節點，每個DOM元素都有一個對應的attributes屬性來存放所有的attribute節點，attributes是一個類陣列的容器，說得準確點就是NameNodeMap，不繼承於Array.prototype，不能直接呼叫Array的方法。attributes的每個數字索引以名值對(name=”value”)的形式存放了一個attribute節點。<div class="box" id="box" gameid="880">hello</div>
property就是一個屬性，如果把DOM元素看成是一個普通的Object物件，那麼property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要新增和刪除property和普通的物件類似。
很多attribute節點還有一個相對應的property屬性，比如上面的div元素的id和class既是attribute，也有對應的property，不管使用哪種方法都可以訪問和修改。
總之，attribute節點都是在HTML程式碼中可見的，而property只是一個普通的名值對屬性。
15. 請指出 document load 和 document ready 兩個事件的區別。
document.ready和onload的區別——JavaScript文件載入完成事件。頁面載入完成有兩種事件:
一是ready，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）
二是onload，指示頁面包含圖片等檔案在內的所有元素都載入完成。
jQuery中$(function(){});他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。一般情況先一個頁面響應載入的順序是，域名解析-載入html-載入js和css-載入圖片等其他資訊。
16. 什麼是use strict? 其好處壞處分別是什麼?
在所有的函式 (或者所有最外層函式) 的開始處加入 "use strict"; 指令啟動嚴格模式。
"嚴格模式"有兩種呼叫方法
1）將"use strict"放在指令碼檔案的第一行，則整個指令碼都將以"嚴格模式"執行。如果這行語句不在第一行，則無效，整個指令碼以"正常模式"執行。如果不同模式的程式碼檔案合併成一個檔案，這一點需要特別注意。
2）將整個指令碼檔案放在一個立即執行的匿名函式之中。
好處
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
- 提高編譯器效率，增加執行速度；
- 為未來新版本的Javascript做好鋪墊。
壞處
同樣的程式碼，在"嚴格模式"中，可能會有不一樣的執行結果；一些在"正常模式"下可以執行的語句，在"嚴格模式"下將不能執行
17. 瀏覽器端的js包括哪幾個部分?
核心( ECMAScript) , 文件物件模型(DOM), 瀏覽器物件模型(BOM)
18. DOM包括哪些物件?
DOM是針對HTML和XML文件的一個API(應用程式程式設計介面). DOM描繪了一個層次化的節點樹, 允許開發人員新增, 移除和修改頁面的某一部分.
常用的DOM方法:
getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()
常用的DOM屬性
innerHTML 節點(元素)的文字值
parentNode 節點(元素)的父節點
childNodes
attributes 節點(元素)的屬性節點
參考: HTML DOM 方法
19. js有哪些基本型別?
Undefined, Null, Boolean, Number, String
Object是複雜資料型別, 其本質是由一組無序的名值對組成的.
20. 基本型別與引用型別有什麼區別?
基本型別如上題所示. 引用型別則有: Object, Array, Date, RegExp, Function
儲存
基本型別值在記憶體中佔據固定大小的空間,因此被儲存在棧記憶體中
引用型別的值是物件, 儲存在堆記憶體中. 包含引用型別的變數實際上包含的並不是物件本身, 而是一個指向改物件的指標
複製
從一個變數向另一個變數複製基本型別的值, 會建立這個值的一個副本
從一個變數向另一個變數複製引用型別的值, 複製的其實是指標, 因此兩個變數最終都指向同一個物件
檢測型別
確定一個值是哪種基本型別可以用typeof操作符,
而確定一個值是哪種引用型別可以使用instanceof操作符
21. 關於js的垃圾收集例程
js是一門具有自動垃圾回收機制的程式語言,開發人員不必關心記憶體分配和回收問題
離開作用域的值將被自動標記為可以回收, 因此將在垃圾收集期間被刪除
"標記清除"是目前主流的垃圾收集演算法, 這種演算法的思路是給當前不使用的值加上標記, 然後再回收其記憶體
另一種垃圾收集演算法是"引用計數", 這種演算法的思想是跟蹤記錄所有值被引用的次數. js引擎目前都不再使用這種演算法, 但在IE中訪問非原生JS物件(如DOM元素)時, 這種演算法仍然可能會導致問題
當代碼中存在迴圈引用現象時, "引用計數" 演算法就會導致問題
解除變數的引用不僅有助於消除迴圈引用現象, 而且對垃圾收集也有好處. 為了確保有效地回收記憶體, 應該及時解除不再使用的全域性物件, 全域性物件屬性以及迴圈引用變數的引用
22. ES5中, 除了函式,什麼能夠產生作用域?
try-catch 和with延長作用域. 因為他們都會建立一個新的變數物件.
這兩個語句都會在作用域鏈的前端新增一個變數物件. 對with語句來說, 會將指定的物件新增到作用域鏈中. 對catch語句來說, 會建立一個新的變數物件, 其中包含的是被丟擲的錯誤物件的宣告.
當try程式碼塊中發生錯誤時，執行過程會跳轉到catch語句，然後把異常物件推入一個可變物件並置於作用域的頭部。在catch程式碼塊內部，函式的所有區域性變數將會被放在第二個作用域鏈物件中。請注意，一旦catch語句執行完畢，作用域鏈機會返回到之前的狀態。try-catch語句在程式碼除錯和異常處理中非常有用，因此不建議完全避免。你可以通過優化程式碼來減少catch語句對效能的影響。一個很好的模式是將錯誤委託給一個函式處理
with(object) {statement}。它的意思是把object新增到作用域鏈的頂端
23. js有幾種函式呼叫方式?
方法呼叫模型 var obj = { func : function(){};} obj.func()
函式呼叫模式 var func = function(){} func();
構造器呼叫模式
apply/ call呼叫模式
24. 描述事件模型?IE的事件模型是怎樣的？事件代理是什麼？事件代理中怎麼定位實際事件產生的目標？
捕獲->處於目標->冒泡，IE應該是隻有冒泡沒有捕獲。
事件代理就是在父元素上繫結事件來處理，通過event物件的target來定位。
25. js動畫有哪些實現方法?
用定時器 setTimeout和setInterval
26. 還有什麼實現動畫的方法?
js動畫:
使用定時器 setTimeout和setInterval
CSS : transition , animation
transition 包含4種屬性：transition-delaytransition-durationtransition-propertytransition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函式，
transform 包含7種屬性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state，它們可以定義動畫名稱，持續時間，緩動函式，動畫延遲，動畫方向，重複次數，填充模式。
HTML5 動畫
canvas
svg
webgl
參考：前端動畫效果實現的簡單比較
27. 面向物件有哪幾個特點?
封裝, 繼承, 多型
28. 如何判斷屬性來自自身物件還是原型鏈?
hasOwnPrototype
29. ES6新特性
1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的引數，而右邊則是進行的操作以及返回的值
2) 支援類, 引入了class關鍵字. ES6提供的類實際上就是JS原型模式的包裝
3) 增強的物件字面量.
1. 可以在物件字面量中定義原型 __proto__: xxx //設定其原型為xxx,相當於繼承xxx
2. 定義方法可以不用function關鍵字
3. 直接呼叫父類方法
4) 字串模板: ES6中允許使用反引號 ` 來建立字串，此種方法建立的字串裡面可以包含由美元符號加花括號包裹的變數${vraible}。
5) 自動解析陣列或物件中的值。比如若一個函式要返回多個值，常規的做法是返回一個物件，將每個值做為這個物件的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然後陣列中的值會自動被解析到對應接收該值的變數中。
6) 預設引數值: 現在可以在定義函式的時候指定引數的預設值了，而不用像以前那樣通過邏輯或操作符來達到目的了。
7) 不定引數是在函式中使用命名引數同時接收不定數量的未命名引數。在以前的JavaScript程式碼中我們可以通過arguments變數來達到這一目的。不定引數的格式是三個句點後跟代表所有不定引數的變數名。比如下面這個例子中，…x代表了所有傳入add函式的引數。
8) 拓展引數則是另一種形式的語法糖，它允許傳遞陣列或者類陣列直接做為函式的引數而不用通過apply。
9) let和const關鍵字: 可以把let看成var，只是它定義的變數被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即無法被更改值的變數。
10) for of值遍歷 每次迴圈它提供的不是序號而是值。
11) iterator, generator
12) 模組
13) Map, Set, WeakMap, WeakSet
14) Proxy可以監聽物件身上發生了什麼事情，並在這些事情發生後執行一些相應的操作。一下子讓我們對一個物件有了很強的追蹤能力，同時在資料繫結方面也很有用處。
15) Symbols Symbol 通過呼叫symbol函式產生，它接收一個可選的名字引數，該函式返回的symbol是唯一的。之後就可以用這個返回值做為物件的鍵了。Symbol還可以用來建立私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。
16) Math, Number, String, Object的新API
17) Promises是處理非同步操作的一種模式
參考：ES6新特性概覽
30. 如何獲取某個DOM節點
獲取節點: getElementById() getElementsByTagName()
31. 用LESS如何給某些屬性加瀏覽器字首？
可以自定義一個函式
.border-radius(@values) {
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
32.eval是做什麼的？
它的功能是把對應的字串解析成JS程式碼並執行；
應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）。
33. 圖片預載入的實現
使用jQuery圖片預載入外掛Lazy Load
1.載入jQuery, 與jquery.lazyload.js
2.設定圖片的佔位符為data-original, 給圖片一個特別的標籤,比如class=".lazy"
3.然後延遲載入: $('img.lazy').lazyload();這個函式可以選擇一些引數:
3.1.圖片預先載入距離：threshold，通過設定這個值，在圖片未出現在可視區域的頂部距離這個值時載入。
3.2.事件繫結載入的方式：event
3.3.圖片限定在某個容器內：container
使用js實現圖片載入: 就是new一個圖片物件, 繫結onload函式, 賦值url
用CSS實現圖片的預載入
寫一個CSS樣式設定一批背景圖片，然後將其隱藏
改進: 使用js來推遲預載入時間, 防止與頁面其他內容一起載入
用Ajax實現預載入
其實就是通過ajax請求請求圖片地址. 還可以用這種方式載入css,js檔案等
34. 如果在同一個元素上綁定了兩個click事件, 一個在捕獲階段執行, 一個在冒泡階段執行. 那麼當觸發click條件時, 會執行幾個事件? 執行順序是什麼?
我在回答這個題的時候說是兩個事件, 先執行捕獲的後執行冒泡的. 其實是不對的.
繫結在目標元素上的事件是按照繫結的順序執行的!!!!
即: 繫結在被點選元素的事件是按照程式碼順序發生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標準，先發生捕獲事件，後發生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素程式碼順序事件 -> 其他元素冒泡階段事件 。
參考: JavaScript-父子dom同時繫結兩個點選事件，一個用捕獲，一個用冒泡時執行順序
35. js中怎麼實現塊級作用域?
使用匿名函式, (立即執行函式)
(function(){...})()
使用es6
塊級作用域引入了兩種新的宣告形式,可以用它們定義一個只存在於某個語句塊中的變數或常量.這兩種新的宣告關鍵字為:
let: 語法上非常類似於var, 但定義的變數只存在於當前的語句塊中
const: 和let類似,但宣告的是一個只讀的常量
使用let代替var可以更容易的定義一個只在某個語句塊中存在的區域性變數,而不用擔心它和函式體中其他部分的同名變數有衝突.在let語句內部用var宣告的變數和在let語句外部用var宣告的變數沒什麼差別,它們都擁有函式作用域,而不是塊級作用域.
36. 建構函式裡定義function和使用prototype.func的區別？
1. 直接呼叫function，每一個類的例項都會拷貝這個函式，弊端就是浪費記憶體（如上）。prototype方式定義的方式，函式不會拷貝到每一個例項中，所有的例項共享prototype中的定義，節省了記憶體。
2. 但是如果prototype的屬性是物件的話，所有例項也會共享一個物件（這裡問的是函式應該不會出現這個情況），如果其中一個例項改變了物件的值，則所有例項的值都會被改變。同理的話，如果使用prototype呼叫的函式，一旦改變，所有例項的方法都會改變。——不可以對例項使用prototype屬性，只能對類和函式用。
37. js實現物件的深克隆
因為js中資料型別分為基本資料型別(number, string, boolean, null, undefined)和引用型別值(物件, 陣列, 函式). 這兩類物件在複製克隆的時候是有很大區別的. 原始型別儲存的是物件的實際資料, 而物件型別儲存的是物件的引用地址(物件的實際內容單獨存放, 為了減少資料開銷通常放在記憶體中). 此外, 物件的原型也是引用物件, 它把原型的屬性和方法放在記憶體中, 通過原型鏈的方式來指向這個記憶體地址.
於是克隆也會分為兩類:
淺度克隆:
原始型別為值傳遞, 物件型別仍為引用傳遞
深度克隆:
所有元素或屬性均完全複製, 與原物件完全脫離, 也就是說所有對於新物件的修改都不會反映到原物件中
HTML:
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範（html/Xhtml）一般為 嚴格 過度 基於框架的html文件
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
Ie(Ie核心) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3畫素問題 使用float引起的 使用dislpay:inline -3px
3.超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級新增position:relative
5.Png 透明 使用js程式碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe巢狀
8.為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供資訊
12.描述css reset的作用和用途。
Reset重置瀏覽器的css預設屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
14.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什麼模式
15.你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用
16.什麼是語義化的HTML?
直觀的認識標籤 對於搜尋引擎的抓取有好處
17.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增加無意義的標籤）
2.使用overflow:auto（空標籤元素清除浮動而不得不增加無意程式碼的弊端,,使用zoom:1用於相容IE）
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
18、常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?
瀏覽器：IE，Chrome，FireFox，Safari，Opera。
核心：Trident，Gecko，Presto，Webkit。
19、 說下行內元素和塊級元素的區別？行內塊元素的相容性使用？（IE8 以下）
行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
相容性：display:inline-block;*display:inline;*zoom:1;
20、 清除浮動有哪些方式？比較好的方式是哪一種？
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
比較好的是第3種方式，好多網站都這麼用。
21、box-sizing常用的屬性有哪些？分別有什麼作用？
box-sizing: content-box|border-box|inherit;
content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
22、Doctype作用？標準模式與相容模式各有什麼區別?
告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
23、HTML5 為什麼只需要寫<!DOCTYPE html> ？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
24、 頁面匯入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。
25、介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。
26、html5有哪些新特性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
JavaScript:
1.解釋jsonp的原理，以及為什麼不是真正的ajax?
動態建立script標籤，回撥函式
Ajax是頁面無重新整理請求資料操作
2. apply和call的用法和區別:
用法:
都能繼承另一個物件的方法和屬性,區別在於引數列表不一樣
區別:
Function.apply(obj, args) args是一個數組,作為引數傳給Function
Function.call(obj, arg1, arg2,...) arg*是引數列表
apply一個妙用: 可以將一個數組預設的轉化為一個引數列表
舉例說明: 有一個數組arr要push進一個新的陣列中去, 如果用call的話需要把陣列中的元素一個個取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)
3. bind函式的相容性
用法:
bind()函式會建立一個新函式, 為繫結函式。當呼叫這個繫結函式時,繫結函式會以建立它時傳入bind方法的第一個引數作為this,傳入bind方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式.
一個繫結函式也能使用new操作符建立物件：這種行為就像把原函式當成構造器。提供的 this 值被忽略，同時呼叫時的引數被提供給模擬函式。
4. 解釋下事件代理
事件委託利用了事件冒泡, 只指定一個事件處理程式, 就可以管理某一型別的所有事件.
例: html部分: 要點選li彈出其id
html 程式碼效果預覽
12345678
<ul id="list">
<li id="li-1">Li 2</li>
<li id="li-2">Li 3</li>
<li id="li-3">Li 4</li>
<li id="li-4">Li 5</li>
<li id="li-5">Li 6</li>
<li id="li-6">Li 7</li>
</ul>
javascript 程式碼效果預覽
12345678
//js部分
document.getElementById("list").addHandler("click", function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase == "LI"){
console.log("List item", e,target.id, "was clicked!");
}
});
5. 解釋下js中this是怎麼工作的?
this 在 JavaScript 中主要由以下五種使用場景。
作為函式呼叫，this 繫結全域性物件，瀏覽器環境全域性物件為 window 。
內部函式內部函式的 this 也繫結全域性物件，應該繫結到其外層函式對應的物件上，這是 JavaScript的缺陷，用that替換。
作為建構函式使用，this 繫結到新建立的物件。
作為物件方法使用，this 繫結到該物件。
使用apply或call呼叫 this 將會被顯式設定為函式呼叫的第一個引數。
6. 繼承
參考：js怎麼實現繼承？
7. AMD vs. CommonJS？
AMD是依賴提前載入
CMD是依賴延時載入
8. 什麼是雜湊表?
雜湊表（Hash table，也叫散列表），是根據關鍵碼值(Key value)而直接進行訪問的資料結構。也就是說，它通過把關鍵碼值對映到表中一個位置來訪問記錄，以加快查詢的速度。這個對映函式叫做雜湊函式，存放記錄的陣列叫做散列表。
使用雜湊查詢有兩個步驟:
使用雜湊函式將被查詢的鍵轉換為陣列的索引。在理想的情況下，不同的鍵會被轉換為不同的索引值，但是在有些情況下我們需要處理多個鍵被雜湊到同一個索引值的情況。
所以雜湊查詢的第二個步驟就是處理衝突。處理雜湊碰撞衝突。有很多處理雜湊碰撞衝突的方法，比如拉鍊法和線性探測法。
元素特徵轉變為陣列下標的方法就是雜湊法。雜湊法當然不止一種，下面列出三種比較常用的：
1，除法雜湊法
最直觀的一種，上圖使用的就是這種雜湊法，公式： index = value % 16
學過彙編的都知道，求模數其實是通過一個除法運算得到的，所以叫“除法雜湊法”。
2，平方雜湊法
求index是非常頻繁的操作，而乘法的運算要比除法來得省時（對現在的CPU來說，估計我們感覺不出來），所以我們考慮把除法換成乘法和一個位移操作。公式： index = (value * value) >> 28 （右移，除以2^28。記法：左移變大，是乘。右移變小，是除。）
如果數值分配比較均勻的話這種方法能得到不錯的結果，但我上面畫的那個圖的各個元素的值算出來的index都是0——非常失敗。也許你還有個問題，value如果很大，value * value不會溢位嗎？答案是會的，但我們這個乘法不關心溢位，因為我們根本不是為了獲取相乘結果，而是為了獲取index。
3，斐波那契（Fibonacci）雜湊法
解決衝突的方法:
1. 拉鍊法
將大小為M 的陣列的每一個元素指向一個條連結串列，連結串列中的每一個節點都儲存雜湊值為該索引的鍵值對，這就是拉鍊法.
對採用拉鍊法的雜湊實現的查詢分為兩步，首先是根據雜湊值找到等一應的連結串列，然後沿著連結串列順序找到相應的鍵。
2. 線性探測法:
使用陣列中的空位解決碰撞衝突
參考：淺談演算法和資料結構: 十一 雜湊表 雜湊表的工作原理
9. 什麼是閉包? 閉包有什麼作用?
閉包是指有權訪問另一個函式作用域中的變數的函式. 建立閉包常見方式,就是在一個函式內部建立另一個函式.
作用:
匿名自執行函式 (function (){ ... })(); 建立了一個匿名的函式，並立即執行它，由於外部無法引用它內部的變數，因此在執行完後很快就會被釋放，關鍵是這種機制不會汙染全域性物件。
快取, 可保留函式內部的值
實現封裝
實現模板
參考: js閉包的用途
10. 偽陣列:
什麼是偽陣列:
偽陣列是能通過Array.prototype.slice 轉換為真正的陣列的帶有length屬性的物件
比如arguments物件,還有像呼叫getElementsByTagName,document.childNodes之類的，它們都返回NodeList物件都屬於偽陣列
我們可以通過Array.prototype.slice.call(fakeArray)將偽陣列轉變為真正的Array物件: 返回新陣列而不會修改原陣列
參考：偽陣列
11. undefined和null的區別, 還有undeclared:
null表示沒有物件, 即此處不該有此值. 典型用法:
（1） 作為函式的引數，表示該函式的引數不是物件。
（2） 作為物件原型鏈的終點。
( 3 ) null可以作為空指標. 只要意在儲存物件的值還沒有真正儲存物件,就應該明確地讓該物件儲存null值.
undefined表示缺少值, 即此處應該有值, 但還未定義.
（1）變數被聲明瞭，但沒有賦值時，就等於undefined。
（2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。
（3）物件沒有賦值的屬性，該屬性的值為undefined。
（4）函式沒有返回值時，預設返回undefined。
undeclared即為被汙染的命名, 訪問沒有被宣告的變數, 則會丟擲異常, 終止執行. 即undeclared是一種語法錯誤
參考: undefined與null的區別
12. 事件冒泡機制:
從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函式，這些函式都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。
13. 解釋下為什麼接下來這段程式碼不是 IIFE(立即呼叫的函式表示式)：function foo(){ }();?
而函式定義（語句以function關鍵字開始）是不能被立即執行的，這無疑會導致語法的錯誤（SyntaxError）。當函式定義程式碼段包裹在括號內，使解析器可以將之識別為函式表示式，然後呼叫。IIFE: (function foo(){})()
區分 (function(){})(); 和 (function(){}()); 其實兩者實現效果一樣。
函式字面量：首先宣告一個函式物件，然後執行它。(function () { alert(1); })();
優先表示式：由於Javascript執行表示式是從圓括號裡面到外面，所以可以用圓括號強制執行宣告的函式。(function () { alert(2); }());
14. "attribute" 和 "property" 的區別是什麼？
DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”，property翻譯為“屬性”。
attribute是一個特性節點，每個DOM元素都有一個對應的attributes屬性來存放所有的attribute節點，attributes是一個類陣列的容器，說得準確點就是NameNodeMap，不繼承於Array.prototype，不能直接呼叫Array的方法。attributes的每個數字索引以名值對(name=”value”)的形式存放了一個attribute節點。<div class="box" id="box" gameid="880">hello</div>
property就是一個屬性，如果把DOM元素看成是一個普通的Object物件，那麼property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要新增和刪除property和普通的物件類似。
很多attribute節點還有一個相對應的property屬性，比如上面的div元素的id和class既是attribute，也有對應的property，不管使用哪種方法都可以訪問和修改。
總之，attribute節點都是在HTML程式碼中可見的，而property只是一個普通的名值對屬性。
15. 請指出 document load 和 document ready 兩個事件的區別。
document.ready和onload的區別——JavaScript文件載入完成事件。頁面載入完成有兩種事件:
一是ready，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）
二是onload，指示頁面包含圖片等檔案在內的所有元素都載入完成。
jQuery中$(function(){});他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。一般情況先一個頁面響應載入的順序是，域名解析-載入html-載入js和css-載入圖片等其他資訊。
16. 什麼是use strict? 其好處壞處分別是什麼?
在所有的函式 (或者所有最外層函式) 的開始處加入 "use strict"; 指令啟動嚴格模式。
"嚴格模式"有兩種呼叫方法
1）將"use strict"放在指令碼檔案的第一行，則整個指令碼都將以"嚴格模式"執行。如果這行語句不在第一行，則無效，整個指令碼以"正常模式"執行。如果不同模式的程式碼檔案合併成一個檔案，這一點需要特別注意。
2）將整個指令碼檔案放在一個立即執行的匿名函式之中。
好處
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
- 提高編譯器效率，增加執行速度；
- 為未來新版本的Javascript做好鋪墊。
壞處
同樣的程式碼，在"嚴格模式"中，可能會有不一樣的執行結果；一些在"正常模式"下可以執行的語句，在"嚴格模式"下將不能執行
17. 瀏覽器端的js包括哪幾個部分?
核心( ECMAScript) , 文件物件模型(DOM), 瀏覽器物件模型(BOM)
18. DOM包括哪些物件?
DOM是針對HTML和XML文件的一個API(應用程式程式設計介面). DOM描繪了一個層次化的節點樹, 允許開發人員新增, 移除和修改頁面的某一部分.
常用的DOM方法:
getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()
常用的DOM屬性
innerHTML 節點(元素)的文字值
parentNode 節點(元素)的父節點
childNodes
attributes 節點(元素)的屬性節點
參考: HTML DOM 方法
19. js有哪些基本型別?
Undefined, Null, Boolean, Number, String
Object是複雜資料型別, 其本質是由一組無序的名值對組成的.
20. 基本型別與引用型別有什麼區別?
基本型別如上題所示. 引用型別則有: Object, Array, Date, RegExp, Function
儲存
基本型別值在記憶體中佔據固定大小的空間,因此被儲存在棧記憶體中
引用型別的值是物件, 儲存在堆記憶體中. 包含引用型別的變數實際上包含的並不是物件本身, 而是一個指向改物件的指標
複製
從一個變數向另一個變數複製基本型別的值, 會建立這個值的一個副本
從一個變數向另一個變數複製引用型別的值, 複製的其實是指標, 因此兩個變數最終都指向同一個物件
檢測型別
確定一個值是哪種基本型別可以用typeof操作符,
而確定一個值是哪種引用型別可以使用instanceof操作符
21. 關於js的垃圾收集例程
js是一門具有自動垃圾回收機制的程式語言,開發人員不必關心記憶體分配和回收問題
離開作用域的值將被自動標記為可以回收, 因此將在垃圾收集期間被刪除
"標記清除"是目前主流的垃圾收集演算法, 這種演算法的思路是給當前不使用的值加上標記, 然後再回收其記憶體
另一種垃圾收集演算法是"引用計數", 這種演算法的思想是跟蹤記錄所有值被引用的次數. js引擎目前都不再使用這種演算法, 但在IE中訪問非原生JS物件(如DOM元素)時, 這種演算法仍然可能會導致問題
當代碼中存在迴圈引用現象時, "引用計數" 演算法就會導致問題
解除變數的引用不僅有助於消除迴圈引用現象, 而且對垃圾收集也有好處. 為了確保有效地回收記憶體, 應該及時解除不再使用的全域性物件, 全域性物件屬性以及迴圈引用變數的引用
22. ES5中, 除了函式,什麼能夠產生作用域?
try-catch 和with延長作用域. 因為他們都會建立一個新的變數物件.
這兩個語句都會在作用域鏈的前端新增一個變數物件. 對with語句來說, 會將指定的物件新增到作用域鏈中. 對catch語句來說, 會建立一個新的變數物件, 其中包含的是被丟擲的錯誤物件的宣告.
當try程式碼塊中發生錯誤時，執行過程會跳轉到catch語句，然後把異常物件推入一個可變物件並置於作用域的頭部。在catch程式碼塊內部，函式的所有區域性變數將會被放在第二個作用域鏈物件中。請注意，一旦catch語句執行完畢，作用域鏈機會返回到之前的狀態。try-catch語句在程式碼除錯和異常處理中非常有用，因此不建議完全避免。你可以通過優化程式碼來減少catch語句對效能的影響。一個很好的模式是將錯誤委託給一個函式處理
with(object) {statement}。它的意思是把object新增到作用域鏈的頂端
23. js有幾種函式呼叫方式?
方法呼叫模型 var obj = { func : function(){};} obj.func()
函式呼叫模式 var func = function(){} func();
構造器呼叫模式
apply/ call呼叫模式
24. 描述事件模型?IE的事件模型是怎樣的？事件代理是什麼？事件代理中怎麼定位實際事件產生的目標？
捕獲->處於目標->冒泡，IE應該是隻有冒泡沒有捕獲。
事件代理就是在父元素上繫結事件來處理，通過event物件的target來定位。
25. js動畫有哪些實現方法?
用定時器 setTimeout和setInterval
26. 還有什麼實現動畫的方法?
js動畫:
使用定時器 setTimeout和setInterval
CSS : transition , animation
transition 包含4種屬性：transition-delaytransition-durationtransition-propertytransition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函式，
transform 包含7種屬性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state，它們可以定義動畫名稱，持續時間，緩動函式，動畫延遲，動畫方向，重複次數，填充模式。
HTML5 動畫
canvas
svg
webgl
參考：前端動畫效果實現的簡單比較
27. 面向物件有哪幾個特點?
封裝, 繼承, 多型
28. 如何判斷屬性來自自身物件還是原型鏈?
hasOwnPrototype
29. ES6新特性
1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的引數，而右邊則是進行的操作以及返回的值
2) 支援類, 引入了class關鍵字. ES6提供的類實際上就是JS原型模式的包裝
3) 增強的物件字面量.
1. 可以在物件字面量中定義原型 __proto__: xxx //設定其原型為xxx,相當於繼承xxx
2. 定義方法可以不用function關鍵字
3. 直接呼叫父類方法
4) 字串模板: ES6中允許使用反引號 ` 來建立字串，此種方法建立的字串裡面可以包含由美元符號加花括號包裹的變數${vraible}。
5) 自動解析陣列或物件中的值。比如若一個函式要返回多個值，常規的做法是返回一個物件，將每個值做為這個物件的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然後陣列中的值會自動被解析到對應接收該值的變數中。
6) 預設引數值: 現在可以在定義函式的時候指定引數的預設值了，而不用像以前那樣通過邏輯或操作符來達到目的了。
7) 不定引數是在函式中使用命名引數同時接收不定數量的未命名引數。在以前的JavaScript程式碼中我們可以通過arguments變數來達到這一目的。不定引數的格式是三個句點後跟代表所有不定引數的變數名。比如下面這個例子中，…x代表了所有傳入add函式的引數。
8) 拓展引數則是另一種形式的語法糖，它允許傳遞陣列或者類陣列直接做為函式的引數而不用通過apply。
9) let和const關鍵字: 可以把let看成var，只是它定義的變數被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即無法被更改值的變數。
10) for of值遍歷 每次迴圈它提供的不是序號而是值。
11) iterator, generator
12) 模組
13) Map, Set, WeakMap, WeakSet
14) Proxy可以監聽物件身上發生了什麼事情，並在這些事情發生後執行一些相應的操作。一下子讓我們對一個物件有了很強的追蹤能力，同時在資料繫結方面也很有用處。
15) Symbols Symbol 通過呼叫symbol函式產生，它接收一個可選的名字引數，該函式返回的symbol是唯一的。之後就可以用這個返回值做為物件的鍵了。Symbol還可以用來建立私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。
16) Math, Number, String, Object的新API
17) Promises是處理非同步操作的一種模式
參考：ES6新特性概覽
30. 如何獲取某個DOM節點
獲取節點: getElementById() getElementsByTagName()
31. 用LESS如何給某些屬性加瀏覽器字首？
可以自定義一個函式
.border-radius(@values) {
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
32.eval是做什麼的？
它的功能是把對應的字串解析成JS程式碼並執行；
應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）。
33. 圖片預載入的實現
使用jQuery圖片預載入外掛Lazy Load
1.載入jQuery, 與jquery.lazyload.js
2.設定圖片的佔位符為data-original, 給圖片一個特別的標籤,比如class=".lazy"
3.然後延遲載入: $('img.lazy').lazyload();這個函式可以選擇一些引數:
3.1.圖片預先載入距離：threshold，通過設定這個值，在圖片未出現在可視區域的頂部距離這個值時載入。
3.2.事件繫結載入的方式：event
3.3.圖片限定在某個容器內：container
使用js實現圖片載入: 就是new一個圖片物件, 繫結onload函式, 賦值url
用CSS實現圖片的預載入
寫一個CSS樣式設定一批背景圖片，然後將其隱藏
改進: 使用js來推遲預載入時間, 防止與頁面其他內容一起載入
用Ajax實現預載入
其實就是通過ajax請求請求圖片地址. 還可以用這種方式載入css,js檔案等
34. 如果在同一個元素上綁定了兩個click事件, 一個在捕獲階段執行, 一個在冒泡階段執行. 那麼當觸發click條件時, 會執行幾個事件? 執行順序是什麼?
我在回答這個題的時候說是兩個事件, 先執行捕獲的後執行冒泡的. 其實是不對的.
繫結在目標元素上的事件是按照繫結的順序執行的!!!!
即: 繫結在被點選元素的事件是按照程式碼順序發生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標準，先發生捕獲事件，後發生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素程式碼順序事件 -> 其他元素冒泡階段事件 。
參考: JavaScript-父子dom同時繫結兩個點選事件，一個用捕獲，一個用冒泡時執行順序
35. js中怎麼實現塊級作用域?
使用匿名函式, (立即執行函式)
(function(){...})()
使用es6
塊級作用域引入了兩種新的宣告形式,可以用它們定義一個只存在於某個語句塊中的變數或常量.這兩種新的宣告關鍵字為:
let: 語法上非常類似於var, 但定義的變數只存在於當前的語句塊中
const: 和let類似,但宣告的是一個只讀的常量
使用let代替var可以更容易的定義一個只在某個語句塊中存在的區域性變數,而不用擔心它和函式體中其他部分的同名變數有衝突.在let語句內部用var宣告的變數和在let語句外部用var宣告的變數沒什麼差別,它們都擁有函式作用域,而不是塊級作用域.
36. 建構函式裡定義function和使用prototype.func的區別？
1. 直接呼叫function，每一個類的例項都會拷貝這個函式，弊端就是浪費記憶體（如上）。prototype方式定義的方式，函式不會拷貝到每一個例項中，所有的例項共享prototype中的定義，節省了記憶體。
2. 但是如果prototype的屬性是物件的話，所有例項也會共享一個物件（這裡問的是函式應該不會出現這個情況），如果其中一個例項改變了物件的值，則所有例項的值都會被改變。同理的話，如果使用prototype呼叫的函式，一旦改變，所有例項的方法都會改變。——不可以對例項使用prototype屬性，只能對類和函式用。
37. js實現物件的深克隆
因為js中資料型別分為基本資料型別(number, string, boolean, null, undefined)和引用型別值(物件, 陣列, 函式). 這兩類物件在複製克隆的時候是有很大區別的. 原始型別儲存的是物件的實際資料, 而物件型別儲存的是物件的引用地址(物件的實際內容單獨存放, 為了減少資料開銷通常放在記憶體中). 此外, 物件的原型也是引用物件, 它把原型的屬性和方法放在記憶體中, 通過原型鏈的方式來指向這個記憶體地址.
於是克隆也會分為兩類:
淺度克隆:
原始型別為值傳遞, 物件型別仍為引用傳遞
深度克隆:
所有元素或屬性均完全複製, 與原物件完全脫離, 也就是說所有對於新物件的修改都不會反映到原物件中