前端面試題庫

時間 2019-11-10

標籤前端面試題庫欄目快樂工作简体版

原文原文鏈接

其餘技術無關：css

三五年規劃html

其餘技術相關：前端

es6新特性html5

前端如何優化react

性能優化相關(這個點很大，設計不少方面，不要自覺得優化就是網上常常看到的那一套)jquery

lodash相關webpack

mvvm的好處ios

設計模式相關(單例、發佈訂閱等)css3

瀏覽器渲染過程git

設計一個模版引擎

設計一個打包工具

設計一個mvvm框架須要注意的case

源碼閱讀相關

jQuery中被譽爲工廠函數的是？

如何修改chrome記住密碼後自動填充表單的黃色背景？

HTML5離線緩存機制

HTML5新增標籤有哪些

如何使用storage 對js文件進行緩存

談談你對重構的理解

什麼樣的前端代碼是好的

對前端工程師這個職位是怎麼理解的？它的前景會怎麼樣？

你以爲前端工程師的價值體如今哪裏

平時如何管理你的項目

跨域

MVC和MVVM差別，MVP

代碼題：

請用css或js實現物體的平移動畫

編寫一個js函數fn，該函數有一個參數n（數字類型），其返回一個數組，該數組內是n個隨機且不重複的整數，且整數取值範圍是[2,32]

編寫一個 getElementsByClassName 封裝函數?

寫一個通用事件監聽函數

如何判斷一個對象是否爲數組

數組去重

排序（冒泡排序，快速排序）

編寫一個方法，求一個字符串的字節長度

js實現一個閉包函數，每次調用都自增1

['1','2','3'].map(parseInt] 輸出什麼？爲何？

js實現函數運行一秒後打印輸出0~9

實現對一個數組或者對象的淺拷貝和深拷貝

寫一個二分法查找

js時間分段

求水仙花數

請使用遞歸算法在TODO註釋後實現經過節點key數組尋找json對象中的對應值

常見排序算法的時間複雜度,空間複雜度

下面代碼輸出什麼，若要輸出0至9，該怎麼辦？

for(var i=0;i<10;i++){
    setTimeout(()=>{console.log(i)},0)
}

說一下macrotask 和 microtask？並說出下面代碼的運行結果。

console.log('a');
setTimeout(() => {
    console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
    console.log('d');
})
.then(() => {
    console.log('e');
});

console.log('f');

實現一個once函數，傳入函數參數只執行一次

function ones(func){
    var tag=true;
    return function(){
      if(tag==true){
        func.apply(null,arguments);
        tag=false;
      }
      return undefined
    }
}

將原生ajax封裝成promise

var  myNewAjax=function(url){
  return new Promise(function(resolve,reject){
      var xhr = new XMLHttpRequest();
      xhr.open('get',url);
      xhr.send(data);
      xhr.onreadystatechange=function(){
           if(xhr.status==200&&readyState==4){
                var json=JSON.parse(xhr.responseText);
                resolve(json)
           }else if(xhr.readyState==4&&xhr.status!=200){
                reject('error');
           }
      }
  })
}

從promise、process.nextTick、setTimeout出發，談談Event Loop中的Job queue

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//輸出2,6,5,3,4,1

如何實現數組的隨機排序？（兩種方法以上）

react相關：

react核心思想

react constructor,super解釋一下

setState

生命週期函數有哪些

axios封裝

ant-design用到哪些功能

react組件封裝（接口設計）

react-router原理，瞭解過react-router內部實現機制嗎？

React中的controlled component 和 uncontrolled component區別（受控組件和不受控組件）

虛擬DOM的原理

簡要介紹一下React中的refs以及它的做用

簡要介紹一下key以及它的做用

在實際開發中shouldComponentUpdate有什麼做用

6.簡要介紹一下Redux

7.setState的第二個參數是什麼，做用又是什麼？

setState的第二個參數是一個回調函數，組件更新完後執行的回調函數（setState函數是異步的）

8.簡要介紹一下你所瞭解的flux架構的思想？

9.聊一聊你對React的DOM diff算法的理解

10.虛擬DOM的優缺點有哪些？

webpack相關：

談談你對webpack的見解

webpack經常使用插件

webpack打包原理

webpack文件劃分

chunk

loader原理

webpack優化措施

webpack常見優化手段有哪些？

