web前端上機題

paragraph

『肆』 web前端面試經常問到的面試題有哪些

Web前端經常被問到的面試題及答案

一、HTML+CSS

1.對WEB標准以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;

2.xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時載入

前者無兼容性，後者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

後者優先順序高

7.前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js

8.css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些數據類型

Object number function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?

強制(parseInt,parseFloat,number)

隱式(== – ===)

3.split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字元串

4.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

7.IE和標准下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

9.call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據

使用eval parse 鑒於安全性考慮 使用parse更靠譜

11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

『伍』 Web前端面試之css高頻面試題

今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。


1.什麼是BFC機制


BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。


·___シ⑻跫(以下任意一條)


§_loat的值不為none


§_verflow的值不為visible


§_isplay的值為table-cell、tabble-caption和inline-block之一


§_osition的值不為static或則releative中的任何一個


在IE下,Layout,可通過zoom:1_シ


·___FC布局與普通文檔流布局區別:


BFC布局規則:


1._浮動的元素會被父級計算高度(父級元素觸發了BFC)


2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)


3._margin不會傳遞給父級(父級觸發BFC)


4._屬於同一個BFC的兩個相鄰元素上下margin會重疊


5._普通文檔流布局:浮動的元素是不會被父級計算高度


6._非浮動元素會覆蓋浮動元素的位置


7._margin會傳遞給父級元素


8._兩個相鄰元素上下的margin會重疊


·___⒅械撓τ


§_柚_argin重疊


§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)


§_允視α嚼覆季


§_梢宰柚乖乇桓《馗哺


2.CSS3中新增的選擇器以及屬性


這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章


·___糶匝≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素


E[att$="val"]
屬性att的值以"val"結尾的元素


E[att*="val"]
屬性att的值包含"val"字元串的元素


·___峁刮崩嘌≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素


E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1


E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1


E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素


E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素


E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)


E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)


E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)


E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)


E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)


E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素


·___ss3新增屬性


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3


text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3


border-colors
為邊框設置多種顏色
FF3+


boder-image
圖片邊框
FF3.5,Safari4,Chrome3


text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10


word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3


border-radius
圓角邊框
FF3+,Safari4,Chrome3


opacity
不透明度
all


box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3


outline
外邊框
FF3+,safari4,chrome3,opera10


background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10


background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+


background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3


rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10


3.居中布局


·___驕又


1._行內元素:_ext-align:center


2._塊級元素:_argin:0auto


3._絕對定位和移動:_bsolute+transform


4._絕對定位和負邊距:_bsolute+margin


5._flex布局:_lex+
justify-content:center


·___怪本又


1._子元素為單行文本:_ine-height:height


2._absolute+transform


3._flex+align-items:center


4._table:_isplay:table-cell;vertical-align:
middle


5._利用position和top和負margin


·___醬怪本又_HAPE*MERGEFORMAT


1.已知元素寬高:絕對定位+margin:auto:


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


2.已知元素寬高:_遠ㄎ+負margin


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


3.absolute+transform


_div{
__width:200px;
__height:200px;
__background:
green;

__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}


4.flex+justify-content
+align-items


