四、HTML5 CSS3

五、移動web開發

1、移動端常用類庫及優缺點

知識面寬度，多多益善

2、Zepto庫和JQ區別

Zepto相對jQuery更加輕量，主要用在移動端，jQuery也有對應的jQuerymobile移動端框架d

六、Ajax

1、Ajax 是什麼? 如何建立一個Ajax？

Ajax並不算是一種新的技術，全稱是asynchronousjavascript and xml，可以說是已有技術的組合，主要用來實現客戶端與伺服器端的非同步通訊效果，實現頁面的區域性重新整理，早期的瀏覽器並不能原生支援ajax，可以使用隱藏幀（iframe）方式變相實現非同步效果，後來的瀏覽器提供了對ajax的原生支援

使用ajax原生方式傳送請求主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)物件實現非同步通訊效果

基本步驟：

var xhr =null;//建立物件

if(window.XMLHttpRequest){

       xhr= new XMLHttpRequest();

}else{

       xhr= new ActiveXObject("Microsoft.XMLHTTP");

}

    xhr.open(“方式”,”地址”,”標誌位”);//初始化請求

    xhr.setRequestHeader(“”,””);//設定http頭資訊

    xhr.onreadystatechange =function(){}//指定回撥函式

    xhr.send();//傳送請求

js框架（jQuery/EXTJS等）提供的ajax  API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會得心應手，好多都是換湯不換藥的內容

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

同步：阻塞的

-張三叫李四去吃飯，李四一直忙得不停，張三一直等著，直到李四忙完兩個人一塊去吃飯

=瀏覽器向伺服器請求資料，伺服器比較忙，瀏覽器一直等著（頁面白屏），直到伺服器返回資料，瀏覽器才能顯示頁面

非同步：非阻塞的

-張三叫李四去吃飯，李四在忙，張三說了一聲然後自己就去吃飯了，李四忙完後自己去吃

=瀏覽器向伺服器請求資料，伺服器比較忙，瀏覽器可以自如的幹原來的事情（顯示頁面），伺服器返回資料的時候通知瀏覽器一聲，瀏覽器把返回的資料再渲染到頁面，區域性更新

3、如何解決跨域問題?

理解跨域的概念：協議、域名、埠都相同才同域，否則都是跨域

出於安全考慮，伺服器不允許ajax跨域獲取資料，但是可以跨域獲取檔案內容，所以基於這一點，可以動態建立script標籤，使用標籤的src屬性訪問js檔案的形式獲取js指令碼，並且這個js指令碼中的內容是函式呼叫，該函式呼叫的引數是伺服器返回的資料，為了獲取這裡的引數資料，需要事先在頁面中定義回撥函式，在回撥函式中處理伺服器返回的資料，這就是解決跨域問題的主流解決方案

4、頁面編碼和被請求的資源編碼如果不一致如何處理？

對於ajax請求傳遞的引數，如果是get請求方式，引數如果傳遞中文，在有些瀏覽器會亂碼，不同的瀏覽器對引數編碼的處理方式不同，所以對於get請求的引數需要使用 encodeURIComponent函式對引數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不需要進行編碼

5、簡述ajax 的過程。

1. 建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊

3. 設定響應HTTP請求狀態變化的函式

4. 傳送HTTP請求

5. 獲取非同步呼叫返回的資料

6. 使用JavaScript和DOM實現區域性重新整理

6、闡述一下非同步載入。

1. 非同步載入的方案： 動態插入 script標籤

2. 通過 ajax 去獲取 js 程式碼，然後通過 eval 執行

3. script 標籤上新增defer 或者 async 屬性

4. 建立並插入 iframe，讓它非同步執行 js

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

同源策略是客戶端指令碼（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文件或指令碼從多個不同源裝載。所謂同源指的是：協議，域名，埠相同，同源策略是一種安全協議，指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

8、GET和POST的區別，何時使用POST？

GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元，有的瀏覽器是8000個字元

POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制

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

1. 無法使用快取檔案（更新伺服器上的檔案或資料庫）

2. 向伺服器傳送大量資料（POST 沒有資料量限制）

3. 傳送包含未知字元的使用者輸入時，POST比 GET 更穩定也更可靠

9、ajax 是什麼?ajax 的互動模型?同步和非同步的區別?如何解決跨域問題?

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

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

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

10、 Ajax的最大的特點是什麼。

   Ajax可以實現非同步通訊效果，實現頁面區域性重新整理，帶來更好的使用者體驗；按需獲取資料，節約頻寬資源；

