互聯(lián)網(wǎng)公司招聘web前端筆試題目
隨著(zhù)各大互聯(lián)網(wǎng)公司設立了web前端開(kāi)發(fā)工程師、設計工程師等職位，web前端越來(lái)越得到互聯(lián)網(wǎng)企業(yè)的認可。而且其重視程度與地位也隨著(zhù)瀏覽器端的富客戶(hù)端的體現而日益提高。 眼前對html5的未來(lái)和走向，業(yè)內的預測是會(huì )和flash、silverlight等相結合，從而取代傳統的客戶(hù)端應用程序。而實(shí)現這個(gè)目標的客戶(hù)端核心工作是有web前端工程師來(lái)完成的。 從另一個(gè)角度，對于web產(chǎn)品來(lái)說(shuō)，交互和用戶(hù)體驗是產(chǎn)品的第一價(jià)值，這部分價(jià)值的體現就是在web前端�？梢哉f(shuō)web前端是一個(gè)web產(chǎn)品的長(cháng)相和談吐、行為。
下面就簡(jiǎn)單的說(shuō)明一下web前端的組成部分。
1. ui設計部分
這是web產(chǎn)品化的第一步。這個(gè)部分通常在稍大型的公司里，被單獨設立為一個(gè)部門(mén)或者一些人來(lái)工作。主要是要掌握photo, ai,可以很快的將創(chuàng )意轉化為平面設計圖，并制作png等小圖片。 同時(shí)，ui設計還要預包含用戶(hù)交互設計的元素，如何和用戶(hù)交互的基本原型等。
2. html/css,頁(yè)面靜態(tài)化
這是web產(chǎn)品化的2步，就是將ui設計師的設計圖切成靜態(tài)頁(yè)面。這里的“切”不是單純的切，而是使用css里面背景色和邊框樣式等方式對設計原稿進(jìn)行解讀，并形成符合web標準的html代碼。這里web前端還需要將圖片、html頁(yè)面以及css樣式進(jìn)行合理的文件分布安排等
3.javascript, as 客戶(hù)端動(dòng)態(tài)化
這是web產(chǎn)品化的3步，工程師使用dom操作、ajax，實(shí)現數據和服務(wù)端的通信以及本地樣式的切換。同時(shí)，由于javascript、as是一門(mén)動(dòng)態(tài)語(yǔ)言，所以這部分的編碼要求web前端工程師有較好的編碼習慣，能寫(xiě)高效率的oop代碼，并對代碼進(jìn)行壓縮上線(xiàn)以降低帶寬消耗等。
4.flash、silverlight、video 多媒體化
這部分針對不同web產(chǎn)品有不同的要求，通常要求是可以使用flash和web、server進(jìn)行交互，并對flash進(jìn)行設計與開(kāi)發(fā)。
5.php、java等cgi, 服務(wù)端通信基本知識和編碼
這部分主要是更好的使用ajax等技術(shù)，了解服務(wù)端的工作方式將更有利于web前端工程師工作的開(kāi)展。通常優(yōu)秀的web前端工程師都是對服務(wù)端的一種開(kāi)發(fā)語(yǔ)言很了解。
下面是webryan整理的百度web前端筆試和面試的一些題目和過(guò)程，提供給大家借鑒。
百度web前端筆試試卷上的題目：
1.判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數字、下劃線(xiàn)，總長(cháng)度為5-20
2.截取字符串a(chǎn)bcdefg的efg
3.讓一個(gè)input的背景顏色變成紅色
4。給一個(gè)頁(yè)面，寫(xiě)html css
5。div的高寬等于瀏覽器可見(jiàn)區域的高寬，瀏覽器滾動(dòng)，div始終覆蓋瀏覽器的整個(gè)可見(jiàn)區域
6。判斷一個(gè)字符串中出現次數最多的字符，統計這個(gè)次數
7。ie與ff腳本兼容性問(wèn)題
又重新問(wèn)的是1，4，6，7，這次問(wèn)出題者的意圖，并且讓給出7的更多答案，以及ie ff不兼容的原因
然后看了看簡(jiǎn)歷，沒(méi)有問(wèn)簡(jiǎn)歷上的項目，而是讓自己隨便談?wù)?/p>
1對于web客戶(hù)端技術(shù)未來(lái)趨勢發(fā)展談?wù)効捶?/p>
javascript + ajax=ria
adobe flash as 3
flex
sliveright
2web開(kāi)發(fā)團隊人員應該如何分工協(xié)作
布局 css 腳本
比如腳本人員長(cháng)期的積累可能鑄造類(lèi)型yui這樣的產(chǎn)品級腳本庫(亮點(diǎn))
3web開(kāi)發(fā)曾經(jīng)的'團隊有沒(méi)有別人遇到問(wèn)題，什么問(wèn)題，向你請教
4如果要實(shí)習，什么時(shí)候可以
5自己在開(kāi)發(fā)的過(guò)程中遇到什么問(wèn)題，談?wù)効捶?/p>
6web開(kāi)發(fā)腳本開(kāi)發(fā)環(huán)境用什么、調試用什么
試過(guò)aptana，現在就用editplus
調試肯定用firebug，ie下看頁(yè)面dom用ieinspector
7如果有個(gè)新技術(shù)，現在需要掌握，你會(huì )怎么做
新技術(shù)的發(fā)現我一般是通過(guò)rss工具，比如我用googlereader
每天有半個(gè)小時(shí)左右在看最新的資訊、技術(shù)走向
發(fā)現新技術(shù)，首先有個(gè)大概了解，如果有深入的必要
我一般會(huì )看他的官方的網(wǎng)站，比如jquery，我會(huì )搜索到www.jquery.com，然后看docs、samples
如果要用到項目中，有困難的問(wèn)題，我會(huì )svn得到最新的這個(gè)技術(shù)的源碼，深入跟蹤進(jìn)去，看實(shí)現原理
一般現在涌現的技術(shù)都是opensource
提問(wèn)時(shí)間
1百度web開(kāi)發(fā)腳本是否有做類(lèi)似yui庫的打算
2百度web開(kāi)發(fā)工程師打算招多少人
百度電話(huà)二面回憶 web開(kāi)發(fā)部–web開(kāi)發(fā)工程師
首先是自我介紹
然后談?wù)勛龅膚eb項目
然后開(kāi)始問(wèn)技術(shù)問(wèn)題
前端開(kāi)發(fā)的優(yōu)化問(wèn)題
答:
產(chǎn)品發(fā)布時(shí)，js的壓縮，即函數名替換、整個(gè)文件壓縮成一行
css開(kāi)發(fā)的時(shí)候 注釋寫(xiě)清楚，先有個(gè)base.css，然后根據不同頁(yè)面需要再加css，發(fā)布的時(shí)候將css中的一個(gè)定義寫(xiě)成一行，目的是壓縮文件大小
最終發(fā)布的時(shí)候甚至可以將css，js分別壓縮成一個(gè)文件，甚至css、js通過(guò)技巧壓縮到一個(gè)里邊(亮點(diǎn))
這樣的目的是，減少用戶(hù)訪(fǎng)問(wèn)web產(chǎn)品的http連接數
web前端產(chǎn)品的開(kāi)發(fā)流程
答:首先根據產(chǎn)品的定位、用戶(hù)群，確定配色，然后紙上設計整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫(xiě)代碼div+css構造出頁(yè)面，然后根據功能寫(xiě)腳本
參考126郵箱首頁(yè)，將所有小圖片放到一個(gè)圖片中，通過(guò)css的background-position實(shí)現頁(yè)面，還是為了優(yōu)化，減少http連接數
規避javascript多人開(kāi)發(fā)函數重名問(wèn)題
答:首先是通過(guò)命名規范，比如根據不同的開(kāi)發(fā)人員實(shí)現的功能，在函數名加前綴，雖然函數名看起來(lái)復雜，發(fā)布的時(shí)候還是可以替換，從而優(yōu)化。
還有一種辦法是，每個(gè)開(kāi)發(fā)人員都把自己的函數封裝到類(lèi)中，然后調用的時(shí)候即使函數名相同，但是因為是要類(lèi).函數名來(lái)調用，所以也減少了重復的可能性。
javascript面向對象中繼承實(shí)現
答：我是用prototype.js extend.js擴展
然后子類(lèi)中parent.initialize()…
答的不好
正確答案：
// 1. 構造器
function animal() {};
function mammal() {};
function canine() {};
function dog() {};
// 2. 原型鏈表
mammal.prototype = new animal();
canine.prototype = new mammal();
dog.prototype = new canine();
prototype.js實(shí)現的基本原理
答：
將功能封裝
比如ajax.request，還是有判斷瀏覽器的代碼;position這樣的實(shí)現頁(yè)面元素位置的計算
prototye太大，如果一個(gè)頁(yè)面功能不需要這樣的，自己實(shí)現，怎么做
答：首先頁(yè)面、css、腳本分離之后，腳本中將整個(gè)模塊功能寫(xiě)成一個(gè)類(lèi)var do={}
其中初始化函數init:function(){}，然后最后做do.init()
其中init會(huì )對頁(yè)面上form中需要交互的元素綁定事件，比如$(’input1′).onclick=function(){}
ie、ff下面腳本的區別
答：
1.ie有outerhtml，ff沒(méi)有
2.頁(yè)面元素id，ie可以直接取，ff必須document.getelementbyid()
3.ajax里邊f(xié)f是new xmlhttprequest，而ie是
try new activexobject(’msxml2.xmlhttp’) try new activexobject(’microsoft.xmlhttp’)
ff下面實(shí)現outerhtml
答：.parenet.firstchild .parent.innerhtml
這個(gè)沒(méi)答好
正確答案：原理是，get：取到這個(gè)標簽的tagname，然后屬性循環(huán)構造成這個(gè)標簽的屬性
set：把字符串用before插入到這個(gè)元素前面，然后removechild這個(gè)元素
ie、ff下面css的解釋區別
答：
1.png透明背景，ff下面沒(méi)有問(wèn)題，ie需要用濾鏡通道
2.z-index在ie、ff下面的解釋問(wèn)題，
ie會(huì )認為第一個(gè)z-index=0
3.長(cháng)字符串，word-wrap:break-all可以解決ie，但是ff需要overflow:hidden才行
馮舒婭補充：
1、有些標簽在ff中不能用，比如button
2、濾鏡
3、鼠標cursor:hand cursor:pointer
4、div的高度自適應
5、對box模型解析不一樣
6、ul、ol的padding和margin
ie都能識別*，標準瀏覽器(如ff)不能識別*;
ie6能識別*，但不能識別 !important;
ie7能識別*，也能識別 !important;
ff不能識別*，但能識別 !important;
例如style=”*width:10px;!important width:20px;”
這樣在ie6下寬度為10px,在ie7下寬度時(shí)20px
web前端技術(shù)的展望
答：javascript ajax;flash as;flex;sliveright
附上網(wǎng)上的百度web開(kāi)發(fā)工程師筆試問(wèn)題集
1編寫(xiě)一個(gè)方法 求一個(gè)字符串的字節長(cháng)度
2編寫(xiě)一個(gè)方法 去掉一個(gè)數組的重復元素
3說(shuō)出3條以上ff和ie的腳本兼容問(wèn)題
ie 有children，ff沒(méi)有;ie有parentelement，ff沒(méi)有;ie有innertext,outertext,outerhtml，ff 沒(méi)有;ff有htmlelement,htmldivelement,xmldocument,documentfragment,node, event,element等等，ie沒(méi)有;ie有數據島，ff沒(méi)有;ie跟ff創(chuàng )建httprequest實(shí)例的方法不一樣。。等等。。
4用腳本寫(xiě)去除字符串的前后空格
string.prototype.trim = function(mode)
{//前后去空格
if (mode==’left’) {
return ((this.charat(0) == ” “ && this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (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算出字符串中出現次數最多的字符是什么，出現了多少次
6寫(xiě)出3中使用this的典型應用
在html元素事件屬性中inline方式使用this關(guān)鍵字：
7.最后一個(gè)問(wèn)題是，如何制作一個(gè)combo選項，就是可以輸入可以下拉菜單選擇。
這個(gè)網(wǎng)上有很多成品，主要是通過(guò)絕對定位和相對定位結合的方式，改造原有的select 標簽和input標簽的方法。
附上javascript正則表達式的基本知識：
g: 全局匹配
i: 忽略大小寫(xiě)
^ 匹配一個(gè)輸入或一行的開(kāi)頭，/^a/匹配”an a”，而不匹配”an a”
$ 匹配一個(gè)輸入或一行的結尾，/a$/匹配”an a”，而不匹配”an a”
* 匹配前面元字符0次或多次，/ba*/將匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba*/將匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/將匹配b,ba
(x) 匹配x保存x在名為$1…$9的變量中
x|y 匹配x或y
{n} 精確匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配這個(gè)集合中的任一一個(gè)字符(或元字符)
[^xyz] 不匹配這個(gè)集合中的任何一個(gè)字符
[b] 匹配一個(gè)退格符
b 匹配一個(gè)單詞的邊界
b 匹配一個(gè)單詞的非邊界
cx 這兒，x是一個(gè)控制符，/cm/匹配ctrl-m
d 匹配一個(gè)字數字符，/d/ = /[0-9]/
d 匹配一個(gè)非字數字符，/d/ = /[^0-9]/
n 匹配一個(gè)換行符
r 匹配一個(gè)回車(chē)符
s 匹配一個(gè)空白字符，包括n,r,f,t,v等
s 匹配一個(gè)非空白字符，等于/[^nfrtv]/
t 匹配一個(gè)制表符
v 匹配一個(gè)重直制表符
w 匹配一個(gè)可以組成單詞的字符(alphanumeric，這是我的意譯，含數字)，包括下劃線(xiàn)，如[w]匹配”$5.98′中的5，等于[a-za-z0-9]
w 匹配一個(gè)不可以組成單詞的字符，如[w]匹配”$5.98′中的$，等于[^a-za-z0-9
舉例：驗證email
var myreg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myreg.test(stremail)) return true;
【互聯(lián)網(wǎng)公司招聘web前端筆試題目】相關(guān)文章：
騰訊前端筆試題目01-15
電子類(lèi)公司招聘筆試題目11-08
web前端簡(jiǎn)歷封面09-22
比亞迪招聘筆試題目06-25
華為招聘筆試題目02-11
搜狐招聘筆試題目12-18
編輯招聘筆試題目03-06
策劃招聘筆試題目03-04
Java招聘筆試題目03-03