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