也許你須要點實用的-Web前端筆試題

時間 2019-11-10

標籤也許須要實用 web 前端筆試欄目 HTML 简体版

原文原文鏈接

以前發的一篇博客裏沒有附上答案，如今有空整理了下發出來，但願能幫助到正在找工做的你，仍是那句話：技術只有本身真正理解了纔是本身的東西，共勉。

Web前端筆試題

Html+css

1.對WEB標準以及w3c的理解與認識。

標籤閉合，標籤小寫，不亂嵌套：提升搜索機器人的搜索概率；javascript

使用外聯的css和js，結構行爲表現的分離：文件下載與頁面加載速度更快，內容能被更普遍的設備所訪問；css

更少的代碼和組件：容易維護，改版方便，不須要變更頁面內容，提供打印版本而不須要複製內容，提升網站的易用性。html

2.Xhtml和html有什麼區別。

Html（超文本標記語言）是標準通用標記語言下的一個應用，也是一種規範，一種標準。前端

Xhtml（可擴展超文本標記語言）是一種置標語言，表現方式與html相似，不過語法上更加嚴格，主要不一樣：html5

1，全部元素必須被正確嵌套，java

2，全部標記必須閉合，jquery

3，標籤名，屬性名必須小寫字母，web

4，全部的屬性必須用「」括起來，ajax

5，全部非標籤一部分的><&都必須以編碼形式，算法

6，全部屬性必需要有值，

7，註釋中不要有--

8，圖片必需要有說明文字

3.css的引入方式有哪些？link和@import的區別是？

四種：內聯，內嵌，外鏈，導入

區別：

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選擇符有哪些？哪些屬性能夠繼承？優先級如何計算？內聯和important哪一個優先級高？

標籤選擇符，類選擇符，id選擇符

繼承的不如指定的，id>class>Tagname

Important優先級高

5.前端頁面由哪三層構成，分別是什麼？做用是什麼？

結構層：html

由html或者xhtml負責建立，運用標籤對網頁內容的含義做出描述。

表示層：css

由css負責建立，對如何顯示有關內容作出回答。

行爲層：javascript

由javascript負責建立，負責回答應該如何對事件做出反應。

6.css的基本語句構成是？

選擇器，屬性，屬性值

7.你曾經在哪些瀏覽器測試過兼容？這些瀏覽器的內核分別是什麼？

Ie（ie內核），火狐（Gecko），谷歌（webkit），opera（presto）

8.<img>標籤上title與alt屬性的區別是什麼？

Alt是在你的圖片由於某種緣由不能加載的時候在頁面顯示的提示信息，它會直接輸出在本來加載圖片的地方，title是在鼠標懸停在圖片上的顯示的小提示，鼠標離開就沒了，絕大數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重置，讓他們統一，方便開發。

11.你如何對網站的文件和資源進行優化？期待的解決方案包括:

1，儘量減小http請求數（文件合併）

2，使用CDN（內容分發網絡）

3，添加Expire/Cache-Control頭

4，啓用Gzip壓縮

5，css放在頁面最上面

6，scrip放在頁面最下面

7，避免在css中使用Expressions

8，把js和css放在外部文件中

9，減小dns查詢

10，壓縮javascript和css

11，避免重定向

12，移除重複腳本

13，配置實體標籤

14，使用ajax緩存

12.什麼是語義化的html？

根據內容的結構化（內容語義化），選擇合式的標籤（代碼語義化），便於開發者的閱讀和寫出更加優雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析。

13.清除浮動有幾種方式？各自的優缺點是？

1,父級定義height（優勢：代碼少，簡單易掌握；缺點：只適合固定高度元素，沒法高度自適應）

2，結尾處使用空標籤清除浮動：Clear:both（優勢：理論上能清除全部標籤的浮動，簡單代碼少瀏覽器支持好；缺點：增長了無心義的標籤）

3，父級定義僞類after和zoom（優勢：瀏覽器支持好；缺點：代碼多，兩句代碼結合使用才能讓主流瀏覽器都支持）

4，父級定義overflow:hidden（優勢：代碼少，簡單，瀏覽器支持好；缺點：必須定義width或者zoom，同時不能定義height，不能和position配合使用）

