WEB前端面筆試題總結(jié)

1、1. 如何顯示/隱藏一個(gè)DOM元素？更改元素的css style，設(shè)為display: none。此外還可以將visibility設(shè)為hidden，透明度設(shè)為0，或長(zhǎng)、寬設(shè)為0。2. 一個(gè)定寬網(wǎng)頁(yè)在瀏覽器（IE6，IE7，F(xiàn)irefox，IE5）中橫向居中對(duì)齊的布局，請(qǐng)寫(xiě)出主要的HTML標(biāo)簽及CSS。1. 2. 3. 4. 5. 居中6. 7. body width: 600px8. html, body margin: auto; padding: 09. div.wrap text-align:center; margin: 0; padding: 010. 11. 12. 13. 居中1

2、4. 15. 3. CSS中margin和padding的區(qū)別margin是外邊距，屬于元素之外，相鄰元素的margin可以融合。padding是內(nèi)邊距，在元素之內(nèi)，相鄰元素的padding不可融合。4. JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型？請(qǐng)寫(xiě)出函數(shù)實(shí)現(xiàn)function(obj) returntypeof(obj) =”string”;5. 網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序，要求網(wǎng)頁(yè)上實(shí)時(shí)動(dòng)態(tài)顯示“年還剩天時(shí)分秒”這個(gè)看我論壇右上角的就知道了6. 如何控制網(wǎng)頁(yè)在網(wǎng)絡(luò)傳輸過(guò)程中的數(shù)據(jù)量題目貌似有問(wèn)題，應(yīng)該是減少數(shù)據(jù)量吧。最顯著的方法是啟用GZIP壓縮。

3、此外保持好的編碼習(xí)慣，避免重復(fù)和css、JavaScript代碼，多余的HTML標(biāo)簽和屬性。7. 補(bǔ)充代碼，是鼠標(biāo)單擊后Button1到Button2的后面var parent =this.parentNode; parent.removeChild(this); parent.appendChild(this);8. Linux中，將a、b打包為back.tar，命令是（）不知道。9. Flash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？Flash的缺點(diǎn)是需要客戶端安裝Flash插件，比較大，且更改了默認(rèn)的HTML頁(yè)面行為；但可以方便地實(shí)現(xiàn)很多特效及動(dòng)畫(huà)，且具有較高權(quán)限。Ajax的缺點(diǎn)是編程

4、較為復(fù)雜，需要服務(wù)器端的支持，能實(shí)現(xiàn)的效果只能是DOM API提供的，權(quán)限很低，較難跨域；但可以顯著加快頁(yè)面的載入速度和用戶體驗(yàn)。此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。建議:重要和關(guān)鍵部分直接用HTML，交互部分可以使用Ajax，復(fù)雜的動(dòng)畫(huà)可采用Flash。百度20101、JS主要數(shù)據(jù)類型？5分答：主要的類型有number、string、object 以及 Boolean 類型,其他兩種類型為 null 和 undefined。2、img的alt和title的異同？10分答：title屬性為設(shè)置該屬性的元素提供建議性的信息。比如為鏈接添加描述性

5、文字。為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來(lái)指定替換文字。使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明。3、CSS的JS調(diào)用？如font-family, -moz-border-radius 10分答：fontFamily、MozBorderRadius4、CSS布局：兩列，左邊寬度自適應(yīng)，右邊寬度固定200px 15分1. #box1width:100%;height:600px;position:relative;2. #left1margin-right:200px;border:1px solid red;height:100%;3

6、. #right1width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px solid blue;4. 5. 6. 7. 5、js對(duì)象的深度克??？20分1. Ototype.deepClone=function()2. functioncloneObj() 3. cloneOtotype=this;4. varobj=newcloneObj();5. for(varoinobj)6. if(typeof(objo)=object)objo=objo.deepClone();7. r

