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 來將依賴的庫指向全局變量，從而不再打包這個庫 或者dllplugin
webpack-parallel-uglify-plugin 並行壓縮
CommonsChunkPlugin提取公共的模塊
happypack 多進程構建
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) ;
}) ;
} ;
async function loadImgs(imgList, cb) {
console.log("start")
for( var i =0; i<imgList.length; i++) {
await imgLoader(imgList[i], i);
console.log("finish"+i)
}
cb();
}
async function imgLoader(url, num){
return new Promise((resolve, reject) => {
console.log("request"+num)
setTimeout(resolve, 1000);
// let img = new Image();
// img.onload = () => resolve(img);
// img.onerror = reject;
console.log("return"+num)
})
}
loadImgs(["xxx/a.png","xxx/b.png"],function() {
console.log("開始干活");
})
12：平時是怎么學新技術的
伯樂在線 infoq 掘金 簡書 慕課網
13：Node，Koa用的怎么樣
koa是一個相對於express來說,更小,更健壯,更富表現力的Web框架，不用寫回調
koa是從第一個中間件開始執行，遇到next進入下一個中間件，一直執行到最后一個中間件，在逆序
async await語法的支持
14：使用模塊化加載時，模塊加載的順序是怎樣的，如果不知道，根據已有的知識，你覺得順序應該是怎么樣的
commonjs 同步 順序執行
AMD 提前加載，不管是否調用模塊，先解析所有模塊 requirejs 速度快 有可能浪費資源
CMD 提前加載，在真正需要使用(依賴)模塊時才解析該模塊 seajs 按需解析 性能比AMD差
15: 介紹一下閉包和閉包常用場景
- 閉包是指有權訪問另一個函數作用域中的變量的函數. 創建閉包常見方式,就是在一個函數內部創建另一個函數.
- 本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。
應用場景 設置私有變量和方法讓這些變量的值始終保持在內存中還有讀取函數內部變量。
不適合場景：返回閉包的函數是個非常大的函數
閉包的缺點就是常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
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);
}
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%);
49：transition的屬性值和應用
屬性的名稱 過渡時間 時間曲線 延遲
50：rem和em的區別
em相對於父元素，rem相對於根元素
51：嚴格模式的特性
嚴格模式對Javascript的語法和行為，都做了一些改變。
全局變量必須顯式聲明。
對象不能有重名的屬性
函數必須聲明在頂層
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
52：js的原型鏈，如何實現繼承？
原型鏈實際上就是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
obj.__proto__===foo.prototype true
foo.prototype.constructor === foo
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的值賦予該圖片。
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對象先下載該圖像
}
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中獲取。
- 父子組件怎么通信的?
- 兄弟組件怎么通信的?
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.兩個數組合並成一個數組排序返回
先依次比較兩個數組，按照小的就傳入新的數組。當這次比較完之后可能有一個數組的長度很長，留下一些數組，然后在新數組的末尾插入即可。
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;
}
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函數
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
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如果函數執行的時間很長的話，第二次的函數會放到隊列中，等函數執行完再執行第二次，導致時間間隔發生錯誤。
而settimeout一定是在這個時間定時結束之后,它才會執行
requestAnimationFrame是為了做動畫專用的一個方法，這種方法對於dom節點的操作會比較頻繁。
75.webpack常用到哪些功能
設置入口 設置輸出目 設置loader extract-text-webpack-plugin將css從js代碼中抽出並合並 處理圖片文字等功能 解析jsx解析bable
76.介紹sass
&定義變量 css嵌套 允許在代碼中使用算式 支持if判斷for循環
77.websocket和ajax輪詢
Websocket是HTML5中提出的新的協議，注意，這里是協議，可以實現客戶端與服務器端的通信，實現服務器的推送功能。
其優點就是，只要建立一次連接，就可以連續不斷的得到服務器推送的消息，節省帶寬和服務器端的壓力。
ajax輪詢模擬長連接就是每個一段時間（0.5s）就向服務器發起ajax請求，查詢服務器端是否有數據更新
其缺點顯而易見，每次都要建立HTTP連接，即使需要傳輸的數據非常少，所以這樣很浪費帶寬
78.tansition和margin的百分比根據什么計算
transition是相對於自身,margin相對於參照物
79.冒泡排序、快速排序、去重、查找字符串最多值
//冒泡排序
var bubbleSort = function(arr) {
for (var i = 0; i < arr.length-1; i++) {
for (var j = i+1; j < arr.length; j++) {
if (arr[i]>arr[j]) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr;
};
//快速排序
var quickSort = function(arr) {
if (arr.length <= 1) {
return arr;
}
var len = arr.length;
var midIndex = Math.floor(len/2);
var mid = arr.splice(midIndex,1);
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < mid) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat(mid,quickSort(right))
}
// 去重
var distinct = function(arr) {
var map = {};
var result = [];
for (var i = 0; i < arr.length; i++) {
if (!map[arr[i]]) {
map[arr[i]] = true;
result.push(arr[i]);
}
}
return result;
}
//查找字符串中最多的值
var search = function(str) {
var json = {};
var max = 0;
var char;
for (var i = 0; i < str.length; i++) {
if (!json[str[i]]) {
json[str[i]]=1;
} else {
json[str[i]]++;
}
}
console.log(json);
for(var i in json){
if(json[i]>max){
max = json[i];
char = i;
}
}
console.log(max, char);
}
80.函數組合繼承
原型繼承、構造函數繼承、call aplly繼承
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();
81.事件綁定
var addEvent = function(e, type, handler, capture ) {
if (e.addEventListener) {
e.addEventListener(type, handler, capture);
} else if (e.attachEvent) {
e.attachEvent('on'+type, handler);
} else {
e['on'+type] = handler;
}
}
82.淺克隆和深度克隆
//淺克隆
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
//深度克隆
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;
}
es6的深度克隆
通過Object.getPrototypeOf函數得到obj被克隆函數的原型上的屬性，然后通過Object.assign實現深度克隆。
const deepClone=(obj)=>{
var proto=Object.getPrototypeOf(obj);
return Object.assign({},Object.create(proto),obj);
}
83.實現一個秒針繞一點轉動的效果
animation: move 60s infinite steps(60);
/*設置旋轉的中心點為中間底部*/
transform-origin: center bottom;
/*旋轉從0度到360度*/
@keyframes move {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
84.移動端兼容問題
IOS移動端click事件300ms的延遲響應
一些情況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發，css增加cursor:pointer就搞定了
85.bootstrap的柵格系統如何實現的
box-sizing: border-box;
container row column設置百分比
85.js基本類型及判斷方法
null, undefined，bool，number，string，object，symbol（es6 獨一無二）
1.typeof()出來的沒有null 對象,數組和null typeof(x) = "object"
2.instanceof() 對象的原型是否在對象的原型鏈上
如下：判斷Person的原型是否在p的原型鏈上
function Person(){};
var p =new Person();
console.log(p instanceof Person);//true
3.Object.prototype.toString.call()
每種對象對toString都進行了改寫，只有Object.prototype.toString.call(obj)可以進行類型判斷
var a=new Number(12); var toString=Object.prototype.toString; console.log(toString.call(a));//'[object Number]'' console.log(a.toString());//'12'
86 JavaScript為什么是單線程？eventloop
JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。
比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為准？
異步執行：
（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。
（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，於是結束等待狀態，進入執行棧，開始執行。
（4）主線程不斷重復上面的第三步。
主線程從”任務隊列”中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）。
node里的process.nextTick指定的回調函數是在本次”事件循環”觸發，而setImmediate指定的是在下次”事件循環”觸發，所以很顯然，前者總是比后者發生得早，而且執行效率也高。
87 http http2 https
http(超文本傳輸協議)是一種常用於應用層的協議，它是基於文本傳輸內容。
https可以稱為http安全版，主要是http下增加了SSL(安全套接層)或者TSL(傳輸層安全)，在SSL或TSL在傳輸層對數據進行了加密處理。
http/2（超文本傳輸協議第二版），他對http進行了一些升級改造
- 新的二進制格式
- 多路復用
- header壓縮
- 支持server push
87 枚舉
88 meta屬性
1.name 網頁描述
<meta name="參數" content="描述內容">
a.keword
b.description
c.viewport
2.http-equiv http相關描述
<meta http-equiv="參數" content="描述內容">
a.content-type
b.cache-control
c.expires
89 react 相關
react router：
實現URL與UI界面的同步。其中在react-router中，URL對應Location對象，而UI是由react components來決定的，這樣就轉變成location與components之間的同步問題。
react事件：
React並不是將click事件綁在該div的真實DOM上，而是在document處監聽所有支持的事件，當事件發生並冒泡至document處時，React將事件內容封裝並交由真正的處理函數運行。
90 js css加載順序
js全阻塞，css半阻塞
- JS 會阻塞后續 DOM 解析以及其它資源(如 CSS，JS 或圖片資源)的加載。
- CSS 不會阻塞后續 DOM 結構的解析，不會阻塞其它資源(如圖片)的加載，但是會阻塞 JS 文件的加載。
- 現代瀏覽器很聰明，會進行 prefetch 優化，瀏覽器在獲得 html 文檔之后會對頁面上引用的資源進行提前下載。
js為什么阻塞？
- JS 運行在瀏覽器中，是單線程的，每個 window 一個 JS 線程，所以當然會阻塞后續 DOM 樹的解析咯。
- JS 有可能會修改 DOM 結構，給 DOM 添加樣式等等，所以這就意味着在當前 JS 加載執行完成前，后續資源的加載可能是沒有意義的
css為什么阻塞js？
JS 代碼在執行前，瀏覽器必須保證在 JS 之前的所有 CSS 樣式都解析完成，不然不就亂套了，前面的 CSS 樣式可能會覆蓋 JS 文件中定義的元素樣式，這是 CSS 阻塞后續 JS 執行的根本原因。
defer，async？
JS 會阻塞后續 DOM 解析以及其它資源(如 CSS，JS 或圖片資源)的加載，這是在沒有考慮到 defer, async 的情況下。
- 由於現代瀏覽器都存在 prefetch，所以 defer, async 可能並沒有太多的用途，可以作為了解擴展知識，僅僅將腳本文件放到 body 底部就可以起到很不錯的優化效果。
- defer 和 async 都是異步加載腳本文件，defer異步加載，最后執行。
- 慎用 async，因為它完全不考慮依賴關系，只要下載完后就加載，不考慮此時頁面樣式先后的加載順序，不過它對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics。
- 耗時較長的腳本代碼可以使用 defer 來推遲執行。
91. 三次握手四次揮手
第一次握手：客戶端請求與服務端建立連接。第二次：服務端返回確認信息。第三次：客戶端收到。
客戶：喂？你在嗎？我想跟你聊會兒天兒！（發送SYN請求同步報文）
服務：好的，我聽着呢（發送SYN請求同步報文，意思是說，咱倆同步着呢），你說吧！（發送ACK確認報文，即可以說了）
客戶：好的！（發送ACK確認報文，開始吐槽XXXX）
第一次揮手：客戶端傳完了，想要斷開連接。第二次：服務端收到，半關閉狀態。第三次：服務端沒信息發了，發送結束報文。第四次：客戶端確認，關閉。
然后客戶有事兒要掛電話了，又有了下面一段對話，即四次揮手：
客戶：我有事兒要掛電話了！（發送Fin結束報文，1次揮手）
服務：好吧（發送ACK確認報文，2次揮手），對了，還有個事兒要跟你說！
......
服務：好了，就這些了，掛了吧！（發送Fin結束報文，3次揮手）
客戶：行，掛了吧！（發送ACK確認報文，4次揮手）
服務掛斷電話.....
2MSL后......
客戶：喂，你還在嗎？
啪！（這才斷開連接）
為什么四次揮手？
當被動方收到主動方的FIN報文通知時，它僅僅表示主動方沒有數據再發送給被動方了。
但未必被動方所有的數據都完整的發送給了主動方，所以被動方不會馬上關閉SOCKET,它可能還需要發送一些數據給主動方后，