1：為何選擇前端這個方向和對前端的理解

為什麼：

    第一的話就是對前端很感興趣，之前也接觸過其他的語言，但是直到接觸到前端才發現真的有興趣做下去，興趣是一個人最好的老師，

    第二的話前端很有前途，像現在nodejs，rn，微信小程式這類工具和框架可以讓前端進行後端和移動開發，所以我覺得前端的前途會更多一點。

理解：

    首先前端工程師最核心的技能還是：Html、CSS、JS。前端負責的是使用者可以看到的部分，所以也是最接近使用者的工程師。同時在產品研發流程中前端要同時與產品、設計、後端等很多人合作。

2：Vue雙向資料繫結的實現

    vue.js 則是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者（文字節點則是作為訂閱者），在收到訊息後執行相應的更新操作。

    compile主要做的事情是解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視

    MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到資料變化 -> 檢視更新；檢視互動變化(input) -> 資料model變更的雙向繫結效果。

    AngularJS 採用“髒值檢測”的方式，資料發生變更後，對於所有的資料和檢視的繫結關係進行一次檢測，識別是否有資料發生了改變。
 

3：react和vue有哪些不同 說說你對這兩個框架的看法

    都用了virtual dom的方式, 效能都很好

    ui上都是元件化的寫法，開發效率很高

    vue是雙向資料繫結，react是單項資料繫結，當工程規模比較大時雙向資料繫結會很難維護

    vue適合不會持續的  小型的web應用，使用vue.js能帶來短期內較高的開發效率. 否則採用react

4：let和const的區別

let宣告的變數可以改變，值和型別都可以改變，沒有限制。

const宣告的變數不得改變值

5：平時用了es6的哪些特性，體驗如何 和es5有什麼不同

let const關鍵字 箭頭函式 字串模板 class類 模組化 promise

es5 require react.createclass
 

6：瀏覽器原生支援module嗎，如果支援，會帶來哪些便利

不支援

7：介紹一下你對webpack的理解，和gulp有什麼不同

    Webpack是模組打包工具，他會分析模組間的依賴關係，然後使用loaders處理它們，最後生成一個優化並且合併後的靜態資源。

    gulp是前端自動化工具 能夠優化前端工作流程，比如檔案合併壓縮

8:webpack打包速度慢，你覺得可能的原因是什麼，該如何解決

模組太多

    Webpack 可以配置 externals 來將依賴的庫指向全域性變數，從而不再打包這個庫

9：http響應中content-type包含哪些內容

請求中的訊息主體是用何種方式編碼

application/x-www-form-urlencoded

這是最常見的 POST 提交資料的方式 按照 key1=val1&key2=val2 的方式進行編碼

application/json

告訴服務端訊息主體是序列化後的 JSON 字串

10：瀏覽器快取有哪些，通常快取有哪幾種方式

    強快取 強快取如果命中，瀏覽器直接從自己的快取中讀取資源，不會發請求到伺服器。

    協商快取 當強快取沒有命中的時候，瀏覽器一定會發送一個請求到伺服器，通過伺服器端依據資源的另外一些http header驗證這個資源是否命中協商快取，如果協商快取命中，伺服器會將這個請求返回（304），若未命中請求，則將資源返回客戶端，並更新本地快取資料（200）。

HTTP頭資訊控制快取

Expires（強快取）+過期時間   Expires是HTTP1.0提出的一個表示資源過期時間的header，它描述的是一個絕對時間

    Cache-control（強快取） 描述的是一個相對時間，在進行快取命中的時候，都是利用客戶端時間進行判斷 管理更有效，安全一些 Cache-Control: max-age=3600

    Last-Modified/If-Modified-Since（協商快取） 標示這個響應資源的最後修改時間。Last-Modified是伺服器相應給客戶端的，If-Modified-Sinces是客戶端發給伺服器，伺服器判斷這個快取時間是否是最新的，是的話拿快取。

    Etag/If-None-Match（協商快取） etag和last-modified類似，他是傳送一個字串來標識版本。

11：如何取出一個數組裡的圖片並按順序顯示出來

