1、作用域

w3scholl中定義：作用域指的是您有權(quán)訪問的變量集合。

作用域是指在程序中定義變量的區(qū)域，該位置決定了變量的生命周期。通俗理解，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量和函數(shù)的可見性和生命周期。

在 JavaScript 中有兩種作用域類型：

• 局部作用域：在 JavaScript 函數(shù)中聲明的變量，會成為函數(shù)的局部變量。（局部變量的作用域是局部的：只能在函數(shù)內(nèi)部訪問它們。）
• 全局作用域：函數(shù)之外聲明的變量，會成為全局變量。
  JavaScript 擁有函數(shù)作用域：每個函數(shù)創(chuàng)建一個新的作用域。（全局變量的作用域是全局的：網(wǎng)頁的所有腳本和函數(shù)都能夠訪問它。）

2、變量提升

https://juejin.cn/post/7007224479218663455

• JavaScript 引擎把變量的聲明部分和函數(shù)的聲明部分提升到代碼開頭的行為
• 變量被提升后，會給變量設(shè)置默認(rèn)值為 undefined
• ES6的let和const不存在變量提升
  

3、事件循環(huán)機(jī)制EventLoop

• 宏任務(wù)：setTimeout、setInterval、setImmediate、UI Rending
• 微任務(wù)：Promise、async\await
  
  

微任務(wù)是由ES6語法規(guī)定的
宏任務(wù)是由瀏覽器規(guī)定的

視頻講解：
事件循環(huán)-EventLoop
事件循環(huán)-宏任務(wù)、微任務(wù)
練習(xí)事件循環(huán)的網(wǎng)站

練習(xí)

上圖依次打印：2 3 6 p2 p1 1 4 5

上圖依次打印：script start -> async1 start -> async2 -> async1 end -> setTimeout
注：await 關(guān)鍵字，會等右邊的方法執(zhí)行完以后，再向下繼續(xù)執(zhí)行。

4、promise

特點(diǎn)：
①三種狀態(tài)：pending（進(jìn)行中）、resolved（已完成）、rejected（已失敗）。只有異步操作的結(jié)果可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都不能改變這個狀態(tài)。
②兩種狀態(tài)的轉(zhuǎn)化：其一，從pending（進(jìn)行中）到resolved（已完成）。其二，從pending（進(jìn)行中）到rejected（已失敗）。只有這兩種形式的轉(zhuǎn)變。
③Promise構(gòu)造函數(shù)的原型對象上，有then()和catch()等方法，then()第一個參數(shù)接收resolved()傳來的數(shù)據(jù)，catch()第一個參數(shù)接收rejected()傳來的數(shù)據(jù)

作用：
①通常用來解決異步調(diào)用問題
②解決多層回調(diào)嵌套的方案
③提高代碼可讀性、更便于維護(hù)

Promise.all([]).then(() => {})：等待數(shù)組里所有的方法執(zhí)行完以后，再執(zhí)行then里的回調(diào)，只要有一個失敗，就不會繼續(xù)執(zhí)行后續(xù)代碼

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {setTimeout(resolve, 100, 'foo');
});Promise.all([promise1, promise2, promise3]).then((values) => {console.log(values);
});
// Expected output: Array [3, 42, "foo"]

Promise.race([]).then(() => {})：以最先執(zhí)行好的結(jié)果為準(zhǔn)

const promise1 = new Promise((resolve, reject) => {setTimeout(resolve, 500, 'one');
});const promise2 = new Promise((resolve, reject) => {setTimeout(resolve, 100, 'two');
});Promise.race([promise1, promise2]).then((value) => {console.log(value);// Both resolve, but promise2 is faster
});
// Expected output: "two"

5、async、await

①async/await是ES8新特性
②async/await是寫異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise
③async/await是基于Promise實(shí)現(xiàn)的，它不能用于普通的回調(diào)函數(shù)
④async/await與Promise一樣，是非阻塞的
⑤async/await使得異步代碼看起來像同步代碼

6、promis和async、await的區(qū)別

promise的出現(xiàn)解決了傳統(tǒng)callback函數(shù)導(dǎo)致的地獄回調(diào)問題，但是他的語法導(dǎo)致它縱向發(fā)展形成了一個回調(diào)鏈，遇到復(fù)雜的業(yè)務(wù)場景顯然是不美觀的；
async、await看起來更加簡潔，使得異步代碼看起來像同步代碼，只有await的代碼執(zhí)行完畢后才會執(zhí)行下面的代碼，與promise一樣，也是非阻塞的；
async/await基于Promise實(shí)現(xiàn)，相當(dāng)于Promise的升級版，不能用于普通的回調(diào)函數(shù)；

7、瀏覽器拿到html到現(xiàn)實(shí)在頁面上，都做了什么

8、如何異步讀取script標(biāo)簽（async、defer）

在瀏覽器加載html過程中，html解析器運(yùn)行在主線程，并且在遇到<script> 標(biāo)簽后，會被阻塞，知道腳本從網(wǎng)絡(luò)中被獲取和執(zhí)行，呃呃就是說<script>標(biāo)簽中的腳本會阻塞瀏覽器的渲染，這樣也被稱為“渲染人阻塞”。
async 異步：
該屬性值為布爾值，指示瀏覽器是否允許異步執(zhí)行該腳本，該屬性僅對外鏈腳本有效。為 true 時，是告訴瀏覽器先把文件下載下來，在時機(jī)成熟的時候再執(zhí)行。異步及哦啊笨一定會在頁面的load事件前執(zhí)行，但可能會在DOMContentLoaded事件觸發(fā)前或后執(zhí)行。另外，標(biāo)記為async的腳本并不保證按照指定他們的先后順序執(zhí)行，所以確保各個異步腳本互不依賴非常重要
defer：延遲：
該屬性值為布爾值，指示瀏覽器該腳本將在文檔完成解析后，觸發(fā)DOMContentLoaded事件前執(zhí)行，該屬性僅對外鏈腳本生效。

