2019前端面試題總結

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

 

基本信息

1.你以爲前端工程師的價值體如今哪？

  • 爲簡化用戶使用提供技術支持（交互部分）
  • 爲多個瀏覽器兼容性提供支持
  • 爲提升用戶瀏覽速度（瀏覽器性能）提供支持
  • 爲跨平臺或者其餘基於webkit或者其餘渲染引擎的應用提供支持
  • 爲展現數據提供支持（數據接口）



HTML/HTML5

1.知道語義化嗎？說說你理解的語義化，若是是你，平時會怎麼作來保證語義化？

  • 像html5的新的標籤header,footer,section等就是語義化
  • 一方面，語義化就是讓計算機可以快讀的讀懂內容，高效的處理信息，能夠對搜索引擎更友好
  • 另外一方面，便於與他人的協做，他人經過讀代碼就能夠理解你網頁標籤的意義
  • 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
  • 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
  • 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義方式來渲染網頁
  • 便於團隊開發和維護，語義化更具備可讀性，是下一步把網頁的重要動向，遵循W3C標準的團隊都要遵循這個標準，減小差別化
 

2.介紹HTML5的新特性

  • 新的DOCTYPE聲明<!DOCTYPE html>
  • 徹底支持css3
  • video和audio
  • 本地存儲
  • 語義化表圈
  • canvas
  • 新事件如 ondrag onresize

3.若是解決ajax沒法後退的問題？

  • html5裏引入了新的API，即：history.pushState,history.replaceState
  • 能夠經過pushState和replaceSate接口瀏覽器歷史，而且改變當前頁面的URL
  • onpopstate監聽後退

 

4.websocket和ajax輪詢

  • websocket是html5中提出的新的協議，能夠實現客戶端與服務器的通訊，實現服務器的推送功能
  • 優勢是，只要簡歷一次鏈接，就能夠接二連三的獲得服務器推送消息，節省帶寬和服務器端的壓力。
  • ajax輪詢模擬常鏈接就是每隔一段時間（0.5s）就向服務器發起ajax請求，查詢服務器是否有數據更新
  • 缺點就是，每次都要創建HTTP鏈接，即便須要傳輸的數據很是少，浪費帶寬

 

5.web worker和websocket

　　worker主線程：
  • 經過worker = new worker(url)加載一個js文件來建立一個worker，同時返回一個worker實例
  • 經過worker.postMessage(data)方法來向worker發送數據。
  • 綁定worker.onmessage方法來接收worder發送過來的數據
  • 可使用worker.terminate()來終止一個worder的執行。
 
　　websocket
  • 是web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。他是一個HTML5協議，websocket連接是持久的，經過在客戶端和服務器之間保持雙向連接，服務器的更新能夠被及時推送給客戶端，而不須要客戶端以必定的時間去輪詢

 

6.Doctype做用？嚴格模式與混雜模式若是區分？意義？

  • <!DOCTYPE>聲明位於文檔的最前面，處於標籤以前。告知瀏覽器以何種模式來渲染文檔
  • 嚴格模式的排版和js運做模式是 以該瀏覽器支持的最高標準運行
  • 在混雜模式中，頁面已寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做
  • DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現

 

7.Doctype多少種文檔類型？

  • 該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔
  • HTML4.01規定了三種文檔類型：Strict, Transitional以及Frameset
  • XHTML 1.0規定了三種XML文檔類型：Strict, Transitional以及Franmeset
  • Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標籤的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁

 

8.HTML與XHTML，有什麼區別？

  • 全部的標籤必需要有一個相應的結束標籤
  • 全部標籤的元素和屬性的名字都必須使用小寫
  • 全部的XML標記都必須合理嵌套
  • 全部的屬性必須引號「」括起來
  • 把全部的<和&特殊符號用編碼表示
  • 給全部屬性賦一個值
  • 不要在註釋內容使用'--'
  • 圖片必需要有說明文字

 

 

CSS

1.content-box和border-box，爲何看起來content-box更合理，但仍是常用border-box?

  • content-box是W3C的標準盒模型 元素寬度+padding+border
  • border-box 是ie的怪異盒模型，他的元素寬度等於內容寬度 內容寬度包含了padding和border
  • 好比有時候在元素基礎上添加內邊距padding或border會將佈局撐破 可是使用border-box就能夠輕鬆完成

 