webpack打包優化

設計一個本身的打包工具須要設計哪些主要功能

babel相關

算法部分：

數組去重

排序

數組扁平化處理：實現一個flatten方法，使得輸入一個數組，該數組裏面的元素也能夠是數組，該方法會輸出一個扁平化的數組。

若是在17問的前提下，要作去重和排序處理又該怎麼作（不用給出具體代碼）

http，html和瀏覽器部分：

303和304的區別

304：設置了緩存，請求的文檔並無發生改變，因此返回304狀態碼不從新拉取數據，直接使用緩存中的數據

token怎麼傳到後臺

http請求中的keep-alive有了解嗎？

get請求傳參長度的誤區

補充get和post請求在緩存方面的區別

http和https（基本概念，區別，工做原理，https優勢，缺點）

http和https有何差別？聽過SPDY嗎？

談談你對TCP的理解？對OSI七層協議和五層網絡架構有了解嗎？

TCP和UDP的區別

websocket的實現和應用

http請求方式，head方式

一個圖片url訪問後直接下載怎麼實現？

web quality（無障礙）

幾個很實用BOM屬性對象方法

HTML5 drag API

http2.0

400,401,403狀態碼

fetch發送兩次請求的緣由

cookie，sessionStorage，localStorage的區別

web worker

對HTML語義化標籤的理解

iframe是什麼？有什麼缺點？

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

Cookie如何防範XSS攻擊

Cookie和session的區別

講講viewport和移動端佈局

click在ios上有300ms延遲，緣由及如何解決？

瀏覽器多個標籤頁面之間的通訊

頁面緩存

http緩存

你以前遇到過跨域問題嗎？是怎麼解決的？

html5多線程

服務器推送

瀏覽器內核有哪些

HTML5新特性

列出塊級元素和行內元素，並說出二者區別

數據持久化技術(ajax)?簡述ajax流程

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

爲何要有同源限制

瀏覽器緩存和服務端緩存控制你瞭解多少？說說看？

HTTP request報文結構是怎樣的

HTTP response報文結構是怎樣的

web開發中會話跟蹤的方法有哪些

Ajax：

ajax 和 jsonp ？

ajax和jsonp的區別：
相同點：都是請求一個url
不一樣點：ajax的核心是經過xmlHttpRequest獲取內容
jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。

ajax執行流程？

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新

xhr對象 status ? readystate?

status是XMLHttpRequest對象的一個屬性，表示響應的HTTP狀態碼。
readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處於什麼狀態。

readystate 0~4

0：未初始化狀態：此時，已經建立了一個XMLHttpRequest對象
1：準備發送狀態：此時，已經調用了XMLHttpRequest對象的open方法，而且XMLHttpRequest對象已經準備好將一個請求發送到服務器端
2：已經發送狀態：此時，已經經過send方法把一個請求發送到服務器端，可是尚未收到一個響應
3：正在接收狀態：此時，已經接收到HTTP響應頭部信息，可是消息體部分尚未徹底接收到
4：完成響應狀態：此時，已經完成了HTTP響應的接收

說出幾個http協議狀態碼?

200, 201, 302, 304, 400, 404, 500

200：請求成功
201：請求成功而且服務器建立了新的資源
302：服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來響應之後的請求。
304：自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。
400：服務器不理解請求的語法。
404：請求的資源（網頁等）不存在
500：內部服務器錯誤

ajax中 get 和 post 有什麼區別?

get和post都是數據提交的方式。
get的數據是經過網址問號後邊拼接的字符串進行傳遞的。post是經過一個HTTP包體進行傳遞數據的。
get的傳輸量是有限制的，post是沒有限制的。
get的安全性可能沒有post高，因此咱們通常用get來獲取數據，post通常用來修改數據。

jsonp原理？缺點?

工做原理：使用script標籤實現跨域訪問，可在url中指定回調函數，獲取JSON數據並在指定的回調函數中執行jquery實現jsop。

缺點：只支持GET方式的jsonp實現，是一種腳本注入行爲存在必定的安全隱患。若是返回的數據格式有問題或者返回失敗了，並不會報錯。

如何確保ajax或鏈接不走緩存路徑

在Ajax中使用Get請求數據不會有頁面緩存的問題，而使用POST請求但是有時候頁面會緩存咱們提交的信息，致使咱們發送的異步請求不能正確的返回咱們想要的數據

