阿里字節前端面試 https://www.nowcoder.com/discuss/412947?type=post&order=time&pos=&page=0&channel=
JavaScript 數據類型以及 typeof 返回值
typeof x undefined
typeof undefined undefined
typeof true boolean
function A() {}
typeof A function
const arr = []
const obj = {}
typeof arr object
typeof obj object
如何區分 arr 和 obj
Array.isArray() || instanceof || constructor
Object.prototype.toString.call(obj) ===Object.prototype.toString.call([])
注意：instanceof在判斷數組是，即會把數組當做Array類型，又會把數組當做Object類型，都會返回true
前端性能優化
減少請求數：合併資源(精靈圖)，減少http請求數。
加快請求速度：預解析DNS，減少域名數，CDN分支。
緩存：http請求協議緩存，離線緩存，離線數據緩存(localStorage)。
渲染：js/css優化，服務器渲染，加快順序。
JPG和PNG的區別
1.JPG是有損壓縮格式，PNG是無損壓縮格式
2.JPG圖片沒有透明背景，PNG有透明背景
樹和圖的遍歷方式
數的遍歷方式
前中後序遍歷 遞歸||非遞歸 非遞歸用棧
層次遍歷(層次遍歷可以設一個隊列，把元素放在隊列裏，每次輸出隊頭元素。)
圖的遍歷方式
DFS BFS
數組和鏈表的區別
數組是將元素在內存中連續存放，由於每個元素佔用內存相同，可以通過下標迅速訪問任何元素
鏈表恰好相反，鏈表中的元素在內存中不是順序存儲的，而是通過元素中的指針聯繫到一起。
數組 遍歷方便 插入刪除麻煩 鏈表恰好相反
ios七層模型
| 物理層 | 數據鏈路層 | 網絡層 | 傳輸層 | 會話層 | 表示層 | 應用層 |
|---|---|---|---|---|---|---|
| 比特 | 幀 | IP | TCP/UDP | http/web Socket |
TCP 和 UDP 的區別。
| TCP | UDP |
|---|---|
| 面向連接 | 面向無連接 |
| 提供可靠的服務 | 提供不可靠的服務 |
| 面向字節流 | 面向報文(沒有阻塞控制 應用場景：IP電話 實時視頻會議) |
| 首部開銷20字節 | 首部開銷8字節 |
| 點對點 | 一對多 多對多 |
| TCP的邏輯信道信號是全雙工的可靠通信 | UDP則是不可靠的信道 |
HTTP 2.0 新增
二進制協議，多路複用(共享連接)，數據流，信息頭壓縮，客戶端推送。
HTTP狀態碼
200 請求成功
301 永久重定向
302 臨時重定向
304 not Modified 未修改
400 客戶端錯誤
401 當前身份驗證
403 服務器已經得到請求，但是拒絕執行
500 客戶端在執行時發生錯誤，無法完成請求。
localStorage和Cookie
localStorage和Cookie都可以在同源窗口中訪問
localStorage存儲大小爲5M，Cookie的存儲大小爲4k
localStorage只要存放到本地只要不刪除就一直存在，Cookie有過期時間expries
Cookie 可能存在的問題，簡單介紹 XSS 和 CSRF。
XSS：指的是跨站腳本攻擊，是一種代碼注入攻擊。攻擊者通過網站中注入惡意腳本，使之在瀏覽器上運行，從而盜取用戶的信息入Cookie等。
xss的本質是因爲惡意網站沒有進行過濾，與正常的代碼混合在一起了，瀏覽器沒辦法辨別哪些腳本是可信的，從而導致惡意代碼的執行。
XSS一般分爲存儲型，反射型和DOM型。
存儲型：指的是惡意代碼提交到數據庫中，當用戶請求數據的時，服務器就將其拼接爲HTML後返回給用戶，從而導致代碼的執行。
反射型：指的是攻擊者先將含有攻擊的代碼發送給目標用戶，用戶打開後，會訪問鏈接對應的服務器，服務器收到鏈接請求時，會將帶有的XSS代碼的數據再次發送給用戶，此時用戶瀏覽器就會默認執行帶有XSS代碼的腳本，此時會觸發XSS漏洞。
DOM型：指的是xss代碼並不需要服務器的參與，觸發xss靠的是瀏覽器的DOM解析，完全是客戶端的事情
防範XSS：輸入過濾，輸出編碼，通過設置set-cookie httponly禁止腳本執行cookie。也可以設置只有在https協議下可以發送cookie。
CSRF：指的是跨站請求僞造攻擊，攻擊者誘惑用戶進入一個第三方網站，然後該網站向攻擊網站發送跨站請求。如果用戶在被攻擊網站保留了登錄狀態，那麼攻擊者就可以利用這個登錄狀態，繞過後臺的用戶驗證，冒充用戶向服務器執行一些操作。
CSRF攻擊的本質是利用了cookie會在同源請求中攜帶發送給服務器的特點，以此來實現用戶的冒充。
一般的CSRF攻擊類型由三種：
1.GET類型的CRSF攻擊，比如一個網站中的一個img標籤裏面構建一個請求，當用戶打開這個頁面時就會自動發送提交。
2.POST類型的CRSF攻擊，比如說創建一個表單，然後隱藏它，自動提交這個表單。
3.鏈接類型的CSRF攻擊，比如說創建一個表單，然後隱藏它，自動提交這個表單。
CSRF可以用以下幾種方法來防護：
1.同源檢測的方法，服務器根據http請求頭中的origin或者referer信息來判斷請求是否爲允許訪問的站點。
2.使用CSRF Token來進行驗證，服務器向用戶返回一個隨機數Token，當網站再次發送請求的時候，在請求參數中加入服務器端返回的token，然後服務器對這個token進行驗證。這種方法解決了使用cookie單一驗證的方法，可能會被冒用的問題，但是這種方法存在一個缺點就是，我們需要給網站中所有的請求都添加上這個token，操作比較繁瑣。還有一個問題是一般不會只有一臺網站服務器，如果我們的請求經過平衡負載轉移到其他的服務器，但是這個服務器的session中沒有保存這個token的話，就沒有辦法驗證了。這種情況我們可以通過token構建的方式來解決。
3.使用雙重Cookie驗證的方式，服務器在用戶訪問頁面時，向請求域名注入一個Cookie，內容爲隨機字符串，然後當用戶向服務器發送請求的時候，cookie取出這個字符串，添加到URL參數中，然後服務器通過對cookie中的數據進行比較，來進行驗證。
4.在設置cookie的時候設置Samesite，限制cookie不能作爲第三方使用，從而避免被攻擊者利用。Samesite一共有兩種模式，一種是嚴格模式，在嚴格模式下cookie在任何情況下ia都不能作爲第三方Cookie使用，在寬鬆模式下，cookie可以被請求時GET請求，且會發送頁面跳轉的請求所使用。
跨域解決方案
1. jsonp
1) JSONP原理
利用 標籤沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的服務器做支持纔可以。
2) JSONP和AJAX對比
JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
3) JSONP優缺點
JSONP優點是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有侷限性,不安全可能會遭受XSS攻擊。
4) JSONP的實現流程
-
聲明一個回調函數，其函數名(如show)當做參數值，要傳遞給跨域請求數據的服務器，函數形參爲要獲取目標數據(服務器返回的data)。
-
創建一個
<script>標籤，把那個跨域的API數據接口地址，賦值給script的src,還要在這個地址中向服務器傳遞該函數名（可以通過問號傳參:?callback=show）。
- 服務器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字符串,例如：傳遞進去的函數名是show，它準備好的數據是
show('我不愛你')。
- 服務器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字符串,例如：傳遞進去的函數名是show，它準備好的數據是
-
最後服務器把準備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（show），對返回的數據進行操作。
2.cors
在服務端設置
Access-control-allow-Origin 允許哪些域名可以訪問
Access-control-allow-methods 允許哪些請求方式
3.第三方服務器代理
實現原理：同源策略是瀏覽器需要遵循的標準，而如果是服務器向服務器請求就無需遵循同源策略。
代理服務器，需要做以下幾個步驟：
- 接受客戶端請求 。
- 將請求 轉發給服務器。
- 拿到服務器 響應 數據。
- 將 響應 轉發給客戶端。
CSS 選擇器，優先級
https://blog.csdn.net/henucm/article/details/105680155
CSS 動畫
transition和animation的區別
大部分都是相同，都是隨着時間改變元素的屬性值，他們的主要區別是transition需要觸發一個事件才能改變屬性，而animation不需要觸發任何事件就可以實行。transition爲兩幀，從from…to… 而animation可以一幀一幀的通過keyframes。
flex 佈局
flex是css3新增的一種佈局方式，我們可以同時設置一個元素的display屬性值設置爲flex屬性值設置爲flex從而使它成爲一個flex容器，它的所有子元素都成爲它的項目。
一個容器默認有兩條軸，一個水平軸，一條是與主軸垂直的交叉軸，我們可以使用flex-direction來指定主軸的方向。我們可以使用justify-content來指定標籤在主軸的排列方式，使用align-items來指定元素在交叉軸的排序方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。
對於一個容器的項目，我們使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當前排序空間有剩餘的時候，項目放大比例。還可以使用flex-shrink來指定當前排序空間不足時， 項目縮小比例。
position 有幾個值，absolute 是相對於誰的定位。
absolute ：生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。
fixed：（老IE不支持）生成絕對定位的元素，通常相對於瀏覽器窗口或 frame 進行定位。
relative：生成相對定位的元素，相對於其在普通流中的位置進行定位。
static：默認值。沒有定位，元素出現在正常的流中
ES6 瞭解什麼？
export和import
模塊化開發
Promise
異步編程的一種解決辦法
它有三種狀態，分別是pending-進行中、resolved-已完成、rejected-已失敗。改變狀態的方式只有一種即異步的結果：如果成功狀態由padding——>fulfilled；否則狀態由padding——>rejected。無法提供其他方式改變狀態。
新增聲明命令let和const
有塊級作用域 不存在變量提升 不存在重複定義 不可能提前使用。
模板字符串
用一對反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，也可以在字符串中嵌入變量，js表達式或函數，變量、js表達式或函數需要寫在${ }中。即完成拼接。
箭頭函數
特點：箭頭函數的this是繼承函數所處上下文的this
Object.keys()方法
獲取對象的所有屬性名或方法名（不包括原形的內容），返回一個數組。
Object.assign()
assign方法將多個原對象的屬性和方法都合併到了目標對象上面。可以接收多個參數，第一個參數是目標對象，後面的都是源對象。
for…of 循環
用於對象遍歷
解構賦值
var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
set數據結構
Set數據結構，類似數組。所有的數據都是唯一的，沒有重複的值。它本身是一個構造函數。
1）屬性和方法：
size 數據的長度
add() 添加某個值，返回 Set 結構本身。
delete() 刪除某個值，返回一個布爾值，表示刪除是否成功。
has() 查找某條數據，返回一個布爾值。
clear() 清除所有成員，沒有返回值。
var arr = [1,1,2,2,3];
var s = new Set(arr);
console.log(s); //{1, 2, 3}
console.log(s.size); //3
console.log(s.add(4)); //{1, 2, 3, 4}
console.log(s.delete(4)); //true
console.log(s.has(4)); //false
s.clear();
擴展運算符(…)
用 promise 完成同時發送兩個請求，並在都返回結果後進行處理。
待學習…
宏任務和微任務
微任務包括了promise的回調，node中的process.netxTick,對DOM的變量監聽。
宏任務包括script腳本的執行，setTimeout,setInterval,setImmediate一類的定時函數，還有如I/O操作，UI渲染等。
js是單線程運行的，在代碼執行前，我們將不同函數的執行上下文引入主線程棧中，當遇到一個異步函數我們不是等待其執行完成而是將其掛起，等到異步函數執行完之後放入任務隊列中，當主線程執行棧中任務執行完成之後，在去處理任務隊列裏面的異步函數,任務隊列分爲宏任務和微任務，先執行微任務(promise DOM的監聽)，將微任務取出壓到主線程棧中進行執行，當微任務都執行完之後再執行宏任務(定時器函數)
CommonJS
CommonJS方案，它通過require來引入模塊，通過module.exports定義模塊的輸出接口。這種模式加載方案是服務器端的解決方法，它是以同步的方式引入模塊的，因爲在服務器文件都是存儲在本地磁盤，所以讀取非常塊，所以以同步的加載。但是如果是在瀏覽器端，由於模塊的加載是使用網絡請求，因此使用異步加載的方式更合適。