1.fetch請求方式

fetch是什么？

fetch是一種http?數據請求的方式，是xml的一種替代方式。

怎么請求？

?fetch方法返回一個promise解析response顯示狀態（成功與否）的方法。

優點：

1. 使用Promise，支持鏈式調用，代碼更加簡潔和易讀。
2. 默認不會攜帶Cookie等身份驗證信息，避免了潛在的安全問題。
3. 支持跨域請求。
4. 更好地處理請求錯誤。

// 發送GET請求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析響應數據為JSON格式}).then(data => {console.log(data); // 處理獲取到的數據}).catch(error => {console.error('Fetch error:', error);});

fetch和XML?Http Request（xhr）?

XMLHttpRequest (XHR) 與 fetch_xmlhttprequest和fetch-CSDN博客

fetch支持promise，xhr不支持。

2.保持前后端實時通信的方法

四種：

（1）輪詢

輪詢是客戶端和服務器之間會一直進行連接，每隔一段時間就詢問一次。

（2）長輪訓

長輪詢是對輪詢的改進版，客戶端發送HTTP給服務器之后，如果沒有新消息，就一直等待。有新消息，才會返回給客戶端。

（3）websocket

WebSocket是類似Socket的TCP長連接的通訊模式，一旦WebSocket連接建立后，后續數據都以幀序列的形式傳輸。

（4）SSE

.SSE(Server-Sent Event)是建立在瀏覽器與服務器之間的通信渠道，然后服務器向瀏覽器推送信息。
應用：
輪詢適用于：小型應用，實時性不高
長輪詢適用于：一些早期的對及時性有一些要求的應用：web IM 聊天
iframe適用于：客服通信等
WebSocket適用于：微信、網絡互動游戲等
SSE適用于：金融股票數據、看板等

3.瀏覽器輸入url發生了什么

1. url解析
2. 查找緩存
3. dns域名解析
4. 三次握手建立tcp連接
5. 發起http請求
6. 服務器響應并返回結果
7. 四次揮手釋放tcp連接
8. 瀏覽器渲染
9. js引擎解析

4.瀏覽器如何渲染頁面

1. 解析html，生成dom樹
2. 解析css，生成css規則樹
3. 合并dom樹和規則樹，生成render渲染樹
4. 計算每個渲染樹的節點位置和大小
5. 繪制布局

5.重繪重排（回流）區別？如何避免

重排（回流）：當頁面某個元素的位置，尺寸發生變化時，瀏覽器需要重新計算該元素的幾何屬性，重新布局頁面

重繪：元素的布局不變，僅改變外觀樣式

如何避免：

1.減少直接操作DOM元素，可以使用ClassName

2.避免使用Table，改變該屬性會導致頁面的重排

3.多個DOM元素改變時，使用DocumentFragment一次性重排

4.position屬性設置為fixed或者absolute，脫離文檔流

6.瀏覽器垃圾回收機制

什么是垃圾回收機制？

瀏覽器的垃圾回收機制就是我們程序在工作的過程中或者執行之后，會產生一些用不到的內存變量，這些變量會一直占據這內存，所以這時候需要垃圾回收機制幫我清理這些用不到的變量，從而釋放內存空間。垃圾回收機制最常見的有兩種：1.標記清除算法。2：引用計數算法。

（1）標記清除算法就是執行前將所有的變量打上標記，執行完成后未被打上標記的變量就會當做垃圾回收。瀏覽器會隔一段時間進行一次標記清除

缺點：被釋放的內存空間是不連續的，被之前一直占據內存的變量隔開，導致內存空間不連續，會出現分配不一的問題。

（2）引用計數算法：就是對對象的引用次數進行增加或者減少，如果引用次數變為0，那么該對象分配的內存空間立即就會被清除掉。

缺點：會出現相互引用的情況。會導致對象一直被引用無法被清除 。

7.事件循環(event loop)，宏任務與微任務

事件循環？

js是單線程執行的，但不代表會阻塞代碼執行，執行js時