$.post(url,data ,ranNum:Math.random()} ,function(data){}）

ranNum : 這個是防止緩存的核心，每次發起請求都會用Math.random()方法生成一個隨機的數字，這樣子就會刷新url緩存

ajax的缺點

一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
五、不容易調試

頁面性能：

提高頁面性能的方法有哪些

異步加載的方式有哪些

defer,async的區別是什麼

什麼是瀏覽器緩存

緩存的分類有哪些（跟緩存相關的http頭部有哪些）

什麼是CND

預解析DNS？

如何開啓DNS預解析？

渲染機制：

DTD是什麼

DOCTYPE是什麼？有什麼做用？標準模式和兼容模式各有什麼區別？

經常使用的DOCTYPE類型

瀏覽器的渲染過程

重排（reflow）是什麼

重繪（repaint）是什麼

如何減小重繪，避免重排？

HTTP：

http的主要特色

介紹下http報文的組成部分

常見的http方法有哪些

post和get的區別是什麼

http狀態碼及其含義

常見狀態碼有哪些

介紹下持久連接（http1.1）

管線化是什麼

管線化的特色是什麼

錯誤監控、產品性能體系

前端錯誤分類有哪些

前端錯誤捕獲方式分別是什麼

如何使用Object.onerror捕獲資源加載錯誤？

跨域的JS運行錯誤能夠捕獲麼？錯誤提示是什麼，應該怎麼處理？

客戶端上報錯誤的基本原理是什麼？

通信類：

什麼是跨域通訊？

什麼是同源策略？

先後端通訊有哪些？

如何建立ajax？

跨域解決方案有哪些？（六種方案）

安全類：

常見的攻擊方式有哪些？

CSRF的原理及防護措施？

XSS的原理及防護措施？

請說明SQL注入的原理及防範方法

前端性能優化的關鍵時間點：

前端性能優化的關鍵時間點有哪些，分別是什麼？

開始渲染時間如何獲取？如何優化？

DOM Ready時間如何獲取？如何優化？

首屏時間如何獲取？如何優化？

onload時間如何獲取？如何優化？

css部分：

css渲染

css佈局（兩欄佈局，三欄佈局）

用過flex佈局嗎？flex-grow和flex-shrink屬性有什麼用？

css盒模型的理解

畫一條0.5px的線

link標籤和import標籤的區別

transition和animation的區別

BFC（塊級格式化上下文，用於清除浮動，防止margin重疊等）

垂直居中的幾種方法

關於js動畫和css3動畫的差別性

清除浮動有幾種方式?

簡述幾個css hack?

:before 和 ::before 區別?

如何讓一個div 上下左右居中?（三種方法）

僞類選擇器和僞元素？c3中引入的僞類選擇器有？c3中僞元素有?

placeholder?如何在ie8上兼容placeholder這個效果

常見兼容性問題？

若是對css進行優化如何處理？

sass和scss有什麼區別?sass通常怎麼樣編譯的

圖片和文字在同一行顯示?

1 在css中給div添加上「vertical-align:middle」屬性。
2 分別把圖片和文字放入不一樣的div中，而後用「margin」屬性進行定位，就可使他們顯示在同一行。
3 把圖片設置爲背景圖片。

a標籤中 active hover link visited 正確的設置順序是什麼?

a標籤的link、visited、hover、active是有必定順序的
a:link
a:visited
a:hover
a:active

爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法：只要在<head>之間加入一個<link>或者<script>元素就能夠了。

多行元素的文本省略號

visibility=hidden, opacity=0，display:none

雙邊距重疊問題（外邊距摺疊）

position

僞元素僞類

css預處理器

設置元素浮動後，該元素的display值是多少？

選擇器類型及優先級

一個滿屏‘品’字佈局如何設計？

::before和:after中雙冒號和單冒號有什麼區別？解釋一下這兩個僞元素的做用

CSS3新特性

css有哪些樣式能夠給子元素繼承

box-sizing經常使用的屬性有哪些？分別有啥做用？

清楚浮動的方式有哪些？比較好的是哪種？

說說樣式權重的優先級

塊級元素水平垂直居中的方法（考慮定寬高和不定寬高的狀況）

如何實現一個自適應的正方形