.box{
_height:600px;

_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_


4.清除浮動有哪些方法,各有什麼優缺點


·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如

『陸』 web前端面試十大總結，不了解一下嗎

在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母都多出一個空格的間隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本題來源：#/interview-questions)答案：String.prototype.spacify
=function(){


returnthis.split('').join('')


}


五：safeGet


題目：有時候我們需要訪問一個對象較深的層次，但是如果這個對象某個屬性不存在的話就會報錯，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


data.a.b.c//=>scriptoj


data.a.b.c.d//=>報錯，代碼停止執行


console.log('ScriptOJ')//=>不會被執行


請你完成一個safeGet函數，可以安全的獲取無限多層次的數據，一旦數據不存在不會報錯，會返回undefined，例如：


vardata={a:{b:{c:'ScriptOJ'}}}


safeGet(data,'a.b.c')//=>scriptoj


safeGet(data,'a.b.c.d')//=>返回undefined


safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined


console.log('ScriptOJ')//=>列印ScriptOJ


答案：


constsafeGet=(o,path)=>{


try{


returnpath.split('.').rece((o,k)=>o[k],o)


}catch(e){


returnvoid666


}


}


六：判斷兩個矩形是否重疊


題目：用一個對象的數據來表示一個矩形的位置和大小：


{


x:100,


y:100,


width:150,


height:250


}


它表示一個寬為150高為250的矩形在頁面上的(100,100)的位置。


請你完成一個函數isOverlap可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如：


constrect1={x:100,y:100,width:100,height:100}


constrect2={x:150,y:150,width:100,height:100}


isOverlap(rect1,rect2)//=>true


答案：


//原理：#/find-two-rectangles-overlap/


constisOverlap=(rect1,rect2)=>{


constl1={x:rect1.x,y:rect1.y}


constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}


constl2={x:rect2.x,y:rect2.y}


constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}


if(


l1.x>r2.x||


l2.x>r1.x||


l1.y>r2.y||


l2.y>r1.y


)returnfalse


returntrue


}


七：按下標插入


題目：現在有一個數組存放字元串數據：


['item1','item2','item3','item4','item5']


有另外一個數組存放一組對象：


[


{content:'section1',index:0},


{content:'section2',index:2}


]


它每個對象表示的是會往原來的數組的index坐標插入content數據(index不會重復)：


01234


item1itme2item3item4item5


^^


||


section1section2


最後結果是：['section1','item1','item2','section2','item3','item4',
'item5']


請你完成injectSections函數，可以達到上述的功能：


injectSections(


['item1','item2','item3','item4','item5'],


[


{content:'section1',index:0},


{content:'section2',index:2}


]


)//=>['section1','item1','item2','section2','item3','item4',
'item5']


答案：


constinjectSections=(items,sections)=>{


/*需要插入坐標對應數據存放到map裡面*/


constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))


/*新建一個數組，然後往裡面push原來數組的數據*/


returnitems.rece((ret,item,index)=>{


/*push的時候先檢查map裡面有沒有，有的話先pushmap裡面的數據*/


if(sectionsMap.has(index))ret.push(sectionsMap.get(index))


/*再push原來的數據*/


ret.push(item)


returnret


},[])


}


八：數組拍平(二)


題目：編寫一個JavaScriptgenerator函數，接受一個僅包含數字的多維數組
，返回一個迭代器，可以遍歷得到它拍平以後的結果。例如：


constnumbers=flatten2([1,[[2],3,4],5])


numbers.next().value//=>1


numbers.next().value//=>2


numbers.next().value//=>3


numbers.next().value//=>4


numbers.next().value//=>5


答案：


function*flatten2(arr){


for(leti=0;i

constitem=arr[i]


/*yield*的使用可以大大簡化程序編寫*/


Array.isArray(item)?yield*flatten2(item):yielditem;


}


}


/*用flatten2來完成flatten也是很方便的*/


//constflatten=(arr)=>[...flatten2(arr)]


九：判斷兩個Set是否相同


題目：完成isSameSet函數，它接受了兩個Set對象作為參數，請你返回true/false來表明這兩個set
的內容是否完全一致，例如：


consta={}


constb=1


constc='ScriptOJ'


constset1=newSet([a,b,c])


constset2=newSet([a,c,b])


isSameSet(set1,set2)//=>true


答案：


//codefrom#/js-example.html


/*這道題不能簡單地使用sort，使用sort並不靠譜。因為Set裡面的內容可能有很多種類


*字元串、對象、數字，不同類型之間是不可對比的，所以排序結果並不會一致


*


*最好的方式是按照數學上集合相等的定義：


*A=B當且僅當A是B的子集並且B是A的子集。


*


*這種判斷方式還可以用在對象、map等其他數據類型的判斷當中。


*/