（1）同步的任務一般都會進入主線程執行，異步的任務會進入任務隊列，同步任務執行完畢，會開始執行異步任務。

（2）異步任務又分為微任務和宏任務。遇到宏任務會把宏任務放到宏任務隊列，執行完微任務，在取出宏任務執行，再遇到微任務，先執行微任務，完成在執行宏任務。

就形成了事件循環，就是在宏和微之間循環。

宏任務微任務？

?執行順序：主線程》微任務》宏任務

宏任務：setTimeout? ?setTnterval? ? ? Ajax? ? ?Dom事件

微任務：promise? ? ?async await...

8.跨域是什么？如何解決跨域問題

跨域的概念

受瀏覽器同源策源（即協議，域名，端口號必須一致是瀏覽器的一種安全模式）的影響不能執行其他網站的腳本。

解決：

?1、jsonp：利用script標簽可以聽過src發送請求來實現，但是只能發送get請求，不夠安全；
2、前端proxy代理和后端設置cros，proxy替代瀏覽器發送請求，因為同源策略是限制瀏覽器的，服務器和服務器之前發送請求是允許的；后端設置請求頭setHeader(access-control-allow-origin,域名);
3、niginx反向代理、node中間件
4、postMessage：h5的api

9.vue鉤子函數

掛載。更新。銷毀

vue2中有8個：beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroy

?vue3有7個，一進入setUp是創建階段，接著是onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted

10.組件通信方式

Vue3（五）：組件通信詳解（九種方法）_vue3 父組件孫組件 通信-CSDN博客

• 父》子：1.props? ? ? 2.v-model? ? ?3. $?refs? ? 4.默認插槽具名插槽
• 子》父：1.props? 2.自定義事件$emit? ? 3.v-model? ? 4.$parent? ?5.作用域插槽
• 祖《》孫：1.$attrs? ? 2.provide inject
• 任意組件》通信：1.mitt（接收數據的emitter.on綁定事件? ?提供數據的emitter.emit觸發事件）? ? ?2.pinia? ? ? ? ? ?3.vuex

11.Computed watch區別

1. 功能：computed是計算屬性，依賴其他屬性值；watch是監聽一個值的變化，然后執行對應的回調
2. 是否調用緩存：computed中的函數所依賴的屬性沒有發生變化，那么調用當前的函數的時候會從緩存中讀取，而watch在每次 監聽的時候都會執行回調
3. 是否調用return：computed中的函數必須要return，watch中不是必須的
4. 監聽：computed默認第一次加載的時候就開始監聽；watch默認第一次加載不做監聽：若需要第一次做監聽，添加immediate：true
5. watch支持異步，computed不支持
6. 使用場景：computed---當一個屬性受多個屬性影響---購物車結算,watch---當一條數據影響多條數據---搜索框

12.V-if v-show區別

相同點：都控制元素顯示與隱藏

（1）Vif 本質是動態的向dom樹中添加或者刪除dom元素 適用于少次操作

（2）Vshow 本質是控制css的display none屬性 適用于頻繁操作某個節點使用

13.vue的keep-alive

1.keep-alive是vue的內置組件，能在組件切換過程中將狀態保留在內存中，相當于緩存，防止重復渲染DOM，減少加載時間，提高性能。

2.使用方法：使用<keep-alive>標簽對需要緩存的組件進行包裹，默認情況下被包裹的組件都會緩存

3.keep-alive有三個屬性：include（只有名字匹配的組件才會被緩存），exclude（任何名字匹配的組件都不緩存），max（最多可以緩存的組件數量）

4.和路由配合使用：相應組件下規定meta屬性，定義keep-alive：true;

5.使用keep-alive導致組件不重新加載，也就不會重新執行生命周期，解決該問題需要兩個屬性： 進入時觸發 activated，退出時觸發 deactivated</keep-alive>

14.vue的$nextTick作用與原理

