最常見前端面試必看整理（持續更新）

HTML部分：

1.html語意化標簽的理解seo優化

語意化簡單的說就是用正確的含義的標簽做正確的事eg：頭部：header 導航：nav等，語意化的優點是易于修改和維護，支持無障礙閱讀，搜索引擎友好，方便seo，面向未來的 HTML，瀏覽器在未來可能提供更豐富的支持，

2.seo優化

三劍客：<title> 標簽、<meta name="description"> 標簽和 <meta name="keywords"> 標簽，顧名思義，它們分別代表當前頁面的標題、內容摘要和關鍵詞

robots檔案告知搜索引擎可以抓取的內容和相關頁面

sitemap檔案輔助搜索引擎訪問網站的工具（協議）

3.說一說你對Doctype的理解

DOCTYPE標簽是一種標準通用標記語言的檔案型別宣告，它的目的是要告訴標準通用標記語言決議器，它應該使用什么樣的檔案型別定義（DTD）來決議檔案，
1.?宣告必須處于HTML檔案的頭部，在標簽之前，HTML5中不區分大小寫
?2.宣告不是一個HTML標簽，是一個用于告訴瀏覽器當前HTMl版本的指令
3.現代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標準模式對檔案進行渲染，一些瀏覽器有一個接近標準模型，
4.在HTML4.01中<!doctype>宣告指向一個DTD，由于HTML4.01基于SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
5.HTML5不基于SGML，所以不用指定DTD

4.h5新增屬性和標簽

0.增強型表單color

1.表單屬性：

2.連接屬性：size target 超鏈接
3.defer:加載完腳本后并不執行，而是等整個頁面加載完之后再執行
4.async:加載完腳本后立刻執行，不用等整個頁面都加載完，屬于異步執行，
5.多媒體標簽 video audio source 等多媒體標簽，還有時間time等新標簽，
6.其它標簽

• header：定義檔案的頁眉 頭部
• nav：定義導航鏈接的部分
• footer：定義檔案或節的頁腳 底部
• article：定義文章，
• section：定義檔案中的節（section、區段）
• aside：定義其所處內容之外的內容 側邊(還有很多)

7.h5新增api
localStorage：永久儲存，多視窗共享，最大20mb
sessionStorage： 生命周期為關閉瀏覽器視窗，關閉當前視窗資料存盤失效；可以在同一視窗下訪問，不可以多視窗共享，資料大小為5mb
新增dom操作document.querySelector("選擇器"); document.querySelectorAll('選擇器');
新增class操作可以洗掉替換class等操作

8.WebSocket
WebSocket協議為web應用程式客戶端和服務端之間提供了一種全雙工通信機制，
特點：
（1）握手階段采用HTTP協議，默認埠是80和443
（2）建立在TCP協議基礎之上，和http協議同屬于應用層
（3）可以發送文本，也可以發送二進制資料，
（4）沒有同源限制，客戶端可以與任意服務器通信，
（5）協議識別符號是ws（如果加密，為wss），如ws://localhost:8023

9.webworker（html5新特性）
Web Worker 的作用，就是為 JavaScript 創造多執行緒環境，允許主執行緒創建 Worker 執行緒，將一些任務分配給后者運行，在主執行緒運行的同時，Worker 執行緒在后臺運行，兩者互不干擾，等到 Worker 執行緒完成計算任務，再把結果回傳給主執行緒，這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 執行緒負擔了，主執行緒（通常負責 UI 互動）就會很流暢，不會被阻塞或拖慢，
Worker 執行緒一旦新建成功，就會始終運行，不會被主執行緒上的活動（比如用戶點擊按鈕、提交表單）打斷，這樣有利于隨時回應主執行緒的通信，但是，這也造成了 Worker 比較耗費資源，不應該過度使用，而且一旦使用完畢，就應該關閉，
10.Canvas元素
Canvas 元素用于在網頁上繪制圖形，該元素標簽強大之處在于可以直接在HTML上進行圖形操作，

5.Canvas和SVG圖形的區別是什么

SVG先繪制后記憶，換句話說任何使用SVG繪制的形狀都能被記憶和操作，瀏覽器可以再次顯示
Canvas則是先繪制后忘記，一旦繪制完成你就不能訪問像素和操作它
SVG對于創建圖形例如CAD軟體是良好的，一旦東西繪制，用戶就很難操作它
Canvas則用于繪制和遺忘類似動漫和游戲的場畫，為了之后的操作，
SVG需要記錄坐標，所以比較緩慢，因為沒有記住以后事情的任務，所以Canvas更快，

6.src與href的區別