function loadImage(imgList,callback){
        if(!$.isArray(imgList) || !$.isFunction(callback)) return ;
        var imageData = [] ;
        $.each(imgList, function(i,src){
            var img = new Image() ;
            img.onload = function(){
                $(imageData.shift()).appendTo("body") ;
                if(!imageData.length){
                    callback() ;
                    return ;
                }
                this.onload = null ;
            } ;
            img.src= src ;
            imageData.push(img) ;
        }) ;
    } ;

12：平時是怎麼學新技術的

伯樂線上 infoq 掘金 簡書 慕課網

13：Node，Koa用的怎麼樣

    koa是一個相對於express來說,更小,更健壯,更富表現力的Web框架，不用寫回調

    koa是從第一個中介軟體開始執行，遇到next進入下一個中介軟體，一直執行到最後一箇中間件，在逆序

    async await語法的支援

14：使用模組化載入時，模組載入的順序是怎樣的，如果不知道，根據已有的知識，你覺得順序應該是怎麼樣的

    commonjs 同步 順序執行

    AMD 提前載入，不管是否呼叫模組，先解析所有模組 requirejs 速度快 有可能浪費資源

    CMD 提前載入，在真正需要使用(依賴)模組時才解析該模組 seajs 按需解析 效能比AMD差

15: 介紹一下閉包和閉包常用場景

    閉包是指有權訪問另一個函式作用域中的變數的函式. 建立閉包常見方式,就是在一個函式內部建立另一個函式.
    應用場景 設定私有變數和方法

    不適合場景：返回閉包的函式是個非常大的函式

    閉包的缺點就是常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。

16: 為什麼會出現閉包這種東西，解決了什麼問題

    受JavaScript鏈式作用域結構的影響，父級變數中無法訪問到子級的變數值，為了解決這個問題，才使用閉包這個概念

17: 介紹一下你所瞭解的作用域鏈,作用域鏈的盡頭是什麼，為什麼

    每一個函式都有一個作用域，比如我們建立了一個函式，函式裡面又包含了一個函式，那麼現在 就有三個作用域，這樣就形成了一個作用域鏈。

    作用域的特點就是，先在自己的變數範圍中查詢，如果找不到，就會沿著作用域鏈往上找。

18: 一個Ajax建立的過程是怎樣的，主要用到哪些狀態碼

ajax：在不切換頁面的情況下完成非同步的HTTP請求

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

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

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

(4)傳送HTTP請求.

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

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

var xmlHttp = new XMLHttpRequest();

  xmlHttp.open('GET','demo.php','true');

  xmlHttp.send()

  xmlHttp.onreadystatechange = function(){

      if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

      }

  }

使用promise封裝

function getJSON(url) { 
    return new Promise(function(resolve, reject) { 
        var XHR = new XMLHttpRequest(); 
        XHR.open('GET', url, true); 
        XHR.send(); 

        XHR.onreadystatechange = function() { 
            if (XHR.readyState == 4) { 
                if (XHR.status == 200) { 
                    try { 
                        var response = JSON.parse(XHR.responseText); 
                        resolve(response); 
                    } catch (e) { 
                        reject(e); 
                    } 
                } else { 
                    reject(new Error(XHR.statusText)); 
                } 
            } 
        } 
    }) 
} 

getJSON(url).then(res => console.log(res)); 

當前狀態readystate

0 代表未初始化。 還沒有呼叫 open 方法
1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有被呼叫
2 代表已載入完畢。send 已被呼叫。請求已經開始
3 代表互動中。伺服器正在傳送響應
4 代表完成。響應傳送完畢

常用狀態碼status