• 1.作用：Vue更新DOM節點是異步執行的，即數據更新之后，視圖不會馬上更新，所以修改數據之后，從方法中獲取的DOM節點是更新前的DOM節點， 只有在$nextTick中才能獲取更新后的DOM
• 2.原理：將回調函數推入到一個隊列中，在下個事件循環周期中執行這個隊列中的所有回調函數。$nextTick的本質是返回一個Promise
• 3.應用場景：在鉤子函數created()中想要獲取操作DOM，把操作DOM的方法放在$nextTick中

15.vue列表為什么添加key

做一個唯一標識，diff算法可以更準確的識別這個節點，高效的更新dom。

目的是為diff算法添加標識。

1.因為diff算法里判斷新舊vnode是否相同的依據是節點的tag和key,

2.如果tag和key 都相同會進行進一步判斷，使得盡可能多的節點進行復用。

3.key綁定的值一般是一個唯一的值，比如id，如果用index的話，數組元素進行增刪的話就會影響index，導致diff進行多余的更新操作

16.Vue-router實現懶加載的方法

懶加載就是不用到不加載，按需加載。

1.ES6的import方式：component: () => import ('./home.vue');

2.異步組件加載方式：component: resolve => (require(['./home.vue'] , resolve));

17.hashrouter和historyrouter

1. 形式上，hash模式中URL存在'#'符號，而history模式的ULR則沒有。
2. history是H5新增，需要后端協助實現。
3. ?原理： Hash模式通過監聽hashChange事件監聽URL的hash值的修改實現對應跳轉。 History模式通過H5提供的pushState，replaceState...等實現URL的修改和對應跳轉，也可以通過監聽popState事件來監聽用戶點擊前進、后退按鈕實現對應跳轉。
4. History模式實際上是利用瀏覽器的歷史記錄棧來實現。在項目過程中遇見采用History模式再刷新頁面會導致404的問題，因為Hash模式#后面的hash值不會帶入請求URL中，所以服務器覺得Hash模式下的URL是不變的；而History模式URL在/a /b 之間不斷變化，必須要服務器對這些請求進行重定向，一直返回一個指定頁面即可。

18.vuex是什么，每個屬性是干嘛的？怎么使用

Vuex是全局狀態管理倉庫

1.State：數據源

2.Getters：對state數據進行計算，相當于計算屬性

3.Mutation：更新State數據的方法，必須是同步方法

4.Action： 提交的是 Mutation，而不是直接變更狀態， 可以包含任意異步操作

5.Modules：Vuex的模塊化，可以讓每一個模塊擁有自己的state、mutation、action、getters

19.Vue2的雙向綁定原理

采用數據劫持結合發布者訂閱者模式的方式來實現響應式。

通過object.defineProperty來劫持數據的getter，setter,在數據變化時發送消息給訂閱者，訂閱者收到消息后進行相應的處理。

缺點是不能監聽新對象的新增屬性和刪除屬性，不能監聽通過下標改變數組對應數據

20.Vue3實現數據雙向綁定

Vue3.0最主要的改變就是將Object.defineProperty() 替換成為Proxy對象，原理相同:

• 在vue實例初始化的時候（vm._init()執行的時候）調用Observe類的實例方法observe，將其中每個數據（若是對象則發生遞歸）進行一遍數據劫持（get實現依賴收集，set實現事件派發（這里的模式為發布訂閱模式））

可以原生支持數組的響應式，不需要重寫數組的原型，解決了Vue2.0無法監聽數組變化和不能監聽對象的新增屬性和刪除屬性的問題。

關于proxy?

Proxy是ES6中新增的特性，實現的過程是在目標對象之前設置了一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。

Proxy優點：可以劫持整個對象，并返回一個新對象，有13種劫持。

21.前端性能優化手段

按粒度大致可以分為兩類：
一類是文件加載更快
1. 讓傳輸的數據包更小（壓縮文件/圖片）：圖片壓縮和文件壓縮
2. 減少網絡請求的次數：雪碧圖/精靈圖、節流防抖
3. 減少渲染的次數：緩存（HTTP緩存、本地緩存、Vue的keep-alive緩存等）

