前端程序員技術(shù)知識點(diǎn)10套真題及詳解

PAGE1PAGE1PAGE2PAGE2一、單選題1．下列選項中，不是把網(wǎng)頁抽象成三部分（HTML、CSS和JavaScript）后的優(yōu)點(diǎn)的是A．增強(qiáng)HTML文檔的可讀性B．跨平臺，可方便遷移到不同設(shè)備中C．在HTML文檔中可按需加載相應(yīng)的文件，減少不必要的請求（setInterval(function(){vara=1;},2000);層 （setInterval(function(){vara=1;},2000);遲以遲行（觀 情（A．該防火墻能夠使公司員工只能訪問Internet上與其業(yè)務(wù)聯(lián)系的公司的IP地址B．該防火墻能夠僅允許HTTP通過，不允許其他協(xié)議通過，如TCP/UDPC．該防火墻能夠使員工不能直接訪問FTP服務(wù)器端口號為21的FTP地址IP（的I/O B．該程序大小不應(yīng)超過實際的內(nèi)存容量 （（由CSS和于（器 數(shù) 的div在是 在IE是div{padding:10px;margin:10px;border:1pxsolid#000;width:100px;}div{padding:10px;margin:10px;border:1pxsolid#000;width:100px;}的x，y_x=0,=x++yconsole.log(x,y);varx="1",y;switch(x){case1:y=1;break;case2:的yvarx="1",y;switch(x){case1:y=1;break;case2:y=2;y=2;break;default:y=0;}1為 ，z2．什么是XHTML？3．什么是CSS預(yù)處理器？4．什么是盒模型？5．什么是互聯(lián)網(wǎng)？6．請簡單介紹一下HTTP。與兩個運(yùn)算符與有哪些區(qū)別？var和v16.3classPerson{name:string;staticage:number;constructor(name:string){=name;classPerson{name:string;staticage:number;constructor(name:string){=name;}}letpeople:typeofPerson=Person;people.age=28;letworker:Person=newpeople("strick");letpeople:typeofPerson=Person;people.age=28;letworker:Person=newpeople("strick");console.log();五、編程題1．用純CSS實現(xiàn)一個三角形。2．請用JavaScript實現(xiàn)冒泡排序。0353和5<formid="register"><inputid="txt"type="text"value="1"/><formid="register"><inputid="txt"type="text"value="1"/></form>5．如何利用數(shù)組解構(gòu)交換兩個變量的值？六、開放題1．你對我們公司有什么了解？2．如果你在這次面試中沒有被錄用，你會怎么辦?3．如果你被錄取了，接下來將如何開展工作？PAGE101PAGE101PAGE100PAGE100真題2某知名社交平臺前端工程師筆試題真題2某知名社交平臺前端工程師筆試題W3C（A．W3C是一個非營利性組織B．W3C制定了HTML和CSS標(biāo)準(zhǔn)C．OSI參考模型也是W3C制定的W3CA．元素的CSS屬性float為noneB．元素的CSS屬性position為absoluteC．元素的CSS屬性position為fixedCSSB（A．63 （A．強(qiáng)調(diào)文檔和以敏捷性應(yīng)對變化B．強(qiáng)調(diào)建模和以敏捷性應(yīng)對變化C．強(qiáng)調(diào)設(shè)計和以敏捷性應(yīng)對變化IP（1sA．前者是執(zhí)行權(quán)限，后者是執(zhí)行和讀取權(quán)限B．前者是執(zhí)行和讀取權(quán)限，后者是執(zhí)行和讀取權(quán)限C．前者是執(zhí)行權(quán)限，后者是讀取權(quán)限D(zhuǎn)．前者是執(zhí)行和讀取權(quán)限、后者是讀取權(quán)限（如（A．關(guān)鍵碼個數(shù)最少的二叉搜索樹B．搜索時平均比較次數(shù)最少的二叉搜索樹C．所有結(jié)點(diǎn)的左子樹都為空的二叉搜索樹D．所有結(jié)點(diǎn)的右子樹都為空的二叉搜索樹二、多選題（<divstyle="margin-bottom:20px">兄弟元素</div><divstyle="margin-top:10px">兄弟元素</div>素<divstyle="margin-bottom:20px">兄弟元素</div><divstyle="margin-top:10px">兄弟元素</div>functionisArray(){returntrue;}functionisArray(){returntrue;}||0為 1為 ，x，y1．請闡述對W3C的理解與認(rèn)識。2．請簡單介紹一下HTML5。3．什么叫漸進(jìn)增強(qiáng)？漸進(jìn)增強(qiáng)和優(yōu)雅降級有哪些區(qū)別？4．CSS預(yù)處理器有哪些優(yōu)缺點(diǎn)？5．請簡單介紹一下網(wǎng)絡(luò)中的協(xié)議。6．請談?wù)剬CP/IP的理解。7．什么是嚴(yán)格模式？嚴(yán)格模式有哪些限制？typeofobj==="object"8．像下面這樣判斷obj是不是一個對象有什么潛在問題？如何改進(jìn)？typeofobj==="object"9．將一個匿名函數(shù)像下面這樣用圓括號包裹，有什么作用？(function(){})()(function(){})()10．請說明一下const的特點(diǎn)。11．使用fill()和copyWithin()需要的注意點(diǎn)有哪些？12．ES6的類比起用構(gòu)造函數(shù)模擬的類，有哪些獨(dú)有的特性？13．VirtualDOM是如何工作的？14．Reactv16新增了哪些生命周期方法？15．在React中，什么是Context？16．在React中，TestRenderer有什么作用？17．請簡單描述一下webpack的插件。18．代理服務(wù)器有哪些功能？19．Vue.js中的.native修飾符有什么作用？functionfunc<T,UextendskeyofT>(obj:T,key:U){}functionfunc<T,UextendskeyofT>(obj:T,key:U){}CSS2．封裝一個isInteger()函數(shù)，用于檢測傳入的值是整數(shù)。3．請重新封裝一個isNaN2()函數(shù)，此函數(shù)彌補(bǔ)了全局函數(shù)isNaN()的不足。ES61．你怎么理解應(yīng)聘的職位？2．你有哪些主要的缺點(diǎn)？3．你有哪些主要的優(yōu)點(diǎn)？一、單選題的 B．削弱對第三方插件的依賴C．新增SVG繪畫D．引入WebWorkers規(guī)范5A．請求方法 C．HTTP版本D．請求首部（ A．正確性驗證B．黑白盒測試C．集成測試D．基本路徑測試（（A．進(jìn)程調(diào)度有“可搶占”和“非搶占”兩種方式，后者引起系統(tǒng)的開銷更大B．每個進(jìn)程都有自己的文件描述符表，所有進(jìn)程共享同一打開文件表和v-node表RAMD．多個進(jìn)程競爭資源出現(xiàn)了循環(huán)等待可能造成系統(tǒng)死鎖（A．快速排序的平均時間復(fù)雜度為O(nlogn)，最壞時間復(fù)雜度為O(nlogn)B．堆排序的平均時間復(fù)雜度為O(nlogn)，最壞時間復(fù)雜度為O(n^2)C．冒泡排序的平均時間復(fù)雜度為O(n^2)，最壞時間復(fù)雜度為O(n^2)D．歸并排序的平均時間復(fù)雜度為O(nlogn)，最壞時間復(fù)雜度為O(n^2)n（A．寬度和高度的算法與W3C盒模型不同B．在表格中的字體樣式（如font-size等）不會繼承C．當(dāng)內(nèi)容超出容器高度時，會自動裁剪超出的內(nèi)容CSS（（<style>li{width:100px;height:100px;}</style><ulstyle="overflow:hidden"><listyle="float:left"></li></ul>，ul<style>li{width:100px;height:100px;}</style><ulstyle="overflow:hidden"><listyle="float:left"></li></ul>于 vary,x=1;y=x+++x;的y為 vary,x=1;y=x+++x;==為 為 ，e，f1．HTML和HTML5的區(qū)別有哪些？App4．什么是外邊距塌陷？5．請談?wù)剬τ嬎銠C(jī)網(wǎng)絡(luò)的理解。6．什么是MAC地址？7．JavaScript有哪些優(yōu)勢和劣勢？8．在DOM中，事件對象的兩個屬性target和currentTarget有什么區(qū)別？9．在HTTP響應(yīng)報文中會包含哪些首部？10．?dāng)U展運(yùn)算符（...）的用途有哪些？11．find()和indexOf()有哪些區(qū)別？12．類有哪些成員？13．ShadowDOM和VirtualDOM之間有哪些區(qū)別？14．有沒有辦法強(qiáng)制React組件重新渲染，而不用setState()方法？15．在React中，什么是高階組件（HOC）？16．請描述一下React中的Jest。17．在webpack.config.js的output字段中，它的chunkFilename屬性有何作用？18．請談?wù)勀銓ZIP的理解。19．Vue.js中的.sync修飾符有什么作用？20．什么是泛型？五、編程題1．如何用純CSS的方式讓超出容器寬度的文本自動替換為省略號？<divid="container"><ahref="#"data-digit="1">按鈕</a></div>divaa<divid="container"><ahref="#"data-digit="1">按鈕</a></div>ES61．你沒有工作經(jīng)驗，如何能夠勝任這個崗位？2．你的好朋友是如何評價你的？真題4某知名軟件測評中心前端工程師筆試題真題4某知名軟件測評中心前端工程師筆試題一、單選題AppA．運(yùn)行在APP內(nèi)嵌的容器（如WebView等）中div3)

B．可間接調(diào)用一部分的系統(tǒng)APIC．可搭建一套離線應(yīng)用程序D．迭代周期短，可隨時將代碼提交到服務(wù)器上更新D．（（5．軟件復(fù)用是使用已有的軟件產(chǎn)品（如設(shè)計、代碼和文檔等）來開發(fā)新的軟件系統(tǒng)的過（冊私IP（（（序 序 n（1.0A．<P>打開文本框</p>B．<buttonname=add>提交</button>C．<ahref="javascript:;">跳轉(zhuǎn)首頁</a>D．<p>電腦<b><i>必須</b></i>重啟</p>個 B．把內(nèi)容變?yōu)橐粭l超鏈接 D．為內(nèi)容指定一段動畫<style>.section{width:100px;height:100px;background:#FFCC00;}</style><divclass="section"></div><divstyle="margin-top:10px;overflow:hidden"><pstyle="margin-top:10px"class="section"></p></div>個div和p<style>.section{width:100px;height:100px;background:#FFCC00;}</style><divclass="section"></div><divstyle="margin-top:10px;overflow:hidden"><pstyle="margin-top:10px"class="section"></p></div>是 0(function(x){return(function(y){console.log(x+y);})(20);})(10);(function(x){return(function(y){console.log(x+y);})(20);})(10);})1．HTML文檔中的DOCTYPE有什么作用？2．HTML和XHTML有哪些區(qū)別？3．當(dāng)出現(xiàn)外邊距塌陷時，外邊距之間的計算方式是怎樣的？span{border:1pxsolid#000;span{border:1pxsolid#000;margin:10px0;padding:10px0;width:300px;height:100px;}5．什么是IP地址？55．在9．ES6中的剩余參數(shù)有什么作用？10．什么是類型化數(shù)組？ES6什么是18．在Vue中，如何能直接訪問父組件、子組件和根實例？vxaa==1&&a==2&&a==32．執(zhí)行下面的代碼，返回的結(jié)果是true，那么a的值是什么？a==1&&a==2&&a==33．如何判斷對象中的某個屬性是繼承而來的？c5．如何判斷一個字符是由兩個編碼單元組成的？六、開放題1．你與上司意見不一致時，該怎么辦？2．能說說你的家庭嗎？真題5某知名搜索引擎提供商前端工程師筆試題真題5某知名搜索引擎提供商前端工程師筆試題一、單選題（（A．分析源程序，決定需要修改的部分以及其影響的程度B．能夠使用數(shù)學(xué)方法證明軟件功能的正確性C．分析源程序，從源程序?qū)С龀绦蚪Y(jié)構(gòu)6．某網(wǎng)絡(luò)的IP地址空間為（ （，（序 9．n（A．使得HTML文檔結(jié)構(gòu)清晰、布局合理、主體突出、可讀性更強(qiáng)B．促進(jìn)無障礙訪問，降低信息污染C．改善搜索引擎優(yōu)化（SEO）D．減少不必要的HTTP請求p,50%)A．JScript和JavaScript是等價的B．JavaScript脫離瀏覽器后就不能執(zhí)行C．JavaScript由ECMAScript、DOM和BOM組成D．JavaScript是一門弱類型的語言（C．ID在CSS素為 (function(){returntypeofarguments;})();是 (function(){returntypeofarguments;})();1．簡單介紹一下瀏覽器的兩種渲染模式：怪異模式和接近標(biāo)準(zhǔn)模式。2．簡述一下對HTML5語義化的理解。Web6．在瀏覽器中，一個頁面從輸入URL到加載完成，都有哪些步驟？7．請簡單描述對JavaScript的理解。8．XSS是什么？對這種攻擊有哪些防范辦法？9．什么是解構(gòu)？10．類型化數(shù)組與常規(guī)數(shù)組有哪些異同？11．怎么用ES6的語法實現(xiàn)類的繼承？12．為什么React組件的名稱，其首字母要大寫？13．什么是ForwardRefs？14．React的高階組件有哪些限制（即注意事項）？15．npm在什么情況下適合將包本地安裝？而在什么情況適合全局安裝？18．Vue中的ref和$refs有什么作用？19．接口與類型別名有哪些區(qū)別？五、編程題divfunctionSuper(age){s=[];functionSuper(age){s=[];this.age=age;}functionSub(age){}Stotype=Stotype;varjson={"name":"pingwen",varjson={"name":"pingwen","age":28,"colors":["red","yellow","blue"]};5．在JSX中如何進(jìn)行循環(huán)？六、開放題1．你認(rèn)為自己最適合做什么？2．你如何看待公司的加班現(xiàn)象？真題6某初創(chuàng)公司前端工程師筆試題真題6某初創(chuàng)公司前端工程師筆試題一、單選題（A．<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN">B．<!DOCTYPEhtml>C．<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:///TR/xhtml1/DTD/xhtml1-transitional.dtd">（5．UML5AA關(guān)系；若AAAAA（Ⅲ（6．IPv6地址占（）個字節(jié)。A．32 B．4 C．8 （A．就緒隊列B．作業(yè)后備隊列C．等待隊列D．提交隊列（nOSI層 p{color:red!important;color:blue;}，p是p{color:red!important;color:blue;}為 varfunc=(function(){return"1";},function(){return1;})();typeoffunc;行typeofvarfunc=(function(){return"1";},function(){return1;})();typeoffunc;1．什么是微格式？2．什么是HTML實體？3．請羅列出你所知道的display屬性的全部值，并簡單說明一下它們的作用。4．請談?wù)剬FC的理解。<style>div{<style>div{color:black;}.item{color:blue;}}.item:last-of-type{color:red;}</style><div><sectionclass="item">第一個元素</section><sectionclass="item">第二個元素</section><sectionclass="button">第三個元素</section></div>6．請求方法GET和POST的區(qū)別有哪些？7．分號會在什么時候自動補(bǔ)全？自動補(bǔ)全有什么弊端？8．請簡單解釋一下CSRF的攻擊原理和防御手段。9．如果忽略聲明關(guān)鍵字，那么在運(yùn)行對象解構(gòu)的時候，為何要用圓括號包裹賦值表達(dá)式({a,b}={a:3,b:4});（如下所示）？({a,b}={a:3,b:4});10．如何使用DataView？11．怎么理解Symbol.species？12．react-dom中render()方法有什么功能？13．為什么棄用字符串類型的Refs？14．什么是Redux？15．package.json有什么作用？16．webpack中的SourceMap有什么功能？17．在Vue中，有幾個生命周期鉤子與<keep-alive>元素有關(guān)？Vponent("btn",{data:function(){Vponent("btn",{data:function(){return{txt:"提交"};},template:'<button><slot:txt="txt"></slot></button>'});下面這樣使用btn組件是否正確？<btnv-slot="{txt}"><btnv-slot="{txt}">{{txt}}</btn></btn>1．請用多種方法實現(xiàn)等高布局，讓頁面中每列的高度相等。2．怎么用JSON對象執(zhí)行深拷貝？3．在網(wǎng)頁中實現(xiàn)一個倒計時，能夠動態(tài)顯示“××天××?xí)r××分××秒”。<selectid="name"><optionvalue="1">strick</option><selectid="name"><optionvalue="1">strick</option><optionvalue="2">jane</option><optionvalue="3">freedom</option><optionvalue="4">kevin</option></select>5．如何在React中構(gòu)建組件？六、開放題1．你的業(yè)余愛好是什么？2．你是否同時申請了別的工作？真題7某知名游戲軟件開發(fā)公司前端工程師筆試題真題7某知名游戲軟件開發(fā)公司前端工程師筆試題一、單選題CSSvarz=1,y=z=typeofy;console.log(y);varz=1,y=z=typeofy;console.log(y);（（A．修改老代碼的接口，滿足新的需求B．將老代碼拋棄，自己重新實現(xiàn)類似的邏輯C．修改老代碼的內(nèi)部邏輯，滿足新的需求（A．地址轉(zhuǎn)換解決了互聯(lián)網(wǎng)地址短缺所面臨的問題B．地址轉(zhuǎn)換實現(xiàn)了對用戶透明的網(wǎng)絡(luò)外部地址的分配C．使用地址轉(zhuǎn)換后，對IP包加長、快速轉(zhuǎn)發(fā)不會造成什么影響D．地址轉(zhuǎn)換為內(nèi)部主機(jī)提供了一定的“隱私”7．在進(jìn)程調(diào)度算法中，下面算法中，適用于運(yùn)行時間可以預(yù)知的批處理調(diào)度算法是先 （1）20，15，21，25，47，27，68，35，84（2）15，20，21，25，35，27，47，68，84（ B．為浮動元素的包含塊創(chuàng)建BFCC．在浮動元素后面設(shè)置clear屬性為bothD．為浮動元素設(shè)置寬度三、填空題<style>.bfcp{color:#FC0;}.ovhp{color:#F60;}</style><divclass="bfcovh"><p>文字顏色</p></div>，p<style>.bfcp{color:#FC0;}.ovhp{color:#F60;}</style><divclass="bfcovh"><p>文字顏色</p></div>為 為 為 vara=1;setTimeout(function(){console.log(a);a=2;},1000);a=3;vara=1;setTimeout(function(){console.log(a);a=2;},1000);a=3;段JSX當(dāng)為當(dāng)為false是 <div>{isBtn?<Btn1/>:<Btn2/>}</div><div>{isBtn?<Btn1/>:<Btn2/>}</div>有46．請簡單介紹一下REST。7．undefined和null有哪些異同？8．請簡單介紹一下圖像的預(yù)加載和懶加載。9．什么是模板字面量？10．ES6為函數(shù)做了哪些改良？11．什么是Promise？12．如何在React中使用innerHTML？13．請介紹一下React中的Fragments。14．請描述一下Redux的三大原則。17．在Vue渲染模板時，如何才能保留模板中的HTML注釋？18．請談?wù)勀銓?lt;slot>元素的理解。19．命名空間和模塊有哪些區(qū)別？五、編程題1．如何實現(xiàn)一個圣杯布局？2．請用多種方式獲取當(dāng)前時間的毫秒數(shù)。a5．如何創(chuàng)建Refs？六、開放題1．如果工作安排與專業(yè)不對口，你如何考慮？2．你和別人發(fā)生過爭執(zhí)嗎？怎樣解決？真題8某知名電子商務(wù)公司前端工程師筆試題真題8某知名電子商務(wù)公司前端工程師筆試題一、單選題（A．pc B．~ C．$ （（于于（ B．訪問控制技術(shù)C．入侵檢測技術(shù)D．差錯控制技術(shù)（ B．消息隊列C．共享內(nèi)存D．套接字（（ （A．title屬性可提供額外的提示信息B．title屬性可指定媒體類型C．link元素中的title屬性表示樣式表的名稱（<style>section{margin:6px;}是為為 <style>section{margin:6px;}sectiondiv{sectiondiv{width:50vw;height:50vh;}</style><section><div></div></section>varnumberObj={valueOf:function(){return{};},toString:function(){return"10";}};Number(numberObj);varnumberObj={valueOf:function(){return{};},toString:function(){return"10";}};Number(numberObj);為 vara={},vara={},b={name:"ping"},c={name:"wen"};a[b]=10;a[c]=20;console.log(a[b]);functionouter(){vara=1;double=function(){this.a*=2;console.log(this.a);};functioninner(){console.log(a);出functionouter(){vara=1;double=function(){this.a*=2;console.log(this.a);};functioninner(){console.log(a);}}returninner;}varresult=outer();result();double();result();5．下面是兩個React類組件，在它們的構(gòu)造函數(shù)中，假設(shè)接收到的props都為{name:classBtn1extendsReact.Component{constructor(props){ }}classBtn2extendsReact.Component{constructor(props){ }}在classBtn1extendsReact.Component{constructor(props){ }}classBtn2extendsReact.Component{constructor(props){ }}四、問答題<ulrole="listbox"><lirole="option">藍(lán)色</li><ulrole="listbox"><lirole="option">藍(lán)色</li><lirole="option"aria-selected="true">紅色</li></ul>2．元素屬性src和href有何區(qū)別？6．什么是RESTfulAPI？如何設(shè)計RESTfulAPI？t9．模板字面量有哪些局限？10．函數(shù)的length屬性有什么作用？11．Promise包含幾種狀態(tài)？12．什么是React的diff算法？13．在React中，什么是Portal？14．Redux和Flux有哪些區(qū)別？15．請簡單介紹一下npm所采用的版本規(guī)范。16．webpack中的模塊熱替換是指什么？17．在Vue中，當(dāng)數(shù)據(jù)對象的屬性和methods選項中的方法同名時，會怎么樣？18．如何理解Vue的函數(shù)式組件？19．什么是裝飾器？五、編程題2．如何判斷某一年是閏年？tvararr=[{a:3},{a:2},{a:1},{a:5},{a:4}];4．用JavaScript對下面數(shù)組進(jìn)行降序排列，即根據(jù)a屬性的值從大到小排列。vararr=[{a:3},{a:2},{a:1},{a:5},{a:4}];1．你如何面對壓力？2．你為什么離開了原來的公司？真題9某知名生活消費(fèi)類網(wǎng)站前端工程師筆試題真題9某知名生活消費(fèi)類網(wǎng)站前端工程師筆試題一、單選題Web（{"age":010,"height":1.,"name":'pingwen',"weight":20}{"age":010,"height":1.,"name":'pingwen',"weight":20}a//funca//funcvara=2;returnfunction(){a++;console.log(a);};})();func();func();和和NaN C．2和3 D．3和（于址B．B C．C （A．程序是一組有序的靜態(tài)指令，進(jìn)程是一次程序的執(zhí)行過程B．程序只能在前臺運(yùn)行，而進(jìn)程可以在前臺或后臺運(yùn)行C．程序可以長期保存，進(jìn)程是暫時的、46763697973676，SxTCP（于1．假設(shè)視口的寬為50px，高為70px，執(zhí)行下面的代碼后，div元素的寬經(jīng)過計算后為div{width:10vmax;height:10vmin;} div{width:10vmax;height:10vmin;}為 Atotype.isPrototypeOf([1,2])Atotype.isPrototypeOf([1,2])varstr="pw1",pattern1=/\d/,pattern2=/\d/g;pattern1.test(str);pattern2.test(str);pattern2.test(str);次是 varstr="pw1",pattern1=/\d/,pattern2=/\d/g;pattern1.test(str);pattern2.test(str);pattern2.test(str);(function(){varage=1;varobj={age:10,為(function(){varage=1;varobj={age:10,double:function(){double:function(){age*=2;}};obj.double();console.log(age+obj.age);})();四、問答題1．img元素中的title和alt屬性有何區(qū)別？<linkrel="stylesheet"type="text/css"href="css/style.css"/>2．外部樣式可用link元素引用，其結(jié)構(gòu)如下代碼所示，其中rel屬性的作用是什么？<linkrel="stylesheet"type="text/css"href="css/style.css"/>3．偽類:first-child與:first-of-type有什么區(qū)別？4．什么叫Web安全色？5．在CSS中使用background:transparent與opacity:0有什么區(qū)別？6．請描述一下TCP三次握手的過程。7．請簡單描述一下你所理解的原型鏈。8．前端為什么提倡模塊化開發(fā)？9．ES6是否擴(kuò)展了對象字面量中的屬性名？10．什么是塊級函數(shù)？11．如何理解thenable？12．diff算法在執(zhí)行時會有哪些策略？13．如何讓React組件不在頁面上渲染HTML元素？14．Redux有哪些缺點(diǎn)？15．在npm中，包和模塊有什么區(qū)別？16．如何理解webpack中的TreeShaking？17．請談?wù)勀銓ue響應(yīng)式原理的理解。18．在Vue中，什么是插件？怎么使用？19．裝飾器的執(zhí)行順序是怎么樣的？五、編程題1．用CSS中的定位實現(xiàn)元素的水平居中。2．如何計算兩個日期相隔的天數(shù)？3．編寫一個函數(shù)，用于清除字符串前后的空格。varlist=[3,2,1,5,4];4．取出下面數(shù)組中的最大值。varlist=[3,2,1,5,4];React1．你為什么更傾向于我們公司？2．我們?yōu)槭裁匆浻媚?？真題10某知名門戶網(wǎng)站前端工程師筆試題真題10某知名門戶網(wǎng)站前端工程師筆試題一、單選題（span{position:absolute;top:10px;left:20px;width:100px;height:50px;padding:10px;}span{position:absolute;top:10px;left:20px;width:100px;height:50px;padding:10px;}TCP（5．PING命令使用ICMP的以下（）代碼類型。向 IP（A．丟掉該分組B．將該分組分片C．轉(zhuǎn)發(fā)該分組D．將分組轉(zhuǎn)發(fā)或分片CPUCache（ B．為程序員編程提供方便決CPU （8（B．7 <inputtype="button"onclick="print()"/><inputtype="button"onclick="print()"/>A．不可復(fù)用B．不能用于復(fù)雜的函數(shù)聲明C．可讀性低D．不能實時調(diào)試（A．當(dāng)border為none的時候，邊框無外觀B．當(dāng)border為0的時候，邊框?qū)挾葹?C．當(dāng)border為none的時候，邊框?qū)挾葹?D．只要定義了邊框?qū)挾龋湍茱@示邊框（ <style>section{font-size:32px;}section>div{font-size:50%;}</style><section><div><p>文字說明</p></div></section><style>section{font-size:32px;}section>div{font-size:50%;}</style><section><div><p>文字說明</p></div></section>是 varobj1={varobj1={names:[]};varobj2=s;obj2.push("strick");console.log(s);vararr1="ping".split(""),arr2=arr1.reverse(),arr3="pw".split("");arr2.push(arr3);vararr1="ping".split(""),arr2=arr1.reverse(),arr3="pw".split("");arr2.push(arr3);的為 varobj1={age:10},varobj1={age:10},obj2=obj1;=obj2={age:20};四、問答題1．CSS有幾種引入方式？它們有哪些區(qū)別？<linkrel="stylesheet"href="css/style.css"type="text/css"/><script><linkrel="stylesheet"href="css/style.css"type="text/css"/><script>setTimeout(function(){console.log(123);},3000);</script><imgsrc="img/lake.png"/>3．請說說對元素浮動（float）的理解。4．CSS中的@font-face有什么作用？5．請說說對CSS中行高（line-height）的理解。6．TCP為什么采用三次握手，而不是二次握手？7．用new運(yùn)算符創(chuàng)建對象時，例如newFn()，具體的創(chuàng)建過程有哪幾步？8．Zepto和jQuery有哪些區(qū)別？9．請談?wù)勀銓ymbol的理解。10．new.target是由ES6引入的一個元屬性，它有何用途？11．Promise.resolve()有什么作用？12．請描述一下React的組件。13．HTML和React對事件的處理有哪些區(qū)別？14．react-redux庫中的mapStateToProps()和mapDispatchToProps()各有什么作用？15．npm有哪些常用的應(yīng)用場景？16．如何清理webpack輸出目錄中的文件？17．Vue實例常用的生命周期包括哪些？CSS2．如何將字符串“get-element-by-id”轉(zhuǎn)化成駝峰表示法的“getElementById”？vararr=[1,2,3,4,5],result;3．用數(shù)組方法把下面數(shù)組中的元素加起來，得到的和賦給result變量。vararr=[1,2,3,4,5],result;85．在Reactv16中怎么使用錯誤邊界？你的職業(yè)規(guī)劃是什么？真題詳解1某知名互聯(lián)網(wǎng)下載服務(wù)提供商前端工程師筆試題真題詳解1某知名互聯(lián)網(wǎng)下載服務(wù)提供商前端工程師筆試題一、單選題1．答案：B。分析：把網(wǎng)頁抽象成三部分主要是為了使職責(zé)更分明，并且網(wǎng)頁并不會因為抽象成三部分后才能跨平臺。因此，選項B的描述并不準(zhǔn)確。2．答案：A。BD3．答案：A。4．答案：B。分析：setInterval()是一個定時器函數(shù)，它接收兩個參數(shù)，第一個參數(shù)是要執(zhí)行的代碼B5．答案：D。D6．答案：B。AIPIPIPIPIPADBHTTPBTCPFTPTCPFTP21C7．答案：D。I/OA對于選項B，顯然該描述正好和虛存的目的相悖。所以，選項B錯誤。C對于選項描述正確。所以，選項D正確。8．答案：C。分析：本題解題的關(guān)鍵是了解棧的后進(jìn)先出的性質(zhì)。通過入棧序列與出棧序列可以模擬一下其具體的出棧與入棧過程，過程如下：：a1：a3：a5，a2：a4：a6第九步：根據(jù)進(jìn)棧出棧順序，a6出棧，此時棧中元素為2。第十步：根據(jù)進(jìn)棧出棧順序，a3出棧，此時棧中元素為1。第十一步：根據(jù)進(jìn)棧出棧順序，a1出棧，此時棧中元素為0。由以上分析可知，棧中元素最多的時候為4個，所以，棧容量至少為4。選項C正確。9．答案：B。B二、多選題1．答案：ABCD。CSS、CD2．答案：BCD。31A3．答案：BC。BC1．答案：122、100。分析：IE盒模型中內(nèi)容的寬或高將會包含內(nèi)邊距和邊框，題目中div元素的寬度為100px，那么IE盒模型中的寬度也是100px。而W3C盒模型中內(nèi)容的寬或高并不會包含內(nèi)邊2．答案：0、1。xy3．答案：0。xy4．答案：1、0。5．答案：3。分析：數(shù)組解構(gòu)可以有選擇性的賦值，只要在數(shù)組指定的位置上不提供元素，就能為其省去解構(gòu)賦值。數(shù)組的第3個元素提供了變量名，而在此之前只有兩個用于占位的逗號。四、問答題14.xL5HTMLXHTMLXML1.0XMLHTML，其中，XML是SGML的一個子集。（CSSCSSCSSW3CIE（IE6E65S，IE包含。6PTCP1==11==19．答案：兩者之間主要有以下三個方面的區(qū)別：10．答案：簡單地說有以下三點(diǎn)：（1）不允許聲明提升。（2）不允許重復(fù)聲明。（3）不覆蓋全局變量。12．答案：yield和return有許多區(qū)別，可簡單概括出其中的5點(diǎn)，具體如下所列。（4）在一個函數(shù)中，可執(zhí)行多次yield，而return只能執(zhí)行一次。（5）yield只能返回IteratorResult對象，而return能返回任意值。13．答案：VirtualDOM（虛擬DOM）是構(gòu)建在真實DOM之上的一層抽象，它將DOM元素143P（1）將瀏覽器無法識別的JSX、Sass等語言轉(zhuǎn)換成JavaScript、CSS等語言。（2）把圖像轉(zhuǎn)換成DataURI格式嵌入到JavaScript文件中。（3）用ES6的import關(guān)鍵字將CSS文件導(dǎo)入到JavaScript中。.NET.NETFiddlerHTTPHTTPSFiddlerFiddlerCore<keep-alive><tab1v-if="current=='tab1'"></tab1><tab2v-else></tab2><keep-alive>19DOMr<keep-alive><tab1v-if="current=='tab1'"></tab1><tab2v-else></tab2><keep-alive>new五、編程題div{width:0;height:0;border:50pxsolidtransparent;border-top-color:gray;}div{width:0;height:0;border:50pxsolidtransparent;border-top-color:gray;}vararr=[3,1,5,4,2],temp;for(vari=0;i<arr.length;i++){for(varj=i+1;j<arr.length;j++){vararr=[3,1,5,4,2],temp;for(vari=0;i<arr.length;i++){for(varj=i+1;j<arr.length;j++){if(arr[i]>arr[j]){temp=arr[i];arr[i]=arr[j];arr[j]=temp;}}}for(vardigit=1;digit<=100;digit++){if(digit%3==0&&digit%5==0){console.log("all");}elseif(digit%3==0){console.log("three");}elseif(digit%5==0){console.log("five");AABfor(vardigit=1;digit<=100;digit++){if(digit%3==0&&digit%5==0){console.log("all");}elseif(digit%3==0){console.log("three");}elseif(digit%5==0){console.log("five");}}}4e（1）使用DOM中的查找方法getElementById()獲取文本框。（2）使用Document對象的forms屬性，先通過數(shù)字索引獲取表單元素，再通過控件的id屬性獲取文本框。（3）與第二種類似，只是通過id屬性獲取表單元素，其他都一樣。////////////[x,y]=[1,2];[y,x]=[1,2];[x,y]=[1,2];[y,x]=[1,2];六、開放題有一個小竅門，就是回答的時候，盡量能夠與招聘廣告或宣講會上的內(nèi)容一致，有條件的話，最好能同企業(yè)內(nèi)部員工交流一下，做到知己知彼，那樣效果可能會更好。作為面試官，一般希望求職者在遇到失敗時，能夠具備以下優(yōu)良素質(zhì)：（1）敢于面對。面對失敗不氣餒，從心理意志和精神上體現(xiàn)出對這次失敗的抵抗力。（2）自信。相信自己經(jīng)歷了這次之后經(jīng)過努力一定能行，能夠超越自我。（5）再接再厲，繼續(xù)努力。能夠在以后的學(xué)習(xí)工作中繼續(xù)努力，爭取取得下一次的成功。所以，在回答此類問題時，應(yīng)該著重突出以下幾個方面的內(nèi)容：真題詳解2某知名社交平臺前端工程師筆試題真題詳解2某知名社交平臺前端工程師筆試題一、單選題1．答案：C。分析：萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）制定了HTML、CSS、XHTML和XML等標(biāo)準(zhǔn)，但不包括網(wǎng)絡(luò)相關(guān)的協(xié)議標(biāo)準(zhǔn)，選項C中的OSI參考模型是由國際標(biāo)準(zhǔn)化組織（ISO）制定的。2．答案：A。3．答案：C。BDC4．答案：D。分析：keyCode屬性能夠獲取鍵盤中按下的鍵碼，B的鍵碼為66，與選項D中的數(shù)字一致。5．答案：D。D6．答案：B。IPIP32IPIP/20IP2012B7．答案：A。、cplsdShellcdxr權(quán)xxA8．答案：D。分析：棧的性質(zhì)是先進(jìn)先出。（。例如，對于表達(dá)式A正確。BC對于選項D，操作系統(tǒng)資源分配有多種分配策略，例如先到先執(zhí)行，此時就可以使用隊列來完成。所以，選項D不正確。9．答案：B。BACCD1．答案：BC。4項A和D并不屬于這4個元素，因此要排除。2．答案：ABCD。4ABCD3．答案：BC。ABCD三、填空題1．答案：20。分析：由于兩個元素之間發(fā)生了外邊距塌陷，所以此時下外邊距和上外邊距會合并在一起，并且因為兩個屬性設(shè)置的都是正數(shù)，所以兩個元素之間的間隔就是其中的較大值。2．答案：undefined。functionisArray(){return;true;}functionisArray(){return;true;}2果為4．答案：2、1。(1&&2)(1&&2)||0||(2&&5．答案：1、[2,3]。xy等。Web標(biāo)準(zhǔn)制定后，有以下幾個方面的優(yōu)點(diǎn)：（1）學(xué)習(xí)成本降低，只需按照已定的標(biāo)準(zhǔn)學(xué)習(xí)一套即可，否則將學(xué)習(xí)各個瀏覽器廠商制定的標(biāo)準(zhǔn)，繁而雜。（3）簡化網(wǎng)站代碼的維護(hù)，不會有不同瀏覽器的多個版本，網(wǎng)頁壽命也更長。（4）跨平臺，可方便遷移到不同設(shè)備中，例如添加無障礙標(biāo)準(zhǔn)后，能讓殘障人士更便捷地使用設(shè)備訪問網(wǎng)頁。（5）標(biāo)準(zhǔn)大部分是由使用它們的人決定，例如瀏覽器制造商、Web開發(fā)人員等，這樣的標(biāo)準(zhǔn)既實用又專業(yè)。Web、（網(wǎng)頁超文本技術(shù)工作小組）和W3C。（1）漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級是向下兼容。（2）漸進(jìn)增強(qiáng)是從簡單到復(fù)雜，優(yōu)雅降級是從復(fù)雜到簡單。（3）漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容，優(yōu)雅降級關(guān)注的是瀏覽體驗。4．答案：CSS預(yù)處理器的優(yōu)點(diǎn)如下：（3）內(nèi)置豐富的函數(shù)，可處理顏色、字符串、數(shù)字和選擇器等，也可自定義函數(shù)，適應(yīng)特定需求。t句代碼就可描述一大段CSS樣式。CSSCSS預(yù)處理器的缺點(diǎn)如下：CSSCSSCSS（2）調(diào)試難度增加，在瀏覽器中調(diào)試的是編譯后的CSS文件，并不是編譯前的源代碼。FTP4OSIOPRFC"use//function"use//returnx;}5"use//function"use//returnx;}嚴(yán)格模式常見的限制有以下幾條：（1）所有的變量要先聲明，無法再意外創(chuàng)建全局變量。（2）函數(shù)中this對象的默認(rèn)值是undefined，而不是全局對象（window）（3）試圖使用delete運(yùn)算符刪除不可刪除的屬性會拋出異常。（4）函數(shù)聲明中定義兩個或多個同名參數(shù)將產(chǎn)生一個語法錯誤，例如sum(x,x){}。0x（6）禁止使用with語句。（7）不能將eval和arguments用作變量、函數(shù)或參數(shù)的名稱。8．答案：當(dāng)用typeof運(yùn)算符檢測數(shù)據(jù)類型時，如果操作數(shù)是null，那么返回的不是“l(fā)tl和對象，可以用基礎(chǔ)對象t的原型方法vartoString=Ototype.toString;vartoString=Ototype.toString;//"[object9（n10．答案：const能聲明一個常量。常量是指一個定義了初始值后固定不變的只讀變量。ntt和322方法第一個參數(shù)第二個參數(shù)（可選）第三個參數(shù)（可選）fill()value：需要填充的值start：開始填充的位置end：結(jié)束填充的位置copyWithin()target：開始執(zhí)行復(fù)制的位置start：復(fù)制序列的起始位置end：復(fù)制序列的結(jié)束位置在使用這兩個方法時，有5個點(diǎn)需要注意，如下所列：（1）不僅會修改原始數(shù)組，還會覆蓋指定范圍內(nèi)的元素。（2）復(fù)制或填充執(zhí)行的都是淺拷貝。（3）當(dāng)方法中的索引參數(shù)為負(fù)數(shù)時，會先和數(shù)組的長度相加，再計算出最終的索引。（4）保持?jǐn)?shù)組的長度不變，在數(shù)組末尾停止復(fù)制或填充。（5）end參數(shù)的默認(rèn)值為數(shù)組長度，并且該位置上的元素會被忽略。12．答案：雖然兩種類非常相似，但是ES6中的類有其獨(dú)有的特性，具體如下所列：（1）類聲明和即將要講解的類表達(dá)式都不會被提升。（2）類中的代碼在執(zhí)行時，會強(qiáng)制開啟嚴(yán)格模式。（3）類的所有方法都不可枚舉，并且不能與new組合使用。13．答案：可將VirtualDOM的工作分為三個簡單的步驟。每當(dāng)對MM會將M元素轉(zhuǎn)換成ct（2）再通過diff算法找出新舊虛擬DOM之間的差異部分。（3）最后只更新真實DOM中需要變化的節(jié)點(diǎn)，而不是將整棵DOM樹重新渲染一遍。14．答案：新增了兩個生命周期方法，如下所列。靜態(tài)方法getDerivedStateFromProps()用來替代componentWillReceiveProps()。它在15nrtDOMimportTestRendererfrom'react-test-renderer';functionLink(props){return<ahref={props.page}>{props.children}</a>;}consttestRenderer=TestRenderer.create(<Linkpage="https:///">Strick</Link>);/***{*type:"a",*props:{href:"https:///"},*children:["Strick"]*}*/console.log(testRenderer.toJSON());importTestRendererfrom'react-test-renderer';functionLink(props){return<ahref={props.page}>{props.children}</a>;}consttestRenderer=TestRenderer.create(<Linkpage="https:///">Strick</Link>);/***{*type:"a",*props:{href:"https:///"},*children:["Strick"]*}*/console.log(testRenderer.toJSON());17．答案：插件能夠借助webpack引擎的能力，將自定義的行為注入到webpack的構(gòu)建流程中，解決加載器無法實現(xiàn)的功能，例如分離打包、壓縮文件等。插件不僅能處理模塊和編譯過的資源，還能監(jiān)控文件的變化。與加載器一樣，插件也可根據(jù)特定需求實現(xiàn)自定義。18．答案：代理服務(wù)器能接收客戶端發(fā)送的請求，然后再將其轉(zhuǎn)發(fā)給其他服務(wù)器，相當(dāng)于網(wǎng)絡(luò)信息的中轉(zhuǎn)站，其功能如下所列。（1）提高訪問速度。（2）控制對內(nèi)部資源的訪問，例如只對教育網(wǎng)開放的各類FTP。（3）過濾內(nèi)容，例如限制對特定計算機(jī)的訪問。（4）隱藏真實IP，免受攻擊。（5）突破訪問限制，例如瀏覽國外站點(diǎn)。<divid="container"><btn@click.native="handler"></btn></div><script>Vponent("btn",{template:'<button>提交</button>'});varvm=newVue({el:"#container",methods:{handler:function(){console.log("click");}}});<divid="container"><btn@click.native="handler"></btn></div><script>Vponent("btn",{template:'<button>提交</button>'});varvm=newVue({el:"#container",methods:{handler:function(){console.log("click");}}});</script>DOMfunc({a:func({a:func({a:func({a:div{box-shadow:0005px#CCC,00010px#FC0,0005px#F00inset;width:150px;height:50px;}divdiv{box-shadow:0005px#CCC,00010px#FC0,0005px#F00inset;width:150px;height:50px;}

圖1陰影模擬的邊框functionisInteger(value){returntypeofvalue==="number"&&isFinite(value)&&value%1===0;}functionisInteger(value){returntypeofvalue==="number"&&isFinite(value)&&value%1===0;}functionisNaN2(value){returntypeofvalue==="number"&&isNaN(value);}functionisNaN2(value){returntypeofvalue==="number"&&isNaN(value);}4．答案：此題有兩個特點(diǎn)，第一個是實參數(shù)量不定；第二個是用到了柯里化。柯里化（（tfunctionadd(){vartmpSlice=[].slice,=//functionadd(){vartmpSlice=[].slice,=//functioncurrying(){vararr=tmpSlice.apply(arguments);//由于閉包的關(guān)系，所以能讀取params變量=//returncurrying;}currying.toString=function(){varresult=0;params.forEach(function(value){//});returnresult;};returncurrying;}exportletname="strick";exportfunctiongetName(){return"strick";}exportclasspeople{getName(){return"strick";}}6exportletname="strick";exportfunctiongetName(){return"strick";}exportclasspeople{getName(){return"strick";}}六、開放題500、VUE（1）不應(yīng)該說沒缺點(diǎn)。（2）不應(yīng)該把那些明顯的優(yōu)點(diǎn)說成缺點(diǎn)。（4）不應(yīng)該說出令人不放心、不舒服的缺點(diǎn)。軟件開發(fā)技術(shù)。當(dāng)然，很多時候，有些個性對于某一個崗位可能是優(yōu)點(diǎn)，對其他崗位可能是缺點(diǎn)。例真題詳解3某知名安全軟件服務(wù)提供商前端工程師筆試題真題詳解3某知名安全軟件服務(wù)提供商前端工程師筆試題XMLW3CC2．答案：C。分析：選項A中的[attr^="val"]表示屬性值以字符串“val”開頭；選項B中的相同；選項D3．答案：B。CDB4．答案：C。CABD5．答案：A。A6．答案：B。BIPBIP16）16BIPIPB7．答案：A。分析：對于選項eA對于選項filefilefilefile0filefileBRAMSSDCPURAMC對于選項D8．答案：C。分析：各種算法的性能見表3。由此可知，本題的答案為C。3排序方法最好時間復(fù)雜度平均時間復(fù)雜度最壞時間復(fù)雜度輔助存儲穩(wěn)定性備注簡單選擇排序O(n^2)O(n^2)O(n^2)O(1)不穩(wěn)定n小時較好直接插入排序O(n)O(n^2)O(n^2)O(1)穩(wěn)定大部分已有序時較好冒泡排序O(n)O(n^2)O(n^2)O(1)穩(wěn)定n小時較好希爾排序O(n)O(nlogn)O(ns)1<s<2O(1)不穩(wěn)定s是所選分組快速排序O(nlogn)O(nlogn)