WEB前端面試題整理（一）

WEB前端面試題的記錄（一）

一、獲取非行間樣式的函數：
function getStyle(obj, attr){

if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } 
  else {
   return getComputedStyle(obj, false)[attr];
  }

}

二、javascript的本地對象、內置對象和宿主對象：
本地對象爲array、obj、regexp等能夠new實例化的對象，如Array、RegExp、String、Boolean；
內置對象爲global、Math 等不能夠實例化的對象（沒法在瀏覽器中發現global對象的存在，由於其屬性和方法都被綁定在了window對象中）；
每個宿主對象的實現都取決於不一樣的瀏覽器，即產生瀏覽器兼容性問題，其宿主爲瀏覽器自帶的document,window 等；

三、字符串反轉：利用split()方法將字符串轉化爲數組，而後利用數組的reverse()反轉方法將其反轉，而後再利用join()方法將數組轉化爲字符串。

四、window.location.hash 返回的是什麼：錨點。

五、window.location.reload()：刷新當前頁面

六、BOM對象有哪些：
window對象 ，是JS的最頂層對象，其餘的BOM對象都是window對象的屬性；
document對象，文檔對象；
location對象，瀏覽器當前URL信息；
navigator對象，瀏覽器自己信息；
screen對象，客戶端屏幕信息；
history對象，瀏覽器訪問歷史信息；

七、bind(), live(), delegate()的區別：
bind()： 綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。
live()： 方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。
delegate()： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上

八、簡述link和import的區別：
（1）link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS；
（2）link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載；
（3）link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持；
（4）link支持使用Javascript控制DOM去改變樣式；而@import不支持；

九、如何優化本身的代碼：
（1）代碼重用：聲明函數把整個過程封裝起來；把他們弄成一些對象；
（2）避免全局變量（命名空間，封閉空間，模塊化mvc..）AngularJS；
（3）拆分函數避免函數過於臃腫：單一職責原則：條理更加清晰，更好的維護；
（4）適當的註釋；
（5）內存管理，尤爲是閉包中的變量釋放；
（6）變量命名規範；

十、描述web前端性能須要考慮哪方面，優化思路是什麼：
（1）減小http請求：

1)小圖弄成大圖（雪碧圖、精靈圖）；
      2)合理的設置緩存 localStorage 、cookie；
      3)資源合併、壓縮 html代碼的最小化，壓縮體積：就是減小帶寬；

（2）一些小的js文件合併成大的js文件；
（3）將外部的js文件置底；

十一、簡述readyonly與disabled的區別：

readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效；
當表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去；

十二、HTTP協議中，GET和POST有什麼區別：

get傳送的數據長度有限制，post沒有；
get經過url傳遞，在瀏覽器地址欄可見，post是在報文中傳遞；
get提交數據的類型是文本信息，post提交數據的類型是文本信息和二進制文件；
get傳送的數據會緩存在url歷史狀態，post不會被瀏覽器緩存；
分別適用什麼場景：
    post通常用於表單提交；
    get通常用於簡單的數據查詢，嚴格要求不是那麼高的場景；

1三、HTTP狀態消息分別表示什麼：

200：請求已成功，請求所但願的響應頭或數據體將隨此響應返回。
302：請求的資源臨時從不一樣的 URI響應請求。因爲這樣的重定向是臨時的，客戶端應當繼續向原有地址發送之後的請求。只有在Cache-Control或Expires中進行了指定的狀況下，這個響應纔是可緩存的。
304：若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。304響應禁止包含消息體，所以始終以消息頭後的第一個空行結尾。
403：服務器已經理解請求，可是拒絕執行它。
404：請求失敗，請求所但願獲得的資源未被在服務器上發現。
500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

1四、列舉js數組類型中的經常使用方法：

方法               描述
concat()：鏈接兩個或更多的數組，並返回結果。
join()：把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()：刪除並返回數組的最後一個元素。
push()：向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()：顛倒數組中元素的順序。
shift()：刪除並返回數組的第一個元素。
slice()：從某個已有的數組返回選定的元素。
sort()：對數組的元素進行排序。
splice()：刪除元素，並向數組添加新元素。
toSource()：返回該對象的源代碼。
toString()：把數組轉換爲字符串，並返回結果。
toLocaleString()：把數組轉換爲本地數組，並返回結果。
unshift()： 向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()： 返回數組對象的原始值