7、eturnobj;8. 6、動(dòng)態(tài)打印時(shí)間，格式為yyyy-MM-dd hh:mm:ss? 15分1. functionprintTime()2. vartimer1=newDate();3. vartimer=timer1.toLocaleString();4. timer=timer.replace(/年月/g,-);5. timer=timer.replace(/日/,);6. time.innerHTML=timer;7. setInterval(printTime(),1000);7、如何提高網(wǎng)頁(yè)運(yùn)行性能？20分沒(méi)寫(xiě)。8、linux下刪除當(dāng)前目錄下擴(kuò)展名為c的文件（如a.c，b.c）5

8、分rmr *.cfind. -name “*.doc” -type f -exec cp /tmp/doc ;找到當(dāng)前目錄（.）下擴(kuò)展名為(doc)的文件并拷貝到指定目錄【注意-type f 指普通文件，-exec ls-l列出文件，最后加上】cpoptions source dest 復(fù)制9、flash as2.0和flash as3.0在面向?qū)ο蠓矫娴漠愅?0分答：面向?qū)ο蠓矫妫?.0像javascript，3.0像java。到了 AS 2.0,面向?qū)ο蟊灰肓?，但它?shí)質(zhì)上是動(dòng)態(tài)腳本語(yǔ)言，雖然已經(jīng)有了類的概念和class關(guān)鍵字，但對(duì)象支持還是基于類似JavaScript的prototyp

9、e機(jī)制動(dòng)態(tài)繼承。3.0同時(shí)支持靜態(tài)類型，即基于類的繼承方式；以及動(dòng)態(tài)類型，即基于prototype的繼承方式。推薦用靜態(tài)類型。10、Flash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？10分1、Flashajax對(duì)比Flash適合處理多媒體、矢量圖形、訪問(wèn)機(jī)器；對(duì)CSS、處理文本上不足，不容易被搜索。Ajax對(duì)CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機(jī)器訪問(wèn)不足。共同點(diǎn)：與服務(wù)器的無(wú)刷新傳遞消息、用戶離線和在線狀態(tài)、操作DOM2、項(xiàng)目中遇到什么問(wèn)題？如何解決？前端題目總結(jié)HTML相關(guān)1. 標(biāo)簽的定義與用法。2. 塊級(jí)元素和行內(nèi)元素都有哪些？3. 你真的了解HTML嗎？ 雅虎面試題把前

10、面黃底那段拿去搜索下就知道了(曾在某浪公司面試的時(shí)候被問(wèn)到過(guò)，確實(shí)是很好的問(wèn)題)。CSS相關(guān)1. 介紹所知道的CSS hack技巧(如：_，*， +，9， !important 之類)。2. 介紹CSS盒模型。3. CSS層疊是什么？介紹一下。4. 都知道哪些CSS瀏覽器兼容性問(wèn)題。5. 有時(shí)會(huì)被問(wèn)到些刁鉆點(diǎn)的題，比如position值都有哪些，CSS3都有哪些新內(nèi)容.JavaScript基礎(chǔ)相關(guān)1. HTTP協(xié)議的狀態(tài)消息都有哪些？(如200、302對(duì)應(yīng)的描述)2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解決辦法?3. 同步和異步的區(qū)別?4. 簡(jiǎn)述JavaScript

11、封裝。5. JavaScript繼承有哪兩種形式形式，進(jìn)行描述。6. 什么是閉包？以下代碼點(diǎn)擊會(huì)輸出什么？為什么？能大概說(shuō)明白的話繼續(xù)問(wèn)能想出幾種解決辦法。答案: 5 解釋: 由于閉包 i被保留在內(nèi)存中,alert 顯示的是i當(dāng)前的值, 最后一次i+ 會(huì)導(dǎo)致i為5閉包演示pbackground:gold;functioninit() varpAry = document.getElementsByTagName(p);for(vari=0; ipAry.length; i+ ) pAryi.onclick =function() alert(i);產(chǎn)品 0產(chǎn)品 1產(chǎn)品 2產(chǎn)品 3產(chǎn)品 47.

