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é)習有所幫助，也希望大家多多支持腳本之家。

最新評論