5，父級定義overflow:auto（優勢：代碼少，簡單，瀏覽器支持好；缺點：必須定義width或者zoom，同時不能定義height，內部元素高度超過父級會出現滾動條）

還有，父級一塊兒浮動，父級定義display:table，結尾加br的clear：both等

14.瀏覽器標準模式和怪異模式之間的區別是什麼？

所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式(quirks mode)。

標準模式中

IE6不認識!important聲明，IE7、IE8、Firefox、Chrome等瀏覽器認識；而在怪異模式中，IE6/7/8都不認識!important聲明

15.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它

是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。

頁面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的。

這種註釋的方式只有IE瀏覽器支持，其餘瀏覽器只會把它當作html註釋，不起任何做用。通常使用JavaScript或者服務器端程序判斷User Agent。

17.解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器?

從後往前判斷。瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

18.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

19.CSS字母大寫?

text-transform 值：
Capitalize 英文拼音的首字母大寫
Uppercase 英文拼音字母全大寫
Lowercase 英文拼音字母全小寫

20.CSS選擇器都有哪些

派生選擇器（用HTML標籤申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不經常使用，不知道就算了）

除了前3種基本選擇器，還有一些擴展選擇器，包括

後代選擇器（利用空格間隔，好比div .a{ }）
羣組選擇器（利用逗號間隔，好比p,div,#a{ }）

21.超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

22.瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

23.px和em的區別

PX:

PX實際上就是像素，用PX設置字體大小時，比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，若是改變了瀏覽器的縮放，這時會使用咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了。所以，這時就提出了使用「em」來定義Web頁面的字體。EM:

EM就是根據基準來縮放字體的大小。EM實質是一個相對值，而非具體的數值。這種技術須要一個參考點，通常都是以<body>的「font-size」爲基準。如WordPress官方主題Twenntytwelve的基準就是14px=1em。

另外，em是相對於父元素的屬性而計算的，若是想計算px和em之間的換算，這個網站不錯，輸入數據就能夠px和em相互計算。狠擊這裏：px和em換算

Rem:

EM是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小。而Rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值。

瀏覽器的兼容性

除了IE6-IE8r，其它的瀏覽器都支持em和rem屬性，px是全部瀏覽器都支持。

所以爲了瀏覽器的兼容性，可「px」和「rem」一塊兒使用，用"px"來實現IE6-8下的效果，而後使用「Rem」來實現代瀏覽器的效果。

24.透明度

html{

filter:alpha(opacity=50); /* ie 有效*/

-moz-opacity:0.5; /* Firefox 有效*/

opacity: 0.5; /* 通用，其餘瀏覽器有效*/

}

Javascript

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

Object，number，function，boolean，undefined；

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

強制Number(),String(),Boolean(),Object();

隱式 + - == if while for in alert

3.Split()和join()的區別。

Join() 函數獲取一批字符串，而後用分隔符字符串將它們聯接起來，從而返回一個字符串。

Split() 函數獲取一個字符串，而後在分隔符處將其斷開，從而返回一批字符串。

split，是把一串字符（根據某個分隔符）分紅若干個元素存放在一個數組裏。而Join是把數組中的字符串連成一個長串，能夠大致上認爲是split的逆操做。

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

普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件能夠添加多個。

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

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

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

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方式的區別？

1、使用Get請求時,參數在URL中顯示,而使用Post方式是放在虛擬載體裏面,不會顯示出來。

2、對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。兩種方式的參數均可以用Request來得到。

3、get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，因服務器的不一樣而異.

4、get安全性很是低，post安全性較高。

5、get請求需注意緩存問題,post請求不需擔憂這個問題。

6、post請求必須設置Content-Type值爲application/x-form-www-urlencoded

7、發送請求時,由於get請求的參數都在url裏,因此send函數發送的參數爲null,而post請求在使用send方法時,卻需賦予其參數

9.call和apply的區別？

call方法:

語法：call(thisObj，Object)

定義：調用一個對象的一個方法，以另外一個對象替換當前對象。

說明：

call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。

apply方法：

語法：apply(thisObj，[argArray])

定義：應用某一對象的一個方法，用另外一個對象替換當前對象。

說明：

若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。

