前端面試題整理及答案

es6 

 

通信/編程/原理篇

 

一. 原理篇

1. 對 SPA 單頁面應用的理解，優缺點是什么？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。⼀旦⻚⾯加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的重新加載。

優點：

1）用戶體驗好、快，內容的改變不需要重新加載整個頁面，避免了不必要的跳轉和重復渲染；

2）SPA 相對對服務器壓力小；

3）前后端職責分離，架構清晰，前端進行交互邏輯，后端負責數據處理；

缺點：

1）首屏（初次）加載慢：為實現單頁面 Web 應用功能及顯示效果，需要在加載資源的時候將JavaScript、CSS 統一加載，部分頁面按需加載；

2）不利於 SEO：由於所有的內容都在一個頁面中動態替換顯示，所以在 SEO 上其有着天然的弱勢。

二.算法與編程篇

1. 寫一個倒計時函數

let n = 10; // 全局變量
let time = setInterval(() => {
setTimeout(() => {
console.log('倒計時------', n);
n--;
if (n < 0) {
console.log('倒計時------時間到');
clearInterval(time); // 刪除時間 setInterval,每隔一段時間執行一次
}
})
}, 1000);

三.通信篇

1、ajax如何處理跨域

 

答:  首先回答這個問題,先知道什么是跨域,跨域問題來源於JavaScript的"同源策略"，即只有 協議+主機名+端口號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題。

查看瀏覽器開發者工具Console報錯：

Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.

http://www.abc.com/a/b 調用 http://www.def.com/a/b （跨域：域名不一致）
http://www.abc.com:8080/a/b 調用 http://www.abc.com:8081/d/c （跨域：端口不一致）

http://www.abc.com/a/b 調用 https://www.abc.com/d/c （跨域：協議不同）

　　跨域的幾種解決方案:

1、響應頭添加Header允許訪問

2、jsonp 只支持get請求不支持post請求
3、httpClient內部轉發
4、使用接口網關——nginx、springcloud zuul   (自己公司也是如此解決,大多互聯網公司都是用此方案)

　

 

 

參考文章鏈接如下:

https://blog.csdn.net/itcats_cn/article/details/82318092 跨域

https://www.jianshu.com/p/3507b078fe03

https://www.cnblogs.com/liandudu/p/14276948.html