href 是指向網路資源所在位置，建立和當前元素（錨點）或當前檔案（鏈接）之間的鏈接，用于超鏈接，
src是指向外部資源的位置，指向的內容將會嵌入到檔案中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到檔案內，例如js腳本，img圖片和frame等元素，

CSS部分

7.css選擇器和權重

如果優先級相同，則最后出現的樣式生效；
繼承得到的樣式的優先級最低；
通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以它們的權值都為 0
樣式表的來源不同時，優先級順序為：行內樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式，

8.哪些屬性可以繼承

不可繼承的:
baidisplay、dumargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi，

可繼承的：
所有子元素可繼承：visibility和cursor、z-index，
行內元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction，
塊狀元素可繼承：text-indent和text-align，
串列元素可繼承：list-style、list-style-type、list-style-position、list-style-image，
表格元素可繼承：border-collapse，

9.BFC機制

請看詳解BFC（特點、作用、條件）

10.盒模型

css3有兩種盒模型：標準盒子模型、IE盒子模型，通過box-sizeing屬性來修改元素的盒模型，標準盒模型和IE盒模型的區別在于width和height時的范圍不同，
在 標準盒子模型中，width 和 height 指的是內容區域的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸，
IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度，
box-sizing有那些值，有什么區別？
box-sizing：border-box表示盒模型基于IE的盒模型，width和height決定盒模型的content區、padding區和border區，
box-sizing：content-box表示盒模型基于標準盒模型，width和height只決定盒模型的content區
box-sizing：inherit表示繼承自父元素，

11.css模塊化開發

css模塊化是指的是把頁面分割成不同的組成部分，這些組成部分沒有依賴關系，我們要達到的目的是，當我們去修改其中一部分css時，不會對其他部分產生意料之外的影響，
所有的前處理器（比如Sass或者LESS）都提供了把分散的CSS檔案合并成一個檔案的功能，前處理器會從base.scss中引入基礎樣式，并從每個模塊檔案引入相應的模塊樣式，然后輸出一個包含所有樣式的樣式表檔案，這樣每個模塊都單獨擁有一個便于維護的檔案，
css預處理起，一般來說他們是基于css擴展了一套屬于自己的dsl，來解決我們書寫css時難以解決的問題：

• 語法不夠強大，無法嵌套書寫導致模塊化開發中需要書寫很多重復的選擇器
• 沒有變數和合理樣式復用機制，是得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護，

所以前處理器的目標就是：提供css缺失的樣式層復用機制，減少冗余代碼，提高樣式代碼的可維護性，

12.水平垂直居中

/*已知容器的寬高 設定層的外邊距*/
div {
 position: relative;		/* 相對定位或絕對定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -250px;     	/* 外邊距為自身寬高的一半 */
}
 
