面試題2

PNG

有PNG8和truecolor PNG

PNG8類似GIF顏色上限為256，檔案小，支援alpha透明度，無動畫

適合圖示、背景、按鈕

18、行內元素float:left後是否變為塊級元素？

浮動後，行內元素不會成為塊狀元素，但是可以設定寬高。行內元素要想變成塊狀元素，佔一行，直接設定display:block;。但如果元素設定了浮動後再設定display:block;那就不會佔一行。

19、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？

偶數字號相對更容易和 web 設計的其他部分構成比例關係

20、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素

用於區分偽類和偽元素

21、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

22、CSS合併方法

避免使用@import引入多個css檔案，可以使用CSS工具將CSS合併為一個CSS檔案，例如使用Sass\Compass等

23、CSS不同選擇器的權重(CSS層疊的規則)

！important規則最重要，大於其它規則

行內樣式規則，加1000

對於選擇器中給定的各個ID屬性值，加100

對於選擇器中給定的各個類屬性、屬性選擇器或者偽類選擇器，加10

對於選擇其中給定的各個元素標籤選擇器，加1

如果權值一樣，則按照樣式規則的先後順序來應用，順序靠後的覆蓋靠前的規則

24、列出你所知道可以改變頁面佈局的屬性

position、display、float、width、height、margin、padding、top、left、right、`

25、CSS在效能優化方面的實踐

css壓縮與合併、Gzip壓縮

css檔案放在head裡、不要用@import

儘量用縮寫、避免用濾鏡、合理使用選擇器

26、CSS3動畫（簡單動畫的實現，如旋轉等）

依靠CSS3中提出的三個屬性：transition、transform、animation

transition：定義了元素在變化過程中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。

transform：定義元素的變化結果，包含rotate、scale、skew、translate。

animation：動畫定義了動作的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

27、base64的原理及優缺點

優點可以加密，減少了http請求

缺點是需要消耗CPU進行編解碼

28、幾種常見的CSS佈局

流體佈局

.left{float: left;width:100px;height:200px;background: red;    }.right{float: right;width:200px;height:200px;background: blue;    }.main{margin-left:120px;margin-right:220px;height:200px;background: green;    }

聖盃佈局

.container{margin-left:120px;margin-right:220px;        }.main{float: left;width:100%;height:300px;background: green;        }.left{position: relative;left: -120px;float: left;height:300px;width:100px;margin-left: -100%;background: red;        }.right{position: relative;right: -220px;float: right;height:300px;width:200px;margin-left: -200px;background: blue;        }

雙飛翼佈局

.content{float: left;width:100%;        }.main{height:200px;margin-left:110px;margin-right:220px;background: green;        }.main::after{content:'';display: block;font-size:0;height:0;zoom:1;clear: both;        }.left{float:left;height:200px;width:100px;margin-left: -100%;background: red;        }.right{float: right;height:200px;width:200px;margin-left: -200px;background: blue;        }

29、stylus/sass/less區別

均具有“變數”、“混合”、“巢狀”、“繼承”、“顏色混合”五大基本特性

Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮排表示層次與巢狀關係

Scss無全域性變數的概念，LESS和Stylus有類似於其它語言的作用域概念

Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫後進行編譯；

30、postcss的作用

可以直觀的理解為：它就是一個平臺。為什麼說它是一個平臺呢？因為我們直接用它，感覺不能幹什麼事情，但是如果讓一些外掛在它上面跑，那麼將會很強大

PostCSS 提供了一個解析器，它能夠將 CSS 解析成抽象語法樹

通過在 PostCSS 這個平臺上，我們能夠開發一些外掛，來處理我們的CSS，比如熱門的：autoprefixer

postcss可以對sass處理過後的css再處理 最常見的就是autoprefixer

$JavaScript

1、閉包

閉包就是能夠讀取其他函式內部變數的函式

閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見的方式就是在一個函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數,利用閉包可以突破作用鏈域

閉包的特性：

函式內再巢狀函式

內部函式可以引用外層的引數和變數

引數和變數不會被垃圾回收機制回收

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。在js中，函式即閉包，只有函式才會產生作用域的概念

閉包 的最大用處有兩個，一個是可以讀取函式內部的變數，另一個就是讓這些變數始終保持在記憶體中

閉包的另一個用處，是封裝物件的私有屬性和私有方法

好處：能夠實現封裝和快取等；

壞處：就是消耗記憶體、不正當使用會造成記憶體溢位的問題

使用閉包的注意點

由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體洩露

解決方法是，在退出函式之前，將不使用的區域性變數全部刪除

2、說說你對作用域鏈的理解

作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到window物件即被終止，作用域鏈向下訪問變數是不被允許的

簡單的說，作用域就是變數與函式的可訪問範圍，即作用域控制著變數與函式的可見性和生命週期

3、JavaScript原型，原型鏈 ? 有什麼特點？

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時

如果這個物件內部不存在這個屬性，那麼他就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念

關係：instance.constructor.prototype = instance.__proto__

特點：

JavaScript物件是通過引用來傳遞的，我們建立的每個新物件實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的物件也會繼承這一改變

當我們需要一個屬性的時，Javascript引擎會先看當前物件中是否有這個屬性， 如果沒有的

就會查詢他的Prototype物件是否有這個屬性，如此遞推下去，一直檢索到 Object 內建物件

4、請解釋什麼是事件代理

事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高效能

可以大量節省記憶體佔用，減少事件註冊，比如在table上代理所有td的click事件就非常棒

可以實現當新增子物件時無需再次對其繫結

5、Javascript如何實現繼承？

構造繼承

原型繼承

例項繼承

拷貝繼承

原型prototype機制或apply和call方法去實現較簡單，建議使用建構函式與原型混合方式

functionParent(){this.name ='wang';    }functionChild(){this.age =28;    }    Child.prototype =newParent();//繼承了Parent，通過原型vardemo =newChild();    alert(demo.age);    alert(demo.name);//得到被繼承的屬性}

6、談談This物件的理解

this總是指向函式的直接呼叫者（而非間接呼叫者）

如果有new關鍵字，this指向new出來的那個物件

在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域性物件Window

7、事件模型

W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發

捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發

DOM事件流：同時支援兩種事件模型：捕獲型事件和冒泡型事件

阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設定cancelBubble = true

阻止捕獲：阻止事件的預設行為，例如click - 後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設定window.event.returnValue = false

8、new操作符具體幹了什麼呢?

建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型

屬性和方法被加入到 this 引用的物件中

新建立的物件由 this 所引用，並且最後隱式的返回 this

9、Ajax原理

Ajax的原理簡單來說是在使用者和伺服器之間加了—箇中間層(AJAX引擎)，通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。使使用者操作與伺服器響應非同步化。這其中最關鍵的一步就是從伺服器獲得請求資料

Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

// 1. 建立連線varxhr =null;    xhr =newXMLHttpRequest()// 2. 連線伺服器xhr.open('get', url,true)// 3. 傳送請求xhr.send(null);// 4. 接受請求xhr.onreadystatechange =function(){if(xhr.readyState ==4){if(xhr.status ==200){                success(xhr.responseText);            }else{// failfail && fail(xhr.status);            }        }    }

ajax 有那些優缺點?

優點：

通過非同步模式，提升了使用者體驗.

優化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用.

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

Ajax可以實現動態不重新整理（區域性重新整理）

缺點：

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

對搜尋引擎的支援比較弱。

不容易除錯。

10、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、伺服器上設定代理頁面

11、模組化開發怎麼做？

立即執行函式,不暴露私有成員

varmodule1 = (function(){var_count =0;varm1 =function(){//...};varm2 =function(){//...};return{m1: m1,m2: m2　　　　};　　})();

12、非同步載入JS的方式有哪些？

defer，只支援IE

async：

建立script，插入到DOM中，載入完畢後callBack

13、那些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在

setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏

閉包使用不當

14、XML和JSON的區別？

資料體積方面

JSON相對於XML來講，資料的體積小，傳遞的速度更快些。

資料互動方面

JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動

資料描述方面

JSON對資料的描述性比XML較差

傳輸速度方面

JSON的速度要遠遠快於XML

15、談談你對webpack的看法

WebPack 是一個模組打包工具，你可以使用WebPack管理你的模組依賴，並編繹輸出模組們所需的靜態檔案。它能夠很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各種靜態檔案（圖片、字型等），讓開發過程更加高效。對於不同型別的資源，webpack有對應的模組載入器。webpack模組打包器會分析模組間的依賴關係，最後 生成了優化且合併後的靜態資源

16、說說你對AMD和Commonjs的理解

CommonJS是伺服器端模組的規範，Node.js採用了這個規範。CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式

AMD推薦的風格通過返回一個物件做為模組物件，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的

17、常見web安全及防護原理

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字串，最終達到欺騙伺服器執行惡意的SQL命令

總的來說有以下幾點

永遠不要信任使用者的輸入，要對使用者的輸入進行校驗，可以通過正規表示式，或限制長度，對單引號和雙"-"進行轉換等

永遠不要使用動態拼裝SQL，可以使用引數化的SQL或者直接使用儲存過程進行資料查詢存取

永遠不要使用管理員許可權的資料庫連線，為每個應用使用單獨的許可權有限的資料庫連線

不要把機密資訊明文存放，請加密或者hash掉密碼和敏感的資訊

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裡插入惡意html標籤或者javascript程式碼。比如：攻擊者在論壇中放一個看似安全的連結，騙取使用者點選後，竊取cookie中的使用者私密資訊；或者攻擊者在論壇中加一個惡意表單，當使用者提交表單的時候，卻把資訊傳送到攻擊者的伺服器中，而不是使用者原本以為的信任站點

XSS防範方法

首先程式碼裡對使用者輸入的地方和變數都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字元做過濾；其次任何內容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

XSS是獲取資訊，不需要提前知道其他使用者頁面的程式碼和資料包。CSRF是代替使用者完成指定的動作，需要知道其他使用者頁面的程式碼和資料包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

登入受信任網站A，並在本地生成Cookie

在不登出A的情況下，訪問危險網站B

CSRF的防禦

服務端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數

通過驗證碼的方法

18、用過哪些設計模式？

工廠模式：

工廠模式解決了重複例項化的問題，但還有一個問題,那就是識別問題，因為根本無法

主要好處就是可以消除物件間的耦合，通過使用工程方法而不是new關鍵字

建構函式模式

使用建構函式的方法，即解決了重複例項化的問題，又解決了物件識別的問題，該模式與工廠模式的不同之處在於

直接將屬性和方法賦值給 this物件;

19、為什麼要有同源限制？

同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議

舉例說明：比如一個黑客程式，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，如果有滾動條，也不包含滾動條

scrollWidth/scrollHeight返回值包含content + padding + 溢位內容的尺寸

21、javascript有哪些方法定義物件

物件字面量： var obj = {};

建構函式： var obj = new Object();

Object.create(): var obj = Object.create(Object.prototype);

22、常見相容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8

瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一,，但是全域性效率很低，一般是如下這樣解決：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}

IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性

Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.

22、說說你對promise的瞭解

依照 Promise/A+ 的定義，Promise 有四種狀態：

pending: 初始狀態, 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled與 rejected一起合稱 settled

Promise 物件用來進行延遲(deferred) 和非同步(asynchronous) 計算

Promise 的建構函式

構造一個 Promise，最基本的用法如下：

varpromise =newPromise(function(resolve, reject){if(...) {// succeedresolve(result);        }else{// failsreject(Error(errMessage));        }    });

Promise 例項擁有 then 方法（具有 then 方法的物件，通常被稱為thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個函式作為引數，一個在 fulfilled 的時候被呼叫，一個在rejected的時候被呼叫，接收引數就是 future，onFulfilled 對應resolve, onRejected對應 reject

23、你覺得jQuery原始碼有哪些寫的好的地方

jquery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法

有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度

jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率

24、vue、react、angular

Vue.js

一個用於建立 web 互動介面的庫，是一個精簡的 MVVM。它通過雙向資料繫結把 View層和 Model 層連線了起來。實際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters

AngularJS

是一個比較完善的前端MVVM框架，包含模板，資料雙向繫結，路由，模組化，服務，依賴注入等所有功能，模板功能強大豐富，自帶了豐富的 Angular指令

react

React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，能夠實現伺服器端的渲染。用了virtual dom，所以效能很好。

25、Node的應用場景

特點：

1、它是一個Javascript執行環境

2、依賴於Chrome V8引擎進行程式碼解釋

3、事件驅動

4、非阻塞I/O

5、單程式，單執行緒

優點：

高併發（最重要的優點）

缺點：

1、只支援單核CPU，不能充分利用CPU

2、可靠性低，一旦程式碼某個環節崩潰，整個系統都崩潰

26、談談你對AMD、CMD的理解

CommonJS是伺服器端模組的規範，Node.js採用了這個規範。CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式

AMD推薦的風格通過返回一個物件做為模組物件，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的

27、那些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在

setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏

閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

28、web開發中會話跟蹤的方法有哪些

cookie

session

url重寫

隱藏input

ip地址

29、介紹js的基本資料型別

Undefined、Null、Boolean、Number、String

30、介紹js有哪些內建物件？

Object 是 JavaScript 中所有物件的父物件

資料封裝類物件：Object、Array、Boolean、Number 和 String

其他物件：Function、Arguments、Math、Date、RegExp、Error

31、說幾條寫JavaScript的基本規範？

不要在同一行宣告多個變數

請使用===/!==來比較true/false或者數值

使用物件字面量替代new Array這種形式

不要使用全域性函式

Switch語句必須帶有default分支

If語句必須使用大括號

for-in迴圈中的變數 應該使用var關鍵字明確限定作用域，從而避免作用域汙

32、JavaScript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

棧：原始資料型別（Undefined，Null，Boolean，Number、String）

堆：引用資料型別（物件、陣列和函式）

兩種型別的區別是：儲存位置不同；

原始資料型別直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料，所以放入棧中儲存；

引用資料型別儲存在堆(heap)中的物件,佔據空間大、大小不固定,如果儲存在棧中，將會影響程式執行的效能；引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。當直譯器尋找引用值時，會首先檢索其

在棧中的地址，取得地址後從堆中獲得實體

image

33、javascript建立物件的幾種方式？

javascript建立物件簡單的說,無非就是使用內建物件或各種自定義物件，當然還可以用JSON；但寫法有很多種，也能混合使用

物件字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function來模擬無參的建構函式

functionPerson(){}varperson=newPerson();//定義一個function，如果使用new"例項化",該function可以看作是一個Classperson.name="Mark";        person.age="25";        person.work=function(){        alert(person.name+" hello...");    }person.work();

用function來模擬參建構函式來實現（用this關鍵字定義構造的上下文屬性）

functionPet(name,age,hobby){this.name=name;//this作用域：當前物件this.age=age;this.hobby=hobby;this.eat=function(){          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程式設計師");      }    }varmaidou =newPet("麥兜",25,"coding");//例項化、建立物件maidou.eat();//呼叫eat方法

用工廠方式來建立（內建物件）

varwcDog =newObject();    wcDog.name="旺財";    wcDog.age=3;    wcDog.work=function(){      alert("我是"+wcDog.name+",汪汪汪......");    }    wcDog.work();

用原型方式來建立

functionDog(){    }    Dog.prototype.name="旺財";    Dog.prototype.eat=function(){    alert(this.name+"是個吃貨");    }varwangcai =newDog();    wangcai.eat();

用混合方式來建立

functionCar(name,price){this.name=name;this.price=price;    }    Car.prototype.sell=function(){      alert("我是"+this.name+"，我現在賣"+this.price+"萬元");      }varcamry =newCar("凱美瑞",27);    camry.sell();

34、eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並執行

應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）

由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')')

35、null，undefined 的區別？

undefined 表示不存在這個值。

undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined

例如變數被宣告瞭，但沒有賦值時，就等於undefined

null 表示一個物件被定義了，值為“空值”

null : 是一個物件(空物件, 沒有任何屬性和方法)

例如作為函式的引數，表示該函式的引數不是物件；

在驗證null時，一定要使用=== ，因為 ==無法分別null 和undefined

36、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN]因為 parseInt 需要兩個引數 (val, radix)，其中radix 表示解析時用的基數。

map傳了 3個(element, index, array)，對應的 radix 不合法導致解析失敗。

37、javascript 程式碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

use strict是一種ECMAscript 5 新增的（嚴格）執行模式,這種模式使得 Javascript 在更嚴格的條件下執行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為

38、JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式

它是基於JavaScript的一個子集。資料格式簡單, 易於讀寫, 佔用頻寬小

JSON字串轉換為JSON物件:

varobj =eval('('+ str +')');varobj = str.parseJSON();varobj =JSON.parse(str);

JSON物件轉換為JSON字串：

varlast=obj.toJSONString();varlast=JSON.stringify(obj);

39、js延遲載入的方式有哪些？

defer和async、動態建立DOM方式（用得最多）、按需非同步載入js

40、同步和非同步的區別?

同步：瀏覽器訪問伺服器請求，使用者看得到頁面重新整理，重新發請求,等請求完，頁面重新整理，新內容出現，使用者看到新內容,進行下一步操作

非同步：瀏覽器訪問伺服器請求，使用者正常操作，瀏覽器後端進行請求。等請求完，頁面不重新整理，新內容也會出現，使用者看到新內容

41、漸進增強和優雅降級

漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 ：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容

42、defer和async

defer並行載入js檔案，會按照頁面上script標籤的順序執行

async並行載入js檔案，下載完成立即執行，不會按照頁面上script標籤的順序執行

43、說說嚴格模式的限制

變數必須宣告後再使用

函式的引數不能有同名屬性，否則報錯

不能使用with語句

禁止this指向全域性物件

44、attribute和property的區別是什麼？

attribute是dom元素在文件中作為html標籤擁有的屬性；

property就是dom元素在js中作為物件擁有的屬性。

對於html的標準屬性來說，attribute和property是同步的，是會自動更新的

但是對於自定義的屬性來說，他們是不同步的

45、談談你對ES6的理解

新增模板字串（為JavaScript提供了簡單的字串插值功能）

箭頭函式

for-of（用來遍歷資料—例如陣列中的值。）

arguments物件可被不定引數和預設引數完美代替。

ES6將promise物件納入規範，提供了原生的Promise物件。

增加了let和const命令，用來宣告變數。

增加了塊級作用域。

let命令實際上就增加了塊級作用域。

還有就是引入module模組的概念

46、ECMAScript6 怎麼寫class麼，為什麼會出現class這種東西?

這個語法糖可以讓有OOP基礎的人更快上手js，至少是一個官方的實現了

但對熟悉js的人來說，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多

47、什麼是物件導向程式設計及程式導向程式設計，它們的異同和優缺點

程式導向就是分析出解決問題所需要的步驟，然後用函式把這些步驟一步一步實現，使用的時候一個一個依次呼叫就可以了

物件導向是把構成問題事務分解成各個物件，建立物件的目的不是為了完成一個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為

物件導向是以功能來劃分問題，而不是步驟

48、物件導向程式設計思想

基本思想是使用物件，類，繼承，封裝等基本概念來進行程式設計

優點

易維護

採用物件導向思想設計的結構，可讀性高，由於繼承的存在，即使改變需求，那麼維護也只是在區域性模組，所以維護起來是非常方便和較低成本的

易擴充套件

開發工作的重用性、繼承性高，降低重複工作量。

縮短了開發週期

49、對web標準、可用性、可訪問性的理解

可用性（Usability）：產品是否容易上手，使用者能否完成任務，效率如何，以及這過程中使用者的主觀感受可好，是從使用者的角度來看產品的質量。可用性好意味著產品質量高，是企業的核心競爭力

可訪問性（Accessibility）：Web內容對於殘障使用者的可閱讀和可理解性

可維護性（Maintainability）：一般包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是程式碼是否容易被人理解，是否容易修改和增強功能。

50、如何通過JS判斷一個陣列？

instanceof方法

instanceof 運算子是用來測試一個物件是否在其原型鏈原型建構函式的屬性

vararr = []; arrinstanceofArray;// true

constructor方法

constructor屬性返回對建立此物件的陣列函式的引用，就是返回物件相對應的建構函式

vararr = []; arr.constructor ==Array;//true

最簡單的方法

這種寫法，是 jQuery 正在使用的

Object.prototype.toString.call(value) =='[object Array]'// 利用這個方法，可以寫一個返回資料型別的方法varisType =function(obj){returnObject.prototype.toString.call(obj).slice(8,-1); }

ES5新增方法isArray()

vara =newArray(123);varb =newDate();console.log(Array.isArray(a));//trueconsole.log(Array.isArray(b));//false

51、談一談let與var的區別？

let命令不存在變數提升，如果在let前使用，會導致報錯

如果塊區中存在let和const命令，就會形成封閉作用域

不允許重複宣告，因此，不能在函式內部重新宣告引數

52、map與forEach的區別？

forEach方法，是最基本的方法，就是遍歷與迴圈，預設有3個傳參：分別是遍歷的陣列內容item、陣列索引index、和當前遍歷陣列Array

map方法，基本用法與forEach一致，但是不同的，它會返回一個新的陣列，所以在callback需要有return值，如果沒有，會返回undefined

53、談一談你理解的函數語言程式設計？

簡單說，"函數語言程式設計"是一種"程式設計正規化"（programming paradigm），也就是如何編寫程式的方法論

它具有以下特性：閉包和高階函式、惰性計算、遞迴、函式是"第一等公民"、只用"表示式"

54、談一談箭頭函式與普通函式的區別？

函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件

不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤

不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用Rest引數代替

不可以使用yield命令，因此箭頭函式不能用作Generator函式

55、談一談函式中this的指向吧？

this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件

《javascript語言精髓》中大概概括了4種呼叫方式：

方法呼叫模式

函式呼叫模式

構造器呼叫模式

graph LR

A-->B

apply/call呼叫模式

56、非同步程式設計的實現方式？

回撥函式

優點：簡單、容易理解

缺點：不利於維護，程式碼耦合高

事件監聽(採用時間驅動模式，取決於某個事件是否發生)：

優點：容易理解，可以繫結多個事件，每個事件可以指定多個回撥函式

缺點：事件驅動型，流程不夠清晰

釋出/訂閱(觀察者模式)

類似於事件監聽，但是可以通過‘訊息中心’，瞭解現在有多少釋出者，多少訂閱者

Promise物件

優點：可以利用then方法，進行鏈式寫法；可以書寫錯誤時的回撥函式；

缺點：編寫和理解，相對比較難

Generator函式

優點：函式體內外的資料交換、錯誤處理機制

缺點：流程管理不方便

async函式

優點：內建執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。

缺點：錯誤處理機制

57、對原生Javascript瞭解程度

資料型別、運算、物件、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、記憶體洩漏、跨域、非同步裝載、模板引擎、前端MVC、路由、模組化、Canvas、ECMAScript

58、Js動畫與CSS動畫區別及相應實現

CSS3的動畫的優點

在效能上會稍微好一些，瀏覽器會對CSS3的動畫做一些優化

程式碼相對簡單

缺點

在動畫控制上不夠靈活

相容性不好

JavaScript的動畫正好彌補了這兩個缺點，控制能力很強，可以單幀的控制、變換，同時寫得好完全可以相容IE6，並且功能強大。對於一些複雜控制的動畫，使用javascript會比較靠譜。而在實現一些小的互動動效的時候，就多考慮考慮CSS吧

59、JS 陣列和物件的遍歷方式，以及幾種方式的比較

通常我們會用迴圈的方式來遍歷陣列。但是迴圈是 導致js 效能問題的原因之一。一般我們會採用下幾種方式來進行陣列的遍歷

for in迴圈

for迴圈

forEach

這裡的 forEach回撥中兩個引數分別為 value，index

forEach 無法遍歷物件

IE不支援該方法；Firefox 和 chrome 支援

forEach 無法使用 break，continue 跳出迴圈，且使用 return 是跳過本次迴圈

這兩種方法應該非常常見且使用很頻繁。但實際上，這兩種方法都存在效能問題

在方式一中，for-in需要分析出array的每個屬性，這個操作效能開銷很大。用在 key 已知的陣列上是非常不划算的。所以儘量不要用for-in，除非你不清楚要處理哪些屬性，例如 JSON物件這樣的情況

在方式2中，迴圈每進行一次，就要檢查一下陣列長度。讀取屬性（陣列長度）要比讀區域性變數慢，尤其是當 array 裡存放的都是 DOM 元素，因為每次讀取都會掃描一遍頁面上的選擇器相關元素，速度會大大降低

60、gulp是什麼？

gulp是前端開發過程中一種基於流的程式碼構建工具，是自動化專案的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成

Gulp的核心概念：流

流，簡單來說就是建立在物件導向基礎上的一種抽象的處理資料的工具。在流中，定義了一些處理資料的基本操作，如讀取資料，寫入資料等，程式設計師是對流進行所有操作的，而不用關心流的另一頭資料的真正流向

gulp正是通過流和程式碼優於配置的策略來儘量簡化任務編寫的工作

Gulp的特點：

易於使用：通過程式碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理

構建快速利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作

易於學習通過最少的 API，掌握 gulp 毫不費力，構建工作盡在掌握：如同一系列流管道

61、說一下Vue的雙向繫結資料的原理

vue.js 則是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥

$jQuery

1、你覺得jQuery或zepto原始碼有哪些寫的好的地方

jquery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈

(function( window, undefined ){//用一個函式域包起來，就是所謂的沙箱//在這裡邊var定義的變數，屬於這個函式域內的區域性變數，避免汙染全域性//把當前沙箱需要的外部變數通過函式引數引入進來//只要保證引數對內提供的介面的一致性，你還可以隨意替換傳進來的這個引數window.jQuery =window.$ = jQuery;    })(window);

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法

有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度

jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率

2、jQuery 的實現原理？

(function(window, undefined) {})(window);

jQuery 利用 JS 函式作用域的特性，採用立即呼叫表示式包裹了自身，解決名稱空間和變數汙染問題

window.jQuery = window.$ = jQuery;

在閉包當中將 jQuery 和 

 暴露為全域性變數

3、jQuery.fn 的 init 方法返回的 this 指的是什麼物件？ 為什麼要返回 this？

jQuery.fn 的 init 方法 返回的 this 就是 jQuery 物件

使用者使用 jQuery() 或 $() 即可初始化 jQuery 物件，不需要動態的去呼叫 init 方法

4、jQuery.extend 與 jQuery.fn.extend 的區別？

$.fn.extend() 和 $.extend() 是 jQuery 為擴充套件外掛提拱了兩個方法

$.extend(object); // 為jQuery新增“靜態方法”（工具方法）

$.extend({min:function(a, b){returna < b ? a : b; },max:function(a, b){returna > b ? a : b; }});$.min(2,3);//  2$.max(4,5);//  5

$.extend([true,] targetObject, object1[, object2]); // 對targt物件進行擴充套件

varsettings = {validate:false,limit:5};varoptions = {validate:true,name:"bar"};$.extend(settings, options);// 注意：不支援第一個引數傳 false// settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // 為jQuery新增“成員函式”（例項方法）

$.fn.extend({alertValue:function(){      $(this).click(function(){        alert($(this).val());      });  }});$("#email").alertValue();

5、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

淺拷貝（只複製一份原始物件的引用）

var newObject = $.extend({}, oldObject);

深拷貝（對原始物件屬性所引用的物件進行進行遞迴拷貝）

var newObject = $.extend(true, {}, oldObject);

6、jQuery 的佇列是如何實現的？佇列可以用在哪些地方？

jQuery 核心中有一組佇列控制方法，由 queue()/dequeue()/clearQueue() 三個方法組成。

主要應用於 animate()，ajax，其他要按時間順序執行的事件中

varfunc1 =function(){alert('事件1');}varfunc2 =function(){alert('事件2');}varfunc3 =function(){alert('事件3');}varfunc4 =function(){alert('事件4');}// 入棧佇列事件$('#box').queue("queue1", func1);// push func1 to queue1$('#box').queue("queue1", func2);// push func2 to queue1// 替換佇列事件$('#box').queue("queue1", []);// delete queue1 with empty array$('#box').queue("queue1", [func3, func4]);// replace queue1// 獲取佇列事件（返回一個函式陣列）$('#box').queue("queue1");// [func3(), func4()]// 出棧佇列事件並執行$('#box').dequeue("queue1");// return func3 and do func3$('#box').dequeue("queue1");// return func4 and do func4// 清空整個佇列$('#box').clearQueue("queue1");// delete queue1 with clearQueue

7、jQuery 中的 bind(), live(), delegate(), on()的區別？

bind 直接繫結在目標元素上

live 通過冒泡傳播事件，預設document上，支援動態資料

delegate 更精確的小範圍使用事件代理，效能優於 live

on 是最新的1.9版本整合了之前的三種方式的新事件繫結機制

8、是否知道自定義事件？ jQuery 裡的 fire 函式是什麼意思，什麼時候用？

事件即“釋出/訂閱”模式，自定義事件即“訊息釋出”，事件的監聽即“訂閱訂閱”

JS 原生支援自定義事件，示例：

document.createEvent(type);// 建立事件event.initEvent(eventType, canBubble, prevent);// 初始化事件target.addEventListener('dataavailable', handler,false);// 監聽事件target.dispatchEvent(e);// 觸發事件

jQuery 裡的 fire 函式用於呼叫 jQuery 自定義事件列表中的事件

9、jQuery 通過哪個方法和 Sizzle 選擇器結合的？

Sizzle 選擇器採取 Right To Left 的匹配模式，先搜尋所有匹配標籤，再判斷它的父節點

jQuery 通過 $(selecter).find(selecter); 和 Sizzle 選擇器結合

10、jQuery 中如何將陣列轉化為 JSON 字串，然後再轉化回來？

// 通過原生 JSON.stringify/JSON.parse 擴充套件 jQuery 實現$.array2json =function(array){returnJSON.stringify(array); } $.json2array =function(array){// $.parseJSON(array); // 3.0 開始，已過時returnJSON.parse(array); }// 呼叫varjson = $.array2json(['a','b','c']);vararray = $.json2array(json);

11、jQuery 一個物件可以同時繫結多個事件，這是如何實現的？

$("#btn").on("mouseover mouseout", func);  $("#btn").on({mouseover: func1,mouseout: func2,click: func3  });

12、針對 jQuery 的優化方法？

快取頻繁操作DOM物件

儘量使用id選擇器代替class選擇器

總是從#id選擇器來繼承

儘量使用鏈式操作

使用時間委託 on繫結事件

採用jQuery的內部函式data()來儲存資料

使用最新版本的 jQuery

13、jQuery 的 slideUp 動畫，當滑鼠快速連續觸發, 動畫會滯後反覆執行，該如何處理呢?

在觸發元素上的事件設定為延遲處理：使用 JS 原生 setTimeout 方法

在觸發元素的事件時預先停止所有的動畫，再執行相應的動畫事件：$('.tab').stop().slideUp();

14、jQuery UI 如何自定義元件？

通過向 $.widget() 傳遞元件名稱和一個原型物件來完成

$.widget("ns.widgetName", [baseWidget], widgetPrototype);

15、jQuery 與 jQuery UI、jQuery Mobile 區別？

jQuery 是 JS 庫，相容各種PC瀏覽器，主要用作更方便地處理 DOM、事件、動畫、AJAX

jQuery UI 是建立在 jQuery 庫上的一組使用者介面互動、特效、小部件及主題

jQuery Mobile 以 jQuery 為基礎，用於建立“移動Web應用”的框架

16、jQuery 和 Zepto 的區別？ 各自的使用場景？

jQuery 主要目標是PC的網頁中，相容全部主流瀏覽器。在移動裝置方面，單獨推出 `jQuery Mobile