11、ajax的缺點

 1、ajax不支援瀏覽器back按鈕。

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

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

 4、破壞了程式的異常機制。

13、解釋jsonp的原理，以及為什麼不是真正的ajax

Jsonp並不是一種資料格式，而json是一種資料格式，jsonp是用來解決跨域獲取資料的一種解決方案，具體是通過動態建立script標籤，然後通過標籤的src屬性獲取js檔案中的js指令碼，該指令碼的內容是一個函式呼叫，引數就是伺服器返回的資料，為了處理這些返回的資料，需要事先在頁面定義好回撥函式，本質上使用的並不是ajax技術

14、什麼是Ajax和JSON，它們的優缺點。

Ajax是全稱是asynchronousJavaScript andXML，即非同步JavaScript和xml，用於在Web頁面中實現非同步資料互動，實現頁面區域性重新整理。

優點：可以使得頁面不過載全部內容的情況下載入區域性內容，降低資料傳輸量，避免使用者不斷重新整理或者跳轉頁面，提高使用者體驗

缺點：對搜尋引擎不友好；要實現ajax下的前後退功能成本較大；可能造成請求數的增加跨域問題限制；

JSON是一種輕量級的資料交換格式，ECMA的一個子集

優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支援複合資料型別（陣列、物件、字串、數字）

15、http常見的狀態碼有那些？分別代表是什麼意思？

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部伺服器錯誤

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

分為4個步驟：

1. 當傳送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠端 DNS 伺服器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。

2. 瀏覽器與遠端 Web 伺服器通過 TCP 三次握手協商來建立一個 TCP/IP 連線。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊，而後伺服器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

3. 一旦 TCP/IP 連線建立，瀏覽器會通過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 響應返回該資源，值為 200 的 HTTP 響應狀態表示一個正確的響應。

4. 此時，Web 伺服器提供資源服務，客戶端開始下載資源。

17、ajax請求的時候get 和post方式的區別

get一般用來進行查詢操作，url地址有長度限制，請求的引數都暴露在url地址當中，如果傳遞中文引數，需要自己進行編碼操作，安全性較低。

post請求方式主要用來提交資料，沒有資料長度的限制，提交的資料內容存在於http請求體中，資料不會暴漏在url地址中。

18、ajax請求時，如何解釋json資料

使用eval() 或者JSON.parse() 鑑於安全性考慮，推薦使用JSON.parse()更靠譜，對資料的安全性更好。

19、.javascript的本地物件，內建物件和宿主物件

本地物件為獨立於宿主環境的ECMAScript提供的物件，包括Array Object RegExp等可以new例項化的物件

內建物件為Gload，Math 等不可以例項化的(他們也是本地物件，內建物件是本地物件的一個子集)

宿主物件為所有的非本地物件，所有的BOM和DOM物件都是宿主物件，如瀏覽器自帶的document,window 等物件

21、請說出三種減低頁面載入時間的方法

1、壓縮css、js檔案
2、合併js、css檔案，減少http請求
3、外部js、css檔案放在最底下
4、減少dom操作，儘可能用變數替代不必要的dom操作

22、HTTP狀態碼都有那些。

200 OK     //客戶端請求成功

400 Bad Request  //客戶端請求有語法錯誤，不能被伺服器所理解

403 Forbidden  //伺服器收到請求，但是拒絕提供服務

404 Not Found  //請求資源不存在，輸入了錯誤的URL

500 Internal Server Error //伺服器發生不可預期的錯誤

503 Server Unavailable  //伺服器當前不能處理客戶端的請求，一段時間後可能恢復正常

七、JS高階

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

jQuery可以給一個物件同時繫結多個事件，低層實現方式是使用addEventListner或attachEvent相容不同的瀏覽器實現事件的繫結，這樣可以給同一個物件註冊多個事件。

2、 知道什麼是webkit麼? 知道怎麼用瀏覽器的各種工具來除錯和debug程式碼麼?

Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流核心，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。

對於瀏覽器的除錯工具要熟練使用，主要是頁面結構分析，後臺請求資訊檢視，js除錯工具使用，熟練使用這些工具可以快速提高解決問題的效率

24、 Javascript作用域鏈?

理解變數和函式的訪問範圍和生命週期，全域性作用域與區域性作用域的區別，JavaScript中沒有塊作用域，函式的巢狀形成不同層次的作用域，巢狀的層次形成鏈式形式，通過作用域鏈查詢屬性的規則需要深入理解。