2.實現三個DIV等分排在一行（考察border-box)

1.設置border-box width 33.33%
2.flexbox flex:1

 

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

方法一： 
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
#left{
width: 300%;
height: 100%;
 
float: left;
}
#right{
height: 100%;
margin-left: 300px;
background-color: #eee;
}

 

方法二： 
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
#left{
width: 300px;
height: 100%;
 
float: left;
}
#right{
height: 100%;
overflow: hidden;
backrgound-color: #eee;
}
以上第二種方法，利用建立一個新的BFC(塊級格式化剩下文)來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。
 
它能夠經過下一任和一種方式來建立
  • float的值不爲none
  • position的值不爲static 或者 relative
  • display的值爲table-cell，table-caption，inline-block，flex，或者inline-flex其中一個
  • overflow的值不爲visible

 

方法三：flex佈局
 

4.flex屬性值是多少？

  • flex屬性是flex-grow,flex-shrink 和 flex-basis的簡寫
  • flex-grow屬性定義項目的放大比例，默認爲0
  • flex-shrink屬性定義了項目的縮小比例，默認爲1
  • flex-basis屬性定義了項目的固定空間

5.怎麼實現一個DIV左上角到右下角的移動，有哪些方法？怎麼實現？

  • 改變left值爲window寬度-div寬度 top值爲window高度=div高度
  • jquery的animate方法
  • css3的transition

6.垂直居中

  • 單行行內元素
    • 能夠設置padding-top,padding-bottom
    • 將height和line-height設爲相等
  • 多行行內元素
    • 能夠將元素轉爲tabel樣式，再設置vertical-align:middle;
    • 使用flex佈局
  • 塊級元素
    • 已知高度絕對定位負邊距
    • 未知高度transform:translateY(-50%);
    • flex佈局 
      display: flex;
justify-content: center;
aligin-items: center;　

7.rem 和 em的區別？

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

8.清除浮動

  • 利用clear屬性進行清理
    • 父容器結尾插入空標籤 
      <div style="clear: both;"></div>
    • 利用css僞元素： 
      .clearfix:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
  • 將父容器造成BFC
    • BFC能清理浮動主要運用的是它的佈局規則：
      • 內部的Box會在垂直方向，一個接一個的放置
      • box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊
      • 每一個元素margin box的左邊，與包含快border box的左邊相接觸（對於從左往右的格式化，不然相反）。即便存在浮動也是如此
      • BFC的區域不會與float box重疊
      • BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也是如此
      • 計算BFC的高度時，浮動元素也參與計算
    • 浮動清理利用的主要是第六條規則，只要將父容器出發爲BFC，就能夠實現包含的效果。那麼出發BFC有哪一種方法？
      • 根元素
      • float屬性不爲noe
      • position爲absolute或fixed
      • display爲inline-block，table-cell，table-caption，flex，inline-flex
      • overflow不爲visible

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

  • relative:相對定位，相對於本身自己在正常文檔流中的位置進行定位。
  • absolute:生成絕對定位，相對於最近一級定位不爲static的父元素進行定位。
  • fixed: （老版本IE不支持）生成絕對定位，相對於瀏覽器窗口或者frame進行定位。
  • static:默認值，沒有定位，元素出如今正常的文檔流中。
  • sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。

10.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

  • 選擇符：
    • id選擇器（#myId）
    • 類選擇器（.myClassName）
    • 標籤選擇器（div,p,h1）
    • 相鄰選擇器（h1 + p）
    • 子選擇器（ul > li）
    • 後代選擇器（li a）
    • 通配符選擇器（*）
    • 屬性選擇器（button[disabled="true"]）
    • 僞類選擇器（a:hover,li:nth-child）
  • 優先級：
    • !important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 僞類（比重1）;
  • 僞類和僞元素區別：
    • a:hover,li:nth-child
    • 僞元素：li:before、:after,:first-letter,:first-line,:selecton

11.介紹sass

　　定義變量css嵌套，容許在代碼中使用算式，支持if判斷for循環php

