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

PAGE1PAGE1PAGE2PAGE2一、單選題1．下列選項中，不是把網(wǎng)頁抽象成三部分（HTML、CSS和JavaScript）后的優(yōu)點的是A．增強HTML文檔的可讀性B．跨平臺，可方便遷移到不同設(shè)備中C．在HTML文檔中可按需加載相應的文件，減少不必要的請求（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．該程序大小不應超過實際的內(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預處理器？4．什么是盒模型？5．什么是互聯(lián)網(wǎng)？6．請簡單介紹一下HTTP。與兩個運算符與有哪些區(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標準C．OSI參考模型也是W3C制定的W3CA．元素的CSS屬性float為noneB．元素的CSS屬性position為absoluteC．元素的CSS屬性position為fixedCSSB（A．63 （A．強調(diào)文檔和以敏捷性應對變化B．強調(diào)建模和以敏捷性應對變化C．強調(diào)設(shè)計和以敏捷性應對變化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é)點的左子樹都為空的二叉搜索樹D．所有結(jié)點的右子樹都為空的二叉搜索樹二、多選題（<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的理解與認識。2．請簡單介紹一下HTML5。3．什么叫漸進增強？漸進增強和優(yōu)雅降級有哪些區(qū)別？4．CSS預處理器有哪些優(yōu)缺點？5．請簡單介紹一下網(wǎng)絡(luò)中的協(xié)議。6．請談?wù)剬CP/IP的理解。7．什么是嚴格模式？嚴格模式有哪些限制？typeofobj==="object"8．像下面這樣判斷obj是不是一個對象有什么潛在問題？如何改進？typeofobj==="object"9．將一個匿名函數(shù)像下面這樣用圓括號包裹，有什么作用？(function(){})()(function(){})()10．請說明一下const的特點。11．使用fill()和copyWithin()需要的注意點有哪些？12．ES6的類比起用構(gòu)造函數(shù)模擬的類，有哪些獨有的特性？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ù)彌補了全局函數(shù)isNaN()的不足。ES61．你怎么理解應聘的職位？2．你有哪些主要的缺點？3．你有哪些主要的優(yōu)點？一、單選題的 B．削弱對第三方插件的依賴C．新增SVG繪畫D．引入WebWorkers規(guī)范5A．請求方法 C．HTTP版本D．請求首部（ A．正確性驗證B．黑白盒測試C．集成測試D．基本路徑測試（（A．進程調(diào)度有“可搶占”和“非搶占”兩種方式，后者引起系統(tǒng)的開銷更大B．每個進程都有自己的文件描述符表，所有進程共享同一打開文件表和v-node表RAMD．多個進程競爭資源出現(xiàn)了循環(huán)等待可能造成系統(tǒng)死鎖（A．快速排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(nlogn)B．堆排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(n^2)C．冒泡排序的平均時間復雜度為O(n^2)，最壞時間復雜度為O(n^2)D．歸并排序的平均時間復雜度為O(nlogn)，最壞時間復雜度為O(n^2)n（A．寬度和高度的算法與W3C盒模型不同B．在表格中的字體樣式（如font-size等）不會繼承C．當內(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網(wǎng)絡(luò)的理解。6．什么是MAC地址？7．JavaScript有哪些優(yōu)勢和劣勢？8．在DOM中，事件對象的兩個屬性target和currentTarget有什么區(qū)別？9．在HTTP響應報文中會包含哪些首部？10．擴展運算符（...）的用途有哪些？11．find()和indexOf()有哪些區(qū)別？12．類有哪些成員？13．ShadowDOM和VirtualDOM之間有哪些區(qū)別？14．有沒有辦法強制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．運行在APP內(nèi)嵌的容器（如WebView等）中div3)