1五、列舉經常使用的js框架以及分別適用的領域：

jquery：簡化了js的一些操做，而且提供了一些很是好用的API。
jquery ui、jquery-easyui：在jqeury的基礎上提供了一些經常使用的組件 日期，下拉框，表格這些組件。
require.js、sea.js（阿里的玉帛）+》模塊化開發使用的。
jquery mobile：是jquery本身出的支持移動端網頁開發，不過很是笨重，可是功能很是強大。
zepto：精簡版的jquery，經常使用於手機web前端開發功能,touch。

1六、同步和異步的區別：

同步：阻塞模式。
舉例：瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面（張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯）；即指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步：非阻塞模式。
舉例：瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新（張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃）；即指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回系統會通知進程進行處理，這樣能夠提升執行的效率；

1七、ajax的缺點：
（1）ajax不支持瀏覽器back按鈕；
（2）安全問題 AJAX暴露了與服務器交互的細節；
（3）對搜索引擎的支持比較弱；//不會執行你的js腳本，只會操做你的網頁源代碼
（4）破壞了程序的異常機制；
（5）沒法跨域請求，解決方式：jsonp；

1八、盒子模型：

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

1九、行內元素有哪些，塊級元素有哪些，空(void)元素有哪些：

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

20、CSS實現垂直水平居中：

div使用絕對定位；指定寬高；top爲50%；left爲50%；此時div的左上頂點居中，因此margin-left爲負（-）寬的一半；margin-top爲負（-）高的一半。

2一、簡述一下src與href的區別：

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。若是在文檔中添加<link href=」common.css」rel=」stylesheet」/>，那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理，所以建議使      用link方式來加載css，而不是使用@import方式。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內，所以要將js腳本放在底部而非頭部。
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

2二、什麼是CSS Hack：

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。
IE瀏覽器Hack通常分爲三種：條件Hack、屬性級Hack、選擇符Hack
例如：
     （1）條件Hack：
          [if IE]
              <style>
         .test{color:red;}
              </style>
          [endif]
     （2）屬性Hack：
          .test{
              color:#090\9; /* For IE8+ */
              *color:#f00; /* For IE7 and earlier */
              color:#ff0; /* For IE6 and earlier */
          }
     （3）選擇符Hack：
          * html .test{color:#090;} /* For IE6 and earlier */
          * + html .test{color:#ff0;} /* For IE7 */

2三、px和em的區別：

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易，是相對長度單位，像素是相對於顯示器屏幕分辨率而言的；
em得值不是固定的，而且em會繼承父級元素的字體大小；
注：瀏覽器的默認字體高都是16px，因此未經調整的瀏覽器都符合: 1em=16px；那麼12px=0.75em, 10px=0.625em；
pt是印刷業上常使用的單位，磅的意思，通常用於頁面打印排版，16px = 1em = 12pt =100%。

2四、優雅降級和漸進加強：

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到                                        更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
  （1）優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給；
  （2）漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要；
  （3）降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶；

2五、Doctype：一種標準通用標記語言的文檔聲明類型。

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）。
Doctype是嚴格模式仍是混雜模式，如何觸發這兩種模式，區分它們有何意義：
Doctype用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過渡 基於框架的html文檔。加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug。

26.DIV+CSS的佈局較table佈局有什麼優勢：
（1）改版的時候更方便 只要改css文件；
（2）頁面加載速度更快、結構化清晰、頁面顯示簡潔；
（3）表現與結構相分離；
（4）易於優化（seo）搜索引擎更友好，排名更容易靠前；

2七、Img標籤中的alt屬性和title屬性的異同：

alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在                       沒有title時把alt當成 tool tip顯示)。
title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

2八、strong標籤和em標籤的異同：

strong:粗體強調標籤，強調，表示內容的重要性。
em:斜體強調標籤，更強烈強調，表示內容的強調點。

2九、一個網站有大量的圖片，加載很慢，有哪些方法優化這些圖片的加載，給用戶更好的體驗：
（1）優化圖片的大小；
（2）用延遲加載技術：

1)圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載；
       2)若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載；
       3)若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術；
       4)若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗；
       5)若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致；