12.transition 和 margin的百分比根據什麼計算？

　　transition是相對於自身；margin相對於參照物css

13.實現一個秒針繞一點轉動的效果

animation: move 60s infinite steps(60); 
/*設置旋轉的中心點爲中間底部*/ 
transform-origin: center bottom; 
/*旋轉從0度到360度*/ 
@keyframes move { 
    from { 
        transform: rotate(0deg); 
    } 
    to { 
        transform: rotate(360deg); 
    } 
}

14.display:none和visibility:hidden的區別？

  • display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
  • visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

15.CSS中link 和@import的區別是？

  • link屬於HTML標籤，而@import是CSS提供的;
  • 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
  • import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
  • link方式的樣式的權重 高於@import的權重.

16.對BFC規範的理解？

  • BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
  • （W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。

 

JS

1.介紹一下閉包和閉包經常使用場景？

  • 使用閉包主要爲了設計私有的方法和變量，閉包的有點事能夠避免變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念。
  • 閉包有三個特性：
    • 函數嵌套函數
    • 函數內部能夠引用外部的參數和變量
    • 參數和變量不會被垃圾回收機制回收
  • 閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包常見方式，就是在一個函數的內部建立另外一個函數
    • 應用場景，設置私有變量的方法
    • 不適用場景：返回閉包的函數是個很是大的函數
    • 閉包的缺點就是常駐內存，會增大內存使用量，使用不當會形成內存泄漏

2.爲何會出現閉包這種東西？解決了什麼問題？

　　受javascript鏈式做用域鏈的影響，父級變量中沒法訪問到子級的變量值html

3.介紹一下你所瞭解的做用域鏈，做用域鏈的盡頭是什麼？爲何？

  • 每個函數都有一個做用域，好比建立了一個函數，函數裏面又包含了一個函數，那麼如今又三個做用域，這樣就造成了一個做用域鏈
  • 做用域的特色就是，先在本身的變量範圍中查找，若是找不到，就會沿着做用域鏈網上找

4.ajax簡歷的過程是怎樣的，主要用到哪些狀態碼？

  • 建立XMLHttpRequest對象，也就是建立一個異步調用對象
  • 建立一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證信息
  • 設置響應HTTP請求狀態變化函數
  • 發送HTTP請求
  • 獲取異步調用返回的數據
  • 使用javascript和DOM實現局部刷新 
    var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
 if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

 }
}

5.使用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.readerSate == 4){
                if(XHR.status == 200){
                    try {
                        var response = JSON.parse(XHR.responseText);
                           resilve(response);
                    } cath(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沒找到頁面
    • 403禁止訪問
    • 500內部服務器出錯
    • 200正常
    • 304被又被修改(not modified)（服務器返回304狀態，表示源文件沒有被修改）
  • 說說你還知道的其餘狀態碼，狀態碼的存在解決了什麼問題？
    • 302/307 臨時重定向
    • 301 永久重定向
    • 藉助狀態碼，用戶能夠知道服務器端是正常處理了請求，仍是出現了什麼錯誤

6.事件委託

  • 利用冒泡原理，把時間加到父級上，觸發執行效果
  • 能夠大量節省內存佔用，減小事件註冊
  • 能夠方便地動態添加和修改元素，不須要由於元素的改動而修改時間綁定 
    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); 
        } 
    } 
});

7.javascript的內存回收機制？

  • 垃圾回收器會每隔一段時間找出那些再也不使用的內存，而後爲其釋放內存
  • 通常使用標記清除方法 當變量進入環境標記爲進入環境，離開環境標記爲離開環境
  • 還有引用計數方法


　　堆棧前端

  • stack爲自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放
  • 基本數據類型存放在棧中
  • 引用類型 存放在堆內存中，首先從棧中得到該對象的地址指針，而後再從堆內存中取得所需的數據

8.函數防抖和函數節流？

  • 函數防抖是指頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次
  • 函數防抖的要點，也是要一個setTImeout來輔助實現。延遲執行須要跑的代碼
  • 若是方法屢次觸發，則要把上次記錄的延遲執行代碼用clearTimeout清掉，從新開始
  • 若是計時完畢，沒有方法進來訪問觸發，則執行代碼 
    var tiemr = false;
