前端面試基礎(chǔ)知識(shí)點(diǎn)總結(jié)

一、H5新特性新增標(biāo)簽本地存儲(chǔ)webStoragewebsocketwebworkers新增地理位置對(duì)css3的支持canvas

帆布多媒體標(biāo)簽新增表單元素類型結(jié)構(gòu)標(biāo)簽：headernavarticleasidefooter表單標(biāo)簽：emailurlrangedate媒體標(biāo)簽：videoaudionavigator.geolocation.getCurrentPosition(success,error,option);二、css3新特性圓角陰影背景漸變彈性盒布局過渡動(dòng)畫2D/3D轉(zhuǎn)換媒體查詢border-imagebackground:linear-gradient(direction,color1,color2[stop],color3...);background:radial-gradient(shapesizeatposition,start-color,...,color[stop]...,last-color);transition需要觸發(fā)條件，而且只有開始和結(jié)束之間的過渡。animation：不需要觸發(fā)，中間可以插入無數(shù)關(guān)鍵幀。transform:translate3d(0px,0px,400px);三、webstorage和cookie的區(qū)別容量cookie4kwebStorage5M

webStorage5分鐘存儲(chǔ)時(shí)長(zhǎng)localStorage長(zhǎng)期存儲(chǔ)sessionStorage基于單次會(huì)話存儲(chǔ)cookie必須設(shè)定存儲(chǔ)時(shí)長(zhǎng)和服務(wù)器交互cookie信息會(huì)在和服務(wù)器做交互時(shí)默認(rèn)發(fā)送到服務(wù)端webStorage只會(huì)存儲(chǔ)在本地四、實(shí)現(xiàn)響應(yīng)式布局幾種方式原生代碼媒體查詢bootstrap等框架五、jsonp原理允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。六、閉包一個(gè)可以訪問另一個(gè)函數(shù)中的變量的函數(shù)。當(dāng)一個(gè)函數(shù)的返回值是另外一個(gè)函數(shù),而返回的那個(gè)函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的變量,且返回的這個(gè)函數(shù)在外部被執(zhí)行就產(chǎn)生了閉包。七、js的垃圾回收機(jī)制標(biāo)記清除引用計(jì)數(shù)八、瀏覽器緩存機(jī)制在Header內(nèi)的字段用于控制緩存機(jī)制老方法Expires，記錄的絕對(duì)值新方法Cache-Control多了一堆選項(xiàng)，記錄的時(shí)間是相對(duì)值獲取緩存檢測(cè)緩存是否過期，如果沒過期取緩存，優(yōu)先從內(nèi)存，其次硬盤，如果過期，則與服務(wù)器協(xié)商緩存是否仍然可用，如果不可用則獲取，可用取緩存九、js本地對(duì)象,內(nèi)置對(duì)象和宿主對(duì)象本地對(duì)象包括如下內(nèi)容：Object、Function、String、Array、Boolean、Number內(nèi)置對(duì)象：Math宿主對(duì)象：BOM/DOM對(duì)象十、http請(qǐng)求流程建立tcp連接的三次握手過程vue與react區(qū)別，優(yōu)缺點(diǎn)1、區(qū)別：1）數(shù)據(jù)流與狀態(tài)管理：Vue使用雙向數(shù)據(jù)流，允許組件之間的狀態(tài)直接進(jìn)行同步。而React則倡導(dǎo)單向數(shù)據(jù)流，使用setState方法更新狀態(tài)，通過props將數(shù)據(jù)從父組件傳遞給子組件，使得數(shù)據(jù)流向更為明確。2）組件化思想：React的組件化思想更為徹底，它主張一切皆組件，包括UI、狀態(tài)、數(shù)據(jù)等，都可以封裝成組件。而Vue則更傾向于將模板、邏輯與樣式進(jìn)行分離，實(shí)現(xiàn)更為靈活的組件復(fù)用。3）模板與JSX：Vue使用基于HTML的模板語法，這使得開發(fā)者能夠更直觀地編寫組件的UI部分。而React則使用JSX，這是一種JavaScript的語法擴(kuò)展，允許在JavaScript中編寫類似HTML的結(jié)構(gòu)，具有更強(qiáng)的靈活性和可維護(hù)性。2、優(yōu)點(diǎn)：Vue： 易于上手：Vue的API直觀易懂，上手容易，學(xué)習(xí)曲線平緩，適合初學(xué)者。 靈活性高：Vue既可以用于構(gòu)建大型單頁應(yīng)用(SPA)，也可以用于構(gòu)建小型組件。 響應(yīng)式：Vue會(huì)自動(dòng)追蹤數(shù)據(jù)的變化，并更新視圖，無需手動(dòng)操作DOM。React： 創(chuàng)建動(dòng)態(tài)Web應(yīng)用程序變得更容易：React通過虛擬DOM提高了性能，使得構(gòu)建動(dòng)態(tài)Web應(yīng)用程序變得更加容易。 可重用組件：React的組件化思想使得組件可以更容易地復(fù)用和組合，提高了開發(fā)效率。 性能增強(qiáng)：React的虛擬DOM技術(shù)能夠最小化DOM操作，提高應(yīng)用性能。3、缺點(diǎn)：Vue： 生態(tài)系統(tǒng)相對(duì)較?。号cReact和Angular相比，Vue的生態(tài)系統(tǒng)相對(duì)較小，可能需要花費(fèi)更多精力去實(shí)現(xiàn)功能。 文檔資料相對(duì)較少：盡管Vue的官方文檔非常詳細(xì)，但相比其他框架，其文檔和資料可能還不夠完善。React： 學(xué)習(xí)曲線較陡峭：對(duì)于初學(xué)者來說，React的學(xué)習(xí)曲線可能較陡峭，需要花費(fèi)一定的時(shí)間和精力去掌握其核心概念和技術(shù)。 模板與JSX的權(quán)衡：雖然JSX提供了更大的靈活性，但對(duì)于一些開發(fā)者來說，可能需要適應(yīng)這種新的語法和編程方式。十二、vue雙向綁定原理已經(jīng)了解到vue是通過數(shù)據(jù)劫持的方式來做數(shù)據(jù)綁定的，其中最核心的方法便是通過Object.defineProperty()來實(shí)現(xiàn)對(duì)屬性的劫持，達(dá)到監(jiān)聽數(shù)據(jù)變動(dòng)的目的，無疑這個(gè)方法是本文中最重要、最基礎(chǔ)的內(nèi)容之一，要實(shí)現(xiàn)mvvm的雙向綁定，就必須要實(shí)現(xiàn)以下幾點(diǎn)：1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)3、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖4、mvvm入口函數(shù)，整合以上三者十三、http常見狀態(tài)碼1信息，服務(wù)器收到請(qǐng)求，需要請(qǐng)求者繼續(xù)執(zhí)行操作2成功，操作被成功接收并處理3重定向，需要進(jìn)一步的操作以完成請(qǐng)求4客戶端錯(cuò)誤，請(qǐng)求包含語法錯(cuò)誤或無法完成請(qǐng)求5服務(wù)器錯(cuò)誤，服務(wù)器在處理請(qǐng)求的過程中發(fā)生了錯(cuò)誤十四、vue路由機(jī)制主要是<router-link>和<router-view>兩個(gè)標(biāo)簽<router-link>執(zhí)行時(shí)會(huì)轉(zhuǎn)換成<a>，并根據(jù)自己的to屬性將路由地址轉(zhuǎn)變成href的值，然后渲染在<router-view>標(biāo)簽中。十五、js繼承類的方式5種繼承十六、this有哪幾種指向this的四種指向。window對(duì)象構(gòu)造函數(shù)call/apply十七、es6有哪些新特性letconst箭頭函數(shù)展開符解構(gòu)賦值對(duì)象語法糖字符串模板十八、webpack相關(guān)配置屬性入口出口文件：entry:{ index:__dirname'/src/main.js',//__dirname表示當(dāng)前項(xiàng)目的根路徑。 goods:__dirname'/src/goods.js'},output:{ path:__dirname'/dist', filename:'[name].js'},http代理：devServer:{ contentBase:__dirname'/dist', port:3000, inline:true, //每當(dāng)我們?cè)L問/zhuiszhu地址的時(shí)候，就把請(qǐng)求轉(zhuǎn)發(fā)給target地址的服務(wù)器。 proxy:{ '/zhuiszhu':{ target:'90:3000', secure:false, changeOrigin:true }}}資源地圖：devtool:'source-map'本地web服務(wù)配置：npmiwebpack-dev-server@2.9.7-g//安裝的webpack-dev-server模塊配置信息devServer:{ contentBase:__dirname'/dist',//指定本地web服務(wù)器根路徑 port:3000, inline:true//當(dāng)源文件改變后，自動(dòng)在瀏覽器頁面刷新}提取css文件：npmiextract-text-webpack-plugin-D//webpack.config.jsletExt=require('extract-text-webpack-plugin');module:{ rules:[ {test:/\.css$/,loader:Ext.extract('css-loader')}, {test:/\.less$/,loader:Ext.extract('css-loader!less-loader')} ]},plugins:[ newExt('index.css')],webpack配置別名resolve:{ //配置別名，在項(xiàng)目中可縮減引用路徑 alias:{ vue$:'vue/dist/vue.esm.js', '@':resolve('src'), '&':resolve('src/components'), 'api':resolve('src/api'), 'assets':resolve('src/assets') }}十九、模塊化nodejs使用的是commonjs規(guī)范注意:nodejs雖然原生支持es6但它并不支持es6的import規(guī)范導(dǎo)入:letxx=require("xxx")導(dǎo)出://一個(gè)文件內(nèi)只能使用一次module.exports=Object|Function|Array|String|Number|Boolean//一個(gè)文件可以使用多次exports.xxx=Object|Function|Array|String|Number|Boolean下列寫法不被允許它會(huì)改變exports對(duì)象的引用導(dǎo)致程序運(yùn)行出錯(cuò)exports={ xxx:"text"}es6的import規(guī)范方式1導(dǎo)入:importXXXfrom"xxx"導(dǎo)出:exportdefaultxxx該種方式一個(gè)文件內(nèi)只能使用一次方式2導(dǎo)入:import{XXX}from"xxx"import{XXXasYYY}from"xxx"http://將模塊XXX給個(gè)別名為YYY導(dǎo)出:exportlet|const|var|function|class|interfaceXXX=....或者let(可以是其他聲明符)XXX=....export{XXX}上述導(dǎo)出方式可以在同一個(gè)文件內(nèi)使用多次還有AMD規(guī)范和CMD規(guī)范二十、什么是觀察者模式也稱：發(fā)布訂閱模式。當(dāng)對(duì)象間存在一對(duì)多關(guān)系時(shí)，這個(gè)對(duì)象的狀態(tài)發(fā)生改變，則會(huì)自動(dòng)通知它的依賴對(duì)象，進(jìn)行廣播通知。比如：vue中子組件向父組件傳值，子組件使用$emit自定義一個(gè)事件名稱，父組件接收這個(gè)事件即可。還有中央事件總線emiton二十一、什么是mvcmvpmvvmM為數(shù)據(jù)層，V視圖層，C邏輯層。MVP（Model-View-Presenter）是MVC的改良模式，由IBM的子公司Taligent提出。和MVC的相同之處在于：Controller/Presenter負(fù)責(zé)業(yè)務(wù)邏輯，Model管理數(shù)據(jù)，View負(fù)責(zé)顯示只不過是將Controller改名為Presenter，同時(shí)改變了通信方向。在MVP中，View并不直接使用Model，它們之間的通信是通過Presenter(MVC中的Controller)來進(jìn)行的，所有的交互都發(fā)生在Presenter內(nèi)部。MVVM=MVP新特性（bind等）二十二、平時(shí)怎么解決瀏覽器兼容問題（具體問題的解決方案）1、默認(rèn)padding，margin不同解決：自定義初始化css2、在一個(gè)div中放一個(gè)img，但是img的下方和div之間有3px的間隔。這是瀏覽器的解析問題，不同的瀏覽器間隔的還不同。foxfire是5px，chrome是3px。解決：/*方式一*/div{font-size:0;}/*方式二*/img{display:block;}/*方式三*/img{vertical-align:top;}3、幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距解決：使用float屬性為img布局4、解決ie9以下瀏覽器對(duì)html5新增標(biāo)簽不識(shí)別的問題。引入html5shiv.js文件5、針對(duì)IE屬性csshack6、-ms--o--webkit--moz-7、清除浮動(dòng)clearfix8、邊距重疊解決：加一個(gè)父元素，父元素使用overflow:hidden;9、IE9不能使用opacityopacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);二十三、數(shù)組的操作方法join，push，pop，map，forEach，every，some，filter，concat，splice二十四、如何進(jìn)行性能優(yōu)化縮短頁面加載時(shí)間1、減少http請(qǐng)求2、使用cdn加速3、添加Expires頭4、將樣式css放在頭部，腳本script放在底部5、使用外部的JavaScript和CSS二十五、實(shí)現(xiàn)原生ajax的步驟letxhr=newXMLHTTPRequest();xhr.open('get','xxx.php?id=1',true);xhr.send()xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){console.log(this.response)}}二十六、Vue

如何創(chuàng)建全局組件和局部組件如何定義props如何對(duì)props進(jìn)行類型驗(yàn)證什么是計(jì)算屬性數(shù)據(jù)