30、行內元素和塊級元素的具體區別是什麼，行內元素的padding和margin是否能夠設置：

塊級元素會獨佔一行,默認狀況下；其寬度自動填滿其父元素寬度；可設margin,padding；
行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裏,直到一行排不下,纔會換行,其寬度隨元素的內容而變化;
margin-top/bottom、padding-top/bottom不可設；

3一、描述一個「reset.css」文件，並如何使用它：

Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一。

3二、對WEB標準以及W3C的理解與認識：

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

3三、XHTML和HTML有什麼區別：

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言；
最主要的不一樣：
XHTML 元素必須被正確地嵌套；
XHTML 元素必須被關閉；
XHTML標籤名必須用小寫字母；
XHTML 文檔必須擁有根元素；

3四、CSS引入的方式有哪些：內聯 內嵌 外鏈 導入

3五、CSS選擇符有哪些，優先級算法如何計算，內聯和important哪一個優先級高:

標籤選擇符 類選擇符 id選擇符 
Id>class>標籤選擇
important優先級高

3六、前端頁面有哪三層構成，分別是什麼，做用是什麼：

結構層 HTML表示層 CSS 行爲層 JS

3七、css的基本語句構成：

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

3八、各個瀏覽器的內核分別是什麼：

IE瀏覽器內核爲：Ie內核（Trident） 
火狐瀏覽器內核爲：Gecko 
谷歌瀏覽器爲：webkit
opear瀏覽器爲：Presto
safari瀏覽器爲：webkit

3九、解釋css sprites，如何使用：

css精靈：把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。

40、瀏覽器標準模式和怪異模式之間的區別是什麼：

盒子模型；渲染模式的不一樣；
注：使用 window.top.document.compatMode 可顯示爲何模式。

4一、如何對網站的文件和資源進行優化，期待的解決方案包括：
（1）文件合併
（2）文件最小化/文件壓縮
（3）使用CDN託管
（4）緩存的使用

4二、清除浮動的幾種方式，各自的優缺點：
（1）使用空標籤清除浮動：clear:both（理論上能清楚任何標籤，但會增長無心義的標籤）；
（2）使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE）；
（3）是用afert僞元素清除浮動(用於非IE瀏覽器)；

4三、HTML語義化：

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

（1）在沒有CSS的狀況下，頁面也能呈現出很好的內容結構；
（2）用戶體驗好；
（3）有利於SEO：能夠和搜索引擎創建良好溝通，有助於爬蟲抓取更多有效信息；
（4）方便其餘設備解析；
（5）便於團隊開發與維護，語義化更具可讀性；

4四、Javascript的typeof返回哪些數據類型：

Object  number  function  boolean  underfind

4五、列舉3種強制類型轉換和2種隱式類型轉換：

強制：parseInt(num)  parseFloat()  Number()
隱式：num*1  +num  num-0  num/1

4六、split() join() 的區別：

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

4七、數組方法pop() push() unshift() shift()：

push()：尾部添加      pop()：尾部刪除
unshift()：頭部添加      shift()：頭部刪除

4八、IE和DOM事件流的區別：
（1）執行順序不同；
（2）參數不同；
（3）事件加不加on；
（4）this指向問題；

4九、ajax請求時get 和post方式的區別：

（1）一個在url後面 一個放在虛擬載體裏面；
（2）有大小限制；
（3）安全問題；
（4）應用不一樣，一個是論壇等只須要請求的，一個是相似修改密碼的；

50、call和apply的區別：

Object.call(this,obj1,obj2,obj3);
Object.apply(this,arguments);

5一、ajax請求時，如何解釋json數據：

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

5二、事件委託是什麼：

利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行。

5三、閉包是什麼：

閉包就是可以讀取其餘函數內部變量的函數。

5四、解釋jsonp的原理，以及爲何它不是真正的ajax：
jsonp：動態建立script標籤，回調函數。
ajax是頁面無刷新請求數據操做。