25、 談談this物件的理解。

理解不同形式的函式呼叫方式下的this指向，理解事件函式、定時函式中的this指向，函式的呼叫形式決定了this的指向。

26、 eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並執行；應該避免使用eval，不安全，非常耗效能（2個步驟，一次解析成js語句，一次執行）

27、 關於事件，IE與火狐的事件機制有什麼區別？如何阻止冒泡？

[1].在IE中,事件物件是作為一個全域性變數來儲存和維護的.所有的瀏覽器事件,不管是使用者觸發的，還是其他事件,都會更新window.event物件.所以在程式碼中，只要呼叫window.event就可以獲取事件物件， 再event.srcElement就可以取得觸發事件的元素進行進一步處理.

[2].在FireFox中，事件物件卻不是全域性物件，一般情況下，是現場發生，現場使用，FireFox把事件物件自動傳給事件處理程式.

關於事件的相容性處理要熟練掌握，事件物件具體哪些屬性存在相容性問題，IE與標準事件模型事件冒泡與事件捕獲的支援要理解

28、 什麼是閉包（closure），為什麼要用它？

簡單的理解是函式的巢狀形成閉包，閉包包括函式本身已經它的外部作用域

使用閉包可以形成獨立的空間，延長變數的生命週期，報存中間狀態值

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

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

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

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

33、Javascript中，有一個函式，執行時物件查詢時，永遠不會去查詢原型，這個函式是？

HasOwnProperty

34、對JSON的瞭解？

輕量級資料互動格式，可以形成複雜的巢狀格式，解析非常方便

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

方案一：<script>標籤的async="async"屬性（詳細參見：script標籤的async屬性）

方案二：<script>標籤的defer="defer"屬性

方案三：動態建立<script>標籤

方案四：AJAX eval（使用AJAX得到指令碼內容，然後通過eval_r(xmlhttp.responseText)來執行指令碼）

方案五：iframe方式

36、模組化開發怎麼做？

理解模組化開發模式：瀏覽器端requirejs，seajs；伺服器端nodejs；ES6模組化；fis、webpack等前端整體模組化解決方案；grunt、gulp等前端工作流的使用

37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

理解這兩種規範的差異，主要通過requirejs與seajs的對比，理解模組的定義與引用方式

的差異以及這兩種規範的設計原則

1、對於依賴的模組，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.

2、CMD 推崇依賴就近，AMD 推崇依賴前置。

3. AMD 的 API 預設是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。比如 AMD 裡，require 分全域性require 和區域性 require，都叫 require。CMD 裡，沒有全域性 require，而是根據模組系統的完備性，提供 seajs.use 來實現模組系統的載入啟動。CMD 裡，每個 API 都簡單純粹。

38、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 快取的？）

核心是js的載入模組，通過正則匹配模組以及模組的依賴關係，保證檔案載入的先後順序，根據檔案的路徑對載入過的檔案做了快取

39、讓你自己設計實現一個requireJS，你會怎麼做？

核心是實現js的載入模組，維護js的依賴關係，控制好檔案載入的先後順序

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

方案一：<script>標籤的async="async"屬性（詳細參見：script標籤的async屬性）

方案二：<script>標籤的defer="defer"屬性

方案三：動態建立<script>標籤

方案四：AJAX eval（使用AJAX得到指令碼內容，然後通過eval_r(xmlhttp.responseText)來執行指令碼）

方案五：iframe方式

43、documen.write和 innerHTML的區別?

document.write是重寫整個document,寫入內容是字串的html

innerHTML是HTMLElement的屬性，是一個元素的內部html內容

45、call() 和 apply() 的含義和區別？

apply的引數是陣列形式，call的引數是單個的值，除此之外在使用上沒有差別，重點理解這兩個函式呼叫的this改變

46、陣列和物件有哪些原生方法，列舉一下？

Array.concat( ) 連線陣列

Array.join() 將陣列元素連線起來以構建一個字串

Array.length陣列的大小

Array.pop() 刪除並返回陣列的最後一個元素

Array.push() 給陣列新增元素

Array.reverse() 顛倒陣列中元素的順序

Array.shift() 將元素移出陣列

Array.slice() 返回陣列的一部分

Array.sort() 對陣列元素進行排序

Array.splice() 插入、刪除或替換陣列的元素

Array.toLocaleString() 把陣列轉換成區域性字串

