一般計算機前端企業面試筆試題

為大家帶來一些web前端的面試題，希望可以幫助到大家啊。


1.css3有哪些新特性?


選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影


2.響應式布局怎麼理解的，響應式布局是通過什麼實現?


根據不同的屏幕載入不同的css樣式


1).移動端適配


2).一套代碼適配pc端移動端多個


3.js創建對象有哪幾種方式?


1).自面量


2).newObject


3).構造函數


4.es6有哪些新特性?


1).letconst


2).模板字元串


3).方法的簡寫屬性的簡寫


4).三點運算符


5).解構賦值


6).箭頭函數


7).setmap


8).class類


9).模塊化


5.箭頭函數和普通的方法有什麼區別?


1).箭頭函數省略了function


2).箭頭函數裡面的this指向上下文(可以改變this指向)


6.gulp可以干什麼


gulp自動化構建工具。


壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass


7.清除浮動有哪些方法。


1).浮動元素的父元素overflow:hiddenoverflow:auto


2).浮動元素的最後面加一個空div給他clear:both


3).after偽類清除浮動


.clearfix:after{


content:"";


dislpay:block;


height:0px;


clear:both;


}


4)、給父元素設置高度。


8.行內元素塊元素的區別?


1)塊元素默認獨佔一行，行內元素默認情況不獨佔一行，行內元素的的寬度就是內容的寬度


2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度


3)默認可以margin上下左右，行內默認只能margin左右不能上下。


9.網站載入速度優化?


1).圖片不失真盡量小


2).多個背景圖片合並


3).代碼壓縮代碼合並


4).js寫到頁面最底部


5).懶載入


6).不要有冗餘代碼


7).伺服器帶寬款一些


8).伺服器固態硬碟


9).開啟緩存


10.以前寫代碼什麼情況會成出現亂碼怎麼解決?


解決亂碼文件保存的編碼和設置的編碼必須保持一致


11.以前如何測試調試移動端頁面


1).首先在瀏覽器自帶的調試工具模擬器裡面調試


2).真機的內置瀏覽器調試


3).真機上面的UC裡面調試


4).真機上的微信裡面調試。

❹ web前端面試經常問到的面試題有哪些

Web前端經常被問到的面試題及答案

一、HTML+CSS

1.對WEB標准以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;

2.xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時載入

前者無兼容性，後者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

後者優先順序高

7.前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js

8.css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些數據類型

Object number function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?

強制(parseInt,parseFloat,number)

隱式(== – ===)

3.split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字元串

4.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

7.IE和標准下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

9.call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據

使用eval parse 鑒於安全性考慮 使用parse更靠譜

11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

❺ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

JavaScript面試題:字元串處理
在應聘前端程序員時，在筆試部分經常會考到字元串處理的問題。這些題有一個特點，站在考官的角度去考慮，它考的不是你會不會，而是你能不能在不借用XX手冊或者XX指南再或者網路谷歌的情況下，用比較簡潔的方式寫出答案來。就具體的字元串處理問題，鄭州尚學堂給大家分享一下。
1、字元串轉換

字元串轉換是最基礎的要求和工作，你可以將任何類型的數據都轉換為字元串，你可以用下面三種方法的任何一種：

var num= 19; // 19
var myStr = num.toString(); // "19"

你同樣可以這么做：

var num= 19; // 19
var myStr = String(num); // "19"

或者，再簡單點兒：

var num= 19; // 19
var myStr = "" +num; // "19"

2、字元串分割

字元串分割，即將一個字元串分割為多個字元串，JavaScript中給我們提供了一個非常方便的函數，如：

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3); // ["I", "Love", "You"];

split()的第二個參數，表示返回的字元串數組的最大長度。

3、獲取字元串長度

字元串長度是在開發中經常要用到的，非常簡單如下：

var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25

4、查詢子字元串

很多人都會忘記這幾個JavaScript的自帶的方法，或者忘記它們的具體用法，從而導致在做題的時候不得不嵌套for循環來做。

第一個函數：indexOf()，它從字元串的開頭開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基於0開始,找不到返回-1

第二個函數：lastIndexOf()，它從字元串的末尾開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14