constisSameSet=(s1,s2)=>{


/*獲取一個集合所有的值，判斷另外一個集合是否全部包含該這些值*/


constisSame=(a,b)=>{


constvalues=[...a]


for(letvalofvalues){


/*及時跳出循環，可以降低演算法復雜度*/


if(!b.has(val))returnfalse


}


returntrue


}


/*a包含b，b包含a，那麼兩個集合相同*/


returnisSame(s1,s2)&&isSame(s2,s1)


}


/*By陳小俊*/


//constisSameSet=(set1,set2)=>


//[...set1].every((o)=>set2.has(o))&&


//[...set2].every((o)=>set1.has(o))


十：記憶化斐波那契函數(Memoization)


題目：斐波那契數列指的是類似於以下的數列：


1,1,2,3,5,8,13,....


也就是，第n個數由數列的前兩個相加而來：f(n)=f(n-1)+f(n-2)


請你完成fibonacci函數，接受n作為參數，可以獲取數列中第n個數，例如：


fibonacci(1)//=>1


fibonacci(2)//=>1


fibonacci(3)//=>2


...


測試程序會從按順序依次獲取斐波那契數列中的數，請注意程序不要超時，也不要添加額外的全局變數。


本題來源：《JavaScript語言精髓》


答案：


constfibonacci=((memo=[0,1])=>{


constfib=(n)=>{


letresult=memo[n]


if(typeofresult!=="number"){


result=fib(n-1)+fib(n-2)


memo[n]=result


}


returnresult


}


returnfib


})()
最後就是反應能力，臨場出現意外什麼的了，這就看你自己了，萬一自己一不留神說錯話了，大神給你指出來，請記得謝謝一定要謙虛！在這里小編也希望每一位web培訓班畢業的學員都能順利找到稱心的工作！


免責聲明：內容和圖片源自網路，版權歸原作者所有，如有侵犯您的原創版權請告知，我們將盡快刪除相關內容
在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！

一：字體高亮函數


題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：


constyourName='ScriptOJ'


constmyName='Jerry'


document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`


上面例子的頁面顯示如下：


0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5


請你完成highlight函數的編寫。


答案：


css:


.highlight{


color:red;


}


js:


//考察的是Taggedtemplateliterals的使用


//
#/en-US/docs/Web/JavaScript/Reference/Template_literals


consthighlight=(strings,...args)=>{


returnstrings.rece((str,cur,i)=>{


return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`


},'')


}


二：數組去重


題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：


unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]


unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]


答案：


constunique=(arr)=>[...newSet(arr)]


三：解析字串


題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：


extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',཈']


注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。


(本題來源：《JavaScriptCookbook》)


答案：·


constextractStr=(str)=>{


constret=str.match(/:([^:.])*?./g)||[]


returnret.map((subStr)=>subStr.replace(/[:.]/g,''))


}


四：spacify題目：


請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母

『柒』 Web前端崗位面試題有哪些

前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML

1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？

二、css

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題？