404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部伺服器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)(伺服器返回304狀態，表示原始檔沒有被修改）

19: 說說你還知道的其他狀態碼，狀態碼的存在解決了什麼問題

302/307　　臨時重定向

301　永久重定向

藉助狀態碼,使用者可以知道伺服器端是正常處理了請求,還是出現了什麼錯誤

20: 知道語義化嗎？說說你理解的語義化，如果是你，平時會怎麼做來保證語義化

    像html5的新的標籤header，footer,section等就是語義化

    一方面，語義化就是讓計算機能夠快速的讀懂內容，高效的處理資訊，可以對搜尋引擎更友好。

    另一方面，便於與他人的協作，他人通過讀程式碼就可以理解你網頁標籤的意義。

21: 說說content-box和border-box，為什麼看起來content-box更合理，但是還是經常使用border-box

    content-box 是W3C的標準盒模型 元素寬度=內容寬度+padding+border

    border-box 是ie的怪異盒模型  他的元素寬度等於內容寬度  內容寬度包含了padding和border

     比如有時候在元素基礎上新增內距padding或border會將佈局撐破 但是使用border-box就可以輕鬆完成

22：介紹一下HTML5的新特性

新的DOCTYPE宣告  <!DOCTYPE html> 
完全支援css3
video和audio
本地儲存
語義化標籤
canvas
新事件 如ondrag onresize

23：對自己未來的規劃是怎樣的

    對於剛畢業的人來說，前兩年是很重要的，先打好基礎，多提升js能力。三至四年在提升JS能力的同時，開始要往多方面發展，前端工程師遠遠不僅是JS而已。製作一個性能高、互動好、視覺美的頁面，需要從前端框架選型、架構設計、構建工具，到後端通訊機制、設計與互動、網路和瀏覽器優化等各方面的知識。一專多長才是前端工程師的終極目標。

24： 在一個UI李有10個li，實現點選對應的li，輸出對應的下標

var lis = querySelectorAll('li')
for(var i=0;i<10;i++){
   lis[i].onclick = (function(a) {
      return function() {
       alert(a)
    }
  })(i)
}   

事件委託

利用冒泡的原理，把事件加到父級上，觸發執行效果。

1.可以大量節省記憶體佔用，減少事件註冊。
2.可以方便地動態新增和修改元素，不需要因為元素的改動而修改事件繫結。

var ul = document.querySelector('ul'); 
var list = document.querySelectorAll('ul li'); 

ul.addEventListener('click', function(ev){ 
    var ev = ev || window.event; 
    var target = ev.target || ev.srcElemnt; 

    for(var i = 0, len = list.length; i < len; i++){ 
        if(list[i] == target){ 
            alert(i + "----" + target.innerHTML); 
        } 
    } 
}); 

25:實現三個DIV等分排布在一行（考察border-box）

1.設定border-box width33.3%

2.flexbox flex：1 

26: 說說你知道JavaScript的記憶體回收機制

垃圾回收器會每隔一段時間找出那些不再使用的記憶體，然後為其釋放記憶體。

一般使用標記清除方法  當變數進入環境標記為進入環境，離開環境標記為離開環境

還有引用計數方法

堆疊

    stack為自動分配的記憶體空間，它由系統自動釋放；而heap則是動態分配的記憶體，大小不定也不會自動釋放。

    基本資料型別存放在棧中

    引用型別 存放在堆記憶體中，首先從棧中獲得該物件的地址指標，然後再從堆記憶體中取得所需的資料

27函式防抖和函式節流

    函式防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次

    函式防抖的要點，也是需要一個setTimeout來輔助實現。延遲執行需要跑的程式碼。
    如果方法多次觸發，則把上次記錄的延遲執行程式碼用clearTimeout清掉，重新開始。

如果計時完畢，沒有方法進來訪問觸發，則執行程式碼。

//函式防抖
var timer = false
document.getElementById("debounce").onScroll = function() {
        clearTimeout(timer)  
        timer = setTimeout(function(){
                console.log(‘函式防抖’) 
  }, 300)     
}

函式節流是指一定時間內js方法只跑一次

函式節流的要點是，宣告一個變數當標誌位，記錄當前程式碼是否在執行。
如果空閒，則可以正常觸發方法執行。
如果程式碼正在執行，則取消這次方法執行，直接return。

//函式節流
var canScroll = true;
document.getElementById('throttle').onScroll = function() {
               if (!canScroll) {
                return;
               }
                canScroll = false;
                setTimeout(function(){
                   console.log('函式節流');
                   canScroll = true;
                },300)       
}
　　

28：程式設計實現輸出一個數組中第N大的資料

29.實現兩欄佈局有哪些方法

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百顯示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百顯示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
}