document.getElementById(‘debounce’,onScrll = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        console.log('111')
    }, 300);
}

 9.javascript中的this是什麼，有什麼用，指向上面？

  •  全局代碼中的this是指向全局對象
  • 做爲對象的方法調用時指向調用這個函數的對象
  • 做爲構造函數指向建立的對象
  • 使用apply和call設置this

10.判斷數組有哪些方法？

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

11.嚴格模式的特性？

  • 對javascript的語法和行爲，都作了一些改變
  • 全局變量必須顯式的聲明。
  • 對象不能有重名的屬性
  • 函數必須聲明在頂層
  • 消除js語法的一些不合理，不嚴謹之處，減小一些怪異行爲
  • 消除代碼運行的一些不安全之處，保證代碼運行的安全
  • 提升編譯效率，增長運行速度
  • 爲將來新版本的js作好鋪墊

12.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

13.圖片懶加載

　　當頁面滾動的時間被觸發->執行加載圖片操做->判斷圖片是否在可視區域內->在，則動態將data-src的值賦予該圖片vue

14.webpack經常使用到哪些功能？

  • 設置入口
  • 設置輸出目錄
  • 設置loader
  • extract-text-webpack-plugin將css從js代碼中抽出併合並
  • 處理圖片文字等功能
  • 解析jsx解析bable

15.函數組合繼承

　　原型繼承，構造函數繼承，call apply繼承html5

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()'

16.對做用域鏈的理解

　　做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序耳朵，做用域鏈額變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的java

17.js垃圾回收方法

　　標記清除（mark and sweep）react

  • 這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。
  • 垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了

　　引用計數(reference counting)jquery

  • 在低版本IE中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。
  • 在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收，但BOM與DOM對象倒是經過引用計數回收垃圾的， 也就是說只要涉及BOM及DOM就會出現循環引用問題。

18.js繼承方式及其優缺點

　　原型鏈繼承的缺點

  • 一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數

　　借用構造函數（類試繼承）

  • 借用構造函數雖然解決了剛纔兩種問題，可是沒有原型，則複用無從談起，須要原型鏈+借用構造函數的模式，這種模式成爲組合繼承

　　組合式繼承

  • 組合式繼承是比較經常使用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承，這樣，即經過在原型上定義方法實現了函數複用，有保證每一個實例都有它本身的屬性

ES6

1.let和const的區別？

  • let聲明的變量能夠改變，值和類型均可以改變，沒有限制
  • const聲明的變量不得改變值

2.平時用了es6的哪些疼，和es5有什麼不一樣？

  • let,const,箭頭函數，字符串模板，class類，模塊化，promise
  • ES5 reuqire,react,createclass

3.介紹promise

  • 就是一個對象，用來傳遞異步操做的消息。有三種狀態：pending(進行中)，resolved(已完成)和rejected(失敗)
  • 有了promise對象，就能夠將異步操做以同步操做的流程表示出來，避免了層層嵌套的回調函數

前端框架

模塊化

1.使用模塊化加載時，模塊記載的順序是怎麼樣的，若是不知道，根據已有的知識，加載順序是怎麼樣的

  • commonjs 同步 循序執行
  • AMD 提早加載，無論是否調用模塊，先解析全部模塊require速度快 有可能浪費資源
  • CMD提早加載，在正真須要使用（依賴）模塊時才解析該模塊
  • seajs按需解析，性能比AMD差

框架問題

1.什麼是MVVM，和MVC有什麼區別，原理是什麼？

  • mvc的界面和邏輯關聯緊密，數據直接從數據庫讀取，必須經過controller來承上啓下，通訊都是單向的
  • mvvm的view 和 viewModel能夠互相通訊，界面數據從viewmodel中獲取

2.父子組件通訊

  • vue：父組件是經過props屬性給子組件通訊，在子組件裏面emit，在父組件監聽
  • react：props傳遞 父給子穿一個回調函數，將數據傳給父親處理

3.兄弟組件怎麼通訊的？

  • vuex 創建一個vue的實例，emit觸發時間 on監聽時間
  • redux 子A ->父->子B

