2023年前端面試大全

2023年前端面試大全(關(guān)系型數(shù)據(jù)庫管理系統(tǒng)),可以使用SQL查詢。術(shù)(超文本擴展語言，可以自定義標簽或?qū)傩?描述二維圖形的語言。在H5canvas可以看做是一個畫布。,其繪制出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這外，我們喜歡用canvas來做一些統(tǒng)計用的圖表，如柱狀圖曲線而svg,所繪制的圖形為矢量圖，所以其用法上受到了限制。因為只能繪制矢3、減少DOM元素數(shù)量3、對組件使用Gzip壓縮2、不使用CSS表達式5、什么是文檔的預解析?(瀏覽器解析過程)當鼠標放到文字或是圖片上時有title文字顯示。(因為IE不標準)在IEsessionStorage是htlocalStorage也是htmlSessionStorage,LocalStorage,Cookie這三者都可WebStorage,創(chuàng)建它們的目的便于客戶端存儲數(shù)據(jù)。而cookie是網(wǎng)站為了標終在同源(協(xié)議、主機、端口相同)的http請求中攜帶(即使不需要),會在1、cookie數(shù)據(jù)大小不能超過4k。2、sessionStorage和localSto2、sessionStorage1、sessionStorage只在同源的同窗口(或標簽頁)中共享數(shù)據(jù)，也就是只basefont。中的頁面才能訪問，當會話結(jié)束后，數(shù)據(jù)也隨之銷毀。因此sessionSto而localstorage用于持久化本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠11、Doctype作用?標準模式與兼容模式各有什么區(qū)別?標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容relative:相對定位，相對于自己本身在正常文檔流中的位置進行定位。absolute:生成絕對定位，相對于最近一級定位不為static的父元素進行定fixed:(老版本IE不支持)生成絕對定位，相對于瀏覽器窗口或者frame進13、如何實現(xiàn)6px字體浮動的元素可以向左或向右移動，直到它的外邊緣碰到包含元素(父元素)或“偽”元素/*方法1*//*方法2*/border-image:url(border.p/*方法3*/box-shadow:000lpx任何對象都有proto隱式原型，等于構(gòu)造函數(shù)的prototypeobj.protc===OPtotype.constructor=person1.oroto===Ptotype//trueperson1.constructor==Pers(Ptotype.constructor==Person)//原型鏈最終點是nullobj.oroto.proto_===null//每個對象都會在其內(nèi)部初始化一個屬性，就是prototype(原型),當我們訪問變3、請說出以下flag的結(jié)果?為什么?varflag=show()||getN邏輯或如果第一個值成立就直接返回第一個值，系可以通過e.setAttribute(propName,propValue)設置標簽上屬性[]instanceofArrayOtotype.toString.call([])==='[objectArray]'addEventListener('click',func如果迭代的對象的變量值是null或者undefined,for…of語句在可迭代對象(包括Array,Map,Set,String,TypedArray,event.target:返回觸發(fā)事件的元素event.currentTarget:返回綁定事件的元素(相當于事件中this)宿主對象：由宿主環(huán)境決定，如果在瀏覽器運行，會有window及其子對象document,location等，如果在node環(huán)境運行，則有g(shù)lobla19、說出至少5個ES6的新特性，并簡述它們的作用。(簡答題)如果匹配不成功變量的值就等于undefinprops是外部傳入的數(shù)據(jù)參數(shù)，不可變通過React.createRef()創(chuàng)建的，并通過ref屬性附加到react元素，在構(gòu)Store-整個程序的狀態(tài)/對象樹保存在Store中。結(jié)果的可預測性-由于總是存在一個真實來源，即store,因此不存在如何可維護性-代碼變得更容易維護，具有可預測的結(jié)果和嚴格的結(jié)構(gòu)。服務器端渲染-你只需將服務器上創(chuàng)建的store傳到客戶端即可。這對初始開發(fā)人員工具-從操作到狀態(tài)更改，開發(fā)人員可以實時跟蹤應用中發(fā)生的所有易于測試-Redux的代碼主要是小巧、純粹和獨立的功能。這使代碼可測試且Vue主要通過以下4個步驟來實現(xiàn)數(shù)據(jù)雙向綁定的：的橋梁,主要的任務是訂閱Observer中的屬性值變化的消息，當收到屬性值實現(xiàn)一個訂閱器Dep:訂閱器采用發(fā)布-訂閱設計模式，用來收集訂閱者Watcher,對監(jiān)聽器Observer和訂閱者Watcher進行統(tǒng)一管理。12、Vuex用過嗎?簡單介紹一下?狀態(tài)管理模式+庫mutations-方法【同步函數(shù)，只建議在這個地方修改數(shù)據(jù)】inc(state,參數(shù)唯一){}increment(context,num){contthis.$store.dispatch(Proxy:代理，是ES6新增的功能，可以理解為代理器(即由它代理某些操Proxy:對象用于定義或修改某些操作的自定義行為，可以在外界對目標對象Proxy可以理解成，在目標對象之前架設一層“攔截”,外界對該對象的訪使用Proxy的核心優(yōu)點是可以交由它來處理一些非核心邏輯(如：讀取或設置在服務端完成，服務端形成的html片段直接返回(1)服務端渲染的優(yōu)點：過Ajax獲取到的內(nèi)容；而SSR是直接由服務端返回已經(jīng)渲染好的頁面(數(shù)據(jù)已經(jīng)包含在頁面中),所以搜索引擎爬取工具可以抓取渲染好的頁面；更快的內(nèi)容到達時間(首屏加載更快):SPA會等待所有Vue編譯后的js文(2)服務端渲染的缺點：態(tài)文件的server更加大量占用CPU資源(CPU-intensive-CPU密集)用于防止閃屏，防止頁面出現(xiàn){{}}vuex、Vuex數(shù)據(jù)更新具有響應式window全局作用域下定義的數(shù)據(jù)是靜態(tài)的，數(shù)據(jù)不具有響應式初始化：啟動構(gòu)建，讀取與合并配置參數(shù)，加載plugin,實例化Comp編譯：從Entry出發(fā)，針對每個Module串行調(diào)用對應的Loader去翻譯文件中的內(nèi)容，再找到該Module依賴的Module,遞歸的進行編譯處理統(tǒng)中如果有option.plugin,則遍歷調(diào)用plugin.apply()來注冊plugin,每次遍歷時調(diào)用對應Loader翻譯文件中內(nèi)容，然后生成AST,遍歷AST找到下在以上過程中，webpack會在特定的時間點(使用tapable模塊)廣播特定的事件，插件監(jiān)聽事件并執(zhí)行相應的邏輯，并且插件可以調(diào)用webpack提供的babel-polyfill的原理是當運行環(huán)境中并沒有實現(xiàn)的一些方最終會通過babel-runtime編譯成es5.也就是說，不管瀏覽器是否支持ES6,babel-polyfill它是通過向全局對象和內(nèi)置對象的prototype上添加方法來實現(xiàn)的。比如運行環(huán)境中不支持Atotype.find方法，引入polyfill,babel-runtime:它不會污染全局對象和內(nèi)置對象的原型，比如說我們需要Promise,我們只需要importPromisefrom'babel-runtime/core-js/promise'即可，這樣不僅避免污染全局對象，而且可以減stage-x:指處于某一階段的js語言提案Stage0-設想(StrawmStage4-完成(Finishecss-loader讀取合并CSS文件sass-loader解析sass文件(安裝sass-loader,node-sass)postcss-loader自動添加瀏覽器兼容前綴(postcss.config配置)url-loader將文件轉(zhuǎn)換為bas運行時機1.loader運行在編譯階段2.plugins在整個周期都起作用使用方式Loader:1.下載2.使用Plugin:1.下載2.引用3.使用inline:不生成映射關(guān)系文件，打包進main.jscheap:1.只精確到行，不精確到列，打包速度快2.只管業(yè)務代碼，不管第三module:不僅管業(yè)務代碼，而且管第三方代碼6、什么是模熱更新?有什么優(yōu)點?模塊熱更新是webpack的一個功能，它可以使得代碼在應用過程中替換添加刪出模塊，無需重新加載整個頁優(yōu)點：只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時間。調(diào)整parcel超快的打包速度，多線程在多核上并發(fā)編譯，不用任何配置webpack和rollup都需要配config文件，指rollup有對import/export所做的nodepolyfills,webpack沒有rollup支持相對路徑，而webpack沒有，所以得使用path.resolve/path.join8、有哪些常見的Plugin?他們是解決什么問題的?clean-webpack-plugin:重新打包自動清空distminicssextractplugin:提取js中的csoptimize-css-assets-webpack-plugcommons-chunk-plugin:提取公共代碼mode/-mode參數(shù)，新增了mode/-mode參數(shù)來表示是開發(fā)還是生產(chǎn)development側(cè)重于goujiansud移除loaders,必須使用rules(在3版本的時候loaders和rules是共存的但是到4的時候只允許使用rules)移除了CommonsChunkPlugin(提取公共代碼),用optimization.splitChunks和webpack中的loader是一個函數(shù)，主要為了實現(xiàn)源碼的轉(zhuǎn)換，所以loader函數(shù)會以源碼作為參數(shù)，比如，將ES6轉(zhuǎn)換為ES5,將less轉(zhuǎn)換為css,然后再將css轉(zhuǎn)換為js,以便能嵌入到html文件中。11、Plugin(插件)的作用是什么?在webpack中，可以在output給出輸出的文件制定chunkhash,并且分離經(jīng)常更新的代碼和框架代碼，通過NameModulesPlugin或者HashedModulesPluginpublicPath:當該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共多頁應用的話，可以使用webpack的Aut如，每個頁面都引用了同一套css樣式表HtmlWbpackPlugin自動在打包結(jié)束后生成html文件，并引入bundle.jscleanwebPackPlugin打包自動刪除上次打module:是開發(fā)中的單個模塊[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名output:出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認(1)盡可能多地利用硬件能力，如使用3D變形來開啟GPU加速，例如以下代-ms-transform:translate3d(0,0,0);如果動畫執(zhí)行過程中有閃爍(通常發(fā)生在動畫開始的時候),可以通過如下方式(2)盡可能少使用box-shadows和gradients,它們往往嚴重影響頁面的性(3)盡可能讓動畫元素脫離文檔流，以減少重排，如以下代碼所示。緩存利用：緩存Ajax,使用CDN、外部JavaScript和CS用域，增加作用域鏈的長度),多個變量聲明合并。**「渲染層面」**的性能優(yōu)化，無疑是如何讓代碼解析開發(fā)階段需時刻注意以下涉及到的每一點，養(yǎng)成良渲染層面的性能優(yōu)化更多表現(xiàn)在編碼細節(jié)上，而并**「回流重繪策略」**在渲染層面的性能優(yōu)化里占比較5.圖片懶加載5、針對JavaScript,如何優(yōu)化性能?(2)盡量使用事件委托模式，避免批量綁定事件。(4)合理使用requestAnimationFrame動畫代替setTimeOut。(5)適當使用canvas動畫。(6)盡量避免在高頻事件(如TouchMove、Scroll事件)中修改視圖，這會(1)把CSS寫在頁面頭部，把JavaScript程序?qū)懺陧撁嫖膊炕虍惒讲僮髦小?2)避免圖片和iFrame等的空src,空src會重新加載當前頁面，影響速度(3)盡量避免重設圖片大小。重設圖片大小是指在頁面、CSS、JavaScript主要分成兩部分：渲染引擎(layoutengineer或Rendering入CSS等),以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器takeRecords()從MutationObserver的通知隊列中刪除所有待處理的通知，并10、對web的安全性方面的了解?比如xss,xsrf/csrf跨站腳本攻擊(也稱為XSS(cross-sitescripting的縮寫),為了和CSS區(qū)指利用網(wǎng)站漏洞從用戶那里惡意盜取信息。它允許惡意web用戶將代端腳本js?？缯军c請求偽造(也稱為XSRF或CSRF(Cross-siterequestforgery))前端保持一致的行為。也就是說，在不改變UI代替舊的框架、語言(如VB)壓縮JavaScript、CSS、image等前端資源(通常由服務器來解決)。優(yōu)化程序的性能(如數(shù)據(jù)讀寫)。當頁面滾動的時間被觸發(fā)->執(zhí)行加載圖片操作->判斷圖片是否在可視區(qū)域內(nèi)->在，則動態(tài)將data-src的值賦予該圖片