第二種方法，我利用的是建立一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。它可以通過以下任何一種方式來建立：

    float 的值不為 none 
    position 的值不為 static 或者 relative 
    display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個 
    overflow 的值不為 visible

第三種flex佈局

30：設定width的flex元素，flex屬性值是多少

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫

flex-grow屬性定義專案的放大比例，預設為0

flex-shrink屬性定義了專案的縮小比例，預設為1

flex-basis屬性定義了專案的固定空間

31get和post有什麼不同

 get是從伺服器上獲取資料，post是向伺服器傳送資料

get請求可以將查詢字串引數追加到url的末尾; post請求應該把資料作為請求的主體提交.

get請求資料有大小限制；post沒有

post比get安全性更高

32：cookie和session有什麼聯絡和區別

cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。

session比cookie更安全

單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie。

一般用cookie來儲存sessionid

33：判斷連結串列是否有環

    使用追趕的方法，設定兩個指標slow、fast，從頭指標開始，每次分別前進1步、2步。如存在環，則兩者相遇；如不存在環，fast遇到NULL退出。

34：輸出二叉樹的最小深度

     判斷左子樹或右子樹是否為空，若左子樹為空，則返回右子樹的深度，反之返回左子樹的深度，如果都不為空，則返回左子樹和右子樹深度的最小值。

35: javaScript中的this是什麼，有什麼用，它的指向是什麼

全域性程式碼中的this  是指向全域性物件

作為物件的方法呼叫時指向呼叫這個函式的物件。

作為建構函式指向新建立的物件

使用apply和call設定this

36寫一個快速排序

var quickSort = function (arr){
        if(arr.lenght <= 1) {
           return arr;
          }

       var left = [];
       var right = [];
       var mid = arr.splice(Math.floor(arr.length/2), 1);

       for(var i=0;i<arr.length;i++){
             if(arr[i]<mid) {
                 left.push(arr[i]);
            }
             if(arr[i]>mid) {
                 right.push(arr[i]);
            }
          return quickSort(left).concat(mid, quickSort(right));
     }  
}  

37怎麼實現從一個DIV左上角到右下角的移動，有哪些方法，都怎麼實現

改變left值為window寬度-div寬度 top值為window高度-div高度

jquery的animate方法

css3的transition

38: 簡單介紹一下promise，他解決了什麼問題

Promise，就是一個物件，用來傳遞非同步操作的訊息。有三種狀態：

Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。

    有了 Promise 物件，就可以將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式。

39: 寫一個組合繼承

var Super = function(name){
  this.name = name;
}
Super.prototype.func1 = function() { console.log('func1'); }
var Sub = function(name,age) {
  Super.call(this, name);
  this.age = age;
}
Sub.prototype = new Super();

40：深拷貝方案有哪些，手寫一個深拷貝

var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}

41：判斷陣列有哪些方法

a instanceof Array
a.constructor == Array
Object.prototype.toString.call(a) == [Object Array]

42: 跨域通訊有哪些方案，各有什麼不同

    JSONP：由於同源策略的限制，XmlHttpRequest只允許請求當前源，script標籤沒有同源限制

    通過動態<script>元素使用，使用時為src指定一個跨域url。回撥函式處理JSON資料  相容性好 不支援post

    簡述原理與過程：首先在客戶端註冊一個callback, 然後把callback的名字傳給伺服器。此時，伺服器先生成一個function , function 名字就是傳遞上來的引數。最後將 json 資料直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文件，返回給客戶端。客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文件，此時資料作為引數，傳入到了客戶端預先定義好的 callback 函式裡

<script> 
    var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";  
    var script = document.createElement('script');  
    script.setAttribute('src', url);  //load javascript   
    document.getElementsByTagName('head')[0].appendChild(script);  

  //回撥函式 
    function callbackfunction(data){ 
        var html=JSON.stringify(data.RESULTSET); 
alert(html); 
     } 
</script> 

    cors：通過設定Access-Control-Allow-Origin來允許跨域 cors可用ajax發請求獲取資料 但是相容性沒有jsonp好 

