web前端線上實戰面試題

paragraph

⑵ 2020年Web前端面試題匯總(一)

今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。

1.說幾條寫JavaScript的基本規范?


1)不要在同一行聲明多個變數;


2)請使用===/!==來比較true/false或者數值;


3)使用對象字面量替代newObject這種形式;


4)減少使用全局函數,全局變數;


5)switch語句必須帶有default分支;


6)if語句必須使用大括弧;


7)for-in循環中的變數;


應該使用var關鍵字明確限定作用域;


從而避免作用域全局污染。


2.說說平衡二叉樹?


平衡二叉搜索樹(Self-balancingbinarysearchtree)


又被稱為AVL樹。


具有以下性質：


1)它是一棵空樹或它的左右兩個子樹


的高度差的絕對值不超過1，


並且左右兩個子樹都是一棵平衡二叉樹。


2)平衡二叉樹必定是二叉搜索樹，反之則不一定。


3)平衡二叉樹的常用實現方法有紅黑樹、AVL、


替罪羊樹、Treap、伸展樹等。


最小二叉平衡樹的節點的公式如下：


F(n)=F(n-1)+F(n-2)+1備註：1是根節點，


F(n-1)是左子樹的節點數量，


F(n-2)是右子樹的節點數量。


3.清除浮動和解決垂直外邊距重疊的解決方案?


問題描述:


1)父元素沒有設置寬高，尺寸由子元素撐起;


子元素一旦浮動，父元素高度會發生塌陷。


2)子元素設置margin-top會作用的父元素的margin-top;


此時會造成垂直外邊距重疊。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同點:


都用於瀏覽器端存儲的緩存數據;


不同點:


1)存儲內容是否發送到伺服器端


當設置了Cookie後，數據會發送到伺服器端，


造成一定的寬頻浪費;xxxstorage則會將數據保存


到本地，不會造成寬頻浪費;


2)數據存儲大小不同


Cookie數據不能超過4K，適用於會話標識;


xxxstorage數據存儲可以達到5M;


3)數據存儲的有效期限不同


cookie只在設置了Cookid過期時間


之前一直有效，即使關閉窗口或者瀏覽器;


sessionStorage,僅在關閉瀏覽器之前有效;


localStorage,數據存儲永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的瀏覽器窗口


中共享，即使是同一個頁面;


5.判斷一個單詞是否是迴文?


迴文是指把相同的詞彙或句子，


在下文中調換位置或顛倒過來，


產生首尾回環的情景，


叫做迴文，也叫回環。


比如cacac，redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不藉助臨時變數，進行兩個整數的交換?


輸入a=3,b=1,


輸出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.請寫出至少5個html5新增的標簽，並說明其語義和應用場景?


section：定義文檔中的一個章節;


nav：定義只包含導航鏈接的章節;


header：定義頁面或章節的頭部;


它經常包含logo、頁面標題和導航性的目錄。


footer：定義頁面或章節的尾部;


它經常包含版權信息、法律信息鏈接和反饋建議用的地址。


aside：定義和頁面內容關聯度較低的內容，


如果被刪除，剩下的內容仍然很合理。


8.get和post請求在緩存方面的區別?


get請求類似於查找的過程，用戶獲取數據，


可以不用每次都與資料庫連接，所以可以使用緩存。


post不同，post做的一般是修改和刪除的工作，


所以必須與資料庫交互，所以不能使用緩存。


因此get請求適合於請求緩存。


9.如何解決非同步回調地獄?


promise、generator、async/await


10.圖片的懶載入和預載入?


預載入：提前載入圖片，


當用戶需要查看時可直接


從本地緩存中渲染。


懶載入：懶載入的主要目的


是作為伺服器前端的優化，


減少請求數或延遲請求數。


兩種技術的本質：


兩者的行為是相反的，


一個是提前載入，


一個是遲緩甚至不載入。


懶載入對伺服器前端有一定


的緩解壓力作用，


預載入則會增加伺服器前端壓力。


11.bind，apply，call的區別?


通過apply和call改變函數的this指向，


這兩個函數的第一個參數都是一樣的，


表示要改變指向的那個對象，


第二個參數，apply是數組，


而call則是arg1,arg2...這種形式。


通過bind改變this作用域


會返回一個新的函數，


這個函數不會馬上執行。