如何使用CSS實現硬件加速？

重繪和迴流（重排）是什麼，如何避免？

BFC是什麼？介紹一下，如何觸發BFC？

說一說你知道哪些僞類選擇器？

簡要介紹一下一種css預處理器？

CSS選擇器有哪些
css sprite是什麼,有什麼優缺點
display: none;與visibility: hidden;的區別
css hack原理及經常使用hack
specified value,computed value,used value計算方法
link與@import的區別
display: block;和display: inline;的區別
PNG,GIF,JPG的區別及如何選
CSS有哪些繼承屬性
IE6瀏覽器有哪些常見的bug,缺陷或者與標準不一致的地方,如何解決
容器包含若干浮動元素時如何清理(包含)浮動
什麼是FOUC?如何避免
如何建立塊級格式化上下文(block formatting context),BFC有什麼用
display,float,position的關係
外邊距摺疊(collapsing margins)
如何肯定一個元素的包含塊(containing block)
stacking context,佈局規則
如何水平居中一個元素
如何豎直居中一個元素

css盒模型：

CSS盒模型是什麼？

標準模型和IE模型的區別？

CSS如何設置這兩種模型？

JS如何設置/獲取盒模型對應的寬高

BFC是什麼，講一下原理？

BFC佈局規則是？

哪些元素會生成BFC?

BFC的使用場景有哪些？（1.自適應兩欄佈局；2.清楚內部浮動；3.防止垂直margin重疊）

css佈局：

三欄佈局，高度已知，左右兩欄固定，中間自適應的三欄佈局有幾種實現方式，各自的優缺點是什麼？

三欄佈局，高度未知，以上佈局哪些仍可用，哪些不可用？

三欄佈局，高度已知，左中固定，右自適應

三欄佈局，上下固定，中自適應

CSS居中佈局有哪些，適用於什麼場景，舉例說明？

CSS佈局時須要注意哪些方面？

html部分：

語義化的理解

HTML5離線存儲怎麼使用，解釋工做原理

瀏覽器是怎麼對HTML5的離線存儲資源進行管理和加載的？

HTML5的存儲方案有哪些

HTML5提供了sessionStorage、localStorage和離線存儲做爲新的存儲方案，其中sessionStorage和localStorage 都是採用鍵值對的形式存儲，二者都是經過setItem、getItem、removeItem來實現增刪查改，而sessionStorage是會話存儲，也就是說當瀏覽器關閉以後sessionStorage也自動清空了，而localStorage不會，它沒有時間上的限制。離線存儲也就是應用程序緩存，這個一般用來確保web應用可以在離線狀況下使用，經過在html標籤中屬性manifest來聲明須要緩存的文件，這個屬性的值是一個包含須要緩存的文件的文件名的文件，這個manifest文件聲明的緩存文件可在初次加載後緩存在客戶端，能夠經過更新這個manifest文件來達到更新緩存文件的目的。

viewport的常見設置有哪些

viewport經常使用在響應式開發以及移動web開發中，viewport顧名思義就是用來設置視口，主要是規定視口的寬度、視口的初始縮放值、視口的最小縮放值、視口的最大縮放值、是否容許用戶縮放等。一個常見的viewport設置以下：

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />

其中同時設置width和initial-scale的目的是爲了解決iphone、ipad、ie橫豎屏不分的狀況，由於這兩個值同時存在時會取較大值。

移動開發：

移動開發中使用rem的優勢

列舉移動開發中meta基礎知識點

移動端上什麼是點擊穿透?

什麼是移動端的300ms延遲？什麼是點擊穿透？解決方案?

jQuery：

你以爲jQuery源碼有哪些寫的好的地方

使用jQuery實現，獲取位於id爲fruit的下value爲apple的option元素

Jq中如何實現多庫並存?

Jq中get和eq有什麼區別？

Jq如何判斷元素顯示隱藏？

Jq綁定事件的幾種方式？on bind ?

Jq中如何將一個jq對象轉化爲dom對象？

Jq中有幾種選擇器?分別是什麼?

Jq中怎麼樣編寫插件?

$('div+.ab')和$('.ab+div') 哪一個效率高？

$.map和$.each有什麼區別

$(function(){})和window.onload 和 $(document).ready(function(){})

Jq中 attr 和 prop 有什麼區別