43：多頁面通訊有哪些方案，各有什麼不同

    localstorge在一個標籤頁裡被新增、修改或刪除時，都會觸發一個storage事件，通過在另一個標籤頁裡監聽storage事件，即可得到localstorge儲存的值，實現不同標籤頁之間的通訊。

    settimeout+cookie

44：用Node實現一個使用者上傳檔案的後臺服務應該怎麼做

multer模組

45： XSS和CSRF攻擊

    xss：比如在一個論壇發帖中釋出一段惡意的JavaScript程式碼就是指令碼注入，如果這個程式碼內容有請求外部伺服器，那麼就叫做XSS

    寫一個指令碼將cookie傳送到外部伺服器這就是xss攻擊但是沒有發生csrf

    防範：對輸入內容做格式檢查 輸出的內容進行過濾或者轉譯

    CSRF：又稱XSRF，冒充使用者發起請求（在使用者不知情的情況下）,完成一些違背使用者意願的請求 如惡意發帖，刪帖

    比如在論壇發了一個刪帖的api連結 使用者點選連結後把自己文章給刪了 這裡就是csrf攻擊沒有發生xss

    防範：驗證碼 token 來源檢測

46：聖盃佈局和雙飛翼佈局

【聖盃佈局】

html程式碼中 middle部分首先要放在container的最前部分。然後是left,right

1.將三者都 float:left , 再加上一個position:relative (因為相對定位後面會用到）

2.middle部分 width:100%佔滿

3.此時middle佔滿了，所以要把left拉到最左邊，使用margin-left:-100%

4.這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上 padding:0 220px 0 200px

5.middle內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位 left:-200px  同理，right也要相對定位還原 right:-220px

6.到這裡大概就自適應好了。如果想container高度保持一致可以給left middle right都加上min-height:130px

【雙飛翼佈局】

前幾步都一樣 後邊把外圍padding和相對定位做法換成內層margin

給middle增加一個內層div-- middle-inner, 然後margin:0 220px 0 200px

47:offsetHeight, scrollHeight, clientHeight分別代表什麼

    clientHeight：包括內容可見部分的高度，可見的padding；不包括border，水平方向的scrollbar，margin。

    offsetHeight：包括內容可見部分的高度，border，可見的padding，水平方向的scrollbar（如果存在）；不包括margin。

    scrollHeight：包括內容的高度（可見與不可見），padding（可見與不可見）；不包括border，margin。

48:垂直居中

    單行行內元素 1.可以設定padding-top,padding-bottom 2.將height和line-height設為相等

    多行行內元素 1.可以將元素轉為table樣式，再設定vertical-align：middle; 2.使用flex佈局

塊級元素

已知高度絕對定位負邊距

未知高度transform: translateY(-50%);

flex佈局 
display: flex;
justify-content: center;
align-items: center;

49：transition的屬性值和應用

屬性的名稱 過渡時間 時間曲線 延遲

50：rem和em的區別

em相對於父元素，rem相對於根元素

51：嚴格模式的特性

嚴格模式對Javascript的語法和行為，都做了一些改變。

全域性變數必須顯式宣告。

物件不能有重名的屬性

函式必須宣告在頂層

消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
提高編譯器效率，增加執行速度；
為未來新版本的Javascript做好鋪墊。

52：js的原型鏈，如何實現繼承？

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3

53：圖片預載入和懶載入

預載入：

function loadImage(url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // 如果圖片已經存在於瀏覽器快取，直接呼叫回撥函式 防止IE6不執行onload BUG
        callback.call(img);
        return;
    }
    img.onload = function () {
        callback.call(img);//將回調函式的this替換為Image物件
    };
};

懶載入：

當網頁滾動的事件被觸發 -> 執行載入圖片操作 -> 判斷圖片是否在可視區域內 -> 在，則動態將data-src的值賦予該圖片。