12.js怎麼控制一次載入一張圖片，載入完後再載入下一張?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


載入中

⑶ 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前端面試題小集

一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化(比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800)，請寫出大概的css代碼。


1.使用flex

//html

⑸ 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)

答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。

2、box-sizing常用的屬性有哪些?分別有什麼作用?

答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

3、Doctype作用?標准模式與兼容模式各有什麼區別?

答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

(1)繪畫 canvas;

(2)用於媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;

(5)語意化更好的內容元素，比如 article、footer、header、nav、section;

(6)表單控制項，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。

以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!

⑹ 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前端工程師面試題!收藏~

今天小編為大家准備了一份超全的Web前端工程師面試題,准備換工作參加Web前端工程師面試的小夥伴們快來和小編一起看一看這些題目吧，希望能夠對你的面試有所幫助!

一、HTML


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


§HTML5為什麼只需要寫?


§行內元素有哪些?塊級元素有哪些?空(void)元素有那些?


§頁面導入樣式時，使用link和@import有什麼區別?


§介紹一下你對瀏覽器內核的理解?


§常見的瀏覽器內核有哪些?


§html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?


§簡述一下你對HTML語義化的理解?


§HTML5的離線儲存怎麼使用，工作原理能不能解釋一下?


§瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?


§請描述一下cookies，sessionStorage和localStorage的區別?


§iframe有那些缺點?


§Label的作用是什麼?是怎麼用的?(加for或包裹)


§HTML5的form如何關閉自動完成功能?


§如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


§webSocket如何兼容低瀏覽器?(阿里)


§頁面可見性(PageVisibility)API可以有哪些用途?


§如何在頁面上實現一個圓形的可點擊區域?


§實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


§網頁驗證碼是幹嘛的，是為了解決什麼安全問題?


§tite與h1的區別、b與strong的區別、i與em的區別?


二、CSS


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


§CSS選擇符有哪些?哪些屬性可以繼承?


§CSS優先順序演算法如何計算?


§CSS3新增偽類有那些?


§如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?


§display有哪些值?說明他們的作用。


§position的值relative和absolute定位原點是?


§CSS3有哪些新特性?


§請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?


§用純CSS創建一個三角形的原理是什麼?


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


§常見兼容性問題?


§li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?


§經常遇到的瀏覽器的兼容性有哪些?原因，解決方法是什麼，常用hack的技巧?


§為什麼要初始化CSS樣式。


§absolute的containingblock計算方式跟正常流有什麼不同?


§CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?


§position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?


§對BFC規范(塊級格式化上下文：blockformattingcontext)的理解?


§CSS權重優先順序是如何計算的?


§請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式


§移動端的布局用過媒體查詢嗎?


§使用CSS預處理器嗎?喜歡那個?


§CSS優化、提高性能的方法有哪些?


§瀏覽器是怎樣解析CSS選擇器的?


§在網頁中的應該使用奇數還是偶數的字體?為什麼呢?


§margin和padding分別適合什麼場景使用?


§抽離樣式模塊怎麼寫，說出思路，有無實踐經驗?[阿里航旅的面試題]


§元素豎向的百分比設定是相對於容器的高度嗎?


§全屏滾動的原理是什麼?用到了CSS的那些屬性?


§什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?


§視差滾動效果，如何給每頁做不同的動畫?(回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做?)


§::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。


§如何修改chrome記住密碼後自動填充表單的黃色背景?


§你對line-height是如何理解的?


§設置元素浮動後，該元素的display值是多少?(自動變成display:block)


§怎麼讓Chrome支持小於12px的文字?


§讓頁面里的字體變清晰，變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)


§font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?


§position:fixed;在android下無效怎麼處理?


§如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼?(阿里)


§display:inline-block什麼時候會顯示間隙?(攜程)


§overflow:scroll時不能平滑滾動的問題怎麼處理?


§有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。


§png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp?


§什麼是Cookie隔離?(或者說：請求資源的時候不要讓它帶cookie怎麼做)


§style標簽寫在body後與body前有什麼區別?


三、JavaScript


§介紹JavaScript的基本數據類型。


§說說寫JavaScript的基本規范?


§JavaScript原型，原型鏈?有什麼特點?