12、在JS中this關(guān)鍵字的使用場(chǎng)合和用法(如在構(gòu)造函數(shù)中、setTimeout中等)。8. 簡(jiǎn)述下cookie的操作，還有cookie的屬性都知道哪些。9. IE與FF的JS兼容性都知道哪些。10. DOM操作-怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)(這個(gè)問(wèn)題真心是基礎(chǔ)題，一般不會(huì)問(wèn))。jQuery相關(guān)1. jQuery源碼是否嘗試去讀過(guò)？說(shuō)說(shuō)基本的架構(gòu)或者jQuery.fn.init中都做了哪些判斷。2. 都知道哪些不好的jQuery書(shū)寫(xiě)方式。3. Sizzle是否有讀過(guò)？其它相關(guān)的加分項(xiàng)：1. 都使用和了解過(guò)哪些編輯器？都使用和了解過(guò)哪些日常工具？2. 都知道有哪些瀏覽器內(nèi)核？開(kāi)發(fā)過(guò)的項(xiàng)

13、目都兼容哪些瀏覽器？3. 國(guó)內(nèi)外的JS牛人都知道哪些？4. 瀑布流布局或者流式布局是否有了解5. 正則表達(dá)式有系統(tǒng)學(xué)習(xí)過(guò)嗎(看書(shū)或網(wǎng)上教程)？有的話就問(wèn)問(wèn)簡(jiǎn)單點(diǎn)的郵箱驗(yàn)證、URL驗(yàn)證，或者問(wèn)問(wèn)貪婪匹配與懶惰匹配的理論知識(shí)。6. Node.js是否有過(guò)嘗試？到什么程度？說(shuō)說(shuō)個(gè)人理解的看法？7. HTML5都有哪些新的JS API？8. 前端優(yōu)化知識(shí)都知道哪些？9. 基礎(chǔ)算法題（如快速排序，能否一兩句說(shuō)說(shuō)重要的核心原理或者數(shù)組消重等）。10. 是否有接觸過(guò)或者了解過(guò)重構(gòu)。其他一些總結(jié)百度web前端筆試試卷上的題目：1.判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長(zhǎng)

14、度為5-202.截取字符串a(chǎn)bcdefg的efg3.讓一個(gè)input的背景顏色變成紅色4。給一個(gè)頁(yè)面，寫(xiě)html css5。div的高寬等于瀏覽器可見(jiàn)區(qū)域的高寬，瀏覽器滾動(dòng)，div始終覆蓋瀏覽器的整個(gè)可見(jiàn)區(qū)域6。判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)7。IE與FF腳本兼容性問(wèn)題又重新問(wèn)的是1，4，6，7，這次問(wèn)出題者的意圖，并且讓給出7的更多答案，以及IE FF不兼容的原因然后看了看簡(jiǎn)歷，沒(méi)有問(wèn)簡(jiǎn)歷上的項(xiàng)目，而是讓自己隨便談?wù)?對(duì)于web客戶端技術(shù)未來(lái)趨勢(shì)發(fā)展談?wù)効捶╦avascript + ajax=RIAAdobe Flash AS 3FlexSliveright2web開(kāi)發(fā)團(tuán)隊(duì)

15、人員應(yīng)該如何分工協(xié)作布局CSS腳本比如腳本人員長(zhǎng)期的積累可能鑄造類型YUI這樣的產(chǎn)品級(jí)腳本庫(kù)（亮點(diǎn)）3web開(kāi)發(fā)曾經(jīng)的團(tuán)隊(duì)有沒(méi)有別人遇到問(wèn)題，什么問(wèn)題，向你請(qǐng)教4如果要實(shí)習(xí)，什么時(shí)候可以5自己在開(kāi)發(fā)的過(guò)程中遇到什么問(wèn)題，談?wù)効捶?web開(kāi)發(fā)腳本開(kāi)發(fā)環(huán)境用什么、調(diào)試用什么試過(guò)aptana，現(xiàn)在就用editplus調(diào)試肯定用firebug，ie下看頁(yè)面DOM用IEInspector7如果有個(gè)新技術(shù)，現(xiàn)在需要掌握，你會(huì)怎么做新技術(shù)的發(fā)現(xiàn)我一般是通過(guò)RSS工具，比如我用GoogleReader每天有半個(gè)小時(shí)左右在看最新的資訊、技術(shù)走向發(fā)現(xiàn)新技術(shù)，首先有個(gè)大概了解，如果有深入的必要我一般會(huì)看他的官網(wǎng)，比

