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：如何取出一個數組里的圖片並按順序顯示出來
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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實現局部刷新.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
xmlHttp = new XMLHttpRequest();
xmlHttp.open(
'GET'
,
'demo.php'
,
'true'
);
xmlHttp.send()
xmlHttp.onreadystatechange =
function
(){
if
(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
|
使用promise封裝
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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，輸出對應的下標
|
1
2
3
4
5
6
7
8
|
var
lis = querySelectorAll('li')
for
(
var
i=0;i<10;i++){
lis[i].onclick = (
function
(a) {
return
function() {
alert(a)
}
})(i)
}
|
事件委托
利用冒泡的原理，把事件加到父級上，觸發執行效果。
1.可以大量節省內存占用，減少事件注冊。
2.可以方便地動態添加和修改元素，不需要因為元素的改動而修改事件綁定。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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清掉，重新開始。
如果計時完畢，沒有方法進來訪問觸發，則執行代碼。
|
1
2
3
4
5
6
7
8
|
//函數防抖
var
timer = false
document.getElementById(
"debounce"
).onScroll =
function
() {
clearTimeout(timer)
timer = setTimeout(
function
(){
console.log(‘函數防抖’)
}, 300)
}
|
函數節流是指一定時間內js方法只跑一次
函數節流的要點是，聲明一個變量當標志位，記錄當前代碼是否在執行。
如果空閑，則可以正常觸發方法執行。
如果代碼正在執行，則取消這次方法執行，直接return。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//函數節流
var
canScroll = true;
document.getElementById(
'throttle'
).onScroll =
function
() {
if
(!canScroll) {
return
;
}
canScroll =
false
;
setTimeout(
function
(){
console.log(
'函數節流'
);
canScroll =
true
;
},300)
}
|
28：編程實現輸出一個數組中第N大的數據
29.實現兩欄布局有哪些方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
*{margin:0; padding: 0;}
html,body{
height: 100%;
/*高度百分百顯示*/
}
#left{
width: 300px;
height: 100%;
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
*{margin:0; padding: 0;}
html,body{
height: 100%;
/*高度百分百顯示*/
}
#left{
width: 300px;
height: 100%;
|
第二種方法，我利用的是創建一個新的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寫一個快速排序
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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: 寫一個組合繼承
|
1
2
3
4
5
6
7
8
9
|
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：深拷貝方案有哪些，手寫一個深拷貝
|
1
2
3
4
5
6
7
|
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 函數里
|
1
2
3
4
5
6
7
8
9
10
11
|
<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的原型鏈，如何實現繼承？
|
1
2
3
4
5
6
7
8
|
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：圖片預加載和懶加載
預加載：
|
1
2
3
4
5
6
7
8
9
10
11
|
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的值賦予該圖片。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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偽元素：
|
1
2
3
4
5
6
7
|
.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時調出來依次觸發事件響應函數即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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的查詢參數解析成字典對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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.兩個數組合並成一個數組排序返回
先依次比較兩個數組，按照小的就傳入新的數組。當這次比較完之后可能有一個數組的長度很長，留下一些數組，然后在新數組的末尾插入即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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之間的隨機數，存在數組中，常見排序方法，數組亂序方法
|
1
2
3
4
5
6
|
var
arr = [];
for
(
var
i = 0;i<10;i++){
var
num = Math.random()*30 + 20;
num = parseInt(num, 10);
arr.push(num);
}
|
|
1
2
3
|
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.冒泡排序、快速排序、去重、查找字符串最多值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//冒泡排序
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;
};
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//快速排序
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))
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 去重
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;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//查找字符串中最多的值
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繼承
|
1
2
3
4
5
6
7
8
9
|
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.事件綁定
|
1
2
3
4
5
6
7
8
9
|
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.淺克隆和深度克隆
|
1
2
3
4
5
6
7
8
9
|
//淺克隆
function
extendCopy(p) {
var
c = {};
for
(var i in p) {
c[i] = p[i];
}
c.uber = p;
return
c;
}
|
|
1
|
|
|
1
2
3
4
5
6
7
8
|
//深度克隆
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;
}
|
83.實現一個秒針繞一點轉動的效果
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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設置百分比