§JavaScript有幾種類型的值?(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎?


§Javascript如何實現繼承?


§Javascript創建對象的幾種方式?


§Javascript作用鏈域?


§談談This對象的理解。


§eval是做什麼的?


§什麼是window對象?什麼是document對象?


§null，undefined的區別?


§寫一個通用的事件偵聽器函數(機試題)。


§[「1」,「2」,「3」].map(parseInt)答案是多少?


§關於事件，IE與火狐的事件機制有什麼區別?如何阻止冒泡?


§什麼是閉包(closure)，為什麼要用它?


§javascript代碼中的」usestrict」;是什麼意思?使用它區別是什麼?


§如何判斷一個對象是否屬於某個類?


§new操作符具體幹了什麼呢?


§用原生JavaScript的實現過什麼功能嗎?


§Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是?


§對JSON的了解?


§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?


§js延遲載入的方式有哪些?


§Ajax是什麼?如何創建一個Ajax?


§同步和非同步的區別?


§如何解決跨域問題?


§頁面編碼和被請求的資源編碼如果不一致如何處理?


§模塊化開發怎麼做?


§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)規范區別?


§requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)


§讓你自己設計實現一個requireJS，你會怎麼做?


§談一談你對ECMAScript6的了解?


§ECMAScript6怎麼寫class么，為什麼會出現class這種東西?


§非同步載入的方式有哪些?


§documen.write和innerHTML的區別?


§DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


§.call()和.apply()的含義和區別?


§數組和對象有哪些原生方法，列舉一下?


§JS怎麼實現一個類。怎麼實例化這個類


§JavaScript中的作用域與變數聲明提升?


§如何編寫高性能的Javascript?


§那些操作會造成內存泄漏?


§JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?


§jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?


§jquery中如何將數組轉化為json字元串，然後再轉化回來?


§jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝?


§jquery.extend與jquery.fn.extend的區別?


§jQuery的隊列是如何實現的?隊列可以用在哪些地方?


§談一下Jquery中的bind(),live(),delegate(),on()的區別?


§JQuery一個對象可以同時綁定多個事件，這是如何實現的?


§是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用?


§jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)


§針對jQuery性能的優化方法?


§Jquery與jQueryUI有啥區別?


§JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?


§jquery中如何將數組轉化為json字元串，然後再轉化回來?


§jQuery和Zepto的區別?各自的使用場景?


§針對jQuery的優化方法?


§Zepto的點透問題如何解決?


§jQueryUI如何自定義組件?


§需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?


§如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)


§移動端最小觸控區域是多大?


§jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,
動畫會滯後的反復執行，該如何處理呢?


§把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?


§移動端的點擊事件的有延遲，時間是多久，為什麼會有?怎麼解決這個延時?(click有300ms
延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。)


§知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能講出他們各自的優點和缺點么?


§Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?


§解釋JavaScript中的作用域與變數聲明提升?


§那些操作會造成內存泄漏?


§JQuery一個對象可以同時綁定多個事件，這是如何實現的?


§Node.js的適用場景?


§(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?


§解釋一下Backbone的MVC實現方式?


§什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


§知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


§如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,
qUnit..)?


§前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


§簡述一下Handlebars的基本用法?


§簡述一下Handlerbars的對模板的基本處理流程，如何編譯的?如何緩存的?


§用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)


§檢測瀏覽器版本版本有哪些方式?


§我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。


四、其他問題


§原來公司工作流程是怎麼樣的，如何與其他人協作的?如何誇部門合作的?


§你遇到過比較難的技術問題是?你是如何解決的?


§設計模式知道什麼是singleton,factory,strategy,decrator么?


§常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?


§頁面重構怎麼操作?


§列舉IE與其他瀏覽器不一樣的特性?


§99%的網站都需要被重構是那本書上寫的?


§什麼叫優雅降級和漸進增強?


§是否了解公鑰加密和私鑰加密。


§WEB應用從伺服器主動推送Data到客戶端有那些方式?


§對Node的優點和缺點提出了自己的看法?


§你有用過哪些前端性能優化的方法?


§http狀態碼有那些?分別代表是什麼意思?


§一個頁面從輸入URL到頁面載入顯示完成，這個過程中都發生了什麼?(流程說的越詳細越好)


§部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法?


§從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?


§除了前端以外還了解什麼其它技術么?你最最厲害的技能是什麼?