Array.toString() 將陣列轉換成一個字串

Array.unshift() 在陣列頭部插入一個元素

Object物件的常用方法

Object.hasOwnProperty( ) 檢查屬性是否被繼承

Object.isPrototypeOf() 一個物件是否是另一個物件的原型

Object.propertyIsEnumerable() 是否可以通過for/in迴圈看到屬性

Object.toLocaleString() 返回物件的本地字串表示

Object.toString() 定義一個物件的字串表示

Object.valueOf() 指定物件的原始值

49、如何編寫高效能的Javascript？

使用 DocumentFragment 優化多次 append

通過模板元素 clone ，替代createElement

使用一次 innerHTML 賦值代替構建 dom 元素

使用 firstChild 和nextSibling 代替 childNodes 遍歷dom 元素

使用 Array 做為StringBuffer ，代替字串拼接的操作

將迴圈控制量儲存到區域性變數

順序無關的遍歷時，用 while 替代for

將條件分支，按可能性順序從高到低排列

在同一條件子的多（ >2 ）條件分支時，使用 switch 優於 if

使用三目運算子替代條件分支

需要不斷執行的時候，優先考慮使用 setInterval

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

閉包，死迴圈

5. 寄生式繼承

6. 寄生組合式繼承

53、eval是做什麼的？

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

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

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

1. 原型物件也是普通的物件，是物件一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為null 的話，我們就稱之為原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈

55、事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為

2. 事件處理機制：IE是事件冒泡、firefox同時支援兩種事件模型，也就是：捕獲型事件和冒泡型事件

3. ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble= true;

56、簡述一下Sass、Less，且說明區別？

他們是動態的樣式語言，是CSS前處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。

變數符不一樣，less是@，而Sass是$;

Sass支援條件語句，可以使用if{}else{},for{}迴圈等等。而Less不支援;

Sass是基於Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less程式碼輸出Css到瀏覽器

57、關於javascript中apply()和call()方法的區別？

相同點:兩個方法產生的作用是完全一樣的

不同點:方法傳遞的引數不同

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

apply()接收兩個引數，一個是函式執行的作用域(this)，另一個是引數陣列。

call()方法第一個引數與apply()方法相同，但傳遞給函式的引數必須列舉出來。

58、簡述一下JS中的閉包？

閉包用的多的兩個作用：讀取函式內部的變數值；讓這些變數值始終儲存著(在記憶體中)。

同時需要注意的是：閉包慎用，不濫用，不亂用，由於函式內部的變數都被儲存在記憶體中，會導致記憶體消耗大。

59、說說你對this的理解？

在JavaScript中，this通常指向的是我們正在執行的函式本身，或者是，指向該函式所屬的物件。

全域性的this → 指向的是Window

函式中的this → 指向的是函式所在的物件 錯誤答案

物件中的this → 指向其本身

事件中this → 指向事件物件

60、分別闡述split(),slice(),splice(),join()？

join()用於把陣列中的所有元素拼接起來放入一個字串。所帶的引數為分割字串的分隔符，預設是以逗號分開。歸屬於Array

split()即把字串分離開，以陣列方式儲存。歸屬於Stringstring

slice() 方法可從已有的陣列中返回選定的元素。該方法並不會修改陣列，而是返回一個子陣列。如果想刪除陣列中的一段元素，應該使用方法 Array.splice()

splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。返回的是含有被刪除的元素的陣列。

61、事件委託是什麼？

讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

62、如何阻止事件冒泡和預設事件？

阻止瀏覽器的預設行為

window.event?window.event.returnValue=false:e.preventDefault();

停止事件冒泡

window.event?window.event.cancelBubble=true:e.stopPropagation();

原生JavaScript中，return false;只阻止預設行為，不阻止冒泡，jQuery中的return false;既阻止預設行為，又阻止冒泡

63、新增 刪除替換 插入到某個接點的方法？

obj.appendChidl()

obj.removeChild()

obj.replaceChild()

obj.innersetBefore()

64、你用過require.js嗎？它有什麼特性？

（1）實現js檔案的非同步載入，避免網頁失去響應；

（2）管理模組之間的依賴性，便於程式碼的編寫和維護。

65、談一下JS中的遞迴函式，並且用遞迴簡單實現階乘？

遞迴即是程式在執行過程中不斷呼叫自身的程式設計技巧，當然也必須要有一個明確的結束條件，不然就會陷入死迴圈。

