小編給大家分享一下20道web前端面試題及問題答案，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、CSS問題
1.flex布局
display:flex; 在父元素設置，子元素受彈性盒影響，默認排成一行，如果超出一行，按比例壓縮
flex:1; 子元素設置，設置子元素如何分配父元素的空間，flex:1,子元素寬度占滿整個父元素align-items:center 定義子元素在父容器中的對齊方式，center 垂直居中justify-content:center 設置子元素在父元素中居中，前提是子元素沒有把父元素占滿，讓子元素水平居中。
2.css3的新特性
transtion
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現更為復雜的動畫效果。
ainimation實現動畫效果主要由兩部分組成：
通過類似Flash動畫中的幀來聲明一個動畫；
在animation屬性中調用關鍵幀聲明的動畫。
translate 3D建模效果
3.img中alt和title的區別
圖片中的 alt屬性是在圖片不能正常顯示時出現的文本提示。alt有利于SEO優化
圖片中的 title屬性是在鼠標在移動到元素上的文本提示。
4.用純CSS創建一個三角形
<style>
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>5.如何理解CSS的盒子模型？
標準盒子模型：寬度=內容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內容寬度（content+border+padding)
6.如何讓一個div水平居中
已知寬度，block元素 ，添加添加margin:0 auto屬性。
已知寬度，絕對定位的居中 ，上下左右都為0，margin:auto
7.如何讓一個div水平垂直居中
div {
position: relative / fixed; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}8.如何清除浮動？
clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式
{clear:both;height:0;overflow:hidden;}
給浮動元素父級設置高度
父級同時浮動（需要給父級同級元素添加浮動）
父級設置成inline-block，其margin: 0 auto居中方式失效
給父級添加overflow:hidden 清除浮動方法
萬能清除法 after偽類 清浮動（現在主流方法，推薦使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}9.css3實現三欄布局，左右固定，中間自適應
圣杯布局/雙飛翼布局
<style>
* {
margin: 0;
padding: 0;
}
.middle,
.left,
.right {
position: relative;
float: left;
min-height: 130px;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
.middle {
width: 100%;
background: blue;
word-break: break-all;
}
</style>
</head>
<body>
<div class='container'>
<div class='middle'></div>
<div class='left'></div>
<div class='right'></div>
</div>
</body>10.display:none 和 visibility: hidden的區別
display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
11.CSS中 link 和@import 的區別是？
link屬于HTML標簽，而@import是CSS提供的頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別，而link是HTML標簽，無兼容問題
link方式的樣式的權重 高于@import的權重.
12.position的absolute與fixed共同點與不同點
共同點：
改變行內元素的呈現方式，display被置為block
讓元素脫離普通流，不占據空間
默認會覆蓋到非定位元素上
不同點：
absolute的”根元素“是可以設置的
fixed的”根元素“固定為瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。
13..transition和animation的區別
Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition需要觸發一個事件才能改變屬性，
而animation不需要觸發任何事件的情況下才會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。
transition 規定動畫的名字 規定完成過渡效果需要多少秒或毫秒 規定速度效果 定義過渡效果何時開始
animation 指定要綁定到選擇器的關鍵幀的名稱
14.CSS優先級
不同級別：總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
1.屬性后面加!import 會覆蓋頁面內任何位置定義的元素樣式
2.作為style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標簽選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承
**同一級別：后寫的會覆蓋先寫的**
css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向，這樣可以盡早的過濾掉一些不必要的樣式規則和元素
15.雪碧圖：
多個圖片集成在一個圖片中的圖
使用雪碧圖可以減少網絡請求的次數，加快允許的速度
通過background-position，去定位圖片在屏幕的哪個位置
二、JS問題
1.typeof和instance of 檢測數據類型有什么區別？
相同點：
都常用來判斷一個變量是否為空，或者是什么類型的。
不同點：
typeof 返回值是一個字符串，用來說明變量的數據類型
instanceof 用于判斷一個變量是否屬于某個對象的實例.
16.使元素消失的方法
visibility:hidden、display:none、z-index=-1、opacity：0
1.opacity：0,該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經綁定了一些事件，如click事件也能觸發
2.visibility:hidden,該元素隱藏起來了，但不會改變頁面布局，但是不會觸發該元素已經綁定的事件
3.display:node, 把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪掉
.談一談深克隆和淺克??？
淺克隆:
只是拷貝了基本類型的數據，而引用類型數據，復制后也是會發生引用，我們把這種拷貝叫做“（淺復制）淺拷貝”，換句話說，淺復制僅僅是指向被復制的內存地址，如果原地址中對象被改變了，那么淺復制出來的對象也會相應改變。
深克?。?/p>
創建一個新對象，屬性中引用的其他對象也會被克隆，不再指向原有對象地址。
JSON.parse、JSON.stringify()
3.es6的新特性都有哪些？
let定義塊級作用域變量
沒有變量的提升，必須先聲明后使用
let聲明的變量，不能與前面的let，var，conset聲明的變量重名
const 定義只讀變量
const聲明變量的同時必須賦值，const聲明的變量必須初始化，一旦初始化完畢就不允許修改
const聲明變量也是一個塊級作用域變量
const聲明的變量沒有“變量的提升”，必須先聲明后使用
const聲明的變量不能與前面的let， var ， const聲明的變量重
const定義的對象\數組中的屬性值可以修改,基礎數據類型不可以
ES6可以給形參函數設置默認值
在數組之前加上三個點（...）展開運算符
數組的解構賦值、對象的解構賦值
箭頭函數的特點
箭頭函數相當于匿名函數，是不能作為構造函數的，不能被new
箭頭函數沒有arguments實參集合,取而代之用...剩余運算符解決
箭頭函數沒有自己的this。他的this是繼承當前上下文中的this
箭頭函數沒有函數原型
箭頭函數不能當做Generator函數，不能使用yield關鍵字
不能使用call、apply、bind改變箭頭函數中this指向
Set數據結構，數組去重
4.==和===區別是什么？
=賦值
==返回一個布爾值；相等返回true，不相等返回false；
允許不同數據類型之間的比較；
如果是不同類型的數據進行，會默認進行數據類型之間的轉換；
如果是對象數據類型的比較，比較的是空間地址
=== 只要數據類型不一樣，就返回false；
5.常見的設計模式有哪些？
1、js工廠模式
2、js構造函數模式
3、js原型模式
4、構造函數+原型的js混合模式
5、構造函數+原型的動態原型模式
6、觀察者模式
7、發布訂閱模式
6.call bind apply 的區別？
call() 和apply()的第一個參數相同，就是指定的對象。這個對象就是該函數的執行上下文。
call()和apply()的區別就在于，兩者之間的參數。
call()在第一個參數之后的 后續所有參數就是傳入該函數的值。
apply() 只有兩個參數，第一個是對象，第二個是數組，這個數組就是該函數的參數。
bind() 方法和前兩者不同在于： bind() 方法會返回執行上下文被改變的函數而不會立即執行，而前兩者是 直接執行該函數。他的參數和call()相同。
7.js繼承方式有哪些？
原型鏈繼承
核心： 將父類的實例作為子類的原型
構造繼承
核心：使用父類的構造函數來增強子類實例，等于是復制父類的實例屬性給子類
實例繼承
核心：為父類實例添加新特性，作為子類實例返回
拷貝繼承
組合繼承
核心：通過調用父類構造，繼承父類的屬性并保留傳參的優點，然后通過將父類實例作為子類原型，實現 函數復用
寄生組合繼承
核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實 例方法/屬性，避免的組合繼承的缺點
8.你怎樣看待閉包？
個人感覺，簡單來說閉包就是在函數里面聲明函數，本質上說就是在函數內部和函數外部搭建起一座橋梁，使得子函數可以訪問父函數中所有的局部變量，但是反之不可以，這只是閉包的作用之一，另一個作用，則是保護變量不受外界污染，使其一直存在內存中，在工作中我們還是少使用閉包的好，因為閉包太消耗內存，不到萬不得已的時候盡量不使用。
9.你是如何理解原型和原型鏈的？
把所有的對象共用的屬性全部放在堆內存的一個對象（共用屬性組成的對象），然后讓每一個對象的 __proto__存儲這個「共用屬性組成的對象」的地址。而這個共用屬性就是原型，原型出現的目的就是為了減少不必要的內存消耗。而原型鏈就是對象通過__proto__向當前實例所屬類的原型上查找屬性或方法的機制，如果找到Object的原型上還是沒有找到想要的屬性或者是方法則查找結束，最終會返回undefined
10.瀏覽器渲染的主要流程是什么?
將html代碼按照深度優先遍歷來生成DOM樹。
css文件下載完后也會進行渲染，生成相應的CSSOM。
當所有的css文件下載完且所有的CSSOM構建結束后，就會和DOM一起生成Render Tree。
接下來，瀏覽器就會進入Layout環節，將所有的節點位置計算出來。
最后，通過Painting環節將所有的節點內容呈現到屏幕上。
11.從輸入url地址到頁面相應都發生了什么？
1、瀏覽器的地址欄輸入URL并按下回車。
2、瀏覽器查找當前URL是否存在緩存，并比較緩存是否過期。3、DNS解析URL對應的IP。
4、根據IP建立TCP連接（三次握手）。
5、HTTP發起請求。
6、服務器處理請求，瀏覽器接收HTTP響應。
7、渲染頁面，構建DOM樹。
8、關閉TCP連接（四次揮手）
12.session、cookie、localStorage的區別
相同點
都是保存在瀏覽器端，且同源的。
不同點
cookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器和服務器間來回傳遞。
而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；
cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
13.js中跨域方法
同源策略（協議+端口號+域名要相同）
1、jsonp跨域(只能解決get）
原理：動態創建一個script標簽。利用script標簽的src屬性不受同源策略限制，因為所有的src屬性和href屬性都不受同源策略的限制，可以請求第三方服務器資源內容
步驟：
1).去創建一個script標簽
2).script的src屬性設置接口地址
3).接口參數，必須要帶一個自定義函數名，要不然后臺無法返回數據
4).通過定義函數名去接受返回的數據
2、document.domain 基礎域名相同 子域名不同
3、window.name 利用在一個瀏覽器窗口內，載入所有的域名都是共享一個window.name
4、服務器設置對CORS的支持
原理：服務器設置Access-Control-Allow-Origin HTTP響應頭之后，瀏覽器將會允許跨域請求
5、利用h6新特性window.postMessage()
14.前端有哪些頁面優化方法?
減少 HTTP請求數
從設計實現層面簡化頁面
合理設置 HTTP緩存
資源合并與壓縮
合并 CSS圖片，減少請求數的又一個好辦法。
將外部腳本置底（將腳本內容在頁面信息內容加載后再加載）
多圖片網頁使用圖片懶加載。
在js中盡量減少閉包的使用
盡量合并css和js文件
盡量使用字體圖標或者SVG圖標，來代替傳統的PNG等格式的圖片
減少對DOM的操作
在JS中避免“嵌套循環”和 “死循環”
盡可能使用事件委托（事件代理）來處理事件綁定的操作
15.Ajax的四個步驟
1.創建ajax實例
2.執行open 確定要訪問的鏈接 以及同步異步
3.監聽請求狀態
4.發送請求
16.數組去重的方法
ES6的set對象
先將原數組排序，在與相鄰的進行比較，如果不同則存入新數組
function unique(arr){
var arr2 = arr.sort();
var res = [arr2[0]];
for(var i=1;i<arr2.length;i++){
if(arr2[i] !== res[res.length-1]){
res.push(arr2[i]);
}
}
return res;
}利用下標查詢
function unique(arr){
var newArr = [arr[0]];
for(var i=1;i<arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}17.ajax中get和post請求的區別
get 一般用于獲取數據
get請求如果需要傳遞參數，那么會默認將參數拼接到url的后面；然后發送給服務器；
get請求傳遞參數大小是有限制的；是瀏覽器的地址欄有大小限制；
get安全性較低
get 一般會走緩存，為了防止走緩存，給url后面每次拼的參數不同；放在?后面，一般用個時間戳
post 一般用于發送數據
post傳遞參數，需要把參數放進請求體中，發送給服務器；
post請求參數放進了請求體中，對大小沒有要求；
post安全性比較高；
post請求不會走緩存；
18.ajax的狀態碼
2開頭
200 : 代表請求成功；
3開頭
301 : 永久重定向；
302: 臨時轉移
304 : 讀取緩存 [表示瀏覽器端有緩存，并且服務端未更新，不再向服務端請求資源]
307:臨時重定向
以4開頭的都是客戶端的問題；
400 :數據/格式錯誤
401: 權限不夠；（身份不合格，訪問網站的時候，登錄和不登錄是不一樣的）
404 : 路徑錯誤，找不到文件
以5開頭都是服務端的問題
500 : 服務器的問題
503: 超負荷；
19.移動端的兼容問題
給移動端添加點擊事件會有300S的延遲
如果用點擊事件，需要引一個fastclick.js文件，解決300s的延遲
一般在移動端用ontouchstart、ontouchmove、ontouchend
移動端點透問題,touchstart 早于 touchend 早于click,click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之后蒙層隱藏， 此時 click還沒有觸發，300ms之后由于蒙層隱藏，我們的click觸發到了下面的a鏈接上
盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
用fastclick，github.com/ftlabs/fast…
用preventDefault阻止a標簽的click
消除 IE10 里面的那個叉號
input:-ms-clear{display:none;}
設置緩存
手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。
圓角BUG
某些Android手機圓角失效
background-clip: padding-box;
防止手機中網頁放大和縮小
這點是最基本的，做為手機網站開發者來說應該都知道的，就是設置meta中的viewport
設置用戶截止縮放，一般寫視口的時候就已經寫好了。
20.JS中同步和異步,以及js的事件流
同步：在同一時間內做一件事情
異步：在同一時間內做多個事情
JS是單線程的，每次只能做一件事情，JS運行在瀏覽器中，瀏覽器是多線程的，可以在同一時間執行多個任務。
以上是20道web前端面試題及問題答案的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
