2011二月百度web前端筆試面試題目(一面二面)

1、隨著各大互聯(lián)網(wǎng)公司設(shè)立了Web前端開發(fā)工程師、設(shè)計工程師等職位，web前端越來越得到互聯(lián)網(wǎng)企業(yè)的認可。而且其重視程度與地位也隨著瀏覽器 端的富客戶端的體現(xiàn)而日益提高。 眼前對HTML5的未來和走向，業(yè)內(nèi)的預(yù)測是會和Flash、Silverlight等相結(jié)合，從而取代傳統(tǒng)的客戶端應(yīng)用程序。而實現(xiàn)這個目標(biāo)的客戶端核 心工作是有Web前端工程師來完成的。 從另一個角度，對于web產(chǎn)品來說，交互和用戶體驗是產(chǎn)品的第一價值，這部分價值的體現(xiàn)就是在web前端?？梢哉fweb前端是一個web產(chǎn)品的長相和談 吐、行為。 下面就簡單的說明一下web前端的組成部分。1. UI設(shè)計部分 這是web產(chǎn)品化的第一步。這個

2、部分通常在稍大型的公司里，被單獨設(shè)立為一個部門或者一些人來工作。主要是要掌握Photo, AI,可以很快的將創(chuàng)意轉(zhuǎn)化為平面設(shè)計圖，并制作PNG等小圖片。 同時，UI設(shè)計還要預(yù)包含用戶交互設(shè)計的元素，如何和用戶交互的基本原型等。2. HTML/CSS,頁面靜態(tài)化這是web產(chǎn)品化的2步，就是將UI設(shè)計師的設(shè)計圖切成靜態(tài)頁面。這里的“切”不是單純的切，而是使用css里面背景色和邊框樣式等方式對設(shè)計原稿 進行解讀，并形成符合web標(biāo)準(zhǔn)的html代碼。這里web前端還需要將圖片、html頁面以及css樣式進行合理的文件分布安排等3.Javascript, AS 客戶端動態(tài)化這是web產(chǎn)品化的3步，工程師

3、使用DOM操作、AJAX，實現(xiàn)數(shù)據(jù)和服務(wù)端的通信以及本地樣式的切換。同時，由于Javascript、 AS是一門動態(tài)語言，所以這部分的編碼要求web前端工程師有較好的編碼習(xí)慣，能寫高效率的OOP代碼，并對代碼進行壓縮上線以降低帶寬消耗等。4.Flash、Silverlight、Video 多媒體化這部分針對不同web產(chǎn)品有不同的要求，通常要求是可以使用Flash和web、Server進行交互，并對Flash進行設(shè)計與開發(fā)。5.PHP、Java等CGI, 服務(wù)端通信基本知識和編碼這部分主要是更好的使用Ajax等技術(shù)，了解服務(wù)端的工作方式將更有利于web前端工程師工作的開展。通常優(yōu)秀的web前端工

4、程師都是對服務(wù)端的一 種開發(fā)語言很了解。下面是webryan整理的百度web前端筆試和面試的一些題目和過程，提供給大家借鑒。百度web前端筆試試卷上的題目：1.判斷字符串是否是這樣組成的，第一個必須是字母，后面可以是字母、數(shù)字、下劃線，總長度為5-202.截取字符串a(chǎn)bcdefg的efg3.讓一個input的背景顏色變成紅色4。給一個頁面，寫html css5。div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區(qū)域6。判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)7。IE與FF腳本兼容性問題又重新問的是1，4，6，7，這次問出題者的意圖，并且讓給出7的更多答案，

5、以及IE FF不兼容的原因然后看了看簡歷，沒有問簡歷上的項目，而是讓自己隨便談?wù)?對于web客戶端技術(shù)未來趨勢發(fā)展談?wù)効捶╦avascript + ajax=RIAAdobe Flash AS 3FlexSliveright2web開發(fā)團隊人員應(yīng)該如何分工協(xié)作布局 CSS 腳本比如腳本人員長期的積累可能鑄造類型YUI這樣的產(chǎn)品級腳本庫（亮點）3web開發(fā)曾經(jīng)的團隊有沒有別人遇到問題，什么問題，向你請教4如果要實習(xí)，什么時候可以5自己在開發(fā)的過程中遇到什么問題，談?wù)効捶?web開發(fā)腳本開發(fā)環(huán)境用什么、調(diào)試用什么試過aptana，現(xiàn)在就用editplus調(diào)試肯定用firebug，ie下看頁面DOM