66、請用正則表示式寫一個簡單的郵箱驗證。

/^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

67、簡述一下你對web效能優化的方案？

1、儘量減少 HTTP 請求

2、使用瀏覽器快取

3、使用壓縮元件

4、圖片、JS的預載入

5、將指令碼放在底部

6、將樣式檔案放在頁面頂部

7、使用外部的JS和CSS

8、精簡程式碼

68、在JS中有哪些會被隱式轉換為false

Undefined、null、布林值false、NaN、零、空字串

69、定時器setInterval有一個有名函式fn1，setInterval（fn1,500）與setInterval（fn1(),500）有什麼區別？

第一個是重複執行每500毫秒執行一次，後面一個只執行一次。

70、外部JS檔案出現中文字元，會出現什麼問題，怎麼解決？

會出現亂碼，加charset=”GB2312”;

另一種解決方式：網頁檔案和外部JS檔案都是UTF8編碼

71、談談瀏覽器的核心，並且說一下什麼是核心？

Trident (['traɪd(ə)nt])--IE，Gecko(['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和Safari

瀏覽器核心又可以分成兩部分：渲染引擎和 JS 引擎。它負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。

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

*  原型物件也是普通的物件，是物件一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為null的話，我們就稱之為原型鏈。

*  原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈。

* JavaScript的資料物件有那些屬性值？

writable：這個屬性的值是否可以改。

configurable：這個屬性的配置是否可以刪除，修改。

enumerable：這個屬性是否能在for…in迴圈中遍歷出來或在Object.keys中列舉出來。

value：屬性值。

* 當我們需要一個屬性的時，Javascript引擎會先看當前物件中是否有這個屬性，如果沒有的話，就會查詢他的Prototype物件是否有這個屬性。

 function clone(proto) {

function Dummy() { }

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); //等價於Object.create(Person);

 }

       function object(old) {

        function F() {};

        F.prototype = old;

        return new F();

       }

   var newObj = object(oldObject);

74、事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

 1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。 

 2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；

 3. ev.stopPropagation();

78、JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基於JavaScript的一個子集。資料格式簡單, 易於讀寫, 佔用頻寬小

{'age':'12', 'name':'back'}

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

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

83、JS中的call()和apply()方法的區別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以執行結果為：alert(4);

注意：js 中的函式其實是物件，函式名是對 Function 物件的引用。

function add(a,b){

   alert(a+b);

}

function sub(a,b){

   alert(a-b);

}

add.call(sub,3,1); 

84、Jquery與jQuery UI 有啥區別？

*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件繫結等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴充套件性，設計的外掛。

提供了一些常用的介面元素，諸如對話方塊、拖動行為、改變大小行為等等

85、jquery 中如何將陣列轉化為json字串，然後再轉化回來？

jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴充套件：

   $.fn.stringifyArray = function(array) {

       return JSON.stringify(array)

    }

   $.fn.parseArray = function(array) {

       return JSON.parse(array)

    }

    然後呼叫：

   $("").stringifyArray(array)

86、JavaScript中的作用域與變數宣告提升？

其他部分

（HTTP、正則、優化、重構、響應式、移動端、團隊協作、SEO、UED、職業生涯）

    *基於Class的選擇性的效能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。

    *頻繁操作的DOM，先快取起來再操作。用Jquery的鏈式呼叫更好。

     比如：var str=$("a").attr("href");

   *for (var i = size; i < arr.length; i++) {}

    for 迴圈每一次迴圈都查找了陣列 (arr) 的.length 屬性，在開始迴圈的時候設定一個變數來儲存這個數字，可以讓迴圈跑得更快：

    for (var i = size, length = arr.length; i < length; i++) {}

87、前端開發的優化問題（看雅虎14條效能優化原則）。

參考資料：J:\程式碼,PPT,筆記,電子書\面試題\雅虎14條優化規則.docx

  （1） 減少http請求次數：CSSSprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。

  （2） 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數

  （3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。

  （4） 當需要設定的樣式很多時設定className而不是直接操作style。

  （5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。

  （6） 避免使用CSS Expression（css表示式)又稱Dynamicproperties(動態屬性)。

  （7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部  加上時間戳。

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。

88、http狀態碼有那些？分別代表是什麼意思？

   100-199 用於指定客戶端應相應的某些動作。

   200-299 用於表示請求成功。

   300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。

400-499 用於指出客戶端的錯誤。