§你用的得心應手用的熟練地編輯器&開發環境是什麼樣子?


§對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?


§你怎麼看待WebApp、hybridApp、NativeApp?


§你移動端前端開發的理解?(和Web前端開發的主要區別是什麼?)


§你對加班的看法?


§平時如何管理你的項目?


§說說最近最流行的一些東西吧?常去哪些網站?


§如何設計突發大規模並發架構?


§說說最近最流行的一些東西吧?常去哪些網站?


§是否了解開源的工具bower、npm、yeoman、grunt、gulp，一個npm的包里的package.json
具備的必要的欄位都有哪些?(名稱、版本號，依賴)


§每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的?


§Git知道branch,diff,merge么?


§如何設計突發大規模並發架構?


§當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎?


§說說最近最流行的一些東西吧?平時常去哪些網站?


§知道什麼是SEO並且怎麼優化么?知道各種metadata的含義么?


§移動端(AndroidIOS)怎麼做好用戶體驗?


§簡單描述一下你做過的移動APP項目研發流程?


§你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用?


§你認為怎樣才是全端工程師(FullStackdeveloper)?


§介紹一個你最得意的作品吧?


§你有自己的技術博客嗎，用了哪些技術?


§對前端安全有什麼看法?


§是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS和CSRF)了解到什麼程度?


§項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決?。


§最近在學什麼東西?


§你的優點是什麼?缺點是什麼?


§如何管理前端團隊?


§最近在學什麼?能談談你未來3，5年給自己的規劃嗎?


§
以上就是小編今天為大家分享的關於web前端工程師面試題的文章，希望本篇文章能夠對正准備學習編程技術的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網哦!最後希望小夥伴們能夠好好准備這些問題的答案，在面試中取得好成績，成為一名優秀的web前端工程師!


§

⑻ 2019Web前端面試題及答案匯總-Jquery篇

今天小編要跟大家分享的文章是關於2019Web前端面試題及答案匯總-Jquery篇。相信最近准備參加Web前端面試的小夥伴一定不在少數，為了幫助大家順利的通過面試成為一名優秀的Web前端工程師，小編為大家准備了前端面試題系列，通過Web知識的整理以及經驗的總結，希望能幫到更多的前端面試者。

Jquery相關


1、jQuery庫中的$()是什麼?


$()函數是jQuery()函數的別稱。$()函數用於將任何對象包裹成jQuery對象，接著你就被允許調用定義在jQuery
對象上的多個不同方法。你可以將一個選擇器字元串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的jQuery對象。


2、如何找到所有HTMLselect標簽的選中項?


$('[name=selectname]:selected')


3、$(this)和this關鍵字在jQuery中有何不同?


$(this)返回一個jQuery對象，你可以對它調用多個jQuery方法，比如用text()獲取文本，用val()
獲取值等等。


而this代表當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前DOM元素。你不能對它調用jQuery方法，直到它被
$()函數包裹，例如$(this)。


4、jquery怎麼移除標簽onclick屬性?


獲得a標簽的onclick屬性:$("a").attr("onclick")


刪除onclick屬性：$("a").removeAttr("onclick")


設置onclick屬性：$("a").attr("onclick","test();")


5、jquery中addClass、removeClass、toggleClass的使用。


$(selector).addClass(class)：為每個匹配的元素添加指定的類名


$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值;


$(selector).toggleClass(class)：如果存在(不存在)就刪除(添加)一個類


$(selector).removeAttr(class);刪除class這個屬性;


6、JQuery有幾種選擇器?


(1)、基本選擇器：#id，class,element,*;


(2)、層次選擇器：parent>child，prev+next，prev~siblings


(3)、基本過濾器選擇器：:first，:last，:not，:even，:odd，:eq，:gt，:lt


(4)、內容過濾器選擇器：:contains，:empty，:has，:parent


(5)、可見性過濾器選擇器：:hidden，:visible


(6)、屬性過濾器選擇器：[attribute]，[attribute=value]，[attribute!=value]
，[attribute^=value]，[attribute$=value]，[attribute*=value]


(7)、子元素過濾器選擇器：:nth-child，:first-child，:last-child，:only-child


(8)、表單選擇器：:input，:text，:password，:radio，:checkbox，:submit等;