4.生命週期有哪些，怎麼用？

  • beforecreated: el 和 data並未初始化
  • created： 完成了 data數據的溫馨化，el沒有
  • beforeMount：完成了el 和 data初始化
  • mounted：完成掛載，updated,destroyed

瀏覽器

1.跨域通訊有哪些解決方案？

  • JSONP:
    • 因爲同源策略的限制，XMLHttpRequest只容許請求當前資源（域名、協議、端口）的資源，script標籤沒有同源限制，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。
    • 經過動態<script>元素使用，使用時爲src制定一個跨域url。回調函數處理JSON數據

　　　優勢：兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊

　　　缺點：只支持GET請求

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：
    • 服務器端對於CORS的支持，只要就是經過設置Access-Control-Allow-Orgin來進行的。若是瀏覽器檢測到響應的設置，就能夠容許ajax進行跨域訪問。
    • 經過設置Access-Control-Allow-Orgin來容許跨域，cors能夠用ajax發請求獲取數據，可是兼容性沒有jsonp好
  • 經過修改document.domain來跨子域
    • 將子域和主域的doucment.domain設爲同一個主域，前提條件：這兩個域名必須屬於同一個基礎域名！並且所用的協議，端口都要一致
    • 主域相同的使用document.domain
  • 使用window.name來進行跨域
    • window對象有個name屬性，該屬性有個特徵：即在一個窗口的生命週期內，窗口載入的全部的頁面都是共享一個window.name。每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的
  • 使用HTML5中心引進的window.postMessage方法來跨域傳送數據
  • 還有flash，在服務器上設置代理頁面等跨域方式。

2.移動端兼容問題

  • IOS移動端click時間300ms的延遲響應
  • 一些狀況下對非可點擊元素如（label,span）監聽click時間，ios下不會觸發，css增長cursor:poiner就搞定了

3.XML和JSON的區別？

  • 數據體積方面：JSON相對於XML來說，數據的體積小，傳遞的速度更快些
  • 數據交互方面：JSON與js的交互更加方便，更容易解析處理，更好的數據交互
  • 數據描述方面：JSON對數據的描述性比XML較差
  • 傳輸速度方面：JSON的速度遠遠要快於XML

4.漸進加強和優雅降級

  • 漸進加強：針對低版本的瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗效果
  • 優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

 構建工具

1.webpack的理解，和gulp有什麼不一樣？

  • webpack是模塊打包工具，會分析模塊間的依賴關係，而後使用Loaders處理他們，最後生成一個優化而且合併後的靜態資源
  • gulp是前端自動化工具，可以優化前端工做流程，好比文件合併壓縮

2.webpack打包速度很慢， 爲何？怎麼解決？

  • 模塊太多
  • webpck能夠配置externals來將依賴的庫指向全局變量，從而再也不打包這個庫

3.對webpack的見解

  • webpack是一個模塊打包工具，可使用webpack管理你的模塊依賴，並編譯輸出模塊們所須要的靜態文件。能很好的管理、打包web開發中所用到的HTML、js、css以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。
  • webpack兩大特點：
    • code splitting（能夠自動完成）
    • loader 能夠處理各類類型的靜態文件，而且支持串聯操做
      webpack是以commonJS的形式來書寫腳本，可是AMD/CMD的支持也很全面，方便舊項目進行代碼遷移
  • webpck具備require和browserify的功能，但仍有不少本身的新特性：
    • 對 CommonJS、AMD、ES6的語法作了兼容
    • 對JS、css、圖片等資源文件都支持打包
    • 串聯式模塊化加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對conffeescript、ES6的支持
    • 有獨立的配置文件webpck.config.js
    • 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間
    • 支持sourceUrls和sourceMaps，易於調試
    • 具備強大的plugin接口，大可能是內部插件，使用起來比較靈活
    • webpack使用異步IO並具備多級緩存，在增亮編譯上更加快

網絡&存儲

1.http響應中content-type包含哪些內容？

  • 請求中的消息主題是用何種方式解碼
  • application/x-www-form-urlencoded
  • 這是最多見的post提交數據的方式，按照key1=val1&key2=val2的方式進行編碼
  • application/json
  • 告訴服務器端消息主體是序列化後json字符串