400  語義有誤，當前請求無法被伺服器理解。

401  當前請求需要使用者驗證

403  伺服器已經理解請求，但是拒絕執行它。

500-599 用於支援伺服器錯誤。

503 – 服務不可用

89、一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

    要熟悉前後端的通訊流程，最好把動態網站的背後細節也介紹一遍

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

this執行init建構函式自身，其實就是jQuery例項物件，返回this是為了實現jQuery的鏈式操作

3、 jquery中如何將陣列轉化為json字串，然後再轉化回來？

$.parseJSON('{"name":"John"}');

JSON.stringify

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

遞迴賦值

5、 jquery.extend 與 jquery.fn.extend的區別？

Jquery.extend用來擴充套件jQuery物件本身；jquery.fn.extend用來擴充套件jQuery例項

jquery1.7以後就推薦使用on的方式來進行事件綁定了

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

可以同時繫結多個事件，低層實現原理是使用addEventListner與attachEvent相容處理做事件註冊

3、 Jquery與jQuery UI有啥區別？

jQuery是操作dom的框架，jQueryUI是基於jQuery做的一個UI元件庫

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

jQuery主要用於pc端，當然有對應的jQuerymobile用於移動端，zepto比jQuery更加小巧，主要用於移動端

jquer mobile相對於zepto功能強大，但是體積也很龐大，zepto非常的輕量

5、 針對 jQuery 的優化方法？

a、優先使用ID選擇器

b、jquery獲取到的DOM元素如果需要多次使用，建議使用一個變數將其儲存起來，因為操作DOM的過程是非常耗費效能的

c、在class前使用tag(標籤名)

d、給選擇器一個上下文

e、慎用 .live()方法（應該說盡量不要使用）

f、使用data()方法儲存臨時變數

7、Zepto的點透問題如何解決？

點透主要是由於兩個div重合，例如：一個div呼叫show()，一個div呼叫hide()；這個時候當點選上面的div的時候就會影響到下面的那個div；

解決辦法主要有2種：

1.github上有一個叫做fastclick的庫，它也能規避移動裝置上click事件的延遲響應，https://github.com/ftlabs/fastclick

將它用script標籤引入頁面（該庫支援AMD，於是你也可以按照AMD規範，用諸如require.js的模組載入器引入），並且在dom ready時初始化在body上，

2.根據分析，如果不引入其它類庫，也不想自己按照上述fastclcik的思路再開發一套東西，需要1.一個優先於下面的“divClickUnder”捕獲的事件；2.並且通過這個事件阻止掉預設行為（下面的“divClickUnder”對click事件的捕獲，在ios的safari，click的捕獲被認為和滾屏、點選輸入框彈起鍵盤等一樣，是一種瀏覽器預設行為，即可以被event.preventDefault()阻止的行為）。

12、知道各種JS框架(Angular, Backbone, Ember, React,Meteor, Knockout...)麼? 能講出他們各自的優點和缺點麼?

知識面的寬度，流行框架要多多熟悉

angular、backbone、knockout都是完整的MV*框架

angular是雙向資料繫結的，backbone、knockout是單向資料繫結的

React只是單純地View層

13、Underscore 對哪些 JS 原生物件進行了擴充套件以及提供了哪些好用的函式方法？

Underscore的熟悉程度

14、使用過angular嗎？angular中的過濾器是幹什麼用的

在表示式中轉換資料<p>姓名為 {{ lastName | uppercase }}</p>

currency，是什麼過濾器——格式化數字為貨幣格式，單位是$符。

九、移動APP開發

1、移動端最小觸控區域是多大？

移動端的點選事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）

十、NodeJs

1、對Node的優點和缺點提出了自己的看法：

*（優點）因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，

因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。

此外，與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，

因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。

*（缺點）Node是一個相對新的開源專案，所以不太穩定，它總是一直在變，

而且缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子。

3、Node.js的適用場景？

1)、實時應用：如線上聊天，實時通知推送等等（如socket.io）

2)、分散式應用：通過高效的並行I/O使用已有的資料

3)、工具類應用：海量的工具，小到前端壓縮部署（如grunt），大到桌面圖形介面應用程式

4)、遊戲類應用：遊戲領域對實時和併發有很高的要求（如網易的pomelo框架）

5)、利用穩定介面提升Web渲染能力

6)、前後端程式語言環境統一：前端開發人員可以非常快速地切入到伺服器端的開發（如著名的純Javascript全棧式MEAN架構）