(9)、表單過濾器選擇器：:enabled，:disabled，:checked，:selected


7、jQuery中的Delegate()函數有什麼作用?


delegate()會在以下兩個情況下使用到：


1)、如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate()了，代碼如下：


$("ul").delegate("li","click",function(){$(this).hide();});


2)、當元素在當前頁面中不可用時，可以使用delegate()


8、$(document).ready()方法和window.onload有什麼區別?


(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全載入到瀏覽器後才執行的。


(2)、$(document).ready()方法可以在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。


9、如何用jQuery禁用瀏覽器的前進後退按鈕?


實現代碼如下：



$(document).ready(function(){

window.history.forward(1);

//ORwindow.history.forward(-1);

});



10、jquery中$.get()提交和$.post()提交有區別嗎?


相同點：都是非同步請求的方式來獲取服務端的數據;


異同點：


1、請求方式不同：$.get()方法使用GET方法來進行非同步請求的。$.post()方法使用POST方法來進行非同步請求的。


2、參數傳遞方式不同：get請求會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web伺服器的，這種傳遞是對用戶不可見的。


3、數據傳輸大小不同：get方式傳輸的數據大小不能超過2KB而POST要大的多


4、安全問題：GET方式請求的數據會被瀏覽器緩存起來，因此有安全問題。


11、寫出一個簡單的$.ajax()的請求方式?

$.ajax({

url:'http://www..com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend：function(){},

success:function(){},

error:function(){},

complete:function(){}

});

ja

以上就是小編今天為大家分享的關於2019Web前端面試題及答案匯總-a
Jquery篇的文章，希望本篇文章中的面試題能夠對正准備參加Web前端面試的小夥伴們有所幫助。想要了解更多Web前端方面的知識記得關注北大青鳥Web前端培訓官網。最後祝願小夥伴們面試成功成為一名優秀的Web前端工程師。

⑼ Web前端面試題匯總之JavaScript篇

今天小編要跟大家分享的文章是關於web前端面試題匯總之JavaScript篇。正在從事web前端學習和准備找工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

1，介紹js的基本數據類型。


Undefined、Null、Boolean、Number、String


2，介紹js有哪些內置對象?


Object是JavaScript中所有對象的父對象


數據封裝類對象：Object、Array、Boolean、Number和String


其他對象：Function、Arguments、Math、Date、RegExp、Error


3，說幾條寫JavaScript的基本規范?，


1.不要在同一行聲明多個變數。


2.請使用===/!==來比較true/false或者數值


3.使用對象字面量替代newArray這種形式


4.不要使用全局函數。


5.Switch語句必須帶有default分支


6.函數不應該有時候有返回值，有時候沒有返回值。


7.For循環必須使用大括弧


8.If語句必須使用大括弧


9.for-in循環中的變數應該使用var關鍵字明確限定作用域，從而避免作用域污染。


4，JavaScript原型，原型鏈?有什麼特點?


每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，


如果這個對象內部不存在這個屬性，那麼他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，


於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。


關系：instance.constructor.prototype=instance.__proto__


特點：


JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。


當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，如果沒有的話，


就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到Object內建對象。


functionFunc(){}


Func.prototype.name="Sean";


Func.prototype.getInfo=function(){returnthis.name;}


varperson=newFunc();


//現在可以參考


varperson=Object.create(oldObject);


console.log(person.getInfo());


//它擁有了Func的屬性和方法//"Sean"console.log(Func.prototype);


//Func{name="Sean",getInfo=function()}復制代碼


5，JavaScript有幾種類型的值?，你能畫一下他們的內存圖嗎?


棧：原始數據類型(Undefined，Null，Boolean，Number、String)


堆：引用數據類型(對象、數組和函數)


兩種類型的區別是：存儲位置不同;


原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲;


引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能;引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其


在棧中的地址，取得地址後從堆中獲得實體


6，Javascript如何實現繼承?


1、構造繼承


2、原型繼承


3、實例繼承


4、拷貝繼承


原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。


functionParent(){this.name='wang'}functionChild(){this.age=28;}
Child.prototype=newParent();//繼承了Parent，通過原型vardemo=newChild();
alert(demo.age);alert(demo.name);//得到被繼承的屬性復制代碼


7，Javascript作用鏈域?


作用域鏈的作用是保證執行環境里有權訪問的變數和函數是有序的，作用域鏈的變數只能向上訪問，變數訪問到window對象即被終止，作用域鏈向下訪問變數是不被允許的。


8，談談This對象的理解。


this總是指向函數的直接調用者(而非間接調用者);


如果有new關鍵字，this指向new出來的那個對象;


在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window;


this就是指的是當前對象


9，null，undefined的區別?


null表示一個對象被定義了，值為「空值」;


undefined表示不存在這個值。


typeofundefined//"undefined"


undefined:是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回
undefined;


例如變數被聲明了，但沒有賦值時，就等於undefined


typeofnull//"object"


null:是一個對象(空對象,沒有任何屬性和方法);


例如作為函數的參數，表示該函數的參數不是對象;


注意：


在驗證null時，一定要使用===，因為==無法分別null和undefined


undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：


(1)變數被聲明了，但沒有賦值時，就等於undefined。


(2)調用函數時，應該提供的參數沒有提供，該參數等於undefined。


(3)對象沒有賦值的屬性，該屬性的值為undefined。


(4)函數沒有返回值時，默認返回undefined。


null表示"沒有對象"，即該處不應該有值。典型用法是：


(1)作為函數的參數，表示該函數的參數不是對象。


(2)作為對象原型鏈的終點。


10，["1","2","3"].map(parseInt)答案是多少?


[1,NaN,NaN]因為parseInt需要兩個參數(val,radix)，


其中radix表示解析時用的基數。


map傳了3個(element,index,array)，對應的radix不合法導致解析失敗。


以上就是小編今天為大家分享的關於web前端面試題匯總之JavaScript篇的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。

⑽ Web前端5道面試題

1.請說明ECMAScript,JavaScript,Jscript之間的關系?

ECMAScript提供腳本語言必須遵守的規則、

細節和准則，是腳本語言的規范。

比如：ES5，ES6就是具體的一js版本。

JavaScript是ECMAScript的一個分支版本,

JavaScript實現了多數ECMA-262中

描述的ECMAScript規范，但存在少數差異。

JScript是微軟公司對ECMA-262語言規范的

一種實現,除了少數例外(這是為了保持向後兼容),

微軟公司宣稱JScript完全實現了ECMA標准.

關系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在語法上沒有多大的區別;

只不過一個是NetScape公司的,一個是微軟的;

IE系列默認是JScript,其它的則反之用JavaScript。


2.頁面載入過程中可能觸發哪些事件?它們的順序是?

頁面載入時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功

執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件


3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?

不會,JS中能夠進行變數作用域提升,

把所有變數、函數的聲明提升到當前

作用域的最前面,但不進行賦值操作;

所以可能造成獲取的值是undefined。


4.什麼是hash,以及hashchange事件?

先了解下什麼是hash:hash即URL中"#"字元後面的部分。

a)使用瀏覽器訪問網頁時，