B．可間接調(diào)用一部分的系統(tǒng)APIC．可搭建一套離線應用程序D．迭代周期短，可隨時將代碼提交到服務(wù)器上更新D．（（5．軟件復用是使用已有的軟件產(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．當出現(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ù)學方法證明軟件功能的正確性C．分析源程序，從源程序?qū)С龀绦蚪Y(jié)構(gòu)6．某網(wǎng)絡(luò)的IP地址空間為（ （，（序 9．n（A．使得HTML文檔結(jié)構(gòu)清晰、布局合理、主體突出、可讀性更強B．促進無障礙訪問，降低信息污染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．簡單介紹一下瀏覽器的兩種渲染模式：怪異模式和接近標準模式。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中如何進行循環(huán)？六、開放題1．你認為自己最適合做什么？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．分號會在什么時候自動補全？自動補全有什么弊端？8．請簡單解釋一下CSRF的攻擊原理和防御手段。9．如果忽略聲明關(guān)鍵字，那么在運行對象解構(gòu)的時候，為何要用圓括號包裹賦值表達式({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)顯示“××天××時××分××秒”。<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)部主機提供了一定的“隱私”7．在進程調(diào)度算法中，下面算法中，適用于運行時間可以預知的批處理調(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當為當為false是 <div>{isBtn?<Btn1/>:<Btn2/>}</div><div>{isBtn?<Btn1/>:<Btn2/>}</div>有46．請簡單介紹一下REST。7．undefined和null有哪些異同？8．請簡單介紹一下圖像的預加載和懶加載。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．請用多種方式獲取當前時間的毫秒數(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">藍色</li><ulrole="listbox"><lirole="option">藍色</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中，當數(shù)據(jù)對象的屬性和methods選項中的方法同名時，會怎么樣？18．如何理解Vue的函數(shù)式組件？19．什么是裝飾器？五、編程題2．如何判斷某一年是閏年？tvararr=[{a:3},{a:2},{a:1},{a:5},{a:4}];4．用JavaScript對下面數(shù)組進行降序排列，即根據(jù)a屬性的值從大到小排列。vararr=[{a:3},{a:2},{a:1},{a:5},{a:4}];1．你如何面對壓力？2．你為什么離開了原來的公司？真題9某知名生活消費類網(wǎng)站前端工程師筆試題真題9某知名生活消費類網(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)指令，進程是一次程序的執(zhí)行過程B．程序只能在前臺運行，而進程可以在前臺或后臺運行C．程序可以長期保存，進程是暫時的、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是否擴展了對象字面量中的屬性名？10．什么是塊級函數(shù)？11．如何理解thenable？12．diff算法在執(zhí)行時會有哪些策略？13．如何讓React組件不在頁面上渲染HTML元素？14．Redux有哪些缺點？15．在npm中，包和模塊有什么區(qū)別？16．如何理解webpack中的TreeShaking？17．請談?wù)勀銓ue響應式原理的理解。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．不可復用B．不能用于復雜的函數(shù)聲明C．可讀性低D．不能實時調(diào)試（A．當border為none的時候，邊框無外觀B．當border為0的時候，邊框?qū)挾葹?C．當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運算符創(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有哪些常用的應用場景？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)頁抽象成三部分主要是為了使職責更分明，并且網(wǎng)頁并不會因為抽象成三部分后才能跨平臺。因此，選項B的描述并不準確。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)鍵是了解棧的后進先出的性質(zhì)。通過入棧序列與出棧序列可以模擬一下其具體的出棧與入棧過程，過程如下：：a1：a3：a5，a2：a4：a6第九步：根據(jù)進棧出棧順序，a6出棧，此時棧中元素為2。第十步：根據(jù)進棧出棧順序，a3出棧，此時棧中元素為1。第十一步：根據(jù)進棧出棧順序，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．答案：簡單地說有以下三點：（1）不允許聲明提升。（2）不允許重復聲明。（3）不覆蓋全局變量。12．答案：yield和return有許多區(qū)別，可簡單概括出其中的5點，具體如下所列。（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文件導入到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ù)努力。能夠在以后的學習工作中繼續(xù)努力，爭取取得下一次的成功。所以，在回答此類問題時，應該著重突出以下幾個方面的內(nèi)容：真題詳解2某知名社交平臺前端工程師筆試題真題詳解2某知名社交平臺前端工程師筆試題一、單選題1．答案：C。分析：萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）制定了HTML、CSS、XHTML和XML等標準，但不包括網(wǎng)絡(luò)相關(guān)的協(xié)議標準，選項C中的OSI參考模型是由國際標準化組織（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ì)是先進先出。（。例如，對于表達式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標準制定后，有以下幾個方面的優(yōu)點：（1）學習成本降低，只需按照已定的標準學習一套即可，否則將學習各個瀏覽器廠商制定的標準，繁而雜。（3）簡化網(wǎng)站代碼的維護，不會有不同瀏覽器的多個版本，網(wǎng)頁壽命也更長。（4）跨平臺，可方便遷移到不同設(shè)備中，例如添加無障礙標準后，能讓殘障人士更便捷地使用設(shè)備訪問網(wǎng)頁。（5）標準大部分是由使用它們的人決定，例如瀏覽器制造商、Web開發(fā)人員等，這樣的標準既實用又專業(yè)。Web、（網(wǎng)頁超文本技術(shù)工作小組）和W3C。（1）漸進增強是向上兼容，優(yōu)雅降級是向下兼容。（2）漸進增強是從簡單到復雜，優(yōu)雅降級是從復雜到簡單。（3）漸進增強關(guān)注的是內(nèi)容，優(yōu)雅降級關(guān)注的是瀏覽體驗。4．答案：CSS預處理器的優(yōu)點如下：（3）內(nèi)置豐富的函數(shù)，可處理顏色、字符串、數(shù)字和選擇器等，也可自定義函數(shù)，適應特定需求。t句代碼就可描述一大段CSS樣式。CSSCSS預處理器的缺點如下：CSSCSSCSS（2）調(diào)試難度增加，在瀏覽器中調(diào)試的是編譯后的CSS文件，并不是編譯前的源代碼。FTP4OSIOPRFC"use//function"use//returnx;}5"use//function"use//returnx;}嚴格模式常見的限制有以下幾條：（1）所有的變量要先聲明，無法再意外創(chuàng)建全局變量。（2）函數(shù)中this對象的默認值是undefined，而不是全局對象（window）（3）試圖使用delete運算符刪除不可刪除的屬性會拋出異常。（4）函數(shù)聲明中定義兩個或多個同名參數(shù)將產(chǎn)生一個語法錯誤，例如sum(x,x){}。0x（6）禁止使用with語句。（7）不能將eval和arguments用作變量、函數(shù)或參數(shù)的名稱。8．答案：當用typeof運算符檢測數(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í)行復制的位置start：復制序列的起始位置end：復制序列的結(jié)束位置在使用這兩個方法時，有5個點需要注意，如下所列：（1）不僅會修改原始數(shù)組，還會覆蓋指定范圍內(nèi)的元素。（2）復制或填充執(zhí)行的都是淺拷貝。（3）當方法中的索引參數(shù)為負數(shù)時，會先和數(shù)組的長度相加，再計算出最終的索引。（4）保持數(shù)組的長度不變，在數(shù)組末尾停止復制或填充。（5）end參數(shù)的默認值為數(shù)組長度，并且該位置上的元素會被忽略。12．答案：雖然兩種類非常相似，但是ES6中的類有其獨有的特性，具體如下所列：（1）類聲明和即將要講解的類表達式都不會被提升。（2）類中的代碼在執(zhí)行時，會強制開啟嚴格模式。（3）類的所有方法都不可枚舉，并且不能與new組合使用。13．答案：可將VirtualDOM的工作分為三個簡單的步驟。每當對MM會將M元素轉(zhuǎn)換成ct（2）再通過diff算法找出新舊虛擬DOM之間的差異部分。（3）最后只更新真實DOM中需要變化的節(jié)點，而不是將整棵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ù)器，相當于網(wǎng)絡(luò)信息的中轉(zhuǎn)站，其功能如下所列。（1）提高訪問速度。（2）控制對內(nèi)部資源的訪問，例如只對教育網(wǎng)開放的各類FTP。（3）過濾內(nèi)容，例如限制對特定計算機的訪問。（4）隱藏真實IP，免受攻擊。（5）突破訪問限制，例如瀏覽國外站點。<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．答案：此題有兩個特點，第一個是實參數(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）不應該說沒缺點。（2）不應該把那些明顯的優(yōu)點說成缺點。（4）不應該說出令人不放心、不舒服的缺點。軟件開發(fā)技術(shù)。當然，很多時候，有些個性對于某一個崗位可能是優(yōu)點，對其他崗位可能是缺點。例真題詳解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排序方法最好時間復雜度平均時間復雜度最壞時間復雜度輔助存儲穩(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)