16、如jquery，我會(huì)搜索到，然后看Docs、samples如果要用到項(xiàng)目中，有困難的問(wèn)題，我會(huì)svn得到最新的這個(gè)技術(shù)的源碼，深入跟蹤進(jìn)去，看實(shí)現(xiàn)原理一般現(xiàn)在涌現(xiàn)的技術(shù)都是opensource提問(wèn)時(shí)間1百度web開(kāi)發(fā)腳本是否有做類似YUI庫(kù)的打算2百度web開(kāi)發(fā)工程師打算招多少人百度電話二面回憶web開(kāi)發(fā)部web開(kāi)發(fā)工程師首先是自我介紹然后談?wù)勛龅膚eb項(xiàng)目然后開(kāi)始問(wèn)技術(shù)問(wèn)題前端開(kāi)發(fā)的優(yōu)化問(wèn)題答:產(chǎn)品發(fā)布時(shí)，js的壓縮，即函數(shù)名替換、整個(gè)文件壓縮成一行css開(kāi)發(fā)的時(shí)候注釋寫(xiě)清楚，先有個(gè)base.css，然后根據(jù)不同頁(yè)面需要再加css，發(fā)布的時(shí)候?qū)ss中的一個(gè)定義寫(xiě)成一行，目的是壓縮文件大小最

17、終發(fā)布的時(shí)候甚至可以將css，js分別壓縮成一個(gè)文件，甚至css、js通過(guò)技巧壓縮到一個(gè)里邊（亮點(diǎn)）這樣的目的是，減少用戶訪問(wèn)web產(chǎn)品的http連接數(shù)web前端產(chǎn)品的開(kāi)發(fā)流程答:首先根據(jù)產(chǎn)品的定位、用戶群，確定配色，然后紙上設(shè)計(jì)整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫(xiě)代碼div+css構(gòu)造出頁(yè)面，然后根據(jù)功能寫(xiě)腳本參考126郵箱首頁(yè)，將所有小圖片放到一個(gè)圖片中，通過(guò)css的background-position實(shí)現(xiàn)頁(yè)面，還是為了優(yōu)化，減少http連接數(shù)規(guī)避javascript多人開(kāi)發(fā)函數(shù)重名問(wèn)題答:首先是通過(guò)命名規(guī)范，比如根據(jù)不同的開(kāi)發(fā)人員實(shí)現(xiàn)的功能，在函數(shù)名加前綴

18、，雖然函數(shù)名看起來(lái)復(fù)雜，發(fā)布的時(shí)候還是可以替換，從而優(yōu)化。還有一種辦法是，每個(gè)開(kāi)發(fā)人員都把自己的函數(shù)封裝到類中，然后調(diào)用的時(shí)候即使函數(shù)名相同，但是因?yàn)槭且?函數(shù)名來(lái)調(diào)用，所以也減少了重復(fù)的可能性。javascript面向?qū)ο笾欣^承實(shí)現(xiàn)答：我是用prototype.js extend.js擴(kuò)展然后子類中parent.initialize()答的不好正確答案：/ 1.構(gòu)造器function Animal() ;function Mammal() ;function Canine() ;function Dog() ;/ 2.原型鏈表Mtotype = new Animal();