另一類是文件渲染更快
1. 提前渲染：ssr服務器端渲染
2. 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
3. 避免無用渲染：懶加載
4. 減少渲染次數：對dom查詢進行緩存、將dom操作合并、使用減少重排的標簽

在用戶角度前端優化可以讓頁面加載得更快，對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗，在服務商角度前端優化能夠減少頁面請求數，減小請求所占帶寬，能夠節省服務器資源。

22.性能優化的性能指標

...看不懂一點

23.服務端渲染

看不懂

• 服務端渲染（SSR）是一種在服務器上將應用或頁面轉換為HTML，然后發送到客戶端的技術。

服務端渲染過程：

• 當用戶在瀏覽器中訪問一個網頁時，服務器會接收到這個請求，然后根據用戶請求的內容，查詢相關數據，并生成包含特定信息的HTML文本，然后返回給瀏覽器端，瀏覽器收到后解析并展示出頁面內容。

服務端渲染優點：

• 1.SEO友好：服務端渲染的頁面在發送到客戶端時已經是完整的HTML，搜索引擎可以更容易地爬取信息；
• 2.更快的首屏渲染：HTML已經在服務器端生成，瀏覽器獲取請求后可直接渲染，所以首屏渲染速度更快；
• 3.后端生成靜態化文件：服務器端渲染后可以將生成的HTML靜態化，可以提高網站加載速度和性能；

服務端渲染缺點：

• 1.技術復雜度較高：服務器端渲染需要處理用戶的請求，查詢數據，結合HTML模板生成HTML文本等操作，技 術實現相對復雜
• 2.服務器壓力較大：服務器需要處理更多的計算和渲染任務，可能會增加服務器的壓力，降低性能和響應速度

24.xss攻擊

• 1.XSS是跨站腳本攻擊(Cross Site Scripting)
• 2.攻擊者可以通過向Web頁面里面插入script代碼，當用戶瀏覽這個頁面時，就會運行被插入的script代碼，達到攻擊者的目的。

3.危害：

• 泄露用戶的登錄信息cookie；
• 惡意跳轉：
• 直接在頁面中插入window.location.href進行跳轉。

4.防止XSS攻擊的方法：

• 1).對輸入框內容進行過濾和轉碼。過濾掉用戶輸入的與事件有關的回調，如onclick,過濾掉用戶輸入的style標簽，script標簽。
• 3).設置cookie的httponly，告訴瀏覽器不對客戶端開放訪問權限。
• 1).對用戶的輸入做Html實體編碼
• 3).不對html實體直接進行解碼

25.csrf攻擊

1.概念：跨域請求偽造。

1.?目標站點僅使用cookie來驗證，并且cookie是允許跨域的，這就使得惡意站點的頁面能拿到用戶的cookie.

2. 目標站點后端沒有驗證請求的來源，導致任何帶有效cookie的請求都被處理。

3. 用戶被誘導訪問了惡意站點

預防CSRF攻擊主要有以下策略：

（1）-使用驗證碼，在表單中添加一個隨機的數字或者字母驗證碼，強制要求用戶和應用進行直接的交互，

（2）-HTTP中Referer字段，檢查是不是從正確的域名訪問過來，他記錄了HTTP請求的來源地址。

（3）-使用token認證，在HTTP請求中添加token字段，并且在服務器建立一個攔截器驗證這個token，如果token不對，就拒絕這個請求。

26.diff算法

1.Diff算法主要就是在虛擬DOM樹發生變化后，生成DOM樹更新補丁的方式，對比新舊兩株虛擬DOM樹的變更差異，將更新補丁作用于真實DOM，以最小成本完成視圖更新；

2.原理

框架會將所有的結點先轉化為虛擬節點Vnode，在發生更改后將VNode和原本頁面的OldNode進行對比，然后以VNode為基準，在oldNode上進行準確的修改。

3.修改準則：

原本沒有新版有，則增加；

原本有新版沒有，則刪除；

都有則進行比較，都為文本結點則替換值；

都為靜態資源不處理；都為正常結點則替換；

?