一揪阿、瀏覽器頁面分層

構(gòu)成：結(jié)構(gòu)層、表示層仔夺、行為層

分別是：HTML拧咳、CSS、JavaScript

作用：HTML實(shí)現(xiàn)頁面結(jié)構(gòu)囚灼、CSS完成頁面的表現(xiàn)與風(fēng)格骆膝、JavaScript實(shí)現(xiàn)客戶端的一些功能和業(yè)務(wù)

二、Doctype作用是什么灶体，嚴(yán)格模式和混雜模式的區(qū)分

<!DOCTYPE>聲明叫做文件類型定義（DTD）阅签，聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔蝎抽。<!DOCTYPE>聲明必須在 HTML 文檔的第一行政钟，這并不是一個 HTML 標(biāo)簽。

嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式樟结，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼养交。

混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼

三瓢宦、在瀏覽器輸出url碎连，渲染過程

1. 瀏覽器向 DNS 服務(wù)器請求解析該 URL 中的域名所對應(yīng)的 IP 地址;
2. 解析出 IP 地址后，根據(jù)該 IP 地址和默認(rèn)端口 80驮履，和服務(wù)器建立TCP連接;
3. 瀏覽器發(fā)出讀取文件(URL 中域名后面部分對應(yīng)的文件)的HTTP 請求鱼辙，該請求報文作為 TCP 三次握手的第三個報文的數(shù)據(jù)發(fā)送給服務(wù)器;
4. 服務(wù)器對瀏覽器請求作出響應(yīng)，并把對應(yīng)的 html 文本發(fā)送給瀏覽器;
5. 釋放 TCP連接;
6. 瀏覽器將該 html 文本并顯示內(nèi)容

獲取到html玫镐、css后頁面渲染流程：

1. 解析HTML倒戏，構(gòu)建DOM樹
2. 解析CSS，生成CSS規(guī)則樹
3. 合并DOM樹和CSS規(guī)則恐似，生成render樹
4. 布局render樹（Layout/reflow）杜跷，負(fù)責(zé)各元素尺寸、位置的計(jì)算
5. 繪制render樹（paint）矫夷，繪制頁面像素信息

四葛闷、VUE3.0新特性

1. 性能

• 雙向響應(yīng)原理由Object.defineProperty改為基于ES6的Proxy，使其顆粒度更大口四，速度更快
• 重寫了 Vdom 孵运，突破了 Vdom 的性能瓶頸
• 進(jìn)行了模板編譯的優(yōu)化
• 進(jìn)行了更加高效的組件初始化

2.Tree-Shaking 的支持

支持了 tree-shaking （剪枝）：像修剪樹葉一樣把不需要的東西給修剪掉，使 Vue3 的體積更小蔓彩。

需要的模塊才會打入到包里治笨，優(yōu)化后的 Vue3.0 的打包體積只有原來的一半（13kb），像 keep-alive 赤嚼、 transition 甚至 v-for 等功能都可以按需引入旷赖。

3.Composition API

composition-api是一個 Vue3 中新增的功能，它的靈感來自于 React Hooks 更卒，是比 mixin 更強(qiáng)大的存在等孵。

composition-api 可以提高代碼邏輯的可復(fù)用性，從而實(shí)現(xiàn)與模板的無關(guān)性蹂空；同時使代碼的可壓縮性更強(qiáng)俯萌。另外果录，把 Reactivity 模塊獨(dú)立開來，意味著 Vue3.0 的響應(yīng)式模塊可以與其他框架相組合咐熙。

4.Fragments

不再限制 template 只有一個根節(jié)點(diǎn)弱恒。
render函數(shù)也可以返回?cái)?shù)組了，有點(diǎn)像 React.Fragments

5.Better TypeScript Support

更好的類型推導(dǎo)棋恼，使得 Vue3 把 TypeScript 支持得非常好

6.Custom Renderer API

實(shí)現(xiàn)用DOM的方式進(jìn)行 WebGL 編程

五返弹、服務(wù)器端渲染

定義：服務(wù)器端將組件呈現(xiàn)成HTML字符串，直接發(fā)送到客戶端爪飘，最后混合到客戶端的應(yīng)用交互中义起。服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行JavaScript腳本的最終HTML