/*不知寬高-水平垂直居中 利用 `transform` 屬性*/
div {
 position: absolute;		/* 相對定位或絕對定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
div{
	position: fixed;
	width:500px;
 	height:300px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
/*利用flex布局*/
.container {
 display: flex;
 align-items: center; 		/* 垂直居中 */
 justify-content: center;	/* 水平居中 */
}
 
/*讓絕對定位的div居中*/
div {
 position: absolute;
 width: 300px;
 height: 300px;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

13.css3中新增加的屬性

transform屬性應用于元素的2d到3d的轉換，這個屬性允許你將元素，旋轉，縮放，傾斜等
transition屬性可以設定元素的過渡效果，四個屬性transition-property：指定CSS屬性的name，transition效果， transition-duration： 指定效果需要多少秒或者毫秒才能完成，transition-timing-function：指定transition效果的轉速曲線 transition-delay：指定transition效果開始的時候
animation影片屬性 通過@keyframes xxx來定義一個影片 然后在需要添加影片的盒子里面使用animation:xxx 2s; 2s是指的影片執行的時間長度

14.布局

1.標準檔案流（padding+margin+負margin）+浮動float+定位
定義：標準檔案流就是元素排版程序中，元素會默認的自動從左往右，從上往下的 流式排列方式，前面內容發生了變化，后面的內容位置也會隨著發生變化，
2.百分比布局(流式布局): px單位 用 %代替, 占父級元素的百分比
定義：流式布局，就是百分比布局，也稱非固定像素布局，通過盒子的寬度設定成百分比來根據螢屏的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充，不過需要注意的是需要定義頁面的最大和最小支持寬度，
3.flex彈性布局: 主軸 輔助軸的幾個屬性
定義：Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性，任何一個容器都可以使用flex布局
采用flex布局的元素，稱為flex容器（flex container），簡稱”容器”，它的所有子元素自動成為容器成員，稱為flex專案，簡稱專案
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”，它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案“，
容器默認存在兩根軸：水平主軸和垂直交叉軸，主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫main end 交叉軸的開始位置叫做cross start 結束叫做cross end，

它有六種屬性可以設定在容器上

• flex-direction： 絕對主軸的方向 默認水平方向，從左側開始
• flex-wrap：決定容器內是否換行，默認不換行
• flex-flow：是flex-direction和flex-wrap的縮寫
• justify-content：定義了主軸的對齊方式
• align-items：定義了在交叉軸上的方式
• align-content：定義了多跟軸線的對齊方式

引數有這些

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:
; justify-content: flex-start | flex-end | center |
space-between | space-around; align-items: flex-start | flex-end |
center | baseline | stretch; align-content: flex-start | flex-end |
center | space-between | space-around | stretch;

柵格布局
框架中的類名來替代 如element bootstrap等…

15.請解釋一下為什么需要清除浮動？清除浮動的方式

清除浮動是為了清除使用浮動元素產生的影響，浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示，
1、父級div定義height；
2、父級div 也一起浮動；
3、浮動元素的父級div定義偽類:after , clear：both用來閉合浮動的

&::after,&::before{
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

4.給父元素添加overflow:hidden;屬性，

js基礎

16.變數資料型別及檢測

基本+參考 JavaScript共有八種資料型別，分別是Undefine，null，boolean，number，string，object，bigint，symbol，
其中bigint和symbol是es6新增的資料型別：

• Symbol代表創建后獨一無二且不可變的資料型別，他主要是為了解決可能出現的全域變數沖突的問題，
• Bigint是一個數字型別的資料，他可以表示任意精度格式的整數，使用Bigint可以安全的存盤和使用大整數，

這些資料可以分為原始資料型別和參考資料型別：可以根據存盤的位置不同分為：

• 堆疊：原始資料型別（undefined、 null、 Boolean、 number、 string）
• 堆： 參考資料型別（物件 陣列和函式）
  這兩種資料的區別主要在于存盤的位置不同：
• 原始資料型別直接存盤在堆疊中簡單的資料段，占據空間小，大小固定，屬于被頻繁使用的資料
• 參考資料存在在堆（heap）中的物件，占據空間大，大小不固定，如果存在堆疊中，將會影響程式的運行性能；參考資料在堆疊中存盤了指標，該指標會指向堆中改物體的起始地址，當解釋器尋找參考值時，會首先檢索其中在堆疊的地址，然后從地址中獲取堆中的物體，

檢測方式

1.typeof

console.log(typeof true); // boolean 
console.log(typeof 'str'); // string 
console.log(typeof []); // object 
console.log(typeof function(){}); // function 
console.log(typeof {}); // object 
console.log(typeof undefined); // undefined 
console.log(typeof null); // object
//其中對陣列物件還有null都會判斷為object 

2.instanceof
instanceof可以正確判斷物件的型別，內部運行機制是判斷在其原型鏈中是否能找到該型別的原型，instanceof只能正確判斷參考資料型別，而不能判斷基本資料型別，instanceof運算子可以用來測驗一個物件在其原型鏈上是否存在一個建構式的prototype屬性，instanceof的基本邏輯如下
3.constructor
constructor有兩個作用，一個是判斷資料的型別，二是物件實體通過constructor物件訪問他們的建構式，但是創建一個物件然后去改變他的原型，constructor就不能用來判斷資料型別了
4.Object.prototype.toString.call()
Object.prototype.toString.call()使用Object物件的原型方法toString來判斷資料型別，但是同樣是檢測物件obj呼叫toString方法，obj.toString的結果和Object.prototype.toString.call的結果是不一樣的，這是因為toString是Object的原型方法，Array，function等型別作為Object的實體，都重寫了toString方法，不同物件型別的toString方法，根據原型鏈的知識，呼叫的是重寫之后的方法，而不是呼叫object上的toString，所以obj.toString是不能的帶其物件型別的，

17.JavaScript原型，原型鏈 ? 有什么特點？

稍等待還會有

JavaScript中是使用建構式來創建一個新物件的，每個建構式都具有prototype這個屬性，這個屬性值是一個物件，他包含了由該建構式所有實體共享的屬性和方法，使用建構式創建一個新物件的時候，這個物件里面有一個指標，這個指標將指向建構式的prototype屬性對應的值，建構式的prototype屬性對應的值，會通過__proto_這個屬性指向建構式，
當訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，呢么它將會去他的原型物件里面去尋找這個屬性，這個物件又會有自己的原型，會一直找下去，直到object.prototype，object.prototype將會指向null，一般來說原型鏈的盡頭是null，
JavaScript物件是通過參考來傳遞的，創建的每個新物件物體中并沒有一份屬于自己的副本，所以修改原型師，與之相關的物件也會繼承這個一改變，

18.This物件的理解，

this的指向簡單易懂

19.函式定義, 呼叫方式

1.函式的定義

    //式函宣告 
    function fn(){}  
    //這種函式定義方式需要顯式的指定函式名稱，在代碼執行前就被解釋器加載到作用域中，這個特性可以讓我們在函式定義之前就呼叫該函式，我們可以通過代碼來驗證這一點，
    
    //函式運算式 
    let fn = function(){} 
    //數運算式必須先宣告，再呼叫，通過函式直接量生成的函式，函式名稱可以省略，此時就是一個匿名函式，如下例所示：這樣可以使代碼更為緊湊，函式定義運算式特別適合用來定義那些只會用到一次的函式，
    
	//箭頭函式 
	()=>{} 
    let fn = ()=>{} 
    //如果{}內容只有一行{}和return關鍵字可省,
 
    //建構式 
    let fn = new Fcuntion()
    //宣告Fcuntion為一個物件，使用Function建構式定義函式的方式是一個函式運算式,這種方式會導致決議兩次代碼，影響性能，第一次決議常規的JavaScript代碼，第二次決議傳入建構式的字串

20.call apply bind 區別與應用

參考：call apply bind 區別與應用

21.作用域, 作用域鏈閉包

參考：深度理解請看
經典面試題：回圈中使用閉包解決 var 定義函式的問題這個運行的結果會輸出一堆 ，原因：for回圈中用var來申明變數i，此時var存在變數提升問題，并且6次回圈中全都共用一個變數，所以當setTimeout中的延遲函式開始執行時，回圈已經結束，此時i=6，所以會列印出6個6，

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
//第一種方法解決
for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
// /第一種方法閉包
for(var i=1;i<=5;i++) {
  (function(j){
    setTimeout(() => {
       console.log(j)
    }, j* 1000)
  })(i)
}
// 第三種方法定
for(var i=1;i<=5;i++) {
  setTimeout((j) => {
    console.log(j)
  }, i* 1000, i)
}

22.null，undefined 的區別？

null表示一個物件是“沒有值”的值，也就是值為“空”；
undefined 表示一個變數宣告了沒有初始化(賦值)；
undefined不是一個有效的JSON，而null是；
undefined的型別(typeof)是undefined；
null的型別(typeof)是object；
Javascript將未賦值的變數默認值設為undefined；
Javascript從來不會將變數設為null，它是用來讓程式員表明某個用var宣告的變數時沒有值的，

23.JS 深淺拷貝

參考：JS 深淺拷貝

24.函式背景關系, this指向

參考：執行背景關系this指向簡單易懂

25.js的運行機制, 事件佇列和回圈

參考：js的運行機制

26.js物件遍歷方法

參考：js物件遍歷總結

27.防抖和節流

參考：防抖和節流的區別和應用

瀏覽器

28.問題：前端頁面有哪三層構成，分別是什么？作用是什么？

分成：結構層、表示層、行為層，
結構層（structural layer）
由 HTML 或 XHTML之類的標記語言負責創建，標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語意含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的資訊，例如，P標簽表達了這樣一種語意：“這是一個文本段，”
表示層（presentation layer）
由 CSS 負責創建， CSS對“如何顯示有關內容”的問題做出了回答，
行為層（behaviorlayer）
負責回答“內容應該如何對事件做出反應”這一問題，這是 Javascript 語言和 DOM主宰的領域

29.你知道TCP協議、IP協議、HTTP協議分別在哪一層嗎？

TCP協議在傳輸層，IP協議在網路層，HTTP協議在應用層，

30.請說出三種減少網頁加載時間的方法

1.服務器角度
采取CDN加速 開啟gzip壓縮 允許使用強快取或協商快取 增加服務器帶寬
2.客戶端角度
合理組織CSS、JavaScript代碼位置 減少DOM操作、添加事件委托 部分操作可設定防抖和節流 對于可預見的操作采取preload或prerender的預加載 對于圖片可以懶加載 合并CSS圖片（精靈圖/雪碧圖） 減少使用iframe 資源優化打包角度
3.資源優化打包角度
使用打包工具將Js檔案、CSS檔案和靜態檔案進行恰當打包處理，

31.什么情況下會遇到跨域問題

跨域問題來自于瀏覽器的同源策略，即當協議、域名、埠號任意一個不同時，都會引發跨域問題，
jsonp、CORS可以用來解決跨域問題

未完持續更新