2.get和post有什麼不一樣？

  • get是從服務器上獲取數據，post是像服務器傳送數據
  • get請求能夠將查詢字符串參數追加到url的末尾；post請求英國把數據做爲請求的主體提交
  • get請求數據有大小限制；post沒有
  • post比get安全性更高

3.cookie和session有什麼聯繫和區別？

  • cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
  • session比cookie更安全
  • 單個cookie保存的數據不能超過4k，不少瀏覽器都限制一個站點最多保存20個cookie
  • 通常用cookie來存儲sessionid

4.多頁面通訊有哪些方案，各有什麼不一樣？

  • localstroge在一個標籤頁裏唄添加、修改、刪除時，都會觸發一個storage事件，經過另外一個標籤頁裏監聽storage事件，便可獲得localstorge存儲的值，實現不一樣標籤頁之間的通訊
  • settimeout+cookie

5.輸入網站後到頁面展示是過程？

  • 經過dns解析獲取ip
  • 經過dns解析獲取ip
  • tcp連接
  • 客戶端發送http請求
  • tcp傳輸報文
  • 服務器處理請求返回http報文

6.客戶端解析渲染頁面

　　構建DOM樹->構建渲染樹->佈局渲染樹：計算盒模型位置和大小->繪製渲染樹

7.前端性能優化

  • 代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器
  • 緩存利用：緩存ajax，使用CDN，使用外部js和css文件以便緩存
  • 添加expires頭，服務器配置Etag，減小DNS查找
  • 請數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載
  • 請求帶寬：壓縮文件，開始GZIP
  • 代碼層面的優化：
    • 用hash-table來優化查找
    • 少用全局變量
    • 用innerHTML代替DOM操做，減小DOM操做次數，優化js性能
    • 用setTimeout來避免頁面是去響應
    • 緩存DOM節點查找的結果
    • 避免使用css Expression
    • 避免全局查詢
    • 避免使用with（with會建立本身的做用域，會增長做用域鏈長度）
    • 多少變量聲明合併
    • 避免圖片和iframe等的空src，空src會從新加載當前頁面，印象速度和效率
    • 儘可能避免寫在HTML標籤中寫style屬性
  • 樣式放在頂部，腳本放在底部

8.移動端性能優化

  • 儘可能使用css3動畫，開啓硬件加速
  • 適當使用touch時間代替click時間
  • 避免使用css3漸變陰影效果
  • 能夠用transform: translateZ(0) 來開啓硬件加速
  • 不濫用float。float在渲染時計算量比較大，儘可能減小使用
  • 不濫用web字體。web字體須要下載，解析，重繪當前頁面
  • 合理使用requestAnimationFrame動畫代替setTimeout
  • css中的屬性（css3 transitions、css3 3D transforms、opacity、webGL、video）會觸發GUP渲染，耗電

9.分域名請求圖片的緣由和好處？

  • 瀏覽器的併發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞
  • 瀏覽器併發請求有個數限制，分域名能夠同時併發請求大量圖片

10.頁面的加載順醋

  • html順序加載，其中js會阻塞後續dom和資源加載，css不會阻塞dom和資源的加載
  • 瀏覽器會使用prefetch對引用的資源提早下載
    • 沒有defer或async，瀏覽器會當即加載並執行指定的腳本
    • 有async，加載和渲染後續文檔元素的過程將和script.js的加載與執行並行進行（下載一部，執行同步，加載完就執行）
    • 有defer，加載後續文檔元素的過程將和script.js的加載並行進行（異步），可是script.js的執行要在全部元素解析完成以後，DOMContentLoaded事件觸發以前完成

11.計算機網絡的分層概述

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

12.jscss緩存問題

  • 瀏覽器緩存的意義在於提升了執行效率，可是也隨之帶來一些問題，致使修改了js、css，客戶端不能更新
  • 都加上了一個時間戳做爲版本號
  • <script type="text/javascript" src="{js文件路徑}?version=XXXXXX"></script>

13.說說tcp傳輸的三次握手 四次握手策略