1. 
   1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
   2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
   3、為什麼要初始化CSS樣式。
   4、absolute的containing block計算方式跟正常流有什麼不同？
   5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
   6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
   7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
   8、CSS權重優先順序是如何計算的？
   9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
   10、移動端的布局用過媒體查詢嗎？
   11、使用 CSS 預處理器嗎？喜歡那個？
   12、CSS優化、提高性能的方法有哪些？
   13、瀏覽器是怎樣解析CSS選擇器的？
   14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
   15、margin和padding分別適合什麼場景使用？
   16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
   17、元素豎向的百分比設定是相對於容器的高度嗎？
   18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
   19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
   20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
   21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
   22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
   23、你對line-height是如何理解的？
   24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
   25、怎麼讓Chrome支持小於12px 的文字？
   26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
   27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
   28、position:fixed;在android下無效怎麼處理？
   29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
   30、display:inline-block 什麼時候會顯示間隙？(攜程)
   31、overflow: scroll時不能平滑滾動的問題怎麼處理？
   32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
   33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
   34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
   35、style標簽寫在body後與body前有什麼區別？
   
   四、JavaScript
   
   1、介紹JavaScript的基本數據類型。
   2、說說寫JavaScript的基本規范？
   3、JavaScript原型，原型鏈 ? 有什麼特點？
   4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
   5、Javascript如何實現繼承？
   6、Javascript創建對象的幾種方式？
   7、Javascript作用鏈域?
   8、談談This對象的理解。
   9、eval是做什麼的？
   10、什麼是window對象? 什麼是document對象?
   11、null，undefined的區別？
   12、寫一個通用的事件偵聽器函數(機試題)。
   13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
   14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
   15、什麼是閉包（closure），為什麼要用它？
   16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
   17、如何判斷一個對象是否屬於某個類？
   18、new操作符具體幹了什麼呢?
   19、用原生JavaScript的實現過什麼功能嗎？
   20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
   21、對JSON的了解？
   22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
   23、js延遲載入的方式有哪些？
   24、Ajax 是什麼? 如何創建一個Ajax？
   25、同步和非同步的區別?
   26、如何解決跨域問題?
   27、頁面編碼和被請求的資源編碼如果不一致如何處理？
   28、模塊化開發怎麼做？
   29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole

   Definition）規范區別？
   30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
   31、讓你自己設計實現一個requireJS，你會怎麼做？
   32、談一談你對ECMAScript6的了解？
   33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
   34、非同步載入的方式有哪些？
   35、documen.write和 innerHTML的區別?
   36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
   37、.call() 和 .apply() 的含義和區別？
   38、數組和對象有哪些原生方法，列舉一下？
   39、JS 怎麼實現一個類。怎麼實例化這個類
   40、JavaScript中的作用域與變數聲明提升？
   41、如何編寫高性能的Javascript？
   42、那些操作會造成內存泄漏？
   43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
   44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
   45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
   46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
   47、jquery.extend 與 jquery.fn.extend的區別？
   48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
   49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
   50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
   52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
   53、針對 jQuery性能的優化方法？
   54、Jquery與jQuery UI有啥區別？
   55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
   56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
   57、jQuery和Zepto的區別？各自的使用場景？
   58、針對 jQuery 的優化方法？
   59、Zepto的點透問題如何解決？
   60、jQueryUI如何自定義組件?
   61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
   62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
   63、移動端最小觸控區域是多大？
   64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
   65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
   66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
   67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
   68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
   69、解釋JavaScript中的作用域與變數聲明提升？
   70、那些操作會造成內存泄漏？
   71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   72、Node.js的適用場景？
   (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
   73、解釋一下 Backbone 的 MVC 實現方式？
   74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
   75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
   76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
   77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
   78、簡述一下 Handlebars 的基本用法？
   79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
   80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
   檢測瀏覽器版本版本有哪些方式？
   81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
   

『捌』 求web前端開發筆試題

騰訊WEB前端開發三輪面試經歷及面試題
【一面】~=110分鍾 2013/04/24 11:20 星期三
進門靜坐30分鍾做題。

填空題+大題+問答題
>>填空題
何時接觸電腦 何時接觸前端
運算符 字元串處理 延時 display position XMLHttpRequest 正則
Jquery綁定事件 cookie
>>大題
BOM瀏覽器信息
瀏覽器兼容性舉例
閉包作用與舉例
新聞ul列表，插入3個，獲取index
全文單詞首字母大寫
ajax過程
>>邏輯題
任何時間分針和時針夾角
文章單詞（字母）頻率出現最高
30分鍾等到車概率是70%，那10分鍾呢？
一個班學舞蹈的有75%，學唱歌的有85%，問同時學習舞蹈和唱歌的最多多少，最少多少？
兩個很大數的加法運算
>>我的提問
為什麼不問我框架
你覺得我哪些方面還有欠缺，覺得我如何
如果有望進入二面，什麼時候可以得到通知
>>完了之後一起下樓時
我說其他幾家公司的問題和騰訊的有比較大的區別，
區別是XXXXXX
然後他問我家在哪裡
然後說深圳還是比較適合我
我說但願還能見到你
他笑了笑

【二面】~=40分鍾 2013/04/25 14:00 星期四
面試時間是兩點鍾，兩點過幾分進入了面試官所在的包間。
進去之前樓下簽到的hr要我把一摞草稿紙帶到621房間的面試官，進門給他之後，他說那把大椅子是壞的，
要我往後坐一點（防止向前傾倒）。
開始的時候他沒怎麼說話，埋頭看著我的簡歷，於是我主動開始扯了幾句關於自己的介紹。也不知他聽到沒
有，等我說完，馬上又說：好吧，你先自我介紹下。（一臉黑線...）
期間問了我為什麼不打算考研，為什麼選擇前端，我做的最自豪的事情是什麼。
嘰哩吧啦一陣子後，他要我說說我的人生規劃和職業規劃（頗為蛋疼，這些問題不是應該HR面才會問的么
），我順著他的來，也比較xx的說了一番。
反向代理
輸入網址到出現頁面的過程（IP解析，DNS解析等）
頁面流量
堆棧
接著，問了我-1在計算機中怎麼表示，如何判斷數組A是否為數組B的子集。
然後是一個概率問題，假設長江以北有80W人，長江以南有20W人，A向B打電話算一個電話，如果打了
10W個電話，那麼長江以北打向長江以南的電話有多少個？
沒問太多問題，都是些基礎的，最後他問我有什麼問題。
>>我問了問
為什麼不問我前端的問題
如果通過二面，什麼時候可以給我回復
對我有什麼學習上的建議
面試官留言：「一把刀有刀鋒和刀背，刀鋒要磨銳利，但是刀背的鍛煉也要加強。」

【HR面】~=30分鍾 2013/04/27 20:00 星期六
進去先看上幾位面試官對我的評價，安靜時刻我跟她扯淡了幾句，緩和了下尷尬的氣氛。
然後她瞄了瞄我的簡歷，接著就問我考不考研，很明顯我的答案是不。然後她又問為什麼~
接著讓我說說自己最滿意的一件事和最不滿意的一件事，自己最大的缺點和最大的優點
扯了半天之後（此處略去20分鍾扯淡），又開始看我的簡歷，問了我項目中遇到哪些困難，我說了一個還未
解決的bug，她反問為什麼不解決，然後嘰哩吧啦了一陣子。
最後問我有沒有什麼問題。按慣例，問了問最早什麼時候給通知，然後問了問期間如果有不明白問題可以通過
什麼方式聯系她之類的。
整個過程還算順利。

HR告訴我五一之後可以查詢錄取狀態，求人品吧~

順便把在搜狐和網易的面試筆試經歷也說說吧~
>>搜狐
搜狐的太久了，記不太清楚了
那次只為攢經驗，是俺平生第一次參加公司面試。不過收獲還是有的~
時間太久了，也記不清了，沒有提交筆試題，但是還是要我去面試了。
問他有幾輪面試，告訴我因時間匆忙，只給一輪技術面，如果滿意直接HR。
大概問題記不太清。
雖然感覺答的還不錯，但是最後還是被刷了。
【技術面】~=60分鍾
-問了下我在團隊學了些什麼。
-然後就是很多「你是怎麼理解XX」。。
-XX中有 閉包，原型鏈， 框架結構等

>>網易
今天4.27，好像是3.26參加的面試，時間太久，也記得不是很清楚了。
我沒有把任何面試官當做正經的面試官，男的就是我的學長，女的就是我的學姐，僅此而已，所以每次交流都是平和的心態。
學長們（每次面我的都是個男的）時不時露出笑意，現場氣氛沒有那麼緊張。
【一面】 ~=30分鍾
閉包
IE6趨勢
框架
【二面】 ~=90分鍾
框架比較 jQuery prototype YUI
框架特點
css兼容性 IE6 bug
seaJS AMD CMD kissy
JS原型鏈 閉包
JS基礎細節
不讓談網路框架
【HR面】~=25分鍾
自我介紹
身邊人的評價
最不滿意的一件事情
規劃
為什麼不想考研
有什麼困難
薪資待遇
何時通知

『玖』 web前端經典面試題

為大家帶來一些web前端的面試題，希望可以幫助到大家啊。


1.css3有哪些新特性?


選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影


2.響應式布局怎麼理解的，響應式布局是通過什麼實現?


根據不同的屏幕載入不同的css樣式


1).移動端適配