6、用IEInspector7如果有個新技術(shù)，現(xiàn)在需要掌握，你會怎么做新技術(shù)的發(fā)現(xiàn)我一般是通過RSS工具，比如我用GoogleReader每天有半個小時左右在看最新的資訊、技術(shù)走向發(fā)現(xiàn)新技術(shù)，首先有個大概了解，如果有深入的必要我一般會看他的官網(wǎng)，比如jquery，我會搜索到，然后看Docs、samples如果要用到項目中，有困難的問題，我會svn得到最新的這個技術(shù)的源碼，深入跟蹤進去，看實現(xiàn)原理一般現(xiàn)在涌現(xiàn)的技術(shù)都是opensource提問時間1百度web開發(fā)腳本是否有做類似YUI庫的打算2百度web開發(fā)工程師打算招多少人百度電話二面回憶 web開發(fā)部web開發(fā)工程師百度電話二面回憶 web開發(fā)部

7、web開發(fā)工程師首先是自我介紹然后談?wù)勛龅膚eb項目然后開始問技術(shù)問題前端開發(fā)的優(yōu)化問題答:產(chǎn)品發(fā)布時，js的壓縮，即函數(shù)名替換、整個文件壓縮成一行css開發(fā)的時候 注釋寫清楚，先有個base.css，然后根據(jù)不同頁面需要再加css，發(fā)布的時候?qū)ss中的一個定義寫成一行，目的是壓縮文件大小最終發(fā)布的時候甚至可以將css，js分別壓縮成一個文件，甚至css、js通過技巧壓縮到一個里邊（亮點）這樣的目的是，減少用戶訪問web產(chǎn)品的http連接數(shù)web前端產(chǎn)品的開發(fā)流程答:首先根據(jù)產(chǎn)品的定位、用戶群，確定配色，然后紙上設(shè)計整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫代碼div

8、+css構(gòu)造出 頁面，然后根據(jù)功能寫腳本參考126郵箱首頁，將所有小圖片放到一個圖片中，通過css的background-position實現(xiàn)頁面，還是為了優(yōu)化，減少http連接數(shù)規(guī)避javascript多人開發(fā)函數(shù)重名問題答:首先是通過命名規(guī)范，比如根據(jù)不同的開發(fā)人員實現(xiàn)的功能，在函數(shù)名加前綴，雖然函數(shù)名看起來復(fù)雜，發(fā)布的時候還是可以替換，從而優(yōu)化。還有一種辦法是，每個開發(fā)人員都把自己的函數(shù)封裝到類中，然后調(diào)用的時候即使函數(shù)名相同，但是因為是要類.函數(shù)名來調(diào)用，所以也減少了重復(fù)的可能性。javascript面向?qū)ο笾欣^承實現(xiàn)答：我是用prototype.js extend.js擴展然后子類中

9、parent.initialize()答的不好正確答案：/ 1. 構(gòu)造器function Animal() ;function Mammal() ;function Canine() ;function Dog() ;/ 2. 原型鏈表Mtotype = new Animal();Ctotype = new Mammal();Dtotype = new Canine();prototype.js實現(xiàn)的基本原理答：將功能封裝比如Ajax.Request，還是有判斷瀏覽器的代碼；Position這樣的實現(xiàn)頁面元素位置的計算prototye太大，如果一