若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj，而且沒法被傳遞任何參數。

10.Ajax請求時，如何解析json數據？

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

11.什麼是javascript的本地對象，內置對象和宿主對象？

本地對象：獨立於宿主環境的ECMAScript實現提供的對象。它們包括：Object，Function，Array，String，Boolean，Number，Date，RegExp，Error，EvalError，RangeError，ReferenceError ，SyntaxErro，TypeError URIError 能夠實例化。

內置對象 Global和Math ：由ECMASscript實現提供的、獨立於宿主環境的全部對象不能夠實例化。

宿主對象：全部的非本地對象都是宿主對象即由ECMAscript實現的宿主環境提供的對象。全部BOM和DOM對象都是宿主對象，document,window 等。

12.Document load和document ready的區別？

頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內的全部元素都加載完成。

13.編寫一個數組去重的方法。

1.建立一個新的數組存放結果

2.建立一個空對象

3.for循環時，每次取出一個元素與對象進行對比，若是這個元素不重複，則把它存放到結果數組中，同時把這個元素的內容做爲對象的一個屬性，並賦值爲1，存入到第2步創建的對象中。

1 var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //測試數組
2 for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
3     if (o[s[i]]) {
4         count++;//重複+1
5     } else {
6         o[s[i]] = 1;//不重複設置屬性
7         tmp.push(s[i])//加入新數組
8 }}
9 alert(count);alert(tmp)

14.事件委託。

利用冒泡的原理，把事件加到父級上，觸發執行效果。使用事件委託技術能讓你避免對特定的每一個節點添加事件監聽器；相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪一個子元素的事件。

15.做用域鏈。

當代碼在一個環境中執行時，會建立變量對象的的一個做用域鏈（scope chain）。做用域鏈的用途，是保證對執行環境有權訪問的全部變量和函數的有序訪問。做用域鏈的前端，始終都是當前執行的代碼所在環境的變量對象。若是這個環境是一個函數，則將其活動對象做爲變量對象。

每個函數都有本身的執行環境，當執行流進一個函數時，函數環境就會被推入一個環境棧中，而在函數執行以後，棧將其環境彈出，把控制權返回給以前的執行環境，這個棧也就是做用域鏈。

當執行函數時，將建立函數的執行環境(調用對象),並將該對象置於鏈表開頭，而後將父級函數的調用對象連接在以後，最後是全局對象。

16.閉包。

閉包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。閉包能夠用在許多地方。它的最大用處有兩個，一個是讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

1）因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

2）閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

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中阻止函數器默認動做的方式
　　return  false;
}

18.javascript的同源策略。

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

19.JS排序算法。