<script>
    var aImages = document.getElementById("SB").getElementsByTagName('img'); //獲取id為SB的文件內所有的圖片
    loadImg(aImages);
    window.onscroll = function () { //滾動條滾動觸發
        loadImg(aImages);
    };

    //getBoundingClientRect 是圖片懶載入的核心
    function loadImg(arr) {
        for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
                arr[i].isLoad = true; //圖片顯示標誌位
                //arr[i].style.cssText = "opacity: 0;";
                (function (i) {
                    setTimeout(function () {
                        if (arr[i].dataset) { //相容不支援data的瀏覽器
                            aftLoadImg(arr[i], arr[i].dataset.imgurl);
                        } else {
                            aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
                        }
                        arr[i].style.cssText = "transition: 1s; opacity: 1;" //相當於fadein
                    }, 500)
                })(i);
            }
        }
    }

    function aftLoadImg(obj, url) {
        var oImg = new Image();
        oImg.onload = function () {
            obj.src = oImg.src; //下載完成後將該圖片賦給目標obj目標物件
        }
        oImg.src = url; //oImg物件先下載該影象
    }
</script>

54.輸入網址後到頁面展現的過程

通過dns解析獲取ip

tcp連結

客戶端傳送http請求

tcp傳輸報文

伺服器處理請求返回http報文

    客戶端解析渲染頁面 （構建DOM樹 –> 構建渲染樹 –> 佈局渲染樹：計算盒模型位置和大小 –> 繪製渲染樹）

55：UMD規範和ES6模組化，Commonjs的對比

    CommonJS是一個更偏向於伺服器端的規範。用於NodeJS 是同步的

    AMD是依賴前置的

    CMD推崇依賴就近，延遲執行。可以把你的依賴寫進程式碼的任意一行

    AMD和CMD都是用difine和require，但是CMD標準傾向於在使用過程中提出依賴，就是不管程式碼寫到哪突然發現需要依賴另一個模組，那就在當前程式碼用require引入就可以了，規範會幫你搞定預載入，你隨便寫就可以了。但是AMD標準讓你必須提前在頭部依賴引數部分寫好（沒有寫好？ 倒回去寫好咯）。這就是最明顯的區別。

    UMD寫一個檔案需要相容不同的載入規範

    ES6通過import、export實現模組的輸入輸出。其中import命令用於輸入其他模組提供的功能，export命令用於規定模組的對外介面。

56：http請求頭

get post delete put head options trace connect

OPTIONS：返回伺服器針對特定資源所支援的HTTP請求方法

57:nginx的好處？和node的比較

高併發 響應快

區別不是很大，一個更專業，一個更全面:

1.相似點:
    1.1非同步非阻塞I/O, 事件驅動;
2.不同點:
    2.1Nginx 採用C編寫，更效能更高，但是它僅適合於做web伺服器，用於反向代理或者負載均衡等服務；Nginx背後的業務層程式設計思路很還是同步程式設計方式，例如PHP.

    2.2NodeJs高效能平臺，web服務只是其中一塊，NodeJs在處理業務層用的是JS編寫,採用的是非同步程式設計方式和思維方式。

58.框架問題

什麼是 MVVM , 和 MVC 是什麼區別, 原理是什麼?

    　　mvc的介面和邏輯關聯緊密，資料直接從資料庫讀取，必須通過Controller來承上啟下，通訊都是單向的。mvvm的View 和 ViewModel可以互相通訊，介面資料從viewmodel中獲取。

父子元件怎麼通訊的?

　　vue：父元件是通過props屬性給子元件通訊  在子元件裡面emit,在父元件監聽
　　react：props傳遞  父給子傳一個回撥函式 將資料傳給父親處理

兄弟元件怎麼通訊的?

　　vuex 建立一個vue例項 emit觸發事件 on監聽事件

　　redux  子A -> 父 -> 子B

生命週期有哪些, 怎麼用?

　　beforecreated：el 和 data 並未初始化 
　　
　　created:完成了 data 資料的初始化，el沒有
　　
　　beforeMount：完成了 el 和 data 初始化 
　　
　　mounted ：完成掛載　　updated；destroyed

　　react：初始化階段、執行中階段、銷燬階段

　　初始化getDefaultProps()和getInitialState()初始化
    componentWillMount() 在元件即將被渲染到頁面

　　render() 元件渲染
    componentDidMount() 元件被渲染到頁面上，

　　執行中shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 
　　銷燬componentWillUnmount()

59：清除浮動
兩種原理：