10、個頁面功能不需要這樣的，自己實現(xiàn)，怎么做答：首先頁面、css、腳本分離之后，腳本中將整個模塊功能寫成一個類var Do=其中初始化函數(shù)init:function()，然后最后做Do.init()其中init會對頁面上form中需要交互的元素綁定事件，比如$(input1).onclick=function()IE、FF下面腳本的區(qū)別答：1.IE有outerHTML，F(xiàn)F沒有2.頁面元素id，IE可以直接取，F(xiàn)F必須document.getElementById()3.Ajax里邊FF是new XMLHttpRequest，而IE是try new ActiveXObject(Msxml2.XML

11、HTTP) try new ActiveXObject(Microsoft.XMLHTTP)FF下面實現(xiàn)outerHTML答：.parenet.firstChild .parent.innerHTML這個沒答好正確答案：原理是，get：取到這個標(biāo)簽的tagname，然后屬性循環(huán)構(gòu)造成這個標(biāo)簽的屬性set：把字符串用insertBefore插入到這個元素前面，然后removeChild這個元素!if(typeof(HTMLElement)!=”undefined” & !window.opera)HTMLEtotype._defineGetter_(”outerHTML”,f

12、unction()var a=this.attributes, str=”+this.tagName, i=0;for(;i”;return str+”+this.innerHTML+”;);HTMLEtotype._defineSetter_(”outerHTML”,function(s)var d = document.createElement(”DIV”); d.innerHTML = s;for(var i=0; iIE、FF下面CSS的解釋區(qū)別答：1.png透明背景，F(xiàn)F下面沒有問題，IE需要用濾鏡通道2.z-index在IE、FF下面的解釋問題，IE會認為第一

13、個z-index=03.長字符串，word-wrap:break-all可以解決IE，但是FF需要overflow:hidden才行馮舒婭補充：1、有些標(biāo)簽在ff中不能用，比如button2、濾鏡3、鼠標(biāo)cursor:hand cursor:pointer4、div的高度自適應(yīng)5、對box模型解析不一樣6、ul、ol的padding和marginIE都能識別*，標(biāo)準(zhǔn)瀏覽器（如FF）不能識別*；IE6能識別*，但不能識別 !important；IE7能識別*，也能識別 !important；FF不能識別*，但能識別 !important；例如style=”*width:10px;!importa

14、nt width:20px;”這樣在IE6下寬度為10px,在IE7下寬度時20pxweb前端技術(shù)的展望答：javascript ajax；flash AS；Flex；Sliveright附上網(wǎng)上的百度web開發(fā)工程師筆試問題集1編寫一個方法 求一個字符串的字節(jié)長度new function(s)if(!arguments.length|!s) return null;if(”=s) return 0;var l=0;for(var i=0;i255) l+=2;else l+;alert(l);(”hello你好，我好,大家好！world!”);2編寫一個方法 去掉一個數(shù)組的重復(fù)元素Array

15、.prototype.strip=function()if(this.length2) return this0|;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;var arr=abc,85,abc,85,8,8,1,2,5,4,7,8;alert(arr.strip();3說出3條以上ff和ie的腳本兼容問題IE 有children，F(xiàn)F沒有；IE有pa

16、rentElement，F(xiàn)F沒有；IE有innerText,outerText,outerHTML，F(xiàn)F 沒有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node, Event,Element等等，IE沒有；IE有數(shù)據(jù)島，F(xiàn)F沒有；IE跟FF創(chuàng)建HttpRequest實例的方法不一樣。等等。4用腳本寫去除字符串的前后空格Stotype.trim = function(mode)/前后去空格if (mode=left) return (this.charAt(0) = ” “ & this.length

17、 0) ? this.slice(1).trim(left) : this); elseif (mode = right) return (this.charAt(this.length - 1) = ” “ & this.length 0) ? this.slice(0, this.length - 1).trim(right) : this); else return this.trim(left).trim(right);5算出字符串中出現(xiàn)次數(shù)最多的字符是什么，出現(xiàn)了多少次/ maxLength ) /判斷原始的字符串的長度減去替代后字符串長度是否大于之前出現(xiàn)的最大的字符串長度maxLe

18、ngth = oldStr.length-str.length; /兩字符串長度相減得到最大的字符串長度result = getStr + = + maxLength /返回最大的字符串結(jié)果（字母、出現(xiàn)次數(shù)）alert(result) /彈出結(jié)果/6寫出3中使用this的典型應(yīng)用在HTML元素事件屬性中inline方式使用this關(guān)鍵字：7.最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇。這個網(wǎng)上有很多成品，主要是通過絕對定位和相對定位結(jié)合的方式，改造原有的select 標(biāo)簽和input標(biāo)簽的方法。附上javascript正則表達式的基本知識：g: 全局匹配i: 忽略大小寫 匹配一個輸入或一行的開頭，/a/匹配”an A”，而不匹配”An a”$ 匹配一個輸入或一行的結(jié)尾，/a$/匹配”An a”，而不匹配”an A