你對數據校驗是怎麼樣處理的？jquery.validate？

通俗的說，就是爲保證數據的完整性，用一種指定的算法對原始數據計算出的一個校驗值。接收方用一樣的算法計算一次校驗值，若是和隨數據提供的校驗值同樣，就說明數據是完整的。
用正則表達式來處理;
jquery.validate：爲表單驗證插件

在jq中 mouseover mouseenter mouseout mouseleave 和 hover有什麼關聯?

mouseenter與mouseover：
不論鼠標指針穿過被選中元素或其子元素，都會觸發mouseover事件。
只有在鼠標指針穿過被選元素時，纔會觸發mouseentr事件。

mouseout與mouseleave：
不論鼠標離開被選元素仍是任何子元素，都會觸發mouseout事件。
只有在鼠標指針離開被選元素時，纔會觸發mouseleave事件。

hover:
hover是一個符合方法，至關於mouseenter+mouseleave。

項目相關：

技術沉澱

項目中負責什麼角色

表單驗證是怎麼作的

本身作了什麼，解決了什麼棘手問題，項目成果

最近在看哪些前端方面的書

爲何大型應用要從多個域名請求資源？

簡要的說而且說重點，從使用技術棧到項目架構的設計到技術難點的實現，分點說

面試官也是人，他也會好奇一些神奇的項目是怎麼實現的，因此個人建議也就是平時多作一些有水平的項目，不要把todolist、圖書館管理系統這種爛大街的項目寫在本身的簡歷上。

這裏透露一下，你的二面面試官，頗有多是你將來的leader，他們問的問題不少都是平時遇到的技術難點啊，本身踩過的小坑啊啥的，有心的同窗本身默默記住這些問題回去多看看，對本身的提高會有很大的幫助(畢竟你能網上搜到的問題都是些爛大街的問題，這時候大牛遇到過的問題和你探討這種機會不用說都知道很可貴吧)。

仿餓了麼購物車(本地購物車和全局購物車和本地存儲，不是網上一艘就能搜到的哪些哦)

Chrome插件開發lettalk

rn開發的一個簡單的社交app

仿Jquery類庫(閱讀jquery源碼時候仿的)

原來公司的工做流程是怎麼樣的？如何與他人協做的？如何跨部門合做的？

你遇到過比較難的技術問題是？你是如何解決的？

你在如今團隊中處於什麼樣的角色？起了什麼明顯的做用？

平時工做中怎麼樣進行數據交互?若是後臺沒有提供數據怎麼樣進行開發?mock數據與後臺返回的格式不一樣意怎麼辦?

由後臺編寫接口文檔、提供數據接口實、前臺經過ajax訪問實現數據交互；
在沒有數據的狀況下尋找後臺提供靜態數據或者本身定義mock數據；
返回數據不統一時編寫映射文件對數據進行映射。

上一個項目是什麼？主要負責哪些？購物車流程?支付功能?

主要負責哪些就講主要作哪些功能模塊：

1）商品模塊:
一、商品列表：商品排序商品篩選商品過濾商品查詢商品推薦
二、商品詳情:類型推薦商品簡介商品詳情商品評價售後維護

2)購物車模塊：商品編號、數量、價格、總額、運費、運輸選項、運費總計、從購物車刪除選項、更新數量、結帳、繼續購物、商品描述、庫存信息

簡述下工做流程

我在以前的公司工做流程大概是這樣的：公司定稿會結束之後，會進行簡單的技術研討，而後咱們前端會進行先期的技術準備。前端切圖人員會進行psd設計稿切圖，而且將css文件進行整合。咱們主要編寫JS部分，其中包括搭建前端框架（大項目），編寫js業務和數據持久化操做，咱們也會編寫js插件而且進行封裝方便使用，還有就是編寫JS前端組建和JS測試單元，最後將完成的JS部分與切圖人員提供的HTML頁面進行整合。最後對完成的頁面進行功能測試、頁面兼容、產品還原。而後對產品進行封存，提交測試。若是出現BUG會返回給咱們開發人員進行修改，再提交測試，最後測試成功，進行版本封存。等到程序所有上線的時候進行線上測試。

通常使用什麼版本控制工具?svn如何對文件加鎖

自我介紹：

自我介紹言簡意賅，體現本身的個性和亮點，會什麼着重說一下