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