1、利用clear屬性進行清理

    具體的實現原理是通過引入清除區域，這個相當於加了一塊看不見的框把定義clear屬性的元素向下擠

    父容器結尾插入空標籤<div style="clear: both;"></div>

利用CSS偽元素：

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

    通過將這個類新增到父容器當中，會在父容器的末尾增加了一個高度為0、具有清除屬性的、不可見的塊級元素。

2、將父容器形成BFC

BFC能清理浮動主要運用的是它的佈局規則：

    內部的Box會在垂直方向，一個接一個地放置。

    Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

    每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

    BFC的區域不會與float box重疊。

    BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

    計算BFC的高度時，浮動元素也參與計算

    浮動清理利用的主要是第六條規則，只要將父容器觸發為BFC，就可以實現包含的效果。

那麼觸發BFC有哪幾種方法？

根元素
float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

60.前端效能優化

1.減少http請求 使用sprite圖、合併js和css檔案

2.使用cdn 將使用者安排在近的伺服器上

3.使用快取 快取ajax 使用外部的css和js以便快取 使用expire cach-control etag

4.壓縮資源 使用gzip壓縮js和css檔案

5.程式碼層面 避免使用樣式表示式、萬用字元選擇器、樣式放在頂部、指令碼放在底部

61.事件模型和事件代理

事件三個階段：事件捕獲，目標，事件冒泡（低版本ie不支援捕獲階段）

w3c繫結事件target.addEventListener(event,handler,false)

解綁target.removeEventListener(eventType, handler, false)

ie繫結 target.attachEvent(on+event, handler)

解綁target.detachEvent("on"+eventType, handler)

事件代理優點：

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

    可以實現當新增子物件時無需再次對其繫結事件，對於動態內容部分尤為合適

bind和trigger實現：

    建立一個類或是匿名函式，在bind和trigger函式外層作用域建立一個字典物件，用於儲存註冊的事件及響應函式列表，bind時，如果字典沒有則建立一個，key是事件名稱，value是陣列，裡面放著當前註冊的響應函式，如果欄位中有，那麼就直接push到陣列即可。trigger時調出來依次觸發事件響應函式即可。

function Emitter() {
    this._listener = [];//_listener[自定義的事件名] = [所用執行的匿名函式1, 所用執行的匿名函式2]
}

//註冊事件
Emitter.prototype.bind = function(eventName, callback) {
    var listener = this._listener[eventName] || [];//this._listener[eventName]沒有值則將listener定義為[](陣列)。
    listener.push(callback);
    this._listener[eventName] = listener;
}

 //觸發事件
Emitter.prototype.trigger = function(eventName) {
    var args = Array.prototype.slice.apply(arguments).slice(1);//atgs為獲得除了eventName後面的引數(註冊事件的引數)
    var listener = this._listener[eventName];

    if(!Array.isArray(listener)) return;//自定義事件名不存在
    listener.forEach(function(callback) {
        try {
            callback.apply(this, args);
        }catch(e) {
            console.error(e);
        }
    })
}
　　

62.將url的查詢引數解析成字典物件

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);              
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}

getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")
Object {name: "1", dd: "ddd**"}

63.position的值， relative和absolute分別是相對於誰進行定位的？

<1>、relative:相對定位，相對於自己本身在正常文件流中的位置進行定位。
<2>、absolute:生成絕對定位，相對於最近一級定位不為static的父元素進行定位。
<3>、fixed: 生成絕對定位，相對於瀏覽器視窗或者frame進行定位。
<4>、static:預設值，沒有定位，元素出現在正常的文件流中。
<5>、sticky:生成粘性定位的元素，容器的位置根據正常文件流計算得出。

64.position:absolute和float屬性的異同？

    共同點：對內聯元素設定float和absolute屬性，可以讓元素脫離文件流，並且可以設定其寬高。
    不同點：float仍可佔據位置，不會覆蓋在另一個BFC區域上，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。absolute會覆蓋文件流中的其他元素。

65.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

選擇符：