以上兩個函數同樣接收第二個可選的參數，表示開始查找的位置。

5、字元串替換

單單查到字元串應該還不會停止，一般題目都還經常會遇到讓你查到並替換為你自己的字元串，例如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"

默認只替換第一次查找到的，想要全局替換，需要置上正則全局標識，如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
6、查找給定位置的字元或其字元編碼值

想要查找給定位置的字元，你可以使用如下函數：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同樣從0開始

同樣，它的一個兄弟函數就是查找對應位置的字元編碼值，如：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111

7、字元串連接

字元串連接操作可以簡單到用一個加法運算符搞定，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"

同樣，JavaScript也自帶了相關的函數，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);//"I,love,you!Do,you,love,me?"

其中concat()函數可以有多個參數，傳遞多個字元串，拼接多個字元串。

8、字元串切割和提取

有三種可以從字元串中抽取和切割的方法，如：

第一種，使用slice():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"

第二種，使用substring():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"

第三種，使用substr():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"

與第一種和第二種不同的是，substr()第二個參數代表截取的字元串最大長度，如上結果所示。

9、字元串大小寫轉換

常用的轉換為大寫或者小寫字元串函數，如下：

var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字元串匹配

字元串匹配可能需要你對正則表達式有一定的了解，先來看看match()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me

如你所見，match()函數在字元串上調用，並且接受一個正則的參數。來看看第二個例子，使用exec()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;

❻ 前端常見面試題

前端開發可能問到的問題：
自我介紹（一定要對項目很熟悉）
ui-app web前端技術體系？

響應式怎麼做？

render跟狀態的差異
類組件的生命周期？
阻止冒泡，阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。

用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)

display有幾個值？默認值？
position有幾個值？默認值？
div水平垂直居中？
position有哪些值

react相關問題（概念理解、通訊組件等）、react常用內置
React-router
html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎麼聯調和上線的（現場想合適的前後端聯調方式，能和webpack環境切換聯系起來）
antd的Form shouldUpdate增量更新方式，性能優化。
對Hooks的理解

3:操作dom點擊事件向伺服器上傳數據，在上傳未完成之前不可重復操作事件
4:日期格式化，日期不足前兩位補0（2021-06-06 06:06:00）

用css寫一個布局，左側固定寬度，右側自適應

你看

❼ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些

一、不定項選擇題 （每題3分，共30分）
1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是（ CD ）
A. 對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素，可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（ A ）
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕，使之打開一個新窗口，載入一個網頁，以下JavaScript代碼中可行的是（ AD ）
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>，以下代碼中可行的是（ BD ）
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼：
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是（ CD ）
A. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，第二個文本框的內容不變
7. 下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname)，用於輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個「-」，後面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中，（ A ）能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼！」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
9. 關於正則表達式聲明6位數字的郵編，以下代碼正確的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理，以下說明正確的是（ BCD ）
A. Xml是種可擴展標記語言，格式更規范，是作為未來html的替代
B. Xml一般用於傳輸和存儲數據，是對html的補充，兩者的目的不同
C. 在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同
D. 在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象，並列舉window對象的常用方法至少5個 （10分）
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 （10分）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之後關閉窗口； （10分）
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎？」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，並將以下字元串中的html標簽去除掉（15分）
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>

❽ 參加Web前端面試一定看的Web前端面試題庫（一）

今天小編要跟大家分享的文章是關於參加Web前端面試一定看的Web前端面試題庫。正在學習web前端知識准備參加web前端面試的小夥伴們來和小編一起看一看吧。


HTML(5)和CSS3方面


01．前端與後端數據交互的格式有哪些，為什麼大部分現在都用json而不用xml？


答：XML：知了堂3歲


JSON：{name:」知了堂」,age:3}


JSON書寫方便節省位元組，更輕量，前後台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。


02．Flex布局熟悉嗎，說幾個常用的屬性。


答：這個幾乎每天都在用，還是挺熟悉的。


__
display：flex


___align-items多個


__
align-content：單個


___justify-content


___justify-items


___flex-direction


__
flex-wrap：


__
flex-basic：初始盒子寬度_lex


_
_lex-grow：增長因子2004*40=1601,1,1,21/5*40_lex


___flex-shrink
:縮減因子20060*4=240


03.說一下CSS盒模型。


答：CSS的盒模型包含了以下幾個內容margin,padding,border,content。


在計算盒子寬高的時候，IE和Chrome會有一些區別，IE算到border，Chrome的寬度只包含content區域，因此CSS3提供了box-sizing這個屬性來修改。


04.CSS常用選擇器，選擇器權重問題。


答：*(has，not，target，root。。。。)通配符，ID，class，attr屬性，element，子代（>+~）,


___UI狀態偽類選擇器（hover,active,link,seceted..，checked），


___結構性偽類選擇器(nth-child,fist-child,last,nth-of-type...before,after....)


___!important
>style>id>class>elemnet>偽類和屬性


05.請用5種方式實現元素垂直居中。


答：


（1）flex

（2）Tranform

（3）定位+margin負值（知道子節點寬高）

（4）定位+margin:auto

（5）JS動態計算top、left值


06.什麼是BFC？垂直margin重疊是為什麼？怎麼解決這個問題？


答：


概念：BFC全稱BlockFormatting
Context，中文意思為塊級格式上下文。


通俗的來說：BFC是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子內部的元素無論如何翻江倒海，都不會影響到外部。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。比如清除浮動）並且在一個BFC中，塊元素與行元素都會垂直的沿著其父元素的邊框排列。


如何觸發BFC


1.浮動元素，float除none以外的值


2.position的值不為static或者relative


3.display不為none


4.overflow除了visible以外的值


BFC的應用


1.解決浮動塌陷問題


2.自適應兩欄布局（我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄布局。方法：給沒有浮動的元素加overflow：hidden。）


3.解決設置margin值重疊問題。


總結：


BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。


07.什麼是浮動，有什麼作用，有何副作用，以及如何清除浮動？


答：浮動是使用給節點添加float屬性，最初的設計是用來實現文字環繞的。


添加了float的節點脫離文檔流，同時觸發節點的BFC，讓節點往一個方向靠，並排成一行。


當一個父節點的子節點全部浮動，就會造成父節點高度塌陷，


解決的辦法首先是可以給父節點主動添加高度值，再者利用只要有一個子節點不浮動原理來添加一個不浮動的節點（通常使用偽元素before，after），再者還可以觸發父節點的bfc，常用的定位，或者overflow：hidden。


08.CSS裡面有哪些相對單位？都是相對什麼的？


答：REM,EM,VW,VH等


__
REM：相對於根節點html的font-size


__
EM：父節點的font-size


__W：視口的寬度為100VW，相對於把視口分為100份


__
VH：視口高度為100VH，同理


__隕系ノ歡伎梢栽諞貧俗鮃趁媸逝洌ǔJ褂_EM和VW


09.fixed是相對於誰定位的？如果加上transform會出現問題嗎？


答：fixed定位相對於瀏覽器視口來定位的。


添加上transform以後，fixed定位會失效。如果fixed元素的祖先有transform屬性,則fixed元素會相對與這個祖先計算,而不是視口。


10.為什麼不推薦用style內聯元素？內聯元素有什麼缺點？（css文件可以緩存）


答：首先是style是節點的屬性，不能被緩存；代碼的可讀性和可維護性相對弱一些，特別是多人協作開發的時候。但是如果一個頁面的style樣式足夠少的時候，可以使用style元素，因為一次請求最多攜帶14K的數據，如果足夠小，還可以節約一次請求。


11.簡單描述http與https協議，以及為什麼要三次握手？什麼是長鏈接？


答：http與https都是目前主流傳輸協議。


目前http協議已經發展到2.0階段，支持長鏈接，斷點續傳，cache緩存策略，多路復用，伺服器推送等。


https相對於http更安全，增加了證書SSL加密，埠是433。


客戶端SYN=1,Seq
=x，服務端接受到後，服務端就知道了，有一個客戶端要鏈接我，然後伺服器就會開啟一個TCPsocket的埠，然後返回數據給前端也是SYN=1,SEQ=Y,ACK=x+1，客戶端接受到後，在發一個seq，和ACK+1.主要是為了防止開啟無用的鏈接，或者網路延遲丟包，伺服器無法確定到底客戶端有沒有收到消息。


在使用長連接的情況下，當一個網頁打開完成後，客戶端和伺服器之間用於傳輸HTTP數據的TCP連接不會關閉，客戶端再次訪問這個伺服器時，會繼續使用這一條已經建立的連接。


Keep-Alive不會永久保持連接，它有一個保持時間，可以在不同的伺服器軟體（如Apache）中設定這個時間。實現長連接需要客戶端和服務端都支持長連接。


為何需要長鏈接?


長鏈接可以省去較多的TCP建立和關閉的操作，減少浪費，節約時間。


12.http常見狀態碼有哪些？301和302的區別是什麼？304是指什麼？


答：404：找不到資源；


500：伺服器內部錯誤；


200：請求成功，並返回數據；


301：永久重定向；


302：_偈幣貧墒褂迷_RI；


304：資源未修改，可使用緩存；


400：請求語法錯誤（一般為參數錯誤）；


403：沒有許可權訪問。。。等


13.瀏覽器頁面渲染的流程是什麼（輸入url後頁面發生什麼）？


答：首先dns解析IP，建立tcp鏈接下載資源，構建dom樹，當遇到link標簽，會下載並執行解析css（不會阻止dom樹的構建）當遇到script標簽的是，dom樹構建會暫停，下載並執行完js才會繼續（defer（下載延遲執行），async（非同步下載並執行））然後再布局和繪制（layout,paint）最後再render。


14.什麼是reflow與repain？哪些操作會觸發reflow，如何避免？


答：reflow：迴流，當元素的尺寸、結構或觸發某些屬性時，瀏覽器會重新渲染頁面，稱為迴流。


__repain：重繪，當元素的樣式（布局不發生）發生改變的時候。


以下常見操作都會觸發：


瀏覽器窗口大小改變


元素尺寸、位置、內容發生改變


元素字體大小變化


添加或者刪除可見的dom元素


激活CSS偽類（例如：:hover）等


盡量減少DOM操作。


15.HTML5常用的API有哪些？你用過哪些？


答：video、audio，獲取dom的方式（queryselector），websocket


Canvas，svg，requestAnimationFrame，Geolocation，stroage，notification，OrientationAPI用於檢測手機的擺放方向等


16.請列舉出幾個常見的瀏覽器兼容性問題？


答：現在市面上IE678基本已經停止使用了，所以盡量不要說這方面的兼容性。


1、不同瀏覽器的默認margin和padding不一致


2、圖片的默認間距不一致


3、獲取視口的寬高window.innerheight/width


4、CSS3的動畫，過渡，漸變，flex也有


5、Canvas，SVG


6、IE9以下不能的opacity，使用filter:alpha(opacity=50);


7、event.offsetX/Y


8、綁定事件IE9才支持


17.什麼是瀏覽器緩存（知道什麼是強緩存和協商緩存）？


答：當瀏覽器訪問過後的資源，會被瀏覽器緩存的本地，當下次在訪問頁面的時候，如果沒有過期，直接讀取緩存，加快瀏覽器的載入效率。


http緩存機制：


1、Expires：通過設置最大緩存時間，當時間超過了就去伺服器下載，


2、http1.1，cache-control：max-age=time，當time過期後，檢測etag帶上etag往伺服器發請求，如果etag沒變，直接告訴瀏覽器讀本地緩存，如果沒有etag就會檢測Last-Modified，判斷如果上一次更改的時候，距離本次訪問時間比較久，說明文件沒有發生改變，返回304。


強緩存就是當前訪問時間還在設置的最大時間范圍內。


協商緩存就是時間過了，通過檢查etag或者last-modifed來使用緩存的機制。


18.說一下瀏覽器垃圾回收機制


答：老：標記清除演算法，GC會檢測當前對象有沒有被變數所引用，如果沒有就回收。


新：Scavenge，把內存空間分為兩部分，分別為From空間和To空間。當一個空間滿了以後，會把空間中活動對象轉移到另外一個空間，這樣互換。


以上就是小編今天為大家分享的關於參加Web前端面試一定看的Web前端面試題庫的文章，希望本篇文章能夠對正准備參加web前端面試的小夥伴們有所幫助，想要了解web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利！

❾ 2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。

1.說幾條寫JavaScript的基本規范?


1)不要在同一行聲明多個變數;


2)請使用===/!==來比較true/false或者數值;


3)使用對象字面量替代newObject這種形式;


4)減少使用全局函數,全局變數;


5)switch語句必須帶有default分支;


6)if語句必須使用大括弧;


7)for-in循環中的變數;


應該使用var關鍵字明確限定作用域;


從而避免作用域全局污染。


2.說說平衡二叉樹?


平衡二叉搜索樹(Self-balancingbinarysearchtree)


又被稱為AVL樹。


具有以下性質：


1)它是一棵空樹或它的左右兩個子樹


的高度差的絕對值不超過1，


並且左右兩個子樹都是一棵平衡二叉樹。


2)平衡二叉樹必定是二叉搜索樹，反之則不一定。


3)平衡二叉樹的常用實現方法有紅黑樹、AVL、


替罪羊樹、Treap、伸展樹等。


最小二叉平衡樹的節點的公式如下：


F(n)=F(n-1)+F(n-2)+1備註：1是根節點，


F(n-1)是左子樹的節點數量，


F(n-2)是右子樹的節點數量。


3.清除浮動和解決垂直外邊距重疊的解決方案?


問題描述:


1)父元素沒有設置寬高，尺寸由子元素撐起;


子元素一旦浮動，父元素高度會發生塌陷。


2)子元素設置margin-top會作用的父元素的margin-top;


此時會造成垂直外邊距重疊。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同點:


都用於瀏覽器端存儲的緩存數據;


不同點:


1)存儲內容是否發送到伺服器端


當設置了Cookie後，數據會發送到伺服器端，


造成一定的寬頻浪費;xxxstorage則會將數據保存


到本地，不會造成寬頻浪費;


2)數據存儲大小不同


Cookie數據不能超過4K，適用於會話標識;


xxxstorage數據存儲可以達到5M;


3)數據存儲的有效期限不同


cookie只在設置了Cookid過期時間


之前一直有效，即使關閉窗口或者瀏覽器;


sessionStorage,僅在關閉瀏覽器之前有效;


localStorage,數據存儲永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的瀏覽器窗口


中共享，即使是同一個頁面;


5.判斷一個單詞是否是迴文?


迴文是指把相同的詞彙或句子，


在下文中調換位置或顛倒過來，


產生首尾回環的情景，


叫做迴文，也叫回環。


比如cacac，redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不藉助臨時變數，進行兩個整數的交換?


輸入a=3,b=1,


輸出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.請寫出至少5個html5新增的標簽，並說明其語義和應用場景?


section：定義文檔中的一個章節;


nav：定義只包含導航鏈接的章節;


header：定義頁面或章節的頭部;


它經常包含logo、頁面標題和導航性的目錄。


footer：定義頁面或章節的尾部;


它經常包含版權信息、法律信息鏈接和反饋建議用的地址。


aside：定義和頁面內容關聯度較低的內容，


如果被刪除，剩下的內容仍然很合理。


8.get和post請求在緩存方面的區別?


get請求類似於查找的過程，用戶獲取數據，


可以不用每次都與資料庫連接，所以可以使用緩存。


post不同，post做的一般是修改和刪除的工作，


所以必須與資料庫交互，所以不能使用緩存。


因此get請求適合於請求緩存。


9.如何解決非同步回調地獄?


promise、generator、async/await


10.圖片的懶載入和預載入?


預載入：提前載入圖片，


當用戶需要查看時可直接


從本地緩存中渲染。


懶載入：懶載入的主要目的


是作為伺服器前端的優化，


減少請求數或延遲請求數。


兩種技術的本質：


兩者的行為是相反的，


一個是提前載入，


一個是遲緩甚至不載入。


懶載入對伺服器前端有一定


的緩解壓力作用，


預載入則會增加伺服器前端壓力。


11.bind，apply，call的區別?


通過apply和call改變函數的this指向，


這兩個函數的第一個參數都是一樣的，


表示要改變指向的那個對象，


第二個參數，apply是數組，


而call則是arg1,arg2...這種形式。


通過bind改變this作用域


會返回一個新的函數，


這個函數不會馬上執行。


12.js怎麼控制一次載入一張圖片，載入完後再載入下一張?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


載入中

❿ Web前端崗位面試題有哪些

前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML

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

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？

二、css

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題？

1. 
   1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
   2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
   3、為什麼要初始化CSS樣式。
   4、absolute的containing block計算方式跟正常流有什麼不同？
   5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
   6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
   7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
   8、CSS權重優先順序是如何計算的？
   9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
   10、移動端的布局用過媒體查詢嗎？
   11、使用 CSS 預處理器嗎？喜歡那個？
   12、CSS優化、提高性能的方法有哪些？
   13、瀏覽器是怎樣解析CSS選擇器的？
   14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
   15、margin和padding分別適合什麼場景使用？
   16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
   17、元素豎向的百分比設定是相對於容器的高度嗎？
   18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
   19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
   20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
   21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
   22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
   23、你對line-height是如何理解的？
   24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
   25、怎麼讓Chrome支持小於12px 的文字？
   26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
   27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
   28、position:fixed;在android下無效怎麼處理？
   29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
   30、display:inline-block 什麼時候會顯示間隙？(攜程)
   31、overflow: scroll時不能平滑滾動的問題怎麼處理？
   32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
   33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
   34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
   35、style標簽寫在body後與body前有什麼區別？
   
   四、JavaScript
   
   1、介紹JavaScript的基本數據類型。
   2、說說寫JavaScript的基本規范？
   3、JavaScript原型，原型鏈 ? 有什麼特點？
   4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
   5、Javascript如何實現繼承？
   6、Javascript創建對象的幾種方式？
   7、Javascript作用鏈域?
   8、談談This對象的理解。
   9、eval是做什麼的？
   10、什麼是window對象? 什麼是document對象?
   11、null，undefined的區別？
   12、寫一個通用的事件偵聽器函數(機試題)。
   13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
   14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
   15、什麼是閉包（closure），為什麼要用它？
   16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
   17、如何判斷一個對象是否屬於某個類？
   18、new操作符具體幹了什麼呢?
   19、用原生JavaScript的實現過什麼功能嗎？
   20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
   21、對JSON的了解？
   22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
   23、js延遲載入的方式有哪些？
   24、Ajax 是什麼? 如何創建一個Ajax？
   25、同步和非同步的區別?
   26、如何解決跨域問題?
   27、頁面編碼和被請求的資源編碼如果不一致如何處理？
   28、模塊化開發怎麼做？
   29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole

   Definition）規范區別？
   30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
   31、讓你自己設計實現一個requireJS，你會怎麼做？
   32、談一談你對ECMAScript6的了解？
   33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
   34、非同步載入的方式有哪些？
   35、documen.write和 innerHTML的區別?
   36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
   37、.call() 和 .apply() 的含義和區別？
   38、數組和對象有哪些原生方法，列舉一下？
   39、JS 怎麼實現一個類。怎麼實例化這個類
   40、JavaScript中的作用域與變數聲明提升？
   41、如何編寫高性能的Javascript？
   42、那些操作會造成內存泄漏？
   43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
   44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
   45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
   46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
   47、jquery.extend 與 jquery.fn.extend的區別？
   48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
   49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
   50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
   52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
   53、針對 jQuery性能的優化方法？
   54、Jquery與jQuery UI有啥區別？
   55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
   56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
   57、jQuery和Zepto的區別？各自的使用場景？
   58、針對 jQuery 的優化方法？
   59、Zepto的點透問題如何解決？
   60、jQueryUI如何自定義組件?
   61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
   62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
   63、移動端最小觸控區域是多大？
   64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
   65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
   66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
   67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
   68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
   69、解釋JavaScript中的作用域與變數聲明提升？
   70、那些操作會造成內存泄漏？
   71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   72、Node.js的適用場景？
   (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
   73、解釋一下 Backbone 的 MVC 實現方式？
   74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
   75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
   76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
   77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
   78、簡述一下 Handlebars 的基本用法？
   79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
   80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
   檢測瀏覽器版本版本有哪些方式？
   81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