總結(jié)：
script 標(biāo)簽有2個屬性 async（異步） 和 defer（推遲）；他們的功能是：
async：他是異步加載，不確定何時會加載好；頁面加載時，帶有 async 的腳本也同時加載，加載后會立即執(zhí)行，如果有一些需要操作 DOM 的腳本加載比較慢時，這樣會造成 DOM 還沒有加載好，腳本就進(jìn)行操作，會造成錯誤。
defer：頁面加載時，帶有 defer 的腳本也同時加載，加載后會等待 頁面加載好后，才執(zhí)行。

9、vue底層，數(shù)據(jù)修改，如何更新顯示

10、vue3的雙向數(shù)據(jù)綁定

11、插槽的作用

擴(kuò)展組件能力，提高組件的復(fù)用性;
使用插槽可以將一些比較復(fù)雜的父傳子的通信去掉，直接在父組件中完成后利用插槽顯示到子組件中（這是由于父組件模板的內(nèi)容在父組件作用域內(nèi)編譯，子組件模板的內(nèi)容在子組件作用域內(nèi)編譯）。

12、瀏覽器的緩存機(jī)制

1、Cache-Control（不需要前端做額外處理）
取值為：

• public：所有內(nèi)容都被緩存
• private：只有客戶端可以緩存
• no-cache：客戶端緩存內(nèi)容，但是是否使用緩存需要經(jīng)過協(xié)商來驗(yàn)證決定
• no-store：所有內(nèi)容都不會被緩存，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存
• max-age=10:緩存內(nèi)通將在10秒后失效（不需要前端做額外處理）

2、Expires（不需要前端做額外處理）
緩存過期時間，用來制定資源到期的時間，是服務(wù)器的具體的時間點(diǎn)

3、Last-Modified和If-Modified-Since

• 瀏覽器首先發(fā)送一個請求，服務(wù)端在這個請求中，返回資源上一次的更新時間last-modifired，瀏覽器通過webstorage緩存下這個時間和資源
• 瀏覽器在下次請求中，帶上if-modified-since：[保存的last-modified的值]
• 服務(wù)端根據(jù)瀏覽器發(fā)生的修改時間和服務(wù)端的修改時間進(jìn)行對比。一致的話代表資源沒有變，服務(wù)端返回403，讓瀏覽器從緩存中讀取資源，否則重新更新時間，處理數(shù)據(jù)，一并返回給瀏覽器

由于last-modified依賴的是保存的絕對時間，會出現(xiàn)誤差的情況
- 保存的時間是以秒為單位的，1秒內(nèi)多次修改無法捕捉到
- 各機(jī)器讀取到的時間不一致，會有誤差的可能性，為了改善這個問題，提出了使用etag

4、ETag和if-None-Match

• 與 3 類似，不同的是，瀏覽器第一次請求時，服務(wù)端將更新時間last-modifired改成ETag由數(shù)據(jù)內(nèi)容生成的一個md5值或者其他字符串，瀏覽器保緩存這個值和數(shù)據(jù)
• 與 3 類似，瀏覽器下次請求時，請求頭帶上if-none-match:保存的etag值
• 服務(wù)端通過得到的請求頭中的值和服務(wù)端重新生成的etag值做比較，如果一致，代表資源沒有改變，返回403，高度瀏覽器從緩存中讀數(shù)據(jù)

13、打包構(gòu)建流程

1. 生成options (將webpack.config.js和shell中的參數(shù)，合并中options對象)
2. 實(shí)例化complier對象 （webpack全局的配置對象，包含entry，output，loader，plugins等所有配置信息）
3. 實(shí)例化Compilation對象 (compiler.run方法執(zhí)行，開始編譯過程，生成Compilation對象)
4. 分析入口js文件，調(diào)用AST引擎(acorn)處理入口文件，生成抽象語法樹AST，根據(jù)AST構(gòu)建模塊的所有依賴
5. 通過loader處理入口文件的所有依賴，轉(zhuǎn)換為js模塊，生成AST，繼續(xù)遍歷，構(gòu)建依賴的依賴，遞歸，直至所有依賴分析完畢
6. 對生成的所有module進(jìn)行處理，調(diào)用plugins，合并，拆分，生成chunk
7. 將chunk生成為對應(yīng)bundle文件，輸出到目錄

參考文檔

14、loader和plaugin的區(qū)別

一、從功能作用的角度區(qū)分：

loader從字面的意思理解，是 加載 的意思。只專注于轉(zhuǎn)化文件（transform）這一個領(lǐng)域，完成壓縮，打包，語言翻譯,僅僅只是為了打包。

plugin不僅只局限在打包，資源的加載上，它的功能要更加豐富。從打包優(yōu)化和壓縮，到重新定義環(huán)境變量，功能強(qiáng)大到可以用來處理各種各樣的任務(wù)。

二、從運(yùn)行時機(jī)的角度區(qū)分

1 . loader運(yùn)行在打包文件之前（loader為在模塊加載時的預(yù)處理文件）
2. plugins在整個編譯周期都起作用。

15、響應(yīng)式布局