<1>、id選擇器（#myId）;
<2>、類選擇器（.myClassName）;
<3>、標籤選擇器（div,p,h1）;
<4>、相鄰選擇器（h1 + p）;
<5>、子選擇器（ul > li）;
<6>、後代選擇器（li a）;
<7>、萬用字元選擇器（*）;
<8>、屬性選擇器（button[disabled="true"]）;
<9>、偽類選擇器（a:hover,li:nth-child）;表示一種狀態
<10>、偽元素選擇器（li:before、:after,:first-letter,:first-line,:selecton）;表示文件某個部分的表現

優先順序：

    !important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 偽類（比重1）;

偽類和偽元素區別：

1>、偽類：a:hover,li:nth-child；
2>、偽元素：li:before、:after,:first-letter,:first-line,:selecton;

65.兩個數組合併成一個數組排序返回

先依次比較兩個陣列，按照小的就傳入新的陣列。當這次比較完之後可能有一個數組的長度很長，留下一些陣列，然後在新陣列的末尾插入即可。

<script>
    functiongetRes(arr1, arr2){
       var len1 = arr1.length,
           len2 = arr2.length,
           i = 0,
           j = 0,
           k = 0,
           res = new Array(len1+len2);

           while(i < len1 && j <len2){
                res[k++] = arr[(arr[i] > arr[j]) ? j++ : i++];
            }
            While(i < len1)   res[k++]= arr1[i++];
            While(j < len2)   res[k++]= arr2[j++];
            Return res;
    }
</script>

66.zepto和jquery區別

    zepto比jquery體積小很多，移動端的相容性不需要要考慮很多，jquery中的很多功能都沒有。

    width()和height()不一樣  解決用.css('width')

67.css3動畫和jquery動畫的差別

1.css3中的過渡和animation動畫都是基於css實現機制的，屬於css範疇之內，並沒有涉及到任何語言操作。效率略高與jQuery中的animate()函式，但相容性很差。

2.jQuery中的animate()函式可以簡單的理解為css樣式的“逐幀動畫”，是css樣式不同狀態的快速切換的結果。效率略低於css3動畫執行效率，但是相容性好。‍

68.如何解決ajax無法後退的問題

HTML5裡引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState介面操作瀏覽器歷史，並且改變當前頁面的URL。

onpopstate監聽後退

69.實現一個once函式

<script>
    function test () {console.log('test')}

        var once = function (fn) {
          var isFirst = true;
          return function () {
            if (isFirst) {
              isFirst = !isFirst;
              fn();
            }
          };
    };

    var b = once(test);
    b(); // 'test'
    b(); // nothing
</script>

70.分域名請求圖片的原因和好處

瀏覽器的併發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞

瀏覽器併發請求有個數限制，分域名可以同時併發請求大量圖片

71.頁面的載入順序

html順序載入，其中js會阻塞後續dom和資源的載入，css不會阻塞dom和資源的載入但是會阻塞js的載入。

瀏覽器會使用prefetch對引用的資源提前下載

1.沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼

2.有 async，載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行(下載非同步，執行同步，載入完就執行)。

3.有 defer，載入後續文件元素的過程將和 script.js 的載入並行進行（非同步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。

72.生成10個20-50之間的隨機數，存在陣列中，常見排序方法，陣列亂序方法

var arr = [];
for(var i = 0;i<10;i++){
    var num = Math.random()*30 + 20;
    num = parseInt(num, 10);
    arr.push(num);
}

arr.sort(function(a,b){
    return 0.5 - Math.random();
})

73.計算機網路的分層概述

tcp/ip模型：從下往上分別是鏈路層，網路層，傳輸層，應用層

osi模型：從下往上分別是物理層，鏈路層，網路層，傳輸層，會話層，表示層，應用層。

73.jscss快取問題

瀏覽器快取的意義在於提高了執行效率，但是也隨之而來帶來了一些問題，導致修改了js、css，客戶端不能更新

都加上了一個時間戳作為版本號

<script type=”text/javascript” src=”{JS檔案連線地址}?version=XXXXXXXX”></script>

74.setTimeout,setInterval,requestAnimationFrame之間的區別

    setInterval如果函式執行的時間很長的話，第二次的函式會放到佇列中，等函式執行完再執行第二次，導致