html5的新特性和語義
瀏覽器渲染機制，重繪和重新排列
網頁生成過程:
重排（也稱為回流）:當DOM的變化影響到元素的幾何信息（DOM對象的位置和大小）時，瀏覽器需要重新計算元素的幾何屬性並將其放在界面中的正確位置。這個過程被稱為重排。觸發器:
重繪:當元素的外觀發生變化，但布局不變時，重繪元素外觀的過程稱為重繪。觸發器:
重排優化建議:
變換不會重畫，也不會重排，因為它屬於復合屬性。當復合屬性由“過渡/動畫”激活時，將創建壹個復合層。這允許動畫元素在單獨的層中渲染。當元素的內容沒有改變時，沒有必要重新繪制它。瀏覽器將重新組合以創建動畫幀。
Css盒子模型
所有的HTML元素都可以看作是盒子。在CSS中，術語“盒模型”用於設計和布局。CSS box模型本質上是壹個封裝周圍HTML元素的盒子，包括邊距、邊框、填充和實際內容。盒子模型允許我們將元素放置在其他元素和周圍元素的邊界之間的空間中。
Css樣式優先級
！重要& gtstyle & gtid & gt班級
什麽是BFC？BFC的布局規則是什麽？如何創造BFC？BFC申請？
BFC是塊格式化上下文的縮寫，即塊格式化上下文。BFC是CSS布局的壹個概念，它是壹個內部元素不會影響外部元素的環境。布局規則:Box是CSS布局的對象和基本單位，頁面由若幹個Box組成。元素的類型和顯示屬性決定了該框的類型。不同類型的框將參與不同的格式化上下文。創建:浮動元素顯示:內聯塊位置:絕對應用程序:1。當它們屬於不同的bfc時，它們可以防止邊距重疊。2.清除內部浮動。3.自適應多欄布局。
DOM和BOM對象
BOM（瀏覽器對象模型）是指瀏覽器對象模型，它可以訪問和操作瀏覽器窗口。使用BOM，開發人員可以移動窗口、更改狀態欄中的文本以及執行與頁面內容不直接相關的其他操作。啟用JavaScript與瀏覽器“對話”。DOM（文檔對象模型）指的是文檔對象模型，通過它可以訪問HTML文檔的所有元素。DOM是W3C（萬維網聯盟）標準。DOM定義了訪問HTML和XML文檔的標準:“W3C文檔對象模型（DOM）是壹個平臺中立和語言中立的接口，它允許程序和腳本動態訪問和更新文檔的內容、結構和樣式。”W3C DOM標準分為三個不同的部分:
什麽是XML DOM？XML DOM定義了所有XML元素的對象和屬性，以及訪問它們的方法。什麽是HTML DOM？HTML DOM定義了所有HTML元素的對象和屬性，以及訪問它們的方法。
JS相關性
Js數據類型、類型of、實例of、類型轉換。
關閉（高頻）
閉包是指壹個函數可以訪問另壹個函數（JavaScript高級編程）範圍內的變量。
當壹個函數能夠記住並訪問它的詞法範圍時，就會生成壹個閉包。
即使函數是在當前詞法範圍之外執行的——JavaScript妳不知道
原型、原型鏈（高頻）
Prototype:對象固有的__proto__屬性，它指向對象的prototype屬性。
原型鏈:當我們訪問壹個對象的屬性時，如果該屬性在對象內部不存在，那麽它將在其原型對象中尋找該屬性，而原型對象將有自己的原型，因此我們將不斷尋找它，即原型鏈的概念。原型鏈的末端通常是Object.prototype，所以這就是為什麽我們新創建的對象可以使用toString（）之類的方法。
特點:JavaScript對象是通過引用傳遞的，我們創建的每個新對象實體都沒有自己的原型副本。當我們修改原型時，相關對象將繼承這壹更改。
這指向了新的關鍵字。
該對象是執行上下文中的壹個屬性，它指向最後壹次調用該方法的對象。在全局函數中，這等於window，當函數作為對象調用時，這等於該對象。在實際開發中，可以通過四種調用模式來判斷這方面的方向。
新的
範圍、範圍鏈、可變促銷
繼承（包括es6）、多種繼承方法
（1）第壹種方式是通過原型鏈實現繼承，但這種方式的缺點是當它包含引用類型的數據時，它將被所有實例對象共享，這容易導致修改時的混亂。此外，創建子類型時不能將參數傳遞給超類型。
（2）第二種方式是借用構造函數，通過在子類型的函數中調用超類型的構造函數來實現。這種方法解決了不向超類型傳遞參數的缺點，但它的壹個問題是無法重用函數方法，並且無法訪問超類型原型定義的方法子類型。
（3）第三種方式是組合繼承，這是壹種將原型鏈和借用的構造函數相結合的方式。通過借用構造函數來繼承類型的屬性，通過將子類型的原型設置為超類型的實例來繼承方法。這種方法解決了上述兩種模式單獨使用時的問題，但由於我們將超類型的實例作為子類型的原型，因此我們調用了超類的構造函數兩次，導致子類型的原型中出現了許多不必要的屬性。
（4）第四種方式是原型繼承。原型繼承的主要思想是基於現有對象創建新對象。實現的原理是將壹個對象傳入壹個函數，然後基於該對象返回壹個對象。這種繼承的思想不是創建壹個新的類型，而是實現壹個對象的簡單繼承。ES5中定義的Object.create（）方法是原型繼承的實現。缺點與原型鏈相同。
（5）第五種方式是寄生遺傳。寄生繼承的思想是創建壹個函數來封裝繼承過程，方法是傳入壹個對象，然後復制壹個對象的副本，然後擴展該對象，最後返回該對象。這個擴展的過程可以理解為壹種繼承。這種繼承的優點是繼承壹個簡單的對象，如果這個對象不是我們的自定義類型。缺點是沒有辦法重用函數。
（6）第六種方式是寄生組合遺傳。組合繼承的缺點是將超類型的實例用作子類型的原型，從而導致添加不必要的原型屬性。寄生組合繼承的方式是使用超類型原型的副本作為子類型的原型，從而避免創建不必要的屬性。
事件循環
JS是單線程的。為了防止壹個函數長時間阻塞後面的代碼，同步代碼會被推入執行堆棧依次執行，異步代碼會被推入異步隊列，異步隊列分為宏任務隊列和微任務隊列。由於宏任務隊列執行時間較長，因此微任務隊列優先於宏任務隊列。微任務隊列的代表是Promise .然後，在宏任務的情況下，它被設置為立即設置超時設置間隔。
原生ajax
Ajax是壹種異步通信方式，從服務器獲取數據，達到部分刷新頁面的效果。流程:
事件冒泡和捕獲（委托）
ie下的Event.stopPropagation（）或方法event.cancelBubble = true//防止事件冒泡。
ES6
某視頻剪輯軟件
MVVM簡介
MVVM是模型-視圖-視圖模型的縮寫，即MVC中的控制器演化為視圖模型。模型層代表數據模型，視圖代表UI組件，視圖模型是視圖和模型層之間的橋梁。數據將綁定到viewModel層並自動呈現到頁面中。當視圖發生變化時，會通知視圖模型層更新數據。
談談對vue生命周期的理解？
vue的每個實例在創建時都會經歷壹系列初始化過程。Vue的生命周期鉤子，也就是說當它達到某個階段或條件時觸發的功能，旨在完成某些動作或事件。
計算和觀察
Watch屬性監控是壹個對象，關鍵是要觀察的屬性，值是對應的回調函數。主要用於監控壹些特定數據的變化，從而進行壹些特定的業務邏輯操作，監控屬性的變化。當數據更改時需要異步或昂貴的操作時，使用它。
計算的計算屬性的結果將被緩存。如果computed中函數所依賴的屬性沒有更改，則在調用當前函數時將從緩存中讀取結果。只有當相關響應屬性發生變化時，才會重新計算。要將computed中的函數主要用作屬性，有必要返回最終結果。計算更有效，也更受歡迎。
使用場景computed:當壹個屬性受多個屬性影響時使用，例如:購物車商品結算功能watch:當壹個數據影響多個數據時使用，例如:搜索數據。
關鍵在v-for中的作用
vue組件的通信模式
親子組件通信
父親-& gt；兒子道具，兒子-& gt；Parents $on，$ emit獲取父組件實例和子組件實例。官方不建議調用組件屬性或方法Provide和inject來獲取實例，但在編寫組件庫時經常使用。
兄弟組件通信
事件總線實現跨組件通信vue . prototype . $ Bus = new vue（）vuex。
跨級別組件通信
$attrs 、$listeners提供、註入
通用指令
雙向綁定的實現原理
當創建Vue的實例時，Vue將遍歷數據選項的屬性，使用Object.defineProperty將它們轉換為getter/setter，並在內部跟蹤相關的依賴關系，並在訪問和修改屬性時通知更改。每個組件實例都有壹個對應的watcher程序實例，它會在組件渲染過程中將屬性記錄為依賴關系，然後當調用依賴關系的setter時，它會通知watcher重新計算，以便更新其關聯的組件。
v-model的實現及其實現原理？
nextTick的實現
虛擬節點理解、編譯器和補丁過程
新Vue後的整個過程
思考:為什麽先註射然後再提供？
答案:1。首先，來自祖先的數據應該與當前實例的數據相結合，因此註入數據的initInjections必須在InitState之上。2.從上面註入的內容在當前組件中傳輸並提供給後代，因此註入的數據也必須在其上。
Vm。【mathprocessing錯誤】Mount（VM . Mount（VM . options . El）:裝入實例。
保活的實現
功能:實現組件緩存
掛鉤功能:
原理:Vue.js中將DOM節點抽象為VNode節點，keep-alive組件的緩存基於VNode節點而不是直接存儲DOM結構。它將滿足條件的組件（prunecache和prunecache）緩存在緩存對象中，然後將vnode節點從緩存對象中取出並在需要重新渲染時進行渲染。
配置屬性:
包括字符串或正則表達式。只有名稱匹配的組件才會被緩存。
排除字符串或正則表達式。任何具有匹配名稱的組件都不會被緩存。
最大數量，可以緩存的組件實例的最大數量。
vuex和vue路由器的實現原理
Vuex是壹個專門為vue.js應用程序開發的狀態管理庫。核心概念:
如何理解Vue中的diff算法？
在js中，渲染真正的dom是非常昂貴的。例如，如果我們修改壹些數據並將其直接渲染到真實的DOM中，將導致整個DOM樹被重新繪制和重新排列。那麽有沒有可能只更新我們修改的壹小部分dom，而不是整個dom呢？這時，我們需要根據真實dom生成壹個虛擬dom。當虛擬dom中某個節點的數據發生變化時，將會生成壹個新的Vnode。然後，新的Vnode將與舊的Vnode進行比較，如果有任何差異，將直接在真實的DOM上進行修改，然後舊Vnode的值將是新Vnode。
diff的過程是調用patch函數，比較新舊節點，在比較的同時對真實DOM打補丁。當使用diff算法比較新舊節點時，只會在同壹級別上進行比較。在補丁方法中，首先執行樹級比較，如果新的Vnode不存在，則刪除舊的Vnode，如果存在，則添加新的Vnode，並執行diff更新。當確定需要執行diff算法時，比較兩個vnodes。包括三種類型的操作:屬性更新、文本更新和子節點更新。當新節點和舊節點都有子節點時，將在子節點上執行diff操作，並調用updatechidren。如果舊節點沒有子節點，而新節點有子節點，則首先清除舊節點的文本內容，然後向其中添加新的子節點。如果新節點沒有子節點，而舊節點有子節點，則刪除該節點的所有子節點，當新舊節點都沒有子節點時，文本將被替換。
UpdateChildren提取Vnode的子節點Vch和oldVnode的子節點oldCh。OldCh和vCh各有兩個變量StartIdx和EndIdx，並對它們的兩個變量進行相互比較。有四種方法可以比較它們。如果四次比較不匹配，如果設置了密鑰，則密鑰將用於比較。在比較的過程中，變量會向中間傾斜。once startidx》；EndIdx表示oldCh和vCh中至少有壹個已被遍歷，比較將結束。
妳做了哪些Vue性能優化？
妳知道Vue3有哪些新功能嗎？它們會產生什麽影響？
更小、更快地支持自定義渲染器支持搖擺樹優化:壹種在打包支持片段和跨組件渲染時刪除無用代碼的優化方法。
模板語法保持99%不變，原生支持基於類的組件，並且在設計時也考慮了TypeScript的類型推斷特性，而無需任何編譯和各種階段特性。重寫虛擬DOM可以預期更多的編譯時提示以減少運行時開銷，優化插槽生成，並獨立呈現父組件和子組件的靜態樹以降低呈現成本。基於代理的觀察者機制節省了內存開銷。
檢測機制更加全面、準確和高效，並且具有更多的調試響應跟蹤功能。
與Object.defineProperty相比，實現雙向綁定代理的優缺點是什麽？
反應
1，鍵在react中的作用，有鍵和沒鍵有什麽區別？比較同壹級別的節點意味著什麽？
2、妳對虛擬dom和diff算法的理解，實現渲染功能。
虛擬DOM本質上是壹個JavaScript對象，是真實DOM的抽象表示。當狀態改變時，記錄新樹和舊樹之間的差異，最後將差異更新到真實dom中的渲染函數:
3.React組件之間的通信模式是什麽？
上下文提供了壹種在組件樹之間傳輸數據的方法，而無需為每層組件手動添加屬性。如果您只是想避免將某些屬性從壹層轉移到另壹層，組件組合有時是比上下文更好的解決方案。5.組件組合的缺點:會使高級組件復雜化。
4.如何解析jsx？
5.生命周期是什麽，它們在什麽階段做什麽？為什麽要拋棄壹些生命周期？
ComponentWillMount、componentWillReceiveProps和componentWillUpdate在16版中已被放棄，並將在17版中被刪除。他們需要使用UNSAVE_ prefix來實現向後兼容。
6.react優化方法研究
使用return null而不是CSS的display:none來控制節點的顯示和隱藏。確保頁面上同時有盡可能少的DOM節點。
不要使用數組下標作為鍵；使用shouldComponentUpdate和PureComponent避免過多的渲染函數；在render中，新創建的變量和綁定函數的數量最少，傳遞的參數的數量也最少。盡量將props和state扁平化，只傳遞component需要的props（層次過多或過深會增加shouldcomponentUpdate中數據的負擔），並謹慎地將Component作為props傳遞。
使用babel-plugin-import優化業務組件的引入，實現按需加載，使用SplitChunksPlugin拆分公共代碼，使用動態導入，延遲加載React組件。
7.綁定它的幾種方法
8.了解纖維
9.setState是同步的還是異步的？
10、Redux、React-Redux
Redux的實現過程
用戶頁面行為觸發壹個動作，然後存儲調用Reducer，傳入兩個參數:當前狀態和接收到的動作。減速器將返回新狀態。每次狀態更新時，視圖將根據狀態觸發器重新呈現。
反應-還原:
提供者:從最外層封裝整個應用程序，並將存儲傳遞給連接模塊。連接:
11，了解高階元件
高階分量是壹個函數，其參數是壹個分量，返回值是壹個新分量。特設是壹個純粹的功能，沒有副作用。Ad HOC在React的第三方庫中非常常見，例如Redux的connect組件。
高階組件的作用:
12.我可以用什麽方法創建React組件？
React.createClass（）、ES6類和無狀態函數
13.React元素和組件的區別是什麽？
組件由元素組成。元素數據結構是普通對象，而組件數據結構是類或純函數。
Vue和React的比較
數據流:
React提倡函數式編程，因此它提倡純組件、不可變數據和單向數據流。
Vue的思想是反應式的，即基於數據的可變性，它通過建立壹個Watcher來監控每個屬性，當屬性發生變化時，它會相應地更新相應的虛擬dom。
監控數據變化的原則:
組件通信的區別:jsx和。vue模板。
性能優化
vuex和redux有什麽區別？
就實現原理而言，最大的區別有兩點:
Redux使用不可變的數據，而Vuex的數據是可變的。Redux總是用新狀態替換舊狀態，而Vuex則直接修改舊狀態。
當Redux檢測到數據變化時，它會通過diff來比較差異，而Vuex實際上是通過getter/setter來比較差異，就像Vue的原理壹樣（如果您查看Vuex的源代碼，就會知道它實際上直接創建了壹個Vue實例來跟蹤數據變化）。
當瀏覽器輸入url並呈現頁面時發生了什麽？
網絡安全，HTTP協議
TCP UDP差異
Http和Https的區別（高頻）
GET和POST之間的差異（高頻率）
了解xss、csrf和ddos攻擊的原理以及如何避免它們。
XSS（跨站腳本）是壹種代碼註入攻擊。攻擊者將惡意代碼註入目標網站，當被攻擊的人登錄網站時，他們將執行這些惡意代碼。這些腳本可以讀取cookie、會話令牌或其他敏感網站信息，對用戶進行網絡釣魚欺詐，甚至發動蠕蟲攻擊。
CSRF（跨站請求偽造）跨站請求偽造:攻擊者誘導受害者進入第三方網站，並在第三方網站中向受攻擊的網站發送跨站請求。利用受害者在被攻擊網站上獲得的註冊證書，繞過後臺的用戶認證，達到冒充用戶在被攻擊網站上執行操作的目的。
XSS回避模式:
CSRF回避模式:
DDoS也稱為分布式拒絕服務，其原理是使用大量請求來使資源過載並使服務不可用。