Zepto從一開始就定位移動裝置，相對更輕量級。它的API 基本相容jQuery`，但對PC瀏覽器相容不理想

17、jQuery物件的特點

只有 JQuery物件才能使用 JQuery 方法

JQuery 物件是一個陣列物件

$程式設計題

1、寫一個通用的事件偵聽器函式

// event(事件)工具集，來源：github.com/markyunmarkyun.Event = {// 視能力分別使用dom0||dom2||IE方式 來繫結事件// 引數： 操作的元素,事件名稱 ,事件處理程式addEvent :function(element, type, handler){if(element.addEventListener) {//事件型別、需要執行的函式、是否捕捉element.addEventListener(type, handler,false);            }elseif(element.attachEvent) {                element.attachEvent('on'+ type,function(){                    handler.call(element);                });            }else{                element['on'+ type] = handler;            }        },// 移除事件removeEvent :function(element, type, handler){if(element.removeEventListener) {                element.removeEventListener(type, handler,false);            }elseif(element.datachEvent) {                element.detachEvent('on'+ type, handler);            }else{                element['on'+ type] =null;            }        },// 阻止事件 (主要是事件冒泡，因為IE不支援事件捕獲)stopPropagation :function(ev){if(ev.stopPropagation) {                ev.stopPropagation();            }else{                ev.cancelBubble =true;            }        },// 取消事件的預設行為preventDefault :function(event){if(event.preventDefault) {                event.preventDefault();            }else{                event.returnValue =false;            }        },// 獲取事件目標getTarget :function(event){returnevent.target || event.srcElement;        }

2、如何判斷一個物件是否為陣列

functionisArray(arg){if(typeofarg ==='object') {returnObject.prototype.toString.call(arg) ==='[object Array]';    }returnfalse;}

3、氣泡排序

每次比較相鄰的兩個數，如果後一個比前一個小，換位置

vararr = [3,1,4,6,5,7,2];functionbubbleSort(arr){for(vari =0; i < arr.length -1; i++) {for(varj =0; j < arr.length -1; j++) {if(arr[j +1] < arr[j]) {vartemp;            temp = arr[j];            arr[j] = arr[j +1];            arr[j +1] = temp;        }    }}returnarr;}console.log(bubbleSort(arr));

4、快速排序

採用二分法，取出中間數，陣列每次和中間數比較，小的放到左邊，大的放到右邊

vararr = [3,1,4,6,5,7,2];functionquickSort(arr){if(arr.length ==0) {return[];// 返回空陣列}varcIndex =Math.floor(arr.length /2);varc = arr.splice(cIndex,1);varl = [];varr = [];for(vari =0; i < arr.length; i++) {if(arr[i] < c) {            l.push(arr[i]);        }else{            r.push(arr[i]);        }    }returnquickSort(l).concat(c, quickSort(r));}console.log(quickSort(arr));

5、編寫一個方法 求一個字串的位元組長度

假設：一個英文字元佔用一個位元組，一箇中文字元佔用兩個位元組

functionGetBytes(str){varlen = str.length;varbytes = len;for(vari=0; i255) bytes++;        }returnbytes;    }alert(GetBytes("你好,as"));

6、bind的用法，以及如何實現bind的函式和需要注意的點

bind的作用與call和apply相同，區別是call和apply是立即呼叫函式，而bind是返回了一個函式，需要呼叫的時候再執行。

一個簡單的bind函式實現如下

Function.prototype.bind =function(ctx){varfn =this;returnfunction(){        fn.apply(ctx,arguments);    };};

$其他

1、談談你對重構的理解

網站重構：在不改變外部行為的前提下，簡化結構、新增可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化， 在擴充套件的同時保持一致的UI

對於傳統的網站來說重構通常是：

表格(table)佈局改為DIV+CSS

使網站前端相容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

對於移動平臺的優化

針對於SEO進行優化

2、什麼樣的前端程式碼是好的

高複用低耦合，這樣檔案小，好維護，而且好擴充套件。

3、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近

實現介面互動

提升使用者體驗

有了Node.js，前端可以實現服務端的一些事情

前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

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

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

4、你覺得前端工程的價值體現在哪

為簡化使用者使用提供技術支援（互動部分）

為多個瀏覽器相容性提供支援

為提高使用者瀏覽速度（瀏覽器效能）提供支援

為跨平臺或者其他基於webkit或其他渲染引擎的應用提供支援

為展示資料提供支援（資料介面）

5、平時如何管理你的專案？

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

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

標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；

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

CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；

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

圖片採用整合的 images.png png8 格式檔案使用 - 儘量整合在一起使用方便將來的管理

人事面

面試完你還有什麼問題要問的嗎

你有什麼愛好?

你最大的優點和缺點是什麼?

你為什麼會選擇這個行業，職位?

你覺得你適合從事這個崗位嗎?

你有什麼職業規劃?

你對工資有什麼要求?

如何看待前端開發？

未來三到五年的規劃是怎樣的？

常問

自我介紹

你的專案中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？

你認為哪個專案做得最好？

最近在看哪些前端方面的書？

平時是如何學習前端開發的？

你最有成就感的一件事

你是怎麼學習前端的