2017前端面試題總結


 

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

為什么:

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

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

理解:

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

2:Vue雙向數據綁定的實現

vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的settergetter,在數據變動時發布消息給訂閱者(文本節點則是作為訂閱者),在收到消息后執行相應的更新操作。

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(強緩存)+過期時間   ExpiresHTTP1.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-growflex-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,水平方向的scrollbarmargin

offsetHeight:包括內容可見部分的高度,border,可見的padding,水平方向的scrollbar(如果存在);不包括margin

scrollHeight:包括內容的高度(可見與不可見),padding(可見與不可見);不包括bordermargin

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通過importexport實現模塊的輸入輸出。其中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偽元素:

1
2
3
4
5
6
7
.clearfix:after {
   content:  "." ;
   height: 0;
   visibility: hidden;
   display: block;
   clear: both;
}

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

2、將父容器形成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設置百分比


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM