JavaEE
鴻蒙應(yīng)用開發(fā)
HTML&JS+前端
Python+大數(shù)據(jù)開發(fā)
人工智能開發(fā)
電商視覺設(shè)計(jì)
軟件測(cè)試
新媒體+短視頻
集成電路應(yīng)用開發(fā)
C/C++
狂野架構(gòu)師
IP短視頻
傳智播客整理的2018web前端開發(fā)面試試題（含答案）
更新時(shí)間:2018年11月27日14時(shí)36分 來(lái)源:傳智播客 瀏覽次數(shù):
傳智播客的老師選取整理了部分關(guān)于web前端開發(fā)考試的一些面試試題來(lái)給大家解惑
開放性題目：
1、你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用？
2、說(shuō)說(shuō)前端最近流行些什么，在自己以前的項(xiàng)目中都有應(yīng)用哪些？常去哪些網(wǎng)站？
技術(shù)型題目：
1、請(qǐng)寫出目前有哪些主流瀏覽器及對(duì)應(yīng)的內(nèi)核是叫什么？
1、IE瀏覽器內(nèi)核：Trident內(nèi)核，也被稱為IE內(nèi)核；
2、Chrome瀏覽器內(nèi)核：Chromium內(nèi)核 → Webkit內(nèi)核 → Blink內(nèi)核；
3、Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，也被稱Firefox內(nèi)核；
4、Safari瀏覽器內(nèi)核：Webkit內(nèi)核；
5、Opera瀏覽器內(nèi)核：最初是自主研發(fā)的Presto內(nèi)核，后跟隨谷歌，從Webkit到Blink內(nèi)核；
6、360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；
7、搜狗、遨游、QQ瀏覽器內(nèi)核：Trident（兼容模式）+Webkit（高速模式）；
8、百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核；
2、請(qǐng)解釋下JavaScript的同源策略？
同源策略簡(jiǎn)單的說(shuō)就是一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合。
3、什么是跨域，跨域請(qǐng)求資源的方法有哪些，你是如何解決跨域的？
3.1由于瀏覽器同源策略，凡是發(fā)送請(qǐng)求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。存在跨域的情況：
網(wǎng)絡(luò)協(xié)議不同，如http協(xié)議訪問https協(xié)議。
端口不同，如80端口訪問8080端口。
域名不同，如itcast.cn訪問itheima.com.com。
子域名不同，如www.xamj520.com.com訪問web.itcast.cn。
域名和域名對(duì)應(yīng)ip,如www.a.com訪問20.205.28.99.
3.2、跨域請(qǐng)求資源的方法：
(1)、porxy代理
定義和用法：proxy代理用于將請(qǐng)求發(fā)送給后臺(tái)服務(wù)器，通過服務(wù)器來(lái)發(fā)送請(qǐng)求，然后將請(qǐng)求的結(jié)果傳遞給前端。
實(shí)現(xiàn)方法：通過nginx代理；
注意點(diǎn)：1、如果你代理的是https協(xié)議的請(qǐng)求，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請(qǐng)求無(wú)法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種頗為常用的方式。
使用方法：一般需要后端人員在處理請(qǐng)求數(shù)據(jù)的時(shí)候，添加允許跨域的相關(guān)操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定義和用法：通過動(dòng)態(tài)插入一個(gè)script標(biāo)簽。瀏覽器對(duì)script的資源引用沒有同源限制，同時(shí)資源加載到頁(yè)面后會(huì)立即執(zhí)行（沒有阻塞的情況下）。
特點(diǎn)：通過情況下，通過動(dòng)態(tài)創(chuàng)建script來(lái)讀取他域的動(dòng)態(tài)資源，獲取的數(shù)據(jù)一般為json格式。
實(shí)例如下：
//原生js
<html>
<head>
<title></title>
<script type="text/javascript">
var returnjs = function(data){
alert(data.code);
};
// 提供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
var url = "http://www.xamj520.com/jsonp/get?code=1&callback=returnjs";//數(shù)據(jù)接收后臺(tái)
// 創(chuàng)建script標(biāo)簽，設(shè)置其屬性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script標(biāo)簽加入head，此時(shí)調(diào)用開始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
---------------------
//jQ版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here1</title>
<script type="text/javascript" src="jq.js"></script><!-- 記得引入jq -->
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://www.xamj520.com.com/jsonp/get?code=1",//數(shù)據(jù)接收后臺(tái)
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback:"returnjs",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
crossDomain:true,
success: function(json){
alert(json.code);
},
error: function(){
alert('fail');
}
});
});
</script>
</body>
</html>
---------------------
缺點(diǎn)：
1、這種方式無(wú)法發(fā)送post請(qǐng)求（這里）
2、另外要確定jsonp的請(qǐng)求是否失敗并不容易，大多數(shù)框架的實(shí)現(xiàn)都是結(jié)合超時(shí)時(shí)間來(lái)判定。
4、請(qǐng)說(shuō)說(shuō)get和post請(qǐng)求的區(qū)別，什么時(shí)候用post？
1、GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符，安全性很低
2、POST：一般用于修改服務(wù)器上的資源，通過提交表單來(lái)傳值，對(duì)所發(fā)送的信息沒有限制，安全性比GET高
3、在以下情況中，使用 POST 請(qǐng)求：
無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
需要修改服務(wù)器上的資源的時(shí)候
5、你有哪些性能優(yōu)化的方法？
1. 減少 HTTP 請(qǐng)求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預(yù)先載入組件
7. 減少 DOM 元素?cái)?shù)量
8. 切分組件到多個(gè)域
9. 最小化 iframe 的數(shù)量
10. 不要出現(xiàn)http 404 錯(cuò)誤
---------------------
6、請(qǐng)寫出函數(shù)運(yùn)行結(jié)果。
function test(){
var a;
function foo(){
return 2;
}
console.log(a);//undefined
console.log(foo());//2
a = 1;
}
test();
---------------------
因?yàn)樽址拗凭拖鹊竭@里，如果想要更多的可以直接點(diǎn)擊傳智播客web學(xué)院，來(lái)獲取更多的關(guān)于web前端培訓(xùn)知識(shí)
開放性題目：
1、你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用？
2、說(shuō)說(shuō)前端最近流行些什么，在自己以前的項(xiàng)目中都有應(yīng)用哪些？常去哪些網(wǎng)站？
1、請(qǐng)寫出目前有哪些主流瀏覽器及對(duì)應(yīng)的內(nèi)核是叫什么？
1、IE瀏覽器內(nèi)核：Trident內(nèi)核，也被稱為IE內(nèi)核；
2、Chrome瀏覽器內(nèi)核：Chromium內(nèi)核 → Webkit內(nèi)核 → Blink內(nèi)核；
3、Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，也被稱Firefox內(nèi)核；
4、Safari瀏覽器內(nèi)核：Webkit內(nèi)核；
5、Opera瀏覽器內(nèi)核：最初是自主研發(fā)的Presto內(nèi)核，后跟隨谷歌，從Webkit到Blink內(nèi)核；
6、360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；
7、搜狗、遨游、QQ瀏覽器內(nèi)核：Trident（兼容模式）+Webkit（高速模式）；
8、百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核；
2、請(qǐng)解釋下JavaScript的同源策略？
同源策略簡(jiǎn)單的說(shuō)就是一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合。
3、什么是跨域，跨域請(qǐng)求資源的方法有哪些，你是如何解決跨域的？
3.1由于瀏覽器同源策略，凡是發(fā)送請(qǐng)求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。存在跨域的情況：
網(wǎng)絡(luò)協(xié)議不同，如http協(xié)議訪問https協(xié)議。
端口不同，如80端口訪問8080端口。
域名不同，如itcast.cn訪問itheima.com.com。
子域名不同，如www.xamj520.com.com訪問web.itcast.cn。
域名和域名對(duì)應(yīng)ip,如www.a.com訪問20.205.28.99.
3.2、跨域請(qǐng)求資源的方法：
(1)、porxy代理
定義和用法：proxy代理用于將請(qǐng)求發(fā)送給后臺(tái)服務(wù)器，通過服務(wù)器來(lái)發(fā)送請(qǐng)求，然后將請(qǐng)求的結(jié)果傳遞給前端。
實(shí)現(xiàn)方法：通過nginx代理；
注意點(diǎn)：1、如果你代理的是https協(xié)議的請(qǐng)求，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請(qǐng)求無(wú)法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種頗為常用的方式。
使用方法：一般需要后端人員在處理請(qǐng)求數(shù)據(jù)的時(shí)候，添加允許跨域的相關(guān)操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定義和用法：通過動(dòng)態(tài)插入一個(gè)script標(biāo)簽。瀏覽器對(duì)script的資源引用沒有同源限制，同時(shí)資源加載到頁(yè)面后會(huì)立即執(zhí)行（沒有阻塞的情況下）。
特點(diǎn)：通過情況下，通過動(dòng)態(tài)創(chuàng)建script來(lái)讀取他域的動(dòng)態(tài)資源，獲取的數(shù)據(jù)一般為json格式。
實(shí)例如下：
//原生js
<html>
<head>
<title></title>
<script type="text/javascript">
var returnjs = function(data){
alert(data.code);
};
// 提供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
var url = "http://www.xamj520.com/jsonp/get?code=1&callback=returnjs";//數(shù)據(jù)接收后臺(tái)
// 創(chuàng)建script標(biāo)簽，設(shè)置其屬性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script標(biāo)簽加入head，此時(shí)調(diào)用開始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
---------------------
//jQ版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here1</title>
<script type="text/javascript" src="jq.js"></script><!-- 記得引入jq -->
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://www.xamj520.com.com/jsonp/get?code=1",//數(shù)據(jù)接收后臺(tái)
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback:"returnjs",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
crossDomain:true,
success: function(json){
alert(json.code);
},
error: function(){
alert('fail');
}
});
});
</script>
</body>
</html>
---------------------
缺點(diǎn)：
1、這種方式無(wú)法發(fā)送post請(qǐng)求（這里）
2、另外要確定jsonp的請(qǐng)求是否失敗并不容易，大多數(shù)框架的實(shí)現(xiàn)都是結(jié)合超時(shí)時(shí)間來(lái)判定。
4、請(qǐng)說(shuō)說(shuō)get和post請(qǐng)求的區(qū)別，什么時(shí)候用post？
1、GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符，安全性很低
2、POST：一般用于修改服務(wù)器上的資源，通過提交表單來(lái)傳值，對(duì)所發(fā)送的信息沒有限制，安全性比GET高
3、在以下情況中，使用 POST 請(qǐng)求：
無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
需要修改服務(wù)器上的資源的時(shí)候
5、你有哪些性能優(yōu)化的方法？
1. 減少 HTTP 請(qǐng)求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預(yù)先載入組件
7. 減少 DOM 元素?cái)?shù)量
8. 切分組件到多個(gè)域
9. 最小化 iframe 的數(shù)量
10. 不要出現(xiàn)http 404 錯(cuò)誤
---------------------
6、請(qǐng)寫出函數(shù)運(yùn)行結(jié)果。
function test(){
var a;
function foo(){
return 2;
}
console.log(a);//undefined
console.log(foo());//2
a = 1;
}
test();
---------------------
因?yàn)樽址拗凭拖鹊竭@里，如果想要更多的可以直接點(diǎn)擊傳智播客web學(xué)院，來(lái)獲取更多的關(guān)于web前端培訓(xùn)知識(shí)
最新資訊
0
分享到：
文章列表.jpg)
javaee
科列表頁(yè)面右側(cè)廣告圖.jpg)
python
web
design
據(jù)學(xué)科列表頁(yè)右側(cè).png)
cloud
test
c
netmarket
pm
Linux
movies
robot
uids
Python
jdbc
北京校區(qū)
江蘇傳智播客教育科技股份有限公司 版權(quán)所有Copyright 2006-2024 All Rights Reserved 蘇ICP備16007882號(hào)營(yíng)業(yè)執(zhí)照增值電信業(yè)務(wù)經(jīng)營(yíng)許可證出版物經(jīng)營(yíng)許可證
蘇公網(wǎng)安備 32132202001156號(hào)