web前端面試題及答案web前端面試題及答案「篇一」1、怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?1)創(chuàng)建新節(jié)點(diǎn)createDocumentFragment//創(chuàng)建一個(gè)DOM片段createElement//創(chuàng)建一個(gè)具體的元素createTextNode//創(chuàng)建一個(gè)文本節(jié)點(diǎn)2)添加、移除、替換、插入appendChild//添加removeChild//移除replaceChild//替換insertBefore//插入3)查找getElementsByTagName//通過標(biāo)簽名稱getElementsByName//通過元素的Name屬性的值getElementById//通過元素Id，唯一性2、實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JavaScript中的5種主要的數(shù)據(jù)類型(包括Number、String、Object、Array、Boolean)進(jìn)行值復(fù)制。/*對(duì)象克隆*支持基本數(shù)據(jù)類型及對(duì)象*遞歸方法*/functionclone(obj){varo;switch(typeofobj){case"undefined":break;case"string":o=obj+"";break;case"number":o=obj-0;break;case"boolean":o=obj;break;case"object"://object分為兩種情況對(duì)象(Object)或數(shù)組(Array)if(obj===null){o=null;}else{if(Ototype.toString.call(obj).slice(8,-1)==="Array"){o=[];for(vari=0;i<obj.length;i++){o.push(clone(obj[i]));}}else{o={};for(varkinobj){o[k]=clone(obj[k]);}}}break;default:o=obj;break;}returno;}3、如何消除一個(gè)數(shù)組里面重復(fù)的元素?//方法一：vararr1=[1,2,2,2,3,3,3,4,5,6]。arr2=[];for(vari=0,len=arr1.length;i<len;i++){if(arr2.indexOf(arr1[i])<0){arr2.push(arr1[i]);}}document.write(arr2);//1,2,3,4,5,64、想實(shí)現(xiàn)一個(gè)對(duì)頁面某個(gè)節(jié)點(diǎn)的拖曳?如何做?(使用原生JS)。5、在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組?偽數(shù)組(類數(shù)組)：無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為，但仍可以對(duì)真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù)，還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對(duì)象都屬于偽數(shù)組。可以使用Atotype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對(duì)象。functionlog{varargs=Atotype.slice.call(arguments);//為了使用unshift數(shù)組方法，將argument轉(zhuǎn)化為真正的數(shù)組args.unshift((app));console.log.apply(console,args);};6、Javascript中callee和caller的作用?caller是返回一個(gè)對(duì)函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù);callee是返回正在被執(zhí)行的function函數(shù)，也就是所指定的function對(duì)象的正文。7、請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。webstorage和cookie的區(qū)別WebStorage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。除此之外，WebStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在，而WebStorage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。8、手寫數(shù)組快速排序關(guān)于快排算法的詳細(xì)說明，可以參考阮一峰老師的文章快速排序“快速排序”的思想很簡(jiǎn)單，整個(gè)排序過程只需要三步：(1)在數(shù)據(jù)集之中，選擇一個(gè)元素作為”基準(zhǔn)”(pivot)。(2)所有小于”基準(zhǔn)”的元素，都移到”基準(zhǔn)”的左邊;所有大于”基準(zhǔn)”的元素，都移到”基準(zhǔn)”的右邊。(3)對(duì)”基準(zhǔn)”左邊和右邊的兩個(gè)子集，不斷重復(fù)第一步和第二步，直到所有子集只剩下一個(gè)元素為止。9、統(tǒng)計(jì)字符串”aaaabbbccccddfgh”中字母?jìng)€(gè)數(shù)或統(tǒng)計(jì)最多字母數(shù)。varstr="aaaabbbccccddfgh";varobj={};for(vari=0;ivarv=str.charAt(i);if(obj[v]&&obj[v].value==v){obj[v].count=++obj[v].count;}else{obj[v]={};obj[v].count=1;obj[v].value=v;}}for(keyinobj){document.write(obj[key].value+=+obj[key].count+);//a=4b=3c=4d=2f=1g=1h=1}10、寫一個(gè)function，清除字符串前后的空格。(兼容所有瀏覽器)functiontrim(str){if(str&&typeofstr==="string"){returnstr.replace(/(^\s*)|(\s*)$/g,"");//去除前后空白符}}web前端面試題及答案「篇二」01、原來公司工作流程是怎么樣的，如何與其他人協(xié)作的?如何夸部門合作的?02、你遇到過比較難的技術(shù)問題是?你是如何解決的?03、設(shè)計(jì)模式知道什么是singleton,factory,strategy,decrator么?04、常使用的庫有哪些?常用的前端開發(fā)工具?開發(fā)過什么應(yīng)用或組件?05、頁面重構(gòu)怎么操作?06、列舉IE與其他瀏覽器不一樣的特性?07、99%的網(wǎng)站都需要被重構(gòu)是那本書上寫的?08、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)?09、是否了解公鑰加密和私鑰加密。10、WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式?11、對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法?12、你有用過哪些前端性能優(yōu)化的方法?13、http狀態(tài)碼有那些?分別代表是什么意思?14、一個(gè)頁面從輸入U(xiǎn)RL到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么?(流程說的越詳細(xì)越好)15、部分地區(qū)用戶反應(yīng)網(wǎng)站很卡，請(qǐng)問有哪些可能性的原因，以及解決方法?16、從打開app到刷新出內(nèi)容，整個(gè)過程中都發(fā)生了什么，如果感覺慢，怎么定位問題，怎么解決?17、除了前端以外還了解什么其它技術(shù)么?你最最厲害的技能是什么?18、你用的得心應(yīng)手用的熟練地編輯器&開發(fā)環(huán)境是什么樣子?19、對(duì)前端界面工程師這個(gè)職位是怎么樣理解的?它的前景會(huì)怎么樣?20、你怎么看待WebApp、hybridApp、NativeApp?21、你移動(dòng)端前端開發(fā)的理解?(和Web前端開發(fā)的主要區(qū)別是什么?)22、你對(duì)加班的看法?23、平時(shí)如何管理你的項(xiàng)目?24、說說最近最流行的一些東西吧?常去哪些網(wǎng)站?25、如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)?26、是否了解開源的工具bower、npm、yeoman、grunt、gulp，一個(gè)npm的包里的package.json具備的必要的字段都有哪些?(名稱、版本號(hào)，依賴)每個(gè)模塊的代碼結(jié)構(gòu)都應(yīng)該比較簡(jiǎn)單，且每個(gè)模塊之間的關(guān)系也應(yīng)該非常清晰，隨著功能和迭代次數(shù)越來越多，你會(huì)如何去保持這個(gè)狀態(tài)的?27、Git知道branch,diff,merge么?如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)?28、當(dāng)團(tuán)隊(duì)人手不足，把功能代碼寫完已經(jīng)需要加班的情況下，你會(huì)做前端代碼的測(cè)試嗎?29、知道什么是SEO并且怎么優(yōu)化么?知道各種metadata的含義么?30、移動(dòng)端(AndroidIOS)怎么做好用戶體驗(yàn)?31、簡(jiǎn)單描述一下你做過的移動(dòng)APP項(xiàng)目研發(fā)流程?32、你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用?33、你認(rèn)為怎樣才是全端工程師(FullStackdeveloper)?34、介紹一個(gè)你最得意的作品吧?35、你有自己的技術(shù)博客嗎，用了哪些技術(shù)?36、對(duì)前端安全有什么看法?37、是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS和CSRF)了解到什么程度?38、項(xiàng)目中遇到國(guó)哪些印象深刻的技術(shù)難題，具體是什么問題，怎么解決。39、最近在學(xué)什么東西?40、你的優(yōu)點(diǎn)是什么?缺點(diǎn)是什么?41、如何管理前端團(tuán)隊(duì)?42、最近在學(xué)什么?能談?wù)勀阄磥?，5年給自己的規(guī)劃嗎?web前端面試題及答案「篇三」1、怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？創(chuàng)建新節(jié)點(diǎn)：creatDocumentFragment，創(chuàng)建一個(gè)DOM片段。creatElement，創(chuàng)建一個(gè)具體的元素。creatTextNode，創(chuàng)建一個(gè)文本節(jié)點(diǎn)。添加、移除、替換、插入：appendChild，添加。removeChild，移除。replaceChild，替換。Before，插入。查找：getElementsByTagName，通過標(biāo)簽名稱。getElementsByName，通過元素的Name屬性的值。getElementById，通過元素id，唯一性。2、JS中什么是偽數(shù)組？如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組？偽數(shù)組（類數(shù)組）：無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為。但仍可以對(duì)真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的arguement參數(shù)，還有像調(diào)用getElementsByTagName、document.childNodes之類的，它們都返回NodeList對(duì)象，都屬于偽數(shù)組。可以用Atotype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對(duì)象。3、JS中callee和caller的作用。caller是返回一個(gè)對(duì)函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù)；callee是返回正在被執(zhí)行的函數(shù)，也就是所指定的function對(duì)象的正文。4、請(qǐng)說出三種減低頁面加載時(shí)間的方法。1.壓縮CSS、JS文件。2.合并JS、CSS文件，減少HTTP請(qǐng)求。3.外部JS、CSS文件放最底下。4.減少DOM的操作，盡可能用變量替代不必要的DOM操作。5、為什么用多個(gè)域名來存儲(chǔ)網(wǎng)絡(luò)資源會(huì)更有效？確保用戶在不同地區(qū)用最快的速度打開網(wǎng)站，其中某個(gè)域名崩潰，用戶也能通過其他域名訪問網(wǎng)站。6、如何消除一個(gè)數(shù)組里面重復(fù)的元素？indexOf:返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，對(duì)大小寫敏感，若沒有，則返回-1。7、寫一個(gè)function，清除字符串前后的空格（兼容所有的瀏覽器）。8、統(tǒng)計(jì)字符串中字母?jìng)€(gè)數(shù)或統(tǒng)計(jì)最多字母數(shù)。str.charAt(i)：返回指定位置的字符，i在0~str.length之間，如果i不在0~str.length之間，該方法返回一個(gè)空字符串。9、截取字符串"abcdefg"中的"egf"。10、實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JS中的5種主要的數(shù)據(jù)類型（包括Number、String、Object、Array、Boolean）進(jìn)行值復(fù)制。11、JS中如何檢測(cè)一個(gè)變量是string類型？typeof(obj)=="string";obj.constructor==string;12、寫出三個(gè)使用this的典型應(yīng)用。事件：onclickthis，發(fā)生事件的對(duì)象；構(gòu)造函數(shù)：this，new出來的object；call/apply：改變this；13、網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒計(jì)時(shí)程序，要求網(wǎng)頁上實(shí)時(shí)動(dòng)態(tài)顯示“xx年還剩xx天xx時(shí)xx分xx秒”。web前端面試題及答案「篇四」1、什么是盒子模型?在網(wǎng)頁中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容(content)，元素的內(nèi)邊距(padding)，元素的邊框(border)，元素的外邊距(margin)四個(gè)部分。這四個(gè)部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個(gè)部分一起構(gòu)成了css中元素的盒模型。2、行內(nèi)元素有哪些?塊級(jí)元素有哪些?空(void)元素有那些?行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea塊級(jí)元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素：即系沒有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img3、CSS實(shí)現(xiàn)垂直水平居中一道經(jīng)典的問題，實(shí)現(xiàn)方法有很多種，以下是其中一種實(shí)現(xiàn)：HTML結(jié)構(gòu)：CSS：.wrapper{position:relative;}.content{background-color:#6699FF;width:200px;height:200px;position:absolute;//父元素需要相對(duì)定位top:50%;left:50%;margin-top:-100px;//二分之一的height，widthmargin-left:-100px;}4、簡(jiǎn)述一下src與href的區(qū)別href是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接，用于超鏈接。src是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。5、什么是CSSHack?一般來說是針對(duì)不同的瀏覽器寫不同的CSS,就是CSSHack。IE瀏覽器Hack一般又分為三種，條件Hack、屬性級(jí)Hack、選擇符Hack(詳細(xì)參考CSS文檔：css文檔)。例如：//1、條件Hack//2、屬性Hack.test{color:#090\9;/*ForIE8+*/*color:#f00;/*ForIE7andearlier*/_color:#ff0;/*ForIE6andearlier*/}//3、選擇符Hack*html.test{color:#090;}/*ForIE6andearlier*/*+html.test{color:#ff0;}/*ForIE7*/6、簡(jiǎn)述同步和異步的區(qū)別