19、Ctotype = new Mammal();Dtotype = new Canine();prototype.js實(shí)現(xiàn)的基本原理答：將功能封裝比如Ajax.Request，還是有判斷瀏覽器的代碼；Position這樣的實(shí)現(xiàn)頁(yè)面元素位置的計(jì)算prototye太大，如果一個(gè)頁(yè)面功能不需要這樣的，自己實(shí)現(xiàn)，怎么做答：首先頁(yè)面、css、腳本分離之后，腳本中將整個(gè)模塊功能寫(xiě)成一個(gè)類var Do=其中初始化函數(shù)init:function()，然后最后做Do.init()其中init會(huì)對(duì)頁(yè)面上form中需要交互的元素綁定事件，比如$(input1).onclick=funct

20、ion()IE、FF下面腳本的區(qū)別答：1.IE有outerHTML，F(xiàn)F沒(méi)有2.頁(yè)面元素id，IE可以直接取，F(xiàn)F必須document.getElementById()3.Ajax里邊FF是newXMLHttpRequest，而IE是try new ActiveXObject(Msxml2.XMLHTTP)try new ActiveXObject(Microsoft.XMLHTTP)FF下面實(shí)現(xiàn)outerHTML答：.parenet.firstChild .parent.innerHTML這個(gè)沒(méi)答好正確答案：原理是，get：取到這個(gè)標(biāo)簽的tagname，然后屬性循環(huán)構(gòu)造成這個(gè)標(biāo)簽的屬性set

21、：把字符串用insertBefore插入到這個(gè)元素前面，然后removeChild這個(gè)元素!if(typeof(HTMLElement)!=”undefined”& !window.opera)HTMLEtotype._defineGetter_(”outerHTML”,function()var a=this.attributes, str=”+this.tagName, i=0;for(;i”;return str+”+this.innerHTML+”;);HTMLEtotype._defineSetter_(”outerHTML”,function

22、(s)var d = document.createElement(”DIV”); d.innerHTML= s;for(var i=0;iIE、FF下面CSS的解釋區(qū)別答：1.png透明背景，F(xiàn)F下面沒(méi)有問(wèn)題，IE需要用濾鏡通道2.z-index在IE、FF下面的解釋問(wèn)題，IE會(huì)認(rèn)為第一個(gè)z-index=03.長(zhǎng)字符串，word-wrap:break-all可以解決IE，但是FF需要overflow:hidden才行馮舒婭補(bǔ)充：1、有些標(biāo)簽在ff中不能用，比如button2、濾鏡3、鼠標(biāo)cursor:hand cursor:pointer4、div的高度自適應(yīng)5、對(duì)box模型解析不一樣6、u

23、l、ol的padding和marginIE都能識(shí)別*，標(biāo)準(zhǔn)瀏覽器（如FF）不能識(shí)別*；IE6能識(shí)別*，但不能識(shí)別!important；IE7能識(shí)別*，也能識(shí)別!important；FF不能識(shí)別*，但能識(shí)別!important；例如style=”*width:10px;!importantwidth:20px;”這樣在IE6下寬度為10px,在IE7下寬度時(shí)20pxweb前端技術(shù)的展望答：javascript ajax；flashAS；Flex；Sliveright附上網(wǎng)上的百度web開(kāi)發(fā)工程師筆試問(wèn)題集1編寫(xiě)一個(gè)方法求一個(gè)字符串的字節(jié)長(zhǎng)度new function(s)if(!arguments

24、.length|!s) returnnull;if(”=s) return 0;var l=0;for(var i=0;i255) l+=2;else l+;alert(l);(”hello你好，我好,大家好！world!”);2編寫(xiě)一個(gè)方法去掉一個(gè)數(shù)組的重復(fù)元素Atotype.strip=function()if(this.length2) returnthis0|;var arr=;for(var i=0;ithis.length;i+)arr.push(this.splice(i,1);for(var j=0;jthis.length;j+)if(thisj=arrarr.length-1)this.splice(j,1);return arr;vararr=abc,85,abc,85,8,8,1,2,5,4,7,8;alert(arr.strip();3說(shuō)出3條以上ff和ie的腳本兼容問(wèn)題IE有children，F(xiàn)F沒(méi)有；IE有parentElement，F(xiàn)F沒(méi)有；IE有innerText,