⑴ 前端經典面試題(包含JS、CSS、React、瀏覽器等)
防抖
節流
誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。
實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:
補充補充一個get和post在緩存方面的區別：
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key => index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：
創建map函數
遍歷尋找
在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。
**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。
虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。
具體實現步驟如下：
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。
結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊
繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少
聯系：它們都能讓元素不可見
常用的一般為三種 .clearfix , clear:both , overflow:hidden ;
比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.
clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷
overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
block 元素特點：
1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align
inline 元素特點
1.水平方向上根據 direction 依次布局
2.不會在元素前後進行換行
3.受 white-space 控制
4. margin/padding 在豎直方向上無效，水平方向上有效
5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效
GIF :
JPEG ：
PNG ：
七種數據類型
(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,
ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值
Object 為引用類型(范圍挺大),也包括數組、函數,
輸出結果是：
工廠模式
簡單的工廠模式可以理解為解決多個相似的問題;
單例模式
只能被實例化(構造函數給實例添加屬性與方法)一次
沙箱模式
將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值
發布者訂閱模式
就例如如我們關注了某一個公眾號,然後他對應的有新的消息就會給你推送,
代碼實現邏輯是用數組存貯訂閱者, 發布者回調函數裡面通知的方式是遍歷訂閱者數組,並將發布者內容傳入訂閱者數組
1.字面量
2.Object構造函數創建
3.使用工廠模式創建對象
4.使用構造函數創建對象
HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。
什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
IE只支持事件冒泡 。
獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。
那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。
我們發現Function的原型也是Function。
我們用圖可以來明確這個關系：
這里來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。
則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:
這里我們可以來看出三者的關系:
在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。
在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？
函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。
函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。
在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重復調用。
call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。
bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。
如何實現一個 bind 函數
對於實現以下幾個函數，可以從幾個方面思考
如何實現一個call函數
如何實現一個apply函數
箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。
在函數中，我們首先使用 var 關鍵字聲明了 name 變數。這意味著變數在創建階段會被提升（ JavaScript 會在創建變數創建階段為其分配內存空間），默認值為 undefined ，直到我們實際執行到使用該變數的行。我們還沒有為 name 變數賦值，所以它仍然保持 undefined 的值。
使用 let 關鍵字（和 const ）聲明的變數也會存在變數提升，但與 var 不同，初始化沒有被提升。在我們聲明（初始化）它們之前，它們是不可訪問的。這被稱為「暫時死區」。當我們在聲明變數之前嘗試訪問變數時， JavaScript 會拋出一個 ReferenceError 。
關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：
let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。
變數的賦值可以分為三個階段：
關於 let 、 var 和 function ：
依次輸出：undefined -> 10 -> 20
答案: D
colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
undefined {n:2}
首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這里首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。
在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。
我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。
這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（Ƈ'） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。
這題考察的是對象的鍵名的轉換。
catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。
之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。
在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。
⑵ web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
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)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
⑶ 前端筆試面試題總結（二）
A. null
B. [null]
C. [{}]
D. [{ name:"Lydia" }]
解析：
註：members被賦值的是person的指針；
正確答案：D
A. f foo(){ foo =10; console.log(foo)}
B. 1
C. 10
D. undefined
解析：
具名的匿名函數，函數名默認指向其本身，且具有隻讀屬性，函數會被當作函數表達式而不是一個標準的函數聲明來處理，函數表達式意味著函數被直接綁定在作用域中，意味著foo只能在被自己代表的位置被調用，不會污染全局作用域。
正確答案：A
解析：
正確答案： 30 24
解析：
正確答案：undefined 10 20
A. { name: "Lydia",age: 21} , ["name","age"]
B. { name: "Lydia",age: 21} , ["name"]
C. { name: "Lydia"} , ["name","age"]
D. { name: "Lydia"} , ["age"]
解析：
註： Object.defineProperty 是ES5提供的一種給對象定義屬性的方式，定義的屬性默認不可以枚舉、遍歷，不可以刪除；可以使用set、get，定義屬性時觸發get，修改屬性值時觸發set，利用其可以實現數據雙向綁定。
Object.keys 返回的是數組，又因 Object.defineProperty 定義的屬性默認不可以枚舉、遍歷，所以只能返回對象的第一個關鍵字；如果想要實現遍歷，可以利用 enumerable:true 實現遍歷，如果想要修改或刪除，可以利用 configurable:true 實現。
正確答案：B
A. "{"level":19,"health":90}"
B. "{"username": "xiao ming"}"
C. "["level","health"]"
D. "{"username":"xiao ming","level":19,"health":90}"
解析：
JSON.stringify(value,replacer) 方法將一個 JavaScript 對象或值轉換為 JSON 字元串，如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性。
正確答案：A
A. 20 , 40 , 80 , 160
B. 20 , 40 , 20 , 40
C. 20 , 20 , 20 , 40
D. NaN , NaN , 20 , 40
解析：
正確答案：C
A. Calculated! 20 Calculated! 20 Calculated! 20
B. Calculated! 20 From cache! 20 Calculated! 20
C. Calculated! 20 From cache! 20 Form cache! 20
D. Calculated! 20 From cache! 20 Error
解析：
註：閉包函數定義： 當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變數，如果返回的這個函數在外部被執行，就產生了閉包。
表現形式：使函數外部能夠調用函數內部定義的變數。
正確答案：C
A. ['apple','banana']
B. 2
C. true
D. undefined
解析：
註：push()方法的返回值：把指定的值添加到數組後的新長度
正確答案：B
A. "I made it!"
B. Promise {<resolved>: "I made it!"}
C. Promise {<pending>}
D. undefined
解析：
註：promise ES6語法中的非同步操作的API，每一個promise包含三種狀態 pending（掛起）、 resolve（成功）、 reject（失敗）， 而在每一個promise對象包含then 和 catch兩個方法，then方法接收一個函數，用於處理resolve成功方法，而catch方法接收一個函數，用於處理reject失敗的方法。
正確答案：C
⑷ 前端開發面試回答，你怎麼回答
我面試過很多 前端程序員，非常了解面試者和面試官的心理，我可以很負責的告訴你：
就算面試你的人說你只能拿8K，但是你完全可以通過各種方法去拿到10K以上的薪資！
面試的時候面試官都是什麼樣的心理？
大多數公司的領導都會通過給你構造一個宏偉的藍圖以及對你進行技術打擊，來讓你降低標准，因為任何一家公司都希望花最少的錢請到最NB的技術人才，其實雙方就是一個周旋的過程，看誰的情商更高一些，但往往都是面試者被面試官拿下的情況比較多。
我給面試經驗不多的 前端程序員4個建議：
1、說工資時千萬不要說自己的理想工資，在這個之上虛高一點！
假設你預期的薪資是10k，你很實在的說要10k，那麼按照常理來說，你的工資標準是一定會被往下進行打壓的。
你可以先說自己以前的工作的薪資在11K左右，現在換份工作想要13K的薪資，這個時候面試官就會想，這個人以前的工資是11k，現在給他10k他肯定是不會來的，但他還是會跟你進行壓價，但是壓價肯定都是在10k以上的，所以你和面試官談判的時候，如果他認可你，那麼你的薪資應該就會在10k-13k之間，無論最終是10k還是11k或者12k，我們的目標都已經達到了。你可以進行一番思考，最終同意對方的開價。
但是你不要跟輕易的答應，一定要拿捏一下，讓對方覺得你也在考慮，最終你選擇了他們公司，要表達出對他們公司的願景，自己中意的是職業發展，喜歡的是公司氛圍等等因素，這樣對方才會認為你是看重公司的發展，而不是因為工資。關於這點我只能說，華夏民族的人和人交流的關系是世界最微妙的，這些套路大家心知肚明，但是你用和不用還真的是兩種效果。
2、設置一個自己的心理價位
如果對方說的薪資低於這個心理價位，我們一定要果斷拒絕，保持我們的原則性，不要因為對方說了而讓你降低了自己的心理價位，這樣也會讓面試官覺得你非常的有原則，非常自信，人們都尊重這樣的人，如果你一味的做舔狗，下場會非常悲慘。
根據我十年多的IT從業經驗來看，即使是做同樣的工作，也會存在著很多工資高低差距較多的情況，所以不要掉在一棵樹上，現在社會工作機會這么多，只要有實實在在的技術，工作是很容易找的，一定要多去嘗試。
3、凸顯自己的價值，讓對方覺得你是個人才
如果之前兩點沒有達到預期成效，但你又非常看好這家公司，就該盡力爭取了；
用自己之前做成的事情說事情，最好是用數據給面試官說明，表達清楚自己為什麼要這樣的薪資，讓對方感覺到你值這么多錢，如果對方公司現在比較缺人，而且你要的薪資沒有特別離譜，還有有希望拿下的。
4、公司一般都有獎金福利可以彌補工資的欠缺
大多數人都想不到那麼遠，都是盯著眼前的薪資，但其實很多公司都有項目提成、獎金，這也是錢啊，有一些不錯的公司都是14薪往上，所以在跟公司談的時候，一定要去問他們是否有獎金、年終獎之類的福利。
除了被壓榨薪資的問題，還有以下幾點是必須要注意的！
1、項目作品
面試的時候，除了基礎的知識技術外，一個項目經驗是非常重要的，面試官會著重去問你的項目過程，所以准備好一份好的項目實戰，不只是證明你對這次面試的重視，更是證明你有能力勝任這份工作的利器。
2、去背那些常問的面試題
面試題對於以下幾個問題都會問：
·自我介紹（建議30s-60s）
·了解我們公司的基本情況嗎？
·你上家公司離職的原因是什麼？
·你自己的職業規劃是什麼？
·自我評價一下自己的優缺點？
以上問題都是大部分公司都會問到的，其實面試官只是想多了解你一些，而這些回答在網上有非常標準的答案，如果你覺得自己回答不好，你可以去網上找一些標準的答案背一下，還是非常有必要的，做到萬無一失。
3、假設面試官沒有跟你說薪資的問題，那麼我們也不要主動去提及，這樣會顯得你非常的著急，最好是先拿到offer之後再去談薪資，這樣對於我們來說是非常有利的，經驗之談。
4、面試的時候不要對方問一句你就答一句，你一定要明白面試的本質是什麼，在短時間內展示你的才華，方方面面的才能，給對方留下一個好的印象。
5、面試的過程中，是你展現的時候，所以80%的時間都應該你來主導，你來展示自己的才能，一定要非常著重的表現自己。
6、在回答面試官時，換位思考幾秒鍾：
·他為什麼要問這個問題？
·他想知道什麼答案？
·他想通過這個答案判斷出什麼？
所謂知己知彼才能百戰不殆，你一定要換位思考對方問的問題，想要知道什麼，從你的回答中他是否可以得到他想要的答案，所以面試是一門非常深的學問，人與人之間心理的博弈。
總結：
以上全部都是面試技巧方面，這屬於細活，而真正掌握技術才是根本，如果你沒有掌握良好的技術，技巧也幫助不了你找到一份工作，當你的技術達標，在加上好的面試技巧，就是如虎添翼，工作隨便你選擇。
常在這里回答問題，熱愛技術，喜歡幫別人解答行業技術問題和行業知識。
如果大家對於學習前端有任何不懂的可以隨時來問我，我給你提供一個非常不錯的前端交流學習qun：前面是二九六，中間是二一二，後面是五六二。有問題就在裡面問我，這樣你可以少走很多彎路，做起來有效率，記得多跟有經驗的人交流，別閉門造車。如果沒有比較好的教程，也可以管我要。
⑸ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
⑹ 騰訊WEB前端筆試題和面試題答案
如下分享是一份完整的騰訊WEB前端筆試題，大家有空可以練一練！
一、耐心填一填!(每空4分，共24分)
1. 為span設置類a與b,應編寫HTML代碼_
_
_________。
2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。
3. ____li________標簽必須直接嵌套於ul、ol中。
4. CSS屬性_____margin_______可為元素設置外補丁。
5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。
6. 文字居中的CSS代碼是____text-align:center________。
二、精心選一選!(每題4分，共16分)
1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 選出你認為最合理的定義標題的方法( C )
A. 文章標題
B.
文章標題
C.
文章標題
D. 文章標題
3. br標簽在XHTML中語義為( A )
A.換行 B.強調 C.段落 D.標題
4. 不換行必須設置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表現數據時，有時候表現出來的會比自己實際設置的寬度要寬，為此需要設置下面哪些
屬性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判斷對或錯!(每題4分，共24分)
1. CSS屬性font-style 用於設置字體的粗細。 ( × )
2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )
3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )
4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )
5. display:inline兼容所有的瀏覽器。 ( √ )
6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × ) 1 2
⑺ Web前端崗位面試題有哪些
前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
11、一個滿屏 品 字布局 如何設計?
三、常見兼容性問題？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）規范區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
⑻ 有哪些經典的前端開發面試題及答案解析
行元素與塊元素的區別；
如何清除浮動；
定位方式當中，absolute與fixed、relative的區別；
事件的兼容問題；
Ajax是什麼；
如何優化你的頁面；
響應式布局是什麼等等。
經典的前端面試題至少有近百道，在這里也沒辦法全部給你列出來，你可以看看這個（小-程序），裡面有好幾百道面試真題，也有比較好的答案解析。