2).一套代碼適配pc端移動端多個


3.js創建對象有哪幾種方式?


1).自面量


2).newObject


3).構造函數


4.es6有哪些新特性?


1).letconst


2).模板字元串


3).方法的簡寫屬性的簡寫


4).三點運算符


5).解構賦值


6).箭頭函數


7).setmap


8).class類


9).模塊化


5.箭頭函數和普通的方法有什麼區別?


1).箭頭函數省略了function


2).箭頭函數裡面的this指向上下文(可以改變this指向)


6.gulp可以干什麼


gulp自動化構建工具。


壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass


7.清除浮動有哪些方法。


1).浮動元素的父元素overflow:hiddenoverflow:auto


2).浮動元素的最後面加一個空div給他clear:both


3).after偽類清除浮動


.clearfix:after{


content:"";


dislpay:block;


height:0px;


clear:both;


}


4)、給父元素設置高度。


8.行內元素塊元素的區別?


1)塊元素默認獨佔一行，行內元素默認情況不獨佔一行，行內元素的的寬度就是內容的寬度


2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度


3)默認可以margin上下左右，行內默認只能margin左右不能上下。


9.網站載入速度優化?


1).圖片不失真盡量小


2).多個背景圖片合並


3).代碼壓縮代碼合並


4).js寫到頁面最底部