var sort = {
 debug: function(str) {
   if (window.console && window.console.log) {
   console.log(str);
   }
 },
 swap: function(arr, index1, index2) { //數組數據交換
  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++) { //比較的輪數
    for (var inner = 0; inner < len - outer - 1; inner++) { //每輪比較的次數
     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項以後的剩餘數組項, 以尋找更小項
   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) { //動態計算間隔序列的希爾排序
 this.debug("動態計算間隔序列的希爾排序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("動態計算間隔序列的希爾排序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) { //二分查找 適用於已排好序的線性結構
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。

一、Ajax直接請求普通文件存在跨域無權限訪問的問題，不管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一概不許；

二、可是Web頁面上調用js文件時則不受是否跨域的影響（凡是擁有"src"這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）；

三、因而能夠判斷，當前階段若是想經過純web端（ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；

四、有一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據，更妙的是JSON還被js原生支持，因此在客戶端幾乎能夠爲所欲爲的處理這種格式的數據；

五、web客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。

六、客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。

七、爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

一、ajax和jsonp這兩種技術在調用方式上「看起來」很像，目的也同樣，都是請求一個url，而後把服務器返回的數據進行處理，所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；

二、但ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。

三、因此說，其實ajax與jsonp的區別不在因而否跨域，ajax經過服務端代理同樣能夠實現跨域，jsonp自己也不排斥同域的數據的獲取。

四、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax同樣，它也不必定非要用json格式來傳遞數據，若是你願意，字符串都行，只不過這樣不利於用jsonp提供公開服務。

總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進了ajax，也不能改變着一點！

21.CSS預處理。

Css預處理器定義了一種新的語言將Css做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做了。預處理器一般能夠實現瀏覽器兼容，變量，結構體等功能，代碼更加簡潔易於維護。

目前比較流行的兩種是Sass和Less，其餘的還有 Stylus 、Dtcss等。不用你就out了嗎，仍是要視狀況而定？LESS CSS是個強大的工具，它彌補了css沒有變量、沒法運算等一些「先天缺陷」。

22.原型鏈。

函數的原型對象constructor默認指向函數自己，原型對象除了有原型屬性外，爲了實現繼承，還有一個原型鏈指針proto，該指針指向上一層的原型對象，而上一層的原型對象的結構依然相似，這樣利用proto一直指向Object的原型對象上，而Object的原型對象用Object.proto = null表示原型鏈的最頂端，如此變造成了javascript的原型鏈繼承，同時也解釋了爲何全部的javascript對象都具備Object的基本方法。

23.你知道attribute和property的區別麼。

1. 定義

Property：屬性，全部的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element並添加了一些屬性，添加的這些屬性分別對應於每一個HTML元素都有下面的這5個標準特性：id，title，lang，dir，className。DOM節點是一個對象，所以，他能夠和其餘的JavaScript對象同樣添加自定義的屬性以及方法。property的值能夠是任何的數據類型，對大小寫敏感，自定義的property不會出如今html代碼中，只存在js中。

Attribute：特性，區別於property，attribute只能是字符串，大小寫不敏感，出如今innerHTML中，經過類數組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訪問特性的時候，瀏覽器會選擇第一次出現的值。

24.解釋下 JavaScript 中 this 是如何工做的。

在函數中：this 一般是一個隱含的參數。

在函數外（頂級做用域中）：在瀏覽器中this 指的是全局對象；在Node.js中指的是模塊(module)的導出(exports)。

傳遞到eval()中的字符串：若是eval()是被直接調用的，this 指的是當前對象；若是eval()是被間接調用的，this 就是指全局對象。

25.解釋下原型繼承的原理?

當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性爲止。

26.AMD vs CommonJS?

CommonJS 是javascript模塊化編程的一種規範，主要是在服務器端模塊化的規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲global對象的屬性。

CommonJS加載模塊是同步的，只有加載完成，才能執行後面的操做，主要是因爲服務端的編程模塊文件都存在於本地硬盤，因此加載較快。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。異步方式加載模塊，模塊的加載不影響它後面語句的執行。全部依賴這個模塊的語句，都定義到一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

27.AMD vs CMD?

1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.
2. CMD 推崇依賴就近，AMD 推崇依賴前置。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

4. 還有一些細節差別，具體看這個規範的定義就好，就很少說了。

28.擴展 JavaScript 內置對象?

通常來講，業界公認的是持後一種觀點，不過若是你以爲你的代碼是可控的話，擴展內置對象的prototype是很方便的一種方式（prototype庫中大量使用了這種手段），尤爲是擴展後以原對象實例爲this上下文調用，api比較美觀直接，不然的話，把對象實例做爲參數傳給方法，看起來就不那麼「面向對象」了，固然，這個問題能夠經過給原對象封裝一層wrap來解決，好比jquery的包裝，能夠在$實例化的dom對象上調用方法，而且能夠鏈式調用。

29.如何從瀏覽器的 URL 中獲取查詢字符串參數?

//正則

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參數

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")

// 結果

{name: "haorooms", age: "21", page: "2"}

30.什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼?

嚴格模式

1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

2. 消除代碼運行的一些不安全之處，保證代碼運行的安全;

3. 提升編譯器效率，增長運行速度;

4. 爲將來新版本的Javascript作好鋪墊。

缺點：

如今網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

31.常見兼容性問題?

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用「+」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

/*全部識別*/

. /*IE6、7、8識別*/

+/*IE6、7識別*/

_/*IE6識別*/

}

IE下,可使用獲取常規屬性的方法來獲取自定義屬性,

也可使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統一經過getAttribute()獲取自定義屬性.

IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

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

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

繪畫 canvas

用於媒介回放的 video 和 audio 元素

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

sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，好比 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

33.前端須要注意哪些SEO?

合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標