5五、document load 和document ready的區別：

Document.onload 是在結構和樣式加載完才執行js。
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)。

5六、"=="和"==="的不一樣：

前者會自動轉換類型，後者不會。

5七、javascript的同源策略：

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

5八、編寫一個數組去重的方法：

var arr = [1,2,3,4,5,6,5,4];
function removeRepeat() {
   var newArr = [];
   for(var i in arr) {
      if(newArr.indexOf(arr[i])==-1) {
         newArr.push(arr[i]);
      }
   }
   return newArr;
}
console.log(removeRepeat(arr));

5九、js冒泡排序：

var arr = [2,4,9,11,6,3,88]; //採用冒泡排序，向上冒泡，最小值在最上邊 
for(var x = 0 ; x < arr.length; x++) {//控制趟數 
   for(var y = x + 1 ; y < arr.length ; y++) { //依次比較，若是後面的元素大於前面的元素則交換 
       if(arr[x] > arr[y]){ 
            var temp = arr[x]; 
            arr[x] = arr[y]; 
            arr[y] = temp; 
       } 
   } 
} 
document.write(arr);

60、塊級元素與內聯元素的區別是什麼：

塊級元素高度寬度都是能夠設置的。塊級元素默認狀態下每次都佔據一整個行，後面的內容也必須再新起一行顯示。
非塊級元素能夠經過css的display:block;將其更改爲塊級元素；float也具備此功能。 
內聯元素的高度寬度都是不能夠設置的，其寬度就是自身文字或者圖片的寬度。內聯元素的顯示特色就是像文本同樣的顯示，不會獨自佔據一個行。
塊級元素能夠經過css的display:inline;和float來實現。
塊元素(block element)：
   address - 地址
   blockquote - 塊引用
   center - 舉中對齊塊
   dir - 目錄列表
   div - 經常使用塊級容易，也是css layout的主要標籤
   dl - 定義列表
   fieldset - form控制組
   form - 交互表單
   h1 - 大標題
   h2 - 副標題
   h3 - 3級標題
   h4 - 4級標題
   h5 - 5級標題
   h6 - 6級標題
   hr - 水平分隔線
   isindex - input prompt
   menu - 菜單列表
   noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
   noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
   ol - 排序表單
   p - 段落
   pre - 格式化文本
   table - 表格
   ul - 非排序列表
內聯元素(inline element)：
   a - 錨點
   abbr - 縮寫
   acronym - 首字
   b - 粗體(不推薦)
   bdo - bidi override
   big - 大字體
   br - 換行
   cite - 引用
   code - 計算機代碼(在引用源碼的時候須要)
   dfn - 定義字段
   em - 強調
   font - 字體設定(不推薦)
   i - 斜體
   img - 圖片
   input - 輸入框
   kbd - 定義鍵盤文本
   label - 表格標籤
   q - 短引用
   s - 中劃線(不推薦)
   samp - 定義範例計算機代碼
   select - 項目選擇
   small - 小字體文本
   span - 經常使用內聯容器，定義文本內區塊
   strike - 中劃線
   strong - 粗體強調
   sub - 下標
   sup - 上標
   textarea - 多行文本輸入框
   tt - 電傳文本
   u - 下劃線
   var - 定義變量

6一、<label>標籤中的for屬性：綁定的元素會獲取焦點；

<label>標籤中的accesskey屬性：快捷鍵獲取焦點；
注：要將label綁定到其餘控件上，label元素上的for屬性要設置爲與該控件的ID相同；若要提交表單，要爲label元素所綁定到的控件指定name。

6二、iframe與frame區別：
（1）frame不能脫離frameset單獨使用，iframe能夠；
（2）frame不能放在body中；
（3）iframe必須放在body中；
（4）iframe能夠隨意使用；
（5）frame的高度只能經過frameset控制，iframe能夠自由控制；

6三、Javascript基本特色： （1）腳本語言（一種解釋型腳本語言，無需編譯，直接運行）； （2）基於對象； （3）簡單（弱類型的變量類型）； （4）跨平臺（只依賴瀏覽器，與操做系統無關）； （5）嵌入式；