5).懶載入


6).不要有冗餘代碼


7).伺服器帶寬款一些


8).伺服器固態硬碟


9).開啟緩存


10.以前寫代碼什麼情況會成出現亂碼怎麼解決?


解決亂碼文件保存的編碼和設置的編碼必須保持一致


11.以前如何測試調試移動端頁面


1).首先在瀏覽器自帶的調試工具模擬器裡面調試


2).真機的內置瀏覽器調試


3).真機上面的UC裡面調試


4).真機上的微信裡面調試。

『拾』 阿里巴巴web前端開發面試題

第一部分：用CSS實現布局


讓我們一起來做一個頁面


首先，我們需要一個布局。


請使用CSS控制3個div，實現如下圖的布局。

第二部分：用javascript優化布局


由於我們的用戶群喜歡放大看頁面


於是我們給上一題的布局做一次優化。


當滑鼠略過某個區塊的時候，該區塊會放大25%，


並且其他的區塊仍然固定不動。

提示：


也許，我們其他的布局也會用到這個放大的效果哦。


可以使用任何開源代碼，包括曾經你自己寫的。


關鍵字：


javascript、封裝、復用


第三部分：處理緊急情況


好了，我們的頁面完成了。


於是我們將頁面發布上網。


突然，晴天霹靂，頁面無法訪問了，這時候，你會怎麼做？


第一題個人實現：


___
______body,_iv{margin:0;padding:0;}
______.fl{float:_eft;_isplay:_nline;}
______.bc_C{background-color:#CCC;}
______.h120{height:120px;}
______.h250{height:250px;}
______.w120{width:120px;}
______.w220{width:220px;}
______.t130{top:130px;}
______.pa{position:_bsolute;}
______.mr10{margin-right:10px;}
______.mb10{margin-bottom:10px;}
___
___
______