　　三次握手：

  • 爲了準確無誤地吧數據送達目標處，TCP協議採用了三次握手策略。用TCP協議把數據包送出去後，TCP不會對傳送後的狀況置之不理，他必定會向對方確認是否送達，握手過程當中使用TCP的標誌：SYN和ACK
  • 發送端首先發送一個帶SYN的標誌的數據包給對方，接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息
  • 最後，發送端再回傳一個帶ACK的標誌的數據包，表明「握手」結束
  • 如在握手過程當中某個階段莫明中斷，TCP協議會再次以相同的順序發送相同的數據包

　　斷開一個TCP鏈接須要「四次握手」

  • 第一次揮手：主動關閉方發送一個FIN，用來關注主動方到被動關閉方的數據傳送，也便是主動關閉方告誡被動關閉方：我已經不會再給你發數據了（在FIN包以前發送的數據，若是沒有收到對應的ACK確認報文，主動關閉方依然會重發這些數據）。可是，此時主動關閉方還能夠接受數據
  • 第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，確認序號收到序號 +1（與SYN相同，一個 FIN佔用一個序號）
  • 第三次揮手：被動關閉方發送一個 FIN。用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，個人數據也發送完了，不會給你發送數據了
  • 第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，確認序號爲收到序號+1，至此，完成四次握手

14.TCP和UDP的區別？

  • TCP是基於鏈接的協議，也就是說，在正式收發數據前，必須和對方簡歷可靠的鏈接。一個TCP鏈接必需要通過三次「對話」才能創建起來
  • UDP是與TCP相應的協議。他是面向非鏈接的協議，他不與對方創建鏈接，而是直接就把數據包發送過去了
  • UDP適用於一次只傳送少許數據，對可靠性要求不高的應用環境

15.HTTP和HTTPS

  • HTTP協議一般承載與 TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的HTTPS
  • 默認HTTP的端口號爲80，HTTPS的端口號爲443

16.爲何HTTPS安全

　　由於網絡請求須要中間有不少的服務器路由的轉發，中間的節點均可能篡改信息，而若是使用HTTPS，密鑰在你和終點站纔有，https之全部說比http安全，是由於他利用ssl/tls協議傳輸。包含證書，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等，保障了傳輸過程的安全性

17.關於http 2.0 

  • http/2 引入了「服務端推」的概念，它容許服務端在客戶端須要數據以前就主動的將數據發送到客戶端緩存中，從而提升性能
  • http/2提供更多的加密支持
  • http/2使用多路技術，容許多個消息在一個鏈接上同時交差
  • 它增長了頭壓縮，所以即便很是小的請求，其請求和響應和header都只會佔用小比例的帶寬

 18.defer 和 async

  • defer並行加載js文件，會按照頁面上script標籤的順序執行
  • async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

19.Cookie的弊端

　　cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，可是有不少侷限性

第一：每一個特定的域名下最多生成20個cookie

  • IE6或更低的版本，最多20個cookie
  • IE7和以後的版本最多50cookie
  • chrom和safari沒有作硬性限制

第二：IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

  • cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節
  • IE提供了一種存儲能夠持久化用戶數據，叫作userdata，從IE5.0就開始支持。每一個數據最多128K，每月名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，就一直會在

優勢：極高的擴展性和可用性

  • 經過良好的編程，控制保存在cookie中的session對象的大小
  • 經過加密性和安全傳輸技術（SSL），減小cookie被破解的可能性
  • 只在cookie中存放不敏感數據，即便被盜也不會有重大損失
  • 控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie

缺點：

  • cookie數量和長度的限制，每一個domain最多隻能有20調cookie，每一個cookie的長度不超過4KB，不然會被截掉
  • 安全性問題，若是cookie被人攔截了，那人就能夠取得全部的session信息，即便加密也於事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就行
  • 有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器保存一個計數器，若是咱們把這個計數器保存在客戶端，那麼他起不到任何做用

20.瀏覽器本地存儲

  • 較高版本的劉拉你中，js提供了sessionStorage和globalStorage。在HTML5提供了localStorage來取代globalStorage
  • HTML5中的web storage包括了兩種存儲方式：sessionStorage和 localStorage
  • sessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據隨之銷燬，所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
  • 而localStorage用於持久化的本地存儲，除非主要刪除數據，不然數據是永遠不會過時的