與傳統(tǒng) SPA (單頁應(yīng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：

• 更好的 SEO师崎，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面默终。

請注意，截至目前抡诞，Google 和 Bing 可以很好對同步 JavaScript 應(yīng)用程序進(jìn)行索引穷蛹。在這里，同步是關(guān)鍵昼汗。如果你的應(yīng)用程序初始展示 loading 菊花圖肴熏，然后通過 Ajax 獲取內(nèi)容，抓取工具并不會等待異步完成后再行抓取頁面內(nèi)容顷窒。也就是說蛙吏，如果 SEO 對你的站點(diǎn)至關(guān)重要，而你的頁面又是異步獲取內(nèi)容鞋吉，則你可能需要服務(wù)器端渲染(SSR)解決此問題鸦做。

• 更快的內(nèi)容到達(dá)時間 (time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備谓着。無需等待所有的 JavaScript 都完成下載并執(zhí)行泼诱，才顯示服務(wù)器渲染的標(biāo)記，所以你的用戶將會更快速地看到完整渲染的頁面赊锚。通持瓮玻可以產(chǎn)生更好的用戶體驗(yàn)，并且對于那些「內(nèi)容到達(dá)時間(time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言舷蒲，服務(wù)器端渲染 (SSR) 至關(guān)重要耸袜。

使用服務(wù)器端渲染 (SSR) 時還需要有一些權(quán)衡之處：

• 開發(fā)條件所限。瀏覽器特定的代碼牲平，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用堤框；一些外部擴(kuò)展庫 (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。

• 涉及構(gòu)建設(shè)置和部署的更多要求蜈抓。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 (SPA) 不同启绰，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境资昧。

• 更多的服務(wù)器端負(fù)載酬土。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)格带，因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載刹枉，并明智地采用緩存策略叽唱。

VUE對應(yīng)技術(shù)：vue-server-renderer、nuxt

六微宝、SSE棺亭、Long-Polling、Polling蟋软、WebSocket

• SSE：通俗解釋起來就是一種基于HTTP的镶摘，以流的形式由服務(wù)端持續(xù)向客戶端發(fā)送數(shù)據(jù)的技術(shù)
  優(yōu)點(diǎn)：開發(fā)簡單，和傳統(tǒng)的http開發(fā)幾乎無任何差別,客戶端開發(fā)簡單,有標(biāo)準(zhǔn)支持（EventSource）
  缺點(diǎn)：和websocket相比岳守，只能單工通信凄敢，建立連接后，只能由服務(wù)端發(fā)往客戶端湿痢，且占用一個連接涝缝，如需客戶端向服務(wù)端通信，需額外打開一個連接

• Polling：這是最早的一種實(shí)現(xiàn)實(shí)時 Web 應(yīng)用的方案譬重【艽客戶端以一定的時間間隔向服務(wù)端發(fā)出請求，以頻繁請求的方式來保持客戶端和服務(wù)器端的同步臀规。這種同步方案的最大問題是滩援，當(dāng)客戶端以固定頻率向服務(wù)器發(fā)起請求的時候，服務(wù)器端的數(shù)據(jù)可能并沒有更新塔嬉，這樣會帶來很多無謂的網(wǎng)絡(luò)傳輸玩徊，所以這是一種非常低效的實(shí)時方案。

• Long-Polling：長輪詢是對定時輪詢的改進(jìn)和提高邑遏，目地是為了降低無效的網(wǎng)絡(luò)傳輸佣赖。當(dāng)服務(wù)器端沒有數(shù)據(jù)更新的時候，連接會保持一段時間周期直到數(shù)據(jù)或狀態(tài)改變或者時間過期记盒，通過這種機(jī)制來減少無效的客戶端和服務(wù)器間的交互憎蛤。當(dāng)然，如果服務(wù)端的數(shù)據(jù)變更非常頻繁的話，這種機(jī)制和定時輪詢比較起來沒有本質(zhì)上的性能的提高俩檬。
  優(yōu)缺點(diǎn)：這種技術(shù)沒有明顯的優(yōu)缺點(diǎn),如果非要說萎胰，就是需要額外的框架支持吧,且在之前服務(wù)端異步編程支持程度并不高的時候,(例如java的servlet3.0之前),后端也需要額外的框架支持

• websocket是html5規(guī)范中的一個部分，它借鑒了socket這種思想棚辽，為web應(yīng)用程序客戶端和服務(wù)端之間（注意是客戶端服務(wù)端）提供了一種全雙工通信機(jī)制技竟。
  優(yōu)點(diǎn)：雙工通信
  缺點(diǎn)：需專門定義數(shù)據(jù)協(xié)議，解析數(shù)據(jù)流屈藐，且部分服務(wù)器支持不完善榔组，后臺例如java spring boot 2.1.2 僅支持websocket 1.0(最高已達(dá)1.3)

七、關(guān)于緩存

瀏覽器緩存：

1. 本地存儲小容量
   Cookie主要用于用戶信息的存儲联逻，Cookie的內(nèi)容可以自動在請求的時候被傳遞給服務(wù)器搓扯。
   LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶清除瀏覽器緩存數(shù)據(jù)為止包归。
   SessionStorage的其他屬性同LocalStorage锨推，只不過它的生命周期同標(biāo)簽頁的生命周期，當(dāng)標(biāo)簽頁被關(guān)閉時公壤，SessionStorage也會被清除换可。
2. 本地存儲大容量
   WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上，例如厦幅，在線編輯瀏覽器或者網(wǎng)頁郵箱沾鳄。
3. 往返緩存
   又稱為BFCache，是瀏覽器在前進(jìn)后退按鈕上為了提升歷史頁面的渲染速度的一種策略慨削。該策略具體表現(xiàn)為洞渔，當(dāng)用戶前往新頁面時，將當(dāng)前頁面的瀏覽器DOM狀態(tài)保存到bfcache中缚态；當(dāng)用戶點(diǎn)擊后退按鈕的時候磁椒，將頁面直接從bfcache中加載，節(jié)省了網(wǎng)絡(luò)請求的時間玫芦。

強(qiáng)制緩存：

強(qiáng)制緩存就是向?yàn)g覽器緩存查找該請求結(jié)果浆熔，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程

1. 不存在該緩存結(jié)果和緩存標(biāo)識，強(qiáng)制緩存失效桥帆，則直接向服務(wù)器發(fā)起請求（跟第一次發(fā)起請求一致）
2. 存在該緩存結(jié)果和緩存標(biāo)識医增，但該結(jié)果已失效，強(qiáng)制緩存失效老虫，則使用協(xié)商緩存
3. 存在該緩存結(jié)果和緩存標(biāo)識叶骨，且該結(jié)果尚未失效，強(qiáng)制緩存生效祈匙，直接返回該結(jié)果
   緩存規(guī)則：
   當(dāng)瀏覽器向服務(wù)器發(fā)起請求時忽刽，服務(wù)器會將緩存規(guī)則放入HTTP響應(yīng)報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器天揖，控制強(qiáng)制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優(yōu)先級比Expires高跪帝。

協(xié)商緩存：

協(xié)商緩存就是強(qiáng)制緩存失效后今膊，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程伞剑，主要有以下兩種情況：

1. 協(xié)商緩存生效斑唬，返回304
2. 協(xié)商緩存失效，返回200和請求結(jié)果結(jié)果

八黎泣、事件委托恕刘、事件捕獲、事件冒泡：

• 事件委托就是利用事件冒泡抒倚，只指定一個事件處理程序雪营，就可以管理某一類型的所有事件。
• 事件冒泡是由IE開發(fā)團(tuán)隊(duì)提出來的衡便，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點(diǎn)）接收，然后逐級向上傳播洋访。
• 事件捕獲是先由最上一級的節(jié)點(diǎn)先接收事件镣陕，然后向下傳播到具體的節(jié)點(diǎn)。

九姻政、watch和computed的區(qū)別

1. computed不支持異步呆抑，當(dāng)computed內(nèi)有異步操作時無效，無法監(jiān)聽數(shù)據(jù)的變化汁展；watch支持異步
2. 如果一個屬性是由其他屬性計(jì)算而來的鹊碍，這個屬性依賴其他屬性，是一個多對一或者一對一食绿，一般用computed侈咕；當(dāng)一個屬性發(fā)生變化時，需要執(zhí)行對應(yīng)的操作器紧；一對多用watch
3. computed 屬性值會默認(rèn)走緩存耀销，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計(jì)算得到的值铲汪。若只監(jiān)聽對象里某個值的變化熊尉，用watch的深度監(jiān)聽

十、var掌腰、let狰住、const區(qū)別

1. let和const為塊級作用域，一般為{}內(nèi)部齿梁，外部無法調(diào)用會報錯催植。var為全局作用域或函數(shù)作用域，如果提前調(diào)用會提示，有聲明提前會輸出undefined查邢，不會報錯蔗崎。
2. let和const無法被重新定義，var可以扰藕。且const無法被修改缓苛。

十一、防抖和節(jié)流

• 防抖
  觸發(fā)高頻事件后 n 秒內(nèi)函數(shù)只會執(zhí)行一次邓深，如果 n 秒內(nèi)高頻事件再次被觸發(fā)未桥，則重新計(jì)算時間；
  思路：
  每次觸發(fā)事件時都取消之前的延時調(diào)用方法芥备。
• 節(jié)流
  高頻事件觸發(fā)冬耿，但在 n 秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率萌壳。
  思路：
  每次觸發(fā)事件時都判斷當(dāng)前是否有等待執(zhí)行的延時函數(shù)亦镶。

十二、HTTPS是什么

HTTPS經(jīng)由[HTTP]進(jìn)行通信袱瓮，但利用[SSL/TLS]來加密數(shù)據(jù)包

SSL：（Secure Socket Layer缤骨，安全套接字層），位于可靠的面向連接的網(wǎng)絡(luò)層協(xié)議和應(yīng)用層協(xié)議之間的一種協(xié)議層尺借。SSL通過互相認(rèn)證绊起、使用數(shù)字簽名確保完整性、使用加密確保私密性燎斩，以實(shí)現(xiàn)客戶端和服務(wù)器之間的安全通訊虱歪。該協(xié)議由兩層組成：SSL記錄協(xié)議和SSL握手協(xié)議。

TLS：(Transport Layer Security栅表，傳輸層安全協(xié)議)笋鄙，用于兩個應(yīng)用程序之間提供保密性和數(shù)據(jù)完整性。該協(xié)議由兩層組成：TLS 記錄協(xié)議和 TLS 握手協(xié)議谨读。

SSL 和 TLS 是一種能夠在服務(wù)器局装，machines 和通過網(wǎng)絡(luò)運(yùn)行的應(yīng)用程序（列如，客戶端連接到 web 服務(wù)器）之間提供身份認(rèn)證和數(shù)據(jù)加密的加密協(xié)議劳殖。SSL是TLS的前世铐尚。多年來，新版本的發(fā)布用來解決漏洞哆姻，提供更強(qiáng)大支持宣增，更安全的密碼套件和算法。

常規(guī)的 HTTP 通信矛缨，有以下的問題爹脾。

竊聽風(fēng)險（eavesdropping）：第三方可以獲知通信內(nèi)容帖旨。
篡改風(fēng)險（tampering）：第三方可以修改通信內(nèi)容。
冒充風(fēng)險（pretending）：第三方可以冒充他人身份參與通信灵妨。
因此解阅，SSL/TLS 協(xié)議就是為了解決這三大風(fēng)險而設(shè)計(jì)的，希望達(dá)到：

所有信息都是加密傳播泌霍，第三方無法竊聽货抄。
具有校驗(yàn)機(jī)制，一旦被篡改朱转，通信雙方會立刻發(fā)現(xiàn)蟹地。
配備身份證書，防止身份被冒充藤为。

十三怪与、觀察者模式和發(fā)布訂閱者模式的區(qū)別

觀察者模式由具體目標(biāo)調(diào)度，每個被訂閱的目標(biāo)里面都需要有對觀察者的處理缅疟，會造成代碼的冗余分别。而發(fā)布訂閱模式則統(tǒng)一由調(diào)度中心處理，消除了發(fā)布者和訂閱者之間的依賴存淫。

十四茎杂、虛擬DOM

真實(shí)DOM操作：真實(shí)DOM增刪改 + （可能較多節(jié)點(diǎn)）重排與重繪
虛擬DOM操作：虛擬DOM增刪改 + 真實(shí)DOM差異增刪改（這與Diff算法效率有關(guān)） + （較少節(jié)點(diǎn)）重排與重繪

十五、v-for key的作用

key屬性可以用來提升v-for渲染的效率纫雁！vue不會去改變原有的元素和數(shù)據(jù)，而是創(chuàng)建新的元素然后把新的數(shù)據(jù)渲染進(jìn)去

在使用v-for的時候倾哺，vue里面需要我們給元素添加一個key屬性轧邪，這個key屬性必須是唯一的標(biāo)識

給key賦值的內(nèi)容不能是可變的

寫在最后：

本人目前技術(shù)棧一直在VUE全家桶方面，經(jīng)過2021.3的面試發(fā)現(xiàn)羞海，目前大廠的前端均是react生態(tài)或者node全棧忌愚，或是兩者都會，僥幸收到一個還算心儀的offer却邓。不過之后準(zhǔn)備在node學(xué)習(xí)上投入一些精力硕糊，完善自己的技術(shù)短板。希望有幸看到的朋友們也了解一下目前的趨勢腊徙。