Web前端面試筆試題總結(jié)

Html+css
1.對WEB標準以及w3c的理解與認識。
標簽閉合,標簽小寫,不亂嵌套:提高搜索機器人的搜索幾率;
使用外聯(lián)的css和js,結(jié)構(gòu)行為表現(xiàn)的分離:文件下載與頁面加載速度更快,內(nèi)容能被更廣泛的設(shè)備所訪問;
更少的代碼和組件:容易維護,改版方便,不需要變動頁面內(nèi)容,提供打印版本而不需要復(fù)制內(nèi)容,提高網(wǎng)站的易用性。
2.Xhtml和html有什么區(qū)別。
Html(超文本標記語言)是標準通用標記語言下的一個應(yīng)用,也是一種規(guī)范,一種標準。
Xhtml(可擴展超文本標記語言)是一種置標語言,表現(xiàn)方式與html類似,不過語法上更加嚴格,主要不同:
1,所有元素必須被正確嵌套,
2,所有標記必須閉合,
3,標簽名,屬性名必須小寫字母,
4,所有的屬性必須用“”括起來,
5,所有非標簽一部分的><&都必須以編碼形式,
6,所有屬性必須要有值,
7,注釋中不要有--
8,圖片必須要有說明文字
3.css的引入方式有哪些?link和@import的區(qū)別是?
四種:內(nèi)聯(lián),內(nèi)嵌,外鏈,導(dǎo)入
區(qū)別:
1,link屬于xhtml標簽,@import完全是css提供的一種方式,link除了加載css還可以定義rss,定義rel屬性等,@import只能加載css。
2,加載順序差別:link引用的css是同時被加載的,@import引用的css會等到頁面全部被下載完才會再被加載。
3,兼容性差別,@import是css2.1提出,ie5以上才支持,link沒有兼容問題。
4,使用dom控制樣式的差別,當用javascript去控制樣式的時候,只能使用link,@import不是dom能控制的。
5,@import可以在css中再次引入其他樣式表。
4.css選擇符有哪些?哪些屬性可以繼承?優(yōu)先級如何計算?內(nèi)聯(lián)和important哪個優(yōu)先級高?
標簽選擇符,類選擇符,id選擇符
繼承的不如指定的,id>class>Tagname
Important優(yōu)先級高
5.前端頁面由哪三層構(gòu)成,分別是什么?作用是什么?
結(jié)構(gòu)層:html
由html或者xhtml負責創(chuàng)建,運用標簽對網(wǎng)頁內(nèi)容的含義作出描述。
表示層:css
由css負責創(chuàng)建,對如何顯示有關(guān)內(nèi)容做出回答。
行為層:javascript
由javascript負責創(chuàng)建,負責回答應(yīng)該如何對事件作出反應(yīng)。
6.css的基本語句構(gòu)成是?
選擇器,屬性,屬性值
7.你曾經(jīng)在哪些瀏覽器測試過兼容?這些瀏覽器的內(nèi)核分別是什么?
Ie(ie內(nèi)核),火狐(Gecko),谷歌(webkit),opera(presto)
8.<img>標簽上title與alt屬性的區(qū)別是什么?
Alt是在你的圖片因為某種原因不能加載的時候在頁面顯示的提示信息,它會直接輸出在原本加載圖片的地方,title是在鼠標懸停在圖片上的顯示的小提示,鼠標離開就沒了,絕大數(shù)html標簽都支持title。
9.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
10.描述css reset的作用和用途。
Css reset重置瀏覽器的默認css樣式,瀏覽器種類不同,默認樣式不一樣,通過使用css reset重置,讓他們統(tǒng)一,方便開發(fā)。
11.你如何對網(wǎng)站的文件和資源進行優(yōu)化?期待的解決方案包括:
1,盡可能減少http請求數(shù)(文件合并)
2,使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))
3,添加Expire/Cache-Control頭
4,啟用Gzip壓縮
5,css放在頁面最上面
6,scrip放在頁面最下面
7,避免在css中使用Expressions
8,把js和css放在外部文件中
9,減少dns查詢
10,壓縮javascript和css
11,避免重定向
12,移除重復(fù)腳本
13,配置實體標簽
14,使用ajax緩存
12.什么是語義化的html?
根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合式的標簽(代碼語義化),便于開發(fā)者的閱讀和寫出更加優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析。
13.清除浮動有幾種方式?各自的優(yōu)缺點是?
1,父級定義height(優(yōu)點:代碼少,簡單易掌握;缺點:只適合固定高度元素,無法高度自適應(yīng))
2,結(jié)尾處使用空標簽清除浮動:Clear:both(優(yōu)點:理論上能清除所有標簽的浮動,簡單代碼少瀏覽器支持好;缺點:增加了無意義的標簽)
3,父級定義偽類after和zoom(優(yōu)點:瀏覽器支持好;缺點:代碼多,兩句代碼結(jié)合使用才能讓主流瀏覽器都支持)
4,父級定義overflow:hidden(優(yōu)點:代碼少,簡單,瀏覽器支持好;缺點:必須定義width或者zoom,同時不能定義height,不能和position配合使用)
5,父級定義overflow:auto(優(yōu)點:代碼少,簡單,瀏覽器支持好;缺點:必須定義width或者zoom,同時不能定義height,內(nèi)部元素高度超過父級會出現(xiàn)滾動條)
還有,父級一起浮動,父級定義display:table,結(jié)尾加br的clear:both等
14.瀏覽器標準模式和怪異模式之間的區(qū)別是什么?
所謂的標準模式是指,瀏覽器按W3C標準解析執(zhí)行代碼;怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼,因為不同瀏覽器解析執(zhí)行的方式不一樣,所以我們稱之為怪異模式。瀏覽器解析時到底使用標準模式還是怪異模式,與你網(wǎng)頁中的DTD聲明直接相關(guān),DTD聲明定義了標準文檔的類型(標準模式解析)文檔類型,會使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示,忽略DTD聲明,將使網(wǎng)頁進入怪異模式(quirks mode)。
標準模式中
IE6不認識!important聲明,IE7、IE8、Firefox、Chrome等瀏覽器認識;而在怪異模式中,IE6/7/8都不認識!important聲明
15.解釋下 CSS sprites,以及你要如何在頁面或網(wǎng)站中使用它
是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
頁面icon很多的情況下使用合適。
16.討論CSS hacks,條件引用或者其他?
各個瀏覽器都認識,這里給firefox用;
\9所有的ie瀏覽器可識別;
\0 是留給ie8的
+ + ie7定了;
_ _專門留給神奇的ie6;
:root #test { } :root是給ie9的,
@media all and (min-width:0px){ #test {} } 這個是老是跟ie搶著認\0的神奇的opera,必須加個\0,不然firefox,chrome,safari也都認識。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后這個是瀏覽器新貴chrome和safari的。
<!--[if IE 6]><link href="ie6.css" />< ![endif]-->這種注釋的方式只有IE瀏覽器支持,其他瀏覽器只會把它當做html注釋,不起任何作用。一般使用JavaScript或者服務(wù)器端程序判斷User Agent。
17.解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器?
從后往前判斷。瀏覽器先產(chǎn)生一個元素集合,這個集合往往由最后一個部分的索引產(chǎn)生(如果沒有索引就是所有元素的集合)。然后向上匹配,如果不符合上一個部分,就把元素從集合中刪除,直到真?zhèn)€選擇器都匹配完,還在集合中的元素就匹配這個選擇器了。
18.你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?
漸進增強 progressive enhancement:針對低版本瀏覽器進行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation:一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容。
區(qū)別:優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給,而漸進增強則是從一個非?;A(chǔ)的,能夠起作用的版本開始,并不斷擴充,以適應(yīng)未來環(huán)境的需要。降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶。
19.CSS字母大寫?
text-transform 值:
Capitalize 英文拼音的首字母大寫
Uppercase 英文拼音字母全大寫
Lowercase 英文拼音字母全小寫
20.CSS選擇器都有哪些
- 派生選擇器(用HTML標簽申明)
- id選擇器(用DOM的ID申明)
- 類選擇器(用一個樣式類名申明)
- 屬性選擇器(用DOM的屬性申明,屬于CSS2,IE6不支持,不常用,不知道就算了)
除了前3種基本選擇器,還有一些擴展選擇器,包括
- 后代選擇器(利用空格間隔,比如div .a{ })
- 群組選擇器(利用逗號間隔,比如p,div,#a{ })
21.超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么?如何解決?
答案:被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A(link,visited,hover,active)
22.瀏覽器還有默認的天生inline-block元素(擁有內(nèi)在尺寸,可設(shè)置高寬,但不會自動換行),有哪些?
答案:<input> 、<img> 、<button> 、<texterea> 、<label>。
23.px和em的區(qū)別
PX:
PX實際上就是像素,用PX設(shè)置字體大小時,比較穩(wěn)定和精確。但是這種方法存在一個問題,當用戶在瀏覽器中瀏覽我們制作的Web頁面時,如果改變了瀏覽器的縮放,這時會使用我們的Web頁面布局被打破。這樣對于那些關(guān)心自己網(wǎng)站可用性的用戶來說,就是一個大問題了。因此,這時就提出了使用“em”來定義Web頁面的字體。EM:
EM就是根據(jù)基準來縮放字體的大小。EM實質(zhì)是一個相對值,而非具體的數(shù)值。這種技術(shù)需要一個參考點,一般都是以<body>的“font-size”為基準。如WordPress官方主題Twenntytwelve的基準就是14px=1em。
另外,em是相對于父元素的屬性而計算的,如果想計算px和em之間的換算,這個網(wǎng)站不錯,輸入數(shù)據(jù)就可以px和em相互計算。狠擊這里:px和em換算
Rem:
EM是相對于其父元素來設(shè)置字體大小的,這樣就會存在一個問題,進行任何元素設(shè)置,都有可能需要知道他父元素的大小。而Rem是相對于根元素<html>,這樣就意味著,我們只需要在根元素確定一個參考值。
瀏覽器的兼容性
除了IE6-IE8r,其它的瀏覽器都支持em和rem屬性,px是所有瀏覽器都支持。
因此為了瀏覽器的兼容性,可“px”和“rem”一起使用,用"px"來實現(xiàn)IE6-8下的效果,然后使用“Rem”來實現(xiàn)代瀏覽器的效果。
24.透明度
html{ filter:alpha(opacity=50); /* ie 有效*/ -moz-opacity:0.5; /* Firefox 有效*/ opacity: 0.5; /* 通用,其他瀏覽器 有效*/ }
Javascript
1.javascript的typeof返回哪些數(shù)據(jù)類型?
Object,number,function,boolean,undefined;
2.例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換。
強制Number(),String(),Boolean(),Object();
隱式 + - == if while for in alert
3.Split()和join()的區(qū)別。
Join() 函數(shù)獲取一批字符串,然后用分隔符字符串將它們聯(lián)接起來,從而返回一個字符串。
Split() 函數(shù)獲取一個字符串,然后在分隔符處將其斷開,從而返回一批字符串。
split,是把一串字符(根據(jù)某個分隔符)分成若干個元素存放在一個數(shù)組里。而Join是把數(shù)組中的字符串連成一個長串,可以大體上認為是split的逆操作。
4.事件綁定和普通事件有什么區(qū)別?
普通添加事件的方法不支持添加多個事件,最下面的事件會覆蓋上面的,而事件綁定(addEventListener)方式添加事件可以添加多個。
5.數(shù)組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
6.Ie和dom事件流的區(qū)別?
1.執(zhí)行順序不一樣
2.參數(shù)不一樣
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方式的區(qū)別?
1、使用Get請求時,參數(shù)在URL中顯示,而使用Post方式是放在虛擬載體里面,不會顯示出來。
2、 對于get方式,服務(wù)器端用Request.QueryString獲取變量的值,對于post方式,服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。兩種方式的參數(shù)都可以用Request來獲得。
3、get傳送的數(shù)據(jù)量較小,不能大于2KB。post傳送的數(shù)據(jù)量較大,一般被默認為不受限制。但理論上,因服務(wù)器的不同而異.
4、get安全性非常低,post安全性較高。
5、get請求需注意緩存問題,post請求不需擔心這個問題。
6、post請求必須設(shè)置Content-Type值為application/x-form-www-urlencoded
7、發(fā)送請求時,因為get請求的參數(shù)都在url里,所以send函數(shù)發(fā)送的參數(shù)為null,而post請求在使用send方法時,卻需賦予其參數(shù)
9.call和apply的區(qū)別?
call方法:
語法:call(thisObj,Object)
定義:調(diào)用一個對象的一個方法,以另一個對象替換當前對象。
說明:
call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
如果沒有提供 thisObj 參數(shù),那么 Global 對象被用作 thisObj。
apply方法:
語法:apply(thisObj,[argArray])
定義:應(yīng)用某一對象的一個方法,用另一個對象替換當前對象。
說明:
如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象,那么將導(dǎo)致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數(shù),那么 Global 對象將被用作 thisObj, 并且無法被傳遞任何參數(shù)。
10.Ajax請求時,如何解析json數(shù)據(jù)?
使用eval parse 鑒于安全性考慮 使用parse更靠譜
11.什么是javascript的本地對象,內(nèi)置對象和宿主對象?
本地對象:獨立于宿主環(huán)境的ECMAScript實現(xiàn)提供的對象。它們包括:Object,F(xiàn)unction,Array,String,Boolean,Number,Date,RegExp,Error,EvalError,RangeError,ReferenceError ,SyntaxErro,TypeError URIError 可以實例化。
內(nèi)置對象 Global和Math :由ECMASscript實現(xiàn)提供的、獨立于宿主環(huán)境的所有對象不可以實例化。
宿主對象:所有的非本地對象都是宿主對象即由ECMAscript實現(xiàn)的宿主環(huán)境提供的對象。所有BOM和DOM對象都是宿主對象,document,window 等。
12.Document load和document ready的區(qū)別?
頁面加載完成有兩種事件,一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。
13.編寫一個數(shù)組去重的方法。
1.創(chuàng)建一個新的數(shù)組存放結(jié)果
2.創(chuàng)建一個空對象
3.for循環(huán)時,每次取出一個元素與對象進行對比,如果這個元素不重復(fù),則把它存放到結(jié)果數(shù)組中,同時把這個元素的內(nèi)容作為對象的一個屬性,并賦值為1,存入到第2步建立的對象中。
var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //測試數(shù)組 for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) { if (o[s[i]]) { count++;//重復(fù)+1 } else { o[s[i]] = 1;//不重復(fù)設(shè)置屬性 tmp.push(s[i])//加入新數(shù)組 }} alert(count);alert(tmp)
14.事件委托。
利用冒泡的原理,把事件加到父級上,觸發(fā)執(zhí)行效果。使用事件委托技術(shù)能讓你避免對特定的每個節(jié)點添加事件監(jiān)聽器;相反,事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會分析從子元素冒泡上來的事件,找到是哪個子元素的事件。
15.作用域鏈。
當代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的的一個作用域鏈(scope chain)。作用域鏈的用途,是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。作用域鏈的前端,始終都是當前執(zhí)行的代碼所在環(huán)境的變量對象。如果這個環(huán)境是一個函數(shù),則將其活動對象作為變量對象。
每一個函數(shù)都有自己的執(zhí)行環(huán)境,當執(zhí)行流進一個函數(shù)時,函數(shù)環(huán)境就會被推入一個環(huán)境棧中,而在函數(shù)執(zhí)行之后,棧將其環(huán)境彈出,把控制權(quán)返回給之前的執(zhí)行環(huán)境,這個棧也就是作用域鏈。
當執(zhí)行函數(shù)時,將創(chuàng)建函數(shù)的執(zhí)行環(huán)境(調(diào)用對象),并將該對象置于鏈表開頭,然后將父級函數(shù)的調(diào)用對象鏈接在之后,最后是全局對象。
16.閉包。
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中,只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量,因此可以把閉包簡單理解成"定義在一個函數(shù)內(nèi)部的函數(shù)"。所以,在本質(zhì)上,閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個,一個是讀取函數(shù)內(nèi)部的變量,另一個就是讓這些變量的值始終保持在內(nèi)存中。
1)由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中,內(nèi)存消耗很大,所以不能濫用閉包,否則會造成網(wǎng)頁的性能問題,在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是,在退出函數(shù)之前,將不使用的局部變量全部刪除。
2)閉包會在父函數(shù)外部,改變父函數(shù)內(nèi)部變量的值。所以,如果你把父函數(shù)當作對象(object)使用,把閉包當作它的公用方法(Public Method),把內(nèi)部變量當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數(shù)內(nèi)部變量的值。
17.如何阻止事件冒泡和默認事件。
//如果提供了事件對象,則這是一個非IE瀏覽器 if ( e && e.stopPropagation ) { e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 } else { window.event.cancelBubble = true; //否則,我們需要使用IE的方式來取消事件冒泡 return false; } //如果提供了事件對象,則這是一個非IE瀏覽器 if ( e && e.preventDefault ) { e.preventDefault(); //阻止默認瀏覽器動作(W3C) } else { window.event.returnValue = false; //IE中阻止函數(shù)器默認動作的方式 return false; }
18.javascript的同源策略。
一段腳本只能讀取來自于同一來源的窗口和文檔的屬性,這里的同一來源指的是主機名、協(xié)議和端口號的組合
19.JS排序算法。
var sort = { debug: function(str) { if (window.console && window.console.log) { console.log(str); } }, swap: function(arr, index1, index2) { //數(shù)組數(shù)據(jù)交換 var temp = arr[index1]; arr[index1] = arr[index2]; arr[index2] = temp; }, bubbleSort: function(arr) { //冒泡排序 this.debug("冒泡排序before:" + arr); var len = arr.length; for (var outer = 0; outer < len - 1; outer++) { //比較的輪數(shù) for (var inner = 0; inner < len - outer - 1; inner++) { //每輪比較的次數(shù) if (arr[inner] > arr[inner + 1]) { this.swap(arr, inner, inner + 1) } } this.debug("第" + (outer + 1) + "輪后:" + arr); } this.debug("冒泡排序after:" + arr); }, selectionSort: function(arr) { //選擇排序 this.debug("選擇排序before:" + arr); var min, len = arr.length; for (var outer = 0; outer < len - 1; outer++) { min = outer; // 比較最小項目和第outer項之后的剩余數(shù)組項, 以尋找更小項 for (var inner = outer + 1; inner < len; inner++) { if (arr[inner] < arr[min]) { min = inner; this.debug("min--" + min); } } this.swap(arr, outer, min); this.debug("第" + (outer + 1) + "輪后:" + arr); } this.debug("選擇排序after:" + arr); }, insertionSort: function(arr) { //插入排序 this.debug("插入排序before:" + arr); var temp, inner, len = arr.length; for (var outer = 1; outer < len; outer++) { temp = arr[outer]; inner = outer; while (inner > 0 && arr[inner - 1] >= temp) { arr[inner] = arr[inner - 1]; --inner; } arr[inner] = temp; } this.debug("插入排序after:" + arr); }, shellSort: function(arr) { //希爾排序 this.debug("希爾排序before:" + arr); var gaps = [5, 3, 1], temp; for (var g = 0; g < gaps.length; g++) { for (var i = gaps[g]; i < arr.length; i++) { temp = arr[i]; for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) { arr[j] = arr[j - gaps[g]]; } arr[j] = temp; } } this.debug("希爾排序after:" + arr); }, shellSortDynamic: function(arr) { //動態(tài)計算間隔序列的希爾排序 this.debug("動態(tài)計算間隔序列的希爾排序before:" + arr); var N = arr.length, h = 1; while (h < N / 3) { h = 3 * h + 1; } while (h >= 1) { for (var i = h; i < N; i++) { for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) { this.swap(arr, j, j - h); } } h = (h - 1) / 3; } this.debug("動態(tài)計算間隔序列的希爾排序after:" + arr); }, mergeSort: function(arr) { //歸并排序 this.debug("歸并排序before:" + arr); var len = arr.length, step = 1, left, right; var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) { var rightArr = new Array(stopRight - startRight + 1), leftArr = new Array(stopLeft - startLeft + 1), k = startRight, m = 0, n = 0; for (var i = 0; i < (rightArr.length - 1); ++i) { rightArr[i] = arr[k]; ++k; } k = startLeft; for (var i = 0; i < (leftArr.length - 1); ++i) { leftArr[i] = arr[k]; ++k; } rightArr[rightArr.length - 1] = Infinity; //哨兵值 leftArr[leftArr.length - 1] = Infinity; //哨兵值 for (var k = startLeft; k < stopRight; ++k) { if (leftArr[m] <= rightArr[n]) { arr[k] = leftArr[m]; m++; } else { arr[k] = rightArr[n]; n++ } } } if (len < 2) { return; } while (step < len) { left = 0; right = step; while (right + step <= len) { mergeArray(arr, left, left + step, right, right + step); left = right + step; right = left + step; } if (right < len) { mergeArray(arr, left, left + step, right, len); } step *= 2; } this.debug("歸并排序after:" + arr); }, quickSort: function(arr) { //快速排序 this.debug("快速排序before:" + arr); var _quickSort = function(arr) { var len = arr.length, lesser = [], greater = [], pivot, meCall = arguments.callee; if (len == 0) { return []; } pivot = arr[0]; for (var i = 1; i < len; i++) { if (arr[i] < pivot) { lesser.push(arr[i]) } else { greater.push(arr[i]) } } return meCall(lesser).concat(pivot, meCall(greater)); } this.debug("快速排序after:" + _quickSort(arr)); return _quickSort(arr); } } var search = { linearSearch: function(arr, data) { //線性查找 for (var i = 0; i < arr.length; i++) { if (arr[i] == data) { return i; } } return -1; }, binarySearch: function(arr, data) { //二分查找 適用于已排好序的線性結(jié)構(gòu) var lowerBound = 0, upperBound = arr.length - 1, mid; while (lowerBound <= upperBound) { mid = Math.floor((lowerBound + upperBound) / 2); if (arr[mid] < data) { lowerBound = mid + 1; } else if (arr[mid] > data) { upperBound = mid - 1; } else { return mid; } return -1; } } } var tempArr = [3, 6, 4, 2, 11, 10, 5]; //sort.bubbleSort(tempArr); //sort.selectionSort(tempArr); //sort.insertionSort(tempArr); //sort.shellSort(tempArr); //sort.shellSortDynamic(tempArr); //sort.mergeSort(tempArr); //sort.quickSort(tempArr);
20.解釋jsonp的原理,以及為什么不是真正的ajax。
1、Ajax直接請求普通文件存在跨域無權(quán)限訪問的問題,無論你是靜態(tài)頁面、動態(tài)網(wǎng)頁、web服務(wù)、WCF,只要是跨域請求,一律不準;
2、但是Web頁面上調(diào)用js文件時則不受是否跨域的影響(凡是擁有"src"這個屬性的標簽都擁有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判斷,當前階段如果想通過純web端(ActiveX控件、服務(wù)端代理、屬于未來的HTML5之Websocket等方式不算)跨域訪問數(shù)據(jù)就只有一種可能,那就是在遠程服務(wù)器上設(shè)法把數(shù)據(jù)裝進js格式的文件里,供客戶端調(diào)用和進一步處理;
4、有一種叫做JSON的純字符數(shù)據(jù)格式可以簡潔的描述復(fù)雜數(shù)據(jù),更妙的是JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù);
5、web客戶端通過與調(diào)用腳本一模一樣的方式,來調(diào)用跨域服務(wù)器上動態(tài)生成的js格式文件(一般以JSON為后綴),顯而易見,服務(wù)器之所以要動態(tài)生成JSON文件,目的就在于把客戶端需要的數(shù)據(jù)裝入進去。
6、客戶端在對JSON文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進行處理和展現(xiàn)了,這種獲取遠程數(shù)據(jù)的方式看起來非常像AJAX,但其實并不一樣。
7、為了便于客戶端使用數(shù)據(jù),逐漸形成了一種非正式傳輸協(xié)議,人們把它稱作JSONP,該協(xié)議的一個要點就是允許用戶傳遞一個callback參數(shù)給服務(wù)端,然后服務(wù)端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)了。
1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來”很像,目的也一樣,都是請求一個url,然后把服務(wù)器返回的數(shù)據(jù)進行處理,因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝;
2、但ajax和jsonp其實本質(zhì)上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容,而jsonp的核心則是動態(tài)添加<script>標簽來調(diào)用服務(wù)器提供的js腳本。
3、所以說,其實ajax與jsonp的區(qū)別不在于是否跨域,ajax通過服務(wù)端代理一樣可以實現(xiàn)跨域,jsonp本身也不排斥同域的數(shù)據(jù)的獲取。
4、還有就是,jsonp是一種方式或者說非強制性協(xié)議,如同ajax一樣,它也不一定非要用json格式來傳遞數(shù)據(jù),如果你愿意,字符串都行,只不過這樣不利于用jsonp提供公開服務(wù)。
總而言之,jsonp不是ajax的一個特例,哪怕jquery等巨頭把jsonp封裝進了ajax,也不能改變著一點!
21.CSS預(yù)處理。
Css預(yù)處理器定義了一種新的語言將Css作為目標生成文件,然后開發(fā)者就只要使用這種語言進行編碼工作了。預(yù)處理器通??梢詫崿F(xiàn)瀏覽器兼容,變量,結(jié)構(gòu)體等功能,代碼更加簡潔易于維護。
目前比較流行的兩種是Sass和Less,其他的還有 Stylus 、Dtcss等。不用你就out了嗎,還是要視情況而定?LESS CSS是個強大的工具,它彌補了css沒有變量、無法運算等一些“先天缺陷”。
22.原型鏈。
函數(shù)的原型對象constructor默認指向函數(shù)本身,原型對象除了有原型屬性外,為了實現(xiàn)繼承,還有一個原型鏈指針proto,該指針指向上一層的原型對象,而上一層的原型對象的結(jié)構(gòu)依然類似,這樣利用proto一直指向Object的原型對象上,而Object的原型對象用Object.proto = null表示原型鏈的最頂端,如此變形成了javascript的原型鏈繼承,同時也解釋了為什么所有的javascript對象都具有Object的基本方法。
23.你知道attribute和property的區(qū)別么。
1. 定義
Property:屬性,所有的HTML元素都由HTMLElement類型表示,HTMLElement類型直接繼承自Element并添加了一些屬性,添加的這些屬性分別對應(yīng)于每個HTML元素都有下面的這5個標準特性:id,title,lang,dir,className。DOM節(jié)點是一個對象,因此,他可以和其他的JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數(shù)據(jù)類型,對大小寫敏感,自定義的property不會出現(xiàn)在html代碼中,只存在js中。
Attribute:特性,區(qū)別于property,attribute只能是字符串,大小寫不敏感,出現(xiàn)在innerHTML中,通過類數(shù)組attributes可以羅列所有的attribute。
2. 相同之處
標準的 DOM properties 與 attributes 是同步的。公認的(非自定義的)特性會被以屬性的形式添加到DOM對象中。如,id,align,style等,這時候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實際的特性名相同。因此對于class的特性值獲取的時候要傳入“class”。
3. 不同之處
對于有些標準的特性的操作,getAttribute與點號(.)獲取的值存在差異性。如href,src,value,style,onclick等事件處理程序。
href:getAttribute獲取的是href的實際值,而點號獲取的是完整的url,存在瀏覽器差異。
4.瀏覽器兼容性上的差別
在IE<9的瀏覽器中,可以用點號和getAttribute在相互之間訪問自定義屬性。
IE<8(包括IE8種的IE7兼容模式),property和attribute相同。因為attribute對大小寫不敏感,在這種情況下,用getAttribute訪問特性的時候,瀏覽器會選擇第一次出現(xiàn)的值。
24.解釋下 JavaScript 中 this 是如何工作的。
在函數(shù)中:this 通常是一個隱含的參數(shù)。
在函數(shù)外(頂級作用域中):在瀏覽器中this 指的是全局對象;在Node.js中指的是模塊(module)的導(dǎo)出(exports)。
傳遞到eval()中的字符串:如果eval()是被直接調(diào)用的,this 指的是當前對象;如果eval()是被間接調(diào)用的,this 就是指全局對象。
25.解釋下原型繼承的原理?當查找一個對象的屬性時,JavaScript 會向上遍歷原型鏈,直到找到給定名稱的屬性為止。
26.AMD vs CommonJS?
CommonJS 是javascript模塊化編程的一種規(guī)范,主要是在服務(wù)器端模塊化的規(guī)范,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域,也就是說,在該模塊內(nèi)部定義的變量,無法被其他模塊讀取,除非定義為global對象的屬性。
CommonJS加載模塊是同步的,只有加載完成,才能執(zhí)行后面的操作,主要是由于服務(wù)端的編程模塊文件都存在于本地硬盤,所以加載較快。
AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"。異步方式加載模塊,模塊的加載不影響它后面語句的執(zhí)行。所有依賴這個模塊的語句,都定義到一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運行。
27.AMD vs CMD?
1. 對于依賴的模塊,AMD 是提前執(zhí)行,CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始,也改成可以延遲執(zhí)行(根據(jù)寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.
2. CMD 推崇依賴就近,AMD 推崇依賴前置。
3. AMD 的 API 默認是一個當多個用,CMD 的 API 嚴格區(qū)分,推崇職責單一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,沒有全局 require,而是根據(jù)模塊系統(tǒng)的完備性,提供 seajs.use 來實現(xiàn)模塊系統(tǒng)的加載啟動。CMD 里,每個 API 都簡單純粹。
4. 還有一些細節(jié)差異,具體看這個規(guī)范的定義就好,就不多說了。
28.擴展 JavaScript 內(nèi)置對象?
一般來說,業(yè)界公認的是持后一種觀點,不過如果你覺得你的代碼是可控的話,擴展內(nèi)置對象的prototype是很方便的一種方式(prototype庫中大量使用了這種手段),尤其是擴展后以原對象實例為this上下文調(diào)用,api比較美觀直接,否則的話,把對象實例作為參數(shù)傳給方法,看起來就不那么“面向?qū)ο?rdquo;了,當然,這個問題可以通過給原對象封裝一層wrap來解決,比如jquery的包裝,可以在$實例化的dom對象上調(diào)用方法,并且可以鏈式調(diào)用。
29.如何從瀏覽器的 URL 中獲取查詢字符串參數(shù)?
//正則 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } //獲取URl參數(shù) function parseUrl(url) { var parse = url.substring(url.indexOf("?") + 1), params = parse.split("&"), len = params.length, item = [], param = {}; for (var i = 0; i < len; i++) { item = params[i].split("="); param[item[0]] = item[1]; } return param; } // demo: parseUrl("www.baidu.com/js?name=baidu&age=22&page=3") // 結(jié)果 {name: "haorooms", age: "21", page: "2"}
30.什么是 "use strict"; ? 使用它的好處和壞處分別是什么?
嚴格模式
1. 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
2. 消除代碼運行的一些不安全之處,保證代碼運行的安全;
3. 提高編譯器效率,增加運行速度;
4. 為未來新版本的Javascript做好鋪墊。
缺點:
現(xiàn)在網(wǎng)站的JS 都會進行壓縮,一些文件用了嚴格模式,而另一些沒有。這時這些本來是嚴格模式的文件,被 merge 后,這個串就到了文件的中間,不僅沒有指示嚴格模式,反而在壓縮后浪費了字節(jié)。
31.常見兼容性問題?
png24位的圖片在iE6瀏覽器上出現(xiàn)背景,解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
IE6雙邊距bug:塊屬性標簽float后,又有橫行的margin情況下,在ie6顯示margin比設(shè)置的大。
浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產(chǎn)生20px的距離,解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
漸進識別的方式,從總體中逐漸排除局部。
首先,巧妙的使用“\9”這一標記,將IE游覽器從所有情況中分離出來。
接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經(jīng)獨立識別。
css .bb{ /*所有識別*/ . /*IE6、7、8識別*/ +/*IE6、7識別*/ _/*IE6識別*/ }
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法:(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
32.html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區(qū)分 HTML 和HTML5?
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲,多任務(wù)等功能的增加。
繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
新的技術(shù)webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產(chǎn)生負面影響的元素:frame,frameset,noframes;
支持HTML5新標簽:
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標簽,
瀏覽器支持新標簽后,還需要添加標簽?zāi)J的樣式:
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
如何區(qū)分: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
33.前端需要注意哪些SEO?
合理的title、description、keywords:搜索對著三項的權(quán)重逐個減小,title值強調(diào)重點即可,重要關(guān)鍵詞出現(xiàn)不要超過2次,而且要靠前,不同頁面title要有所不同;description把頁面內(nèi)容高度概括,長度合適,不可過分堆砌關(guān)鍵詞,不同頁面description有所不同;keywords列舉出重要關(guān)鍵詞即可
語義化的HTML代碼,符合W3C規(guī)范:語義化代碼讓搜索引擎容易理解網(wǎng)頁
重要內(nèi)容HTML代碼放在最前:搜索引擎抓取HTML順序是從上到下,有的搜索引擎對抓取長度有限制,保證重要內(nèi)容一定會被抓取
重要內(nèi)容不要用js輸出:爬蟲不會執(zhí)行js獲取內(nèi)容
少用iframe:搜索引擎不會抓取iframe中的內(nèi)容
非裝飾性圖片必須加alt
提高網(wǎng)站速度:網(wǎng)站速度是搜索引擎排序的一個重要指標
34.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別?
offsetWidth/offsetHeight返回值包含content + padding + border,效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding,如果有滾動條,也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 一場疫情過后,又要經(jīng)歷一次次面試,今天小編給大家分享2020前端面試題之HTML篇,非常不錯,對大家有所幫助,需要的朋友參考下吧2020-03-25
- 這篇文章主要介紹了2019大廠前端面試題小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-03-05
- 隨著疫情的不斷好轉(zhuǎn),各地都開始逐步的復(fù)工,當然對我們來說,也馬上迎來所謂的金三銀四跳槽季。今天小編給大家分享前端常見面試題,需要的朋友跟隨小編一起看看吧2020-02-27
- 這篇文章主要介紹了80道前端面試經(jīng)典選擇題匯總,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習2020-01-08
- 這篇文章主要介紹了面試官常問的web前端問題大全,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-03
- 這篇文章主要介紹了前端十幾道含答案的大廠面試題總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-01-02
- 這篇文章主要介紹了超實用前端面試題整理(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-12-19
每個前端工程師都應(yīng)該去了解的前端面試題小結(jié)(推薦)
面試對于我們每個程序員來說都是非常重要的環(huán)節(jié),掌握一些面試題技巧是非常有必要的,今天小編給大家分享幾個js有關(guān)的面試題,需要的朋友參考下吧2020-04-15