如果網頁URL中帶有hash，

頁面就會定位到id(或name)

與hash值一樣的元素的位置;

b)hash還有另一個特點，

它的改變不會導致頁面重新載入;

c)hash值瀏覽器是不會隨請求發送到伺服器端的;

d)通過window.location.hash屬性獲取和設置hash值。

window.location.hash值的變化會直接

反應到瀏覽器地址欄(#後面的部分會發生變化)，同時，瀏覽器地址欄hash值的變化也會觸發

window.location.hash值的變化，

從而觸發onhashchange事件。

再來了解下什麼是hashchange事件:

a)當URL的片段標識符更改時，

將觸發hashchange事件(跟在#符號後面的URL部分，包括#符號)b)

hashchange事件觸發時，

事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。


5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?

CDN又稱為內容分發網路;本意在於

盡可能避開互聯網上有可能影響數據

傳輸速度和穩定性的瓶頸和環節，

使內容傳輸的更快、更穩定。

主要目的:

解決因分布、帶寬、伺服器性能帶來的訪問延遲問題，

適用於站點加速、點播、直播等場景。

使用戶可就近取得所需內容，解決Internet網路擁擠的狀況，

提高用戶訪問網站的響應速度和成功率。

缺點:

a)實施復雜,投資大;

b)目前大部分的CDN還只是對靜態內容加速，

對動態加速效果不好;

而雙線對動態加速的效果跟靜態是一樣的。