6、什麼是“前端路由”?什麼時候適合使用“前端路由”? “前端路由”有哪些優點和缺點?

熟悉前後端通訊相關知識

前端路由就是在不進行後端請求的情況下對頁面進行跳轉

7、對Node的優點和缺點提出了自己的看法？

優點：

1. 因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。

2. 與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。

缺點：

1. Node是一個相對新的開源專案，所以不太穩定，它總是一直在變。

2. 缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子（第三方庫現在已經很豐富了，所以這個缺點可以說不存在了）。

十一、前端概括性問題

1、常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？

使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解這些框架的功能、效能、設計原理）

前端開發工具：Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

開發過的外掛：城市選擇外掛，汽車型號選擇外掛、幻燈片外掛。彈出層。（寫過開源程式，載入器，js引擎更好）

6、 對BFC規範的理解？

Formatting Context：指頁面中的一個渲染區域，並且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關係和作用。

3、99%的網站都需要被重構是那本書上寫的？

網站重構：應用web標準進行設計（第2版）

4、WEB應用從伺服器主動推送Data到客戶端有那些方式？

   html5 websoket

   WebSocket通過Flash

   XHR長時間連線

   XHR Multipart Streaming

    不可見的Iframe

<script>標籤的長時間連線(可跨域)

6、平時如何管理你的專案，如何設計突發大規模併發架構？

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

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

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

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

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

JS 分資料夾存放 命民以該JS 功能為準英文翻譯；

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

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

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

垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。

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

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

8、你說你熱愛前端，那麼應該WEB行業的發展很關注吧？ 說說最近最流行的一些東西吧？

Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs、browserify、webpack

11、      你所知道的頁面效能優化方法有那些？

壓縮、合併，減少請求，程式碼層析優化。。。

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

前端介面工程師是跟使用者接觸最近的一個職位，一個產品好壞並不是由企業說了算，使用者喜歡的才是好的產品，而使用者所能評價就是他看到的和觸控到的，前端介面工程師要做的就是呈現給使用者這些資訊，一個好的前端介面工程師應該是一個能真正瞭解客戶的人。

  前景：

  隨著網際網路行業的蓬勃發展和終端裝置的更新換代，前端技術也要時刻更新，要用更多的輕量型程式碼完成更復雜的工作。

  UI、產品經理、前端工程師要緊密配合，力求引領時代而不是跟隨時代

18、phpinset和empty的區別，舉例說明

1、empty函式

用途：檢測變數是否為空

判斷：如果 var 是非空或非零的值，則 empty() 返回 FALSE。換句話說，""、0、"0"、NULL、FALSE、array()、var $var; 以及沒有任何屬性的物件都將被認為是空的，如果 var 為空，則返回 TRUE。注意：empty() 只檢測變數，檢測任何非變數的東西都將導致解析錯誤。換句話說，後邊的語句將不會起作用;

2、isset函式

用途：檢測變數是否設定

判斷：檢測變數是否設定，並且不是 NULL。如果已經使用 unset() 釋放了一個變數之後，它將不再是 isset()。若使用 isset() 測試一個被設定成 NULL 的變數，將返回 FALSE。同時要注意的是一個NULL 位元組（"\0"）並不等同於 PHP 的 NULL 常數。

22、如何優化網頁載入速度？

   1.減少css，js檔案數量及大小(減少重複性程式碼，程式碼重複利用)，壓縮CSS和Js程式碼

   2.圖片的大小

   3.把css樣式表放置頂部，把js放置頁面底部

   4.減少http請求數

   5.使用外部 Js 和 CSS

21.解釋下浮動和它的工作原理,列舉不同的清除浮動的技巧。

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

父元素的高度無法被撐開，影響與父元素同級的元素

與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear:both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

1，額外標籤法，

<div style="clear:both;"></div>

（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）

2，使用after偽類

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3，設定`overflow`為`hidden`或者auto

給包含浮動元素的父標籤新增css屬性overflow:auto; zoom:1; zoom:1用於相容IE6。

23.解釋下CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

29.你用過媒體查詢，或針對移動端的佈局/CSS嗎？

媒體查詢，就是響應式佈局。通過不同的媒介型別和條件定義樣式表規則。媒介查詢讓CSS可以更精確作用於不同的媒介型別和同一媒介的不同條件。

語法結構及用法：@media 裝置名 only （選取條件） not （選取條件） and（裝置選取條件），裝置二{sRules}。

