下面就簡單的說明一下web前端的組成部分。
1. UI設(shè)計(jì)部分
這是web產(chǎn)品化的第一步。這個(gè)部分通常在稍大型的公司里，被單獨(dú)設(shè)立為一個(gè)部門或者一些人來工作。主要是要掌握Photo, AI,可以很快的將創(chuàng)意轉(zhuǎn)化為平面設(shè)計(jì)圖，并制作PNG等小圖片。 同時(shí)，UI設(shè)計(jì)還要預(yù)包含用戶交互設(shè)計(jì)的元素，如何和用戶交互的基本原型等。
2. HTML/CSS,頁面靜態(tài)化
這是web產(chǎn)品化的2步，就是將UI設(shè)計(jì)師的設(shè)計(jì)圖切成靜態(tài)頁面。這里的“切”不是單純的切，而是使用css里面背景色和邊框樣式等方式對設(shè)計(jì)原稿進(jìn)行解讀，并形成符合web標(biāo)準(zhǔn)的html代碼。這里web前端還需要將圖片、html頁面以及css樣式進(jìn)行合理的文件分布安排等
3.Javascript, AS 客戶端動態(tài)化
這是web產(chǎn)品化的3步，工程師使用DOM操作、AJAX，實(shí)現(xiàn)數(shù)據(jù)和服務(wù)端的通信以及本地樣式的切換。同時(shí)，由于Javascript、AS是一門動態(tài)語言，所以這部分的編碼要求web前端工程師有較好的編碼習(xí)慣，能寫高效率的OOP代碼，并對代碼進(jìn)行壓縮上線以降低帶寬消耗等。
4.Flash、Silverlight、Video 多媒體化
這部分針對不同web產(chǎn)品有不同的要求，通常要求是可以使用Flash和web、Server進(jìn)行交互，并對Flash進(jìn)行設(shè)計(jì)與開發(fā)。
5.PHP、Java等CGI, 服務(wù)端通信基本知識和編碼
這部分主要是更好的使用Ajax等技術(shù)，了解服務(wù)端的工作方式將更有利于web前端工程師工作的開展。通常優(yōu)秀的web前端工程師都是對服務(wù)端的一種開發(fā)語言很了解。
下面是webryan整理的百度web前端筆試和面試的一些題目和過程，提供給大家借鑒。
百度web前端筆試試卷上的題目：
1.判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長度為5-20
2.截取字符串a(chǎn)bcdefg的efg
3.讓一個(gè)input的背景顏色變成紅色
4。給一個(gè)頁面，寫html css
5。div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個(gè)可見區(qū)域
6。判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)
7。IE與FF腳本兼容性問題
又重新問的是1，4，6，7，這次問出題者的意圖，并且讓給出7的更多答案，以及IE FF不兼容的原因
然后看了看簡歷，沒有問簡歷上的項(xiàng)目，而是讓自己隨便談?wù)?br>1對于web客戶端技術(shù)未來趨勢發(fā)展談?wù)効捶?br>javascript + ajax=RIA
Adobe Flash AS 3
Flex
Sliveright
2web開發(fā)團(tuán)隊(duì)人員應(yīng)該如何分工協(xié)作
布局 CSS 腳本
比如腳本人員長期的積累可能鑄造類型YUI這樣的產(chǎn)品級腳本庫（亮點(diǎn)）
3web開發(fā)曾經(jīng)的團(tuán)隊(duì)有沒有別人遇到問題，什么問題，向你請教
4如果要實(shí)習(xí)，什么時(shí)候可以
5自己在開發(fā)的過程中遇到什么問題，談?wù)効捶?br>6web開發(fā)腳本開發(fā)環(huán)境用什么、調(diào)試用什么
試過aptana，現(xiàn)在就用editplus
調(diào)試肯定用firebug，ie下看頁面DOM用IEInspector
7如果有個(gè)新技術(shù)，現(xiàn)在需要掌握，你會怎么做
新技術(shù)的發(fā)現(xiàn)我一般是通過RSS工具，比如我用GoogleReader
每天有半個(gè)小時(shí)左右在看最新的資訊、技術(shù)走向
發(fā)現(xiàn)新技術(shù)，首先有個(gè)大概了解，如果有深入的必要
我一般會看他的官網(wǎng)，比如jquery，我會搜索到www.jquery.com，然后看Docs、samples
如果要用到項(xiàng)目中，有困難的問題，我會svn得到最新的這個(gè)技術(shù)的源碼，深入跟蹤進(jìn)去，看實(shí)現(xiàn)原理
一般現(xiàn)在涌現(xiàn)的技術(shù)都是opensource
提問時(shí)間
1百度web開發(fā)腳本是否有做類似YUI庫的打算
2百度web開發(fā)工程師打算招多少人
百度電話二面回憶 web開發(fā)部–web開發(fā)工程師
首先是自我介紹
然后談?wù)勛龅膚eb項(xiàng)目
然后開始問技術(shù)問題
前端開發(fā)的優(yōu)化問題
答:
產(chǎn)品發(fā)布時(shí)，js的壓縮，即函數(shù)名替換、整個(gè)文件壓縮成一行
css開發(fā)的時(shí)候 注釋寫清楚，先有個(gè)base.css，然后根據(jù)不同頁面需要再加css，發(fā)布的時(shí)候?qū)ss中的一個(gè)定義寫成一行，目的是壓縮文件大小
最終發(fā)布的時(shí)候甚至可以將css，js分別壓縮成一個(gè)文件，甚至css、js通過技巧壓縮到一個(gè)里邊（亮點(diǎn)）
這樣的目的是，減少用戶訪問web產(chǎn)品的http連接數(shù)
web前端產(chǎn)品的開發(fā)流程
答:首先根據(jù)產(chǎn)品的定位、用戶群，確定配色，然后紙上設(shè)計(jì)整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫代碼div+css構(gòu)造出頁面，然后根據(jù)功能寫腳本
參考126郵箱首頁，將所有小圖片放到一個(gè)圖片中，通過css的background-position實(shí)現(xiàn)頁面，還是為了優(yōu)化，減少http連接數(shù)
規(guī)避javascript多人開發(fā)函數(shù)重名問題
答:首先是通過命名規(guī)范，比如根據(jù)不同的開發(fā)人員實(shí)現(xiàn)的功能，在函數(shù)名加前綴，雖然函數(shù)名看起來復(fù)雜，發(fā)布的時(shí)候還是可以替換，從而優(yōu)化。
還有一種辦法是，每個(gè)開發(fā)人員都把自己的函數(shù)封裝到類中，然后調(diào)用的時(shí)候即使函數(shù)名相同，但是因?yàn)槭且?函數(shù)名來調(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. 原型鏈表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();
prototype.js實(shí)現(xiàn)的基本原理
答：
將功能封裝
比如Ajax.Request，還是有判斷瀏覽器的代碼；Position這樣的實(shí)現(xiàn)頁面元素位置的計(jì)算
prototye太大，如果一個(gè)頁面功能不需要這樣的，自己實(shí)現(xiàn)，怎么做
答：首先頁面、css、腳本分離之后，腳本中將整個(gè)模塊功能寫成一個(gè)類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.XMLHTTP’) try new ActiveXObject(’Microsoft.XMLHTTP’)
FF下面實(shí)現(xiàn)outerHTML
答：.parenet.firstChild .parent.innerHTML
這個(gè)沒答好
正確答案：原理是，get：取到這個(gè)標(biāo)簽的tagname，然后屬性循環(huán)構(gòu)造成這個(gè)標(biāo)簽的屬性
set：把字符串用insertBefore插入到這個(gè)元素前面，然后removeChild這個(gè)元素
<head>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
if(typeof(HTMLElement)!=”undefined” && !window.opera)
{
HTMLElement.prototype.__defineGetter__(”outerHTML”,function()
{
var a=this.attributes, str=”<”+this.tagName, i=0;
for(;i<a.length;i++)
if(a[i].specified)
str+=” “+a[i].name+’=”‘+a[i].value+’”‘;
if(!this.canHaveChildren)
return str+” />”;
return str+”>”+this.innerHTML+”</”+this.tagName+”>”;
});
HTMLElement.prototype.__defineSetter__(”outerHTML”,function(s)
{
var d = document.createElement(”DIV”); d.innerHTML = s;
for(var i=0; i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i], this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(”canHaveChildren”,function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
</SCRIPT>
IE、FF下面CSS的解釋區(qū)別
答：
1.png透明背景，F(xiàn)F下面沒有問題，IE需要用濾鏡通道
2.z-index在IE、FF下面的解釋問題，
IE會認(rèn)為第一個(gè)z-index=0
3.長字符串，word-wrap:break-all可以解決IE，但是FF需要overflow:hidden才行
馮舒婭補(bǔ)充：
1、有些標(biāo)簽在ff中不能用，比如button
2、濾鏡
3、鼠標(biāo)cursor:hand cursor:pointer
4、div的高度自適應(yīng)
5、對box模型解析不一樣
6、ul、ol的padding和margin
IE都能識別*，標(biāo)準(zhǔn)瀏覽器（如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開發(fā)工程師筆試問題集
1編寫一個(gè)方法 求一個(gè)字符串的字節(jié)長度
<script language=”javascript” type=”text/javascript”>
new function(s)
{
if(!arguments.length||!s) return null;
if(”"==s) return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}(”hello你好，我好,大家好！world!”);
</script>
2編寫一個(gè)方法 去掉一個(gè)數(shù)組的重復(fù)元素
<script language=”javascript” type=”text/javascript”>
Array.prototype.strip=function()
{
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++)
{
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++)
{
if(this[j]==arr[arr.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());
</script>
3說出3條以上ff和ie的腳本兼容問題
IE 有children，F(xiàn)F沒有；IE有parentElement，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實(shí)例的方法不一樣。。等等。。
4用腳本寫去除字符串的前后空格
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算出字符串中出現(xiàn)次數(shù)最多的字符是什么，出現(xiàn)了多少次
<script type=”text/javascript”>
//<![CDATA[var str ="adadfdfseffserfefsefseeffffftsdg"; //命名一個(gè)變量放置給出的字符串
var maxLength = 0; //命名一個(gè)變量放置字母出現(xiàn)的最高次數(shù)并初始化為0
var result = ''; //命名一個(gè)變量放置結(jié)果輸入
while( str != '' ){ //循環(huán)迭代開始，并判斷字符串是否為空
oldStr = str; //將原始的字符串變量賦值給新變量
getStr = str.substr(0,1); //用字符串的substr的方法得到第一個(gè)字符（首字母）
eval("str = str.replace(/"+getStr+"/g,'')"); //詳細(xì)如補(bǔ)充
if( oldStr.length-str.length > maxLength )
{ //判斷原始的字符串的長度減去替代后字符串長度是否大于之前出現(xiàn)的最大的字符串長度
maxLength = oldStr.length-str.length; //兩字符串長度相減得到最大的字符串長度
result = getStr + "=" + maxLength //返回最大的字符串結(jié)果（字母、出現(xiàn)次數(shù)）
}
}
alert(result) //彈出結(jié)果
//]]>
</script>
6寫出3中使用this的典型應(yīng)用
在HTML元素事件屬性中inline方式使用this關(guān)鍵字：
7.最后一個(gè)問題是，如何制作一個(gè)combo選項(xiàng)，就是可以輸入可以下拉菜單選擇。
這個(gè)網(wǎng)上有很多成品，主要是通過絕對定位和相對定位結(jié)合的方式，改造原有的select 標(biāo)簽和input標(biāo)簽的方法。
附上javascript正則表達(dá)式的基本知識：
g: 全局匹配
i: 忽略大小寫
^ 匹配一個(gè)輸入或一行的開頭，/^a/匹配”an A”，而不匹配”An a”
$ 匹配一個(gè)輸入或一行的結(jié)尾，/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è)字?jǐn)?shù)字符，/d/ = /[0-9]/
D 匹配一個(gè)非字?jǐn)?shù)字符，/D/ = /[^0-9]/
n 匹配一個(gè)換行符
r 匹配一個(gè)回車符
s 匹配一個(gè)空白字符，包括n,r,f,t,v等
S 匹配一個(gè)非空白字符，等于/[^nfrtv]/
t 匹配一個(gè)制表符
v 匹配一個(gè)重直制表符
w 匹配一個(gè)可以組成單詞的字符(alphanumeric，這是我的意譯，含數(shù)字)，包括下劃線，如[w]匹配”$5.98″中的5，等于[a-zA-Z0-9]
W 匹配一個(gè)不可以組成單詞的字符，如[W]匹配”$5.98″中的$，等于[^a-zA-Z0-9
舉例：驗(yàn)證email
var myReg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