21.web storage 和 cookie的區別

  • web storage的概念和cookie類似，區別是爲更大容量存儲設計的，cookie的大小是受限的，而且每次請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用
  • 除此以外，web storage擁有serItem,getItem,removeItem,clear等方法，cookie得本身封裝setCookie,getCookie
  • 可是cookie也是不可或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而web stroage僅僅是爲了在本地「存儲」在存在
  • 瀏覽器的支持除了IE7及如下不支持外，其餘標準都會徹底支持（ie及FF須要在web服務器裏進行），值得一提的是IE老是辦好事，例如IE7,IE6的userData其實就是js本地存儲的解決方法，經過簡單的代碼封裝就能夠贊成到全部的瀏覽器都支持web storage
  • localStorage和sessionStorage都具備相同的操做方法，例如setItem,getItem,removeItem等

22.cookie 和 session的區別

  • cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
  • cookie不是很安全，別人分析存放在本地的cookie進行cookie欺騙
    • 考慮到安全應當使用session
  • session會在必定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能
    • 考慮到減輕服務器性能方面，應當使用cookie
  • 單個cookie保存的數據不能超過4k，不少瀏覽器都限制一個站點最多保存20個cookie

因此我的建議：

  • 將登錄信息等重要信息放在session
  • 其餘信息若是須要保留，能夠放在cookie

23.常見兼容性問題？

  • png24位的圖片在ie6瀏覽器上出現背景，解決方案是作成png8，也能夠引用一段腳本處理
  • 瀏覽器默認的margin和padding不一樣，解決方案是加一個全局的*{margin: 0;padding:0;}來統一
  • IE6雙邊距BUG：塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin得比設置的大
  • 浮動ie產生的雙邊距距離（IE6雙邊距問題：在IE6，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍）
.box{
    float:left; 
    width:10px; 
    margin:0 0 0 100px;
}
  • 這種狀況之下ie會產生20px的距離，解決方案是在float的標籤樣式控制中加入
  • _display：inline；將其轉化爲行內屬性（_這個符號只有ie6識別）
  • 漸進識別的方式，從整體中逐漸排除局部
  • 首先，巧妙的使用「\9」這一標記，將ie瀏覽器從全部狀況中分離出來
  • 接着，再次使用「+」將IE8和IE7，IE6分離出來，這樣IE8已經獨立識別
.a{
    background-color: #ccc; /*全部識別*/
    .background-color: #ccc\9; /*IE6，7,8識別*/
    +background-color: #ccc; /*IE6,7識別*/
    _background-color: #ccc; /*IE6識別*/
}
  • 怪異模式問題：漏寫DOCTYPE聲明。firefox仍然會按照標準模式來解析網頁，可是IE中會觸發怪異模式，爲了不沒必要要的麻煩，最好聲明<doctype html> 良好習慣

IE6瀏覽器常見的BUG

 1.IE6不支持min-height，解決辦法使用css hack

.target{
    min-height: 100px;
    height: auto !important;
    height: 100px;  //IE6下內容高度超過會自動擴展高度
}

2.ol內的序號全爲1，不遞增。

　　爲li設置樣式display: list-item

3.未定位父元素overflow: auto;，包含position: relative；子元素，子元素高於父元素時會溢出

　　子元素去掉position: relative

　　不能爲子元素取消定位時，父元素position：relative

4.IE6只支持a標籤的:hover僞類

　　使用js爲元素監聽mouseenter,mouseleave事件，添加類實現效果

5.IE5-8不支持opacity，

.opacity{
    opacity: 0.4;
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

6.IE6在設置height小於font-size時高度值爲font-size

　　font-size:0;

7.IE6不支持PNG透明背景

　　IE6下使用gif圖片

8.IE6-7不支持display: inline-block

　　設置inline並處罰hasLayout

display: inline-block;
*display: inline;
*zoom: 1;

9.IE6下浮動元素在浮動方向上與父元素便捷接觸元素的外邊距會加倍

　　使用padding控制邊距

　　浮動元素display: inline;

10.經過塊級元素設置寬度和左右margin爲auto時，IE6不能實現水平居中

　　爲父元素設置text-align: center

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程