示例如下：

 1/* 當瀏覽器的可視區域小於980px */

[email protected] screen and （max-width： 980px） {

7}

8/* 當瀏覽器的可視區域小於650px */

[email protected] screen and （max-width： 650px） {}

30.你熟悉SVG樣式的書寫嗎？

SVG 意為可縮放向量圖形（Scalable Vector Graphics）。

什麼是SVG？

SVG 指可伸縮向量圖形 (Scalable Vector Graphics)

SVG 用來定義用於網路的基於向量的圖形

SVG 使用 XML 格式定義圖形

SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失

31.如何優化網頁的列印樣式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的屬性就是裝置，顯示器上就是screen，印表機則是print，電視是tv，投影儀是projection。列印樣式示例如下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但列印樣式表也應注意以下事項：

列印樣式表中最好不要用背景圖片，因為印表機不能列印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。

最好不要使用畫素作為單位，因為列印樣式表要打印出來的會是實物，所以建議使用pt和cm。

隱藏掉不必要的內容。（@print div{display:none;}）

列印樣式表中最好少用浮動屬性，因為它們會消失。如果想要知道列印樣式表的效果如何，直接在瀏覽器上選擇列印預覽就可以了。

32.在書寫高效CSS時會有哪些問題需要考慮？

1.樣式是：從右向左的解析一個選擇器；

2.ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；

3.不要tag-qualify（永遠不要這樣做ul#main-navigation{}ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）；

4.後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的：html body ul li a{}）；

5.想清楚你為什麼這樣寫；

6.CSS3的效率問題（CSS3選擇器（比如:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）；

7.我們知道#ID速度是最快的，那麼我們都用ID，是不是很快。但是我們不應該為了效率而犧牲可讀性和可維護性。

33.使用CSS前處理器的優缺點有哪些？

    LESS&SassLESS是受Sass啟發而開發的工具，它列出瞭如下開發的理由：

    “為什麼要開發一個Sass的替代品呢？原因很簡單：首先是語法。Sass的一個關鍵特性是縮排式的語法，這種語法可以產生柱式外觀的程式碼。但是你需要花費時間學習一門新的語法以及重新構建你現在的樣式表。LESS給CSS帶來了很多特性，使得LESS能夠和CSS無縫地緊密結合在一起。因此，你可以平滑地由CSS遷移到LESS，如果你只是對使用變數或者操作感興趣的話，你不需要學習一整門全新的語言。”

36.解釋一下你對盒模型的理解，以及如何在CSS中告訴瀏覽器使用不同的盒模型來渲染你的佈局。

請解釋一下*{box-sizing:border-box;}的作用,並且說明使用它有什麼好處？

說到IE的bug，在IE6以前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不同，將border與padding都包含在width之內。而另外一些瀏覽器則與它相反，是不包括border和padding的。

在我們開發的過程中會發現，有時候，如果對頁面中的大區域進行設定時，將border、padding計算到width和height之內，反而更靈活。但W3C的CSS2.1規範卻規定了他們並不能被包含其中。考慮到這個問題，css3中引入了一個新的屬性：box-sizing，它具有“content-box”和”border-box“兩個值。

1box-sizing:content-box

當我們設定box-sizing:content-box;時，瀏覽器對盒模型的解釋遵從我們之前認識到的W3C標準，當它定義width和height時，它的寬度不包括border和padding。

1box-sizing:border-box

當我們設定box-sizing:border-box;時，瀏覽器對盒模型的解釋與IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬高之內的。內容的寬和高可以通過定義的“width”和“height”減去相應方向的“padding”和“border”的寬度得到。內容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小為0。

40.解釋下事件代理。

JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器新增到一個父級元素上，這樣就避免了把事件處理器新增到多個子級元素上。當我們需要對很多元素新增事件的時候，可以通過將事件新增到它們的父節點而將事件委託給父節點來觸發處理函式。這主要得益於瀏覽器的事件冒泡機制。事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。

41.解釋下JavaScript中this是如何工作的。

this永遠指向函式執行時所在的物件，而不是函式被建立時所在的物件。匿名函式或不處於任何物件中的函式指向window 。

1.如果是call，apply,with，指定的this是誰，就是誰。

2.普通的函式呼叫，函式被誰呼叫，this就是誰。

47.描述以下變數的區別：null，undefined或undeclared？

JavaScript的最初版本是這樣區分的：null是一個表示"無"的物件，轉為數值時為0；undefined是一個表