2017前端面試題

時間  2019-11-12
標籤 端面 試題 简体版
原文   原文鏈接

1：爲什麼選擇前端這個方向和對前端的理解javascript

爲何：php

第一的話就是對前端很感興趣，以前也接觸過其餘的語言，可是直到接觸到前端才發現真的有興趣作下去，興趣是一我的最好的老師，css

第二的話前端頗有前途，像如今nodejs，rn，微信小程序這類工具和框架可讓前端進行後端和移動開發，因此我以爲前端的前途會更多一點。html

理解：前端

首先前端工程師最核心的技能仍是：Html、CSS、JS。前端負責的是用戶能夠看到的部分，因此也是最接近用戶的工程師。同時在產品研發流程中前端要同時與產品、設計、後端等不少人合做。vue

2：Vue雙向數據綁定的實現html5

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者（文本節點則是做爲訂閱者），在收到消息後執行相應的更新操做。java

compile主要作的事情是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖node

MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。react

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%;
     #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    #eee;

　　

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%;
     #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    #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寫一個快速排序

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%);

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

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中獲取。

  • 父子組件怎麼通訊的?
　　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：清除浮動

兩種原理：

一、利用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、具備清除屬性的、不可見的塊級元素。

二、將父容器造成BFC

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

  1. 內部的Box會在垂直方向，一個接一個地放置。
  2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
  4. BFC的區域不會與float box重疊。
  5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  6. 計算BFC的高度時，浮動元素也參與計算

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

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

  1. 根元素
  2. float屬性不爲none
  3. position爲absolute或fixed
  4. display爲inline-block, table-cell, table-caption, flex, inline-flex
  5. 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設置百分比
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程