657頁前端面試題+答案，分類學習整理，良心製做，持續更新中~

注：花一個多月時間，重學基礎，學習完、整理完、總結概括完，痛並快樂着。

（歡迎提出問題和建議，採納後會附上提議者名字連接）

HTML 篇

1.圖片中 title 和 alt 區別？

• 一般當鼠標滑動到元素上的時候顯示
• alt 是是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

2.Html5 有哪些新特性、移除了哪些元素

• 新增元素：

  • 繪畫canvas
  • 用於媒介回放的video 和 audio 元素
  • 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
  • sessionStorage 的數據在瀏覽器關閉後自動刪除
  • 語義化更好的內容元素，好比 article 、footer、header、nav、section
  • 表單控件 ，calendar 、 date 、 time 、 email 、 url 、 search
  • 新的技術 webworker 、 websocket 、 Geolocation

• 移除的元素：

  • 純表現的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • 對可用性產生負面影響的元素： frame 、 frameset 、 noframes

• 支持 HTML5 新標籤：

  • IE8/IE7/IE6 支持經過 document.createElement 方法產生的標籤
  • 能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤
  • 瀏覽器支持新標籤後，還須要添加標籤默認的樣式

3.瀏覽器是怎麼對 Html5 的離線儲存資源進行管理和加載的呢

如何使用：

• 頁面頭部像下面同樣加入一個 manifest 的屬性；
• 在 cache.manifest 文件的編寫離線存儲的資源
• 在離線狀態時，操做 window.applicationCache 進行需求實現

在線的狀況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，若是是第一次訪問 app ，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過 app 而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest 文件與舊的 manifest 文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

4.src與href的區別

src 用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部

• href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加
• link href="common.css" rel="stylesheet" 那麼瀏覽器會識別該文檔爲 css 文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用 link 方式來加載 css ，而不是使用 @import 方式

5.canvas在標籤上設置寬高 和在style中設置寬高有什麼區別

canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。若是canvas的width和height沒指定或值不正確，就被設置成默認值 。

6.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

7.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

• <!DOCTYPE> 聲明位於文檔中的最前面，處於 html 標籤以前。告知瀏覽器的解析器， 用什麼文檔類型、規範來解析這個文檔
• 嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行
• 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做DOCTYPE 不存在或格式不正確會致使文檔以混雜模式呈現

8.HTML全局屬性(global attribute)有哪些

class :爲元素設置類標識
data-* : 爲元素增長自定義屬性
draggable : 設置元素是否可拖拽
id : 元素 id ，文檔內惟一
lang : 元素內容的的語言
style : 行內 css 樣式
title : 元素相關的建議信息

9.div+css的佈局較table佈局有什麼優勢

改版的時候更方便 只要改 css 文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（ seo ）搜索引擎更友好，排名更容易靠前。

CSS 篇

1.CSS中link與@import的區別：

@import是 CSS 提供的語法規則，只有導入樣式表的做用；link是HTML提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性等。
加載頁面時，link引入的CSS被同時加載，@import引入的CSS將在頁面加載完畢後加載。
link標籤做爲HTML元素，不存在兼容性問題，而@import是CSS2.1纔有的語法，故老版本瀏覽器（IE5以前）不能識別。
能夠經過JS操做DOM，來插入link標籤改變樣式；因爲DOM方法是基於文檔的，沒法使用@import方式插入樣式。

2.position的absolute與fixed共同點與不一樣點：

共同點：
1.改變行內元素的呈現方式，display被置爲block；
2.讓元素脫離普通流，不佔據空間；
3.默認會覆蓋到非定位元素上不一樣點：
absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

3.BFC 有什麼用

• 建立規則：

根元素
浮動元素（ float 不取值爲 none ）
絕對定位元素（ position 取值爲 absolute 或 fixed ）
display 取值爲 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
overflow 不取值爲 visible 的元素

• 做用：

能夠包含浮動元素
不被浮動元素覆蓋
阻止父子元素的 margin 摺疊

4.清除浮動的幾種方式

父級 div 定義 height
結尾處加空 div 標籤 clear:both
父級 div 定義僞類 :after 和 zoom
父級 div 定義 overflow:hidden
父級 div 也浮動，須要定義寬度
結尾處加 br 標籤 clear:both

5.Css3 新增僞類 - 僞元素

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled 已啓用的表單元素。
:disabled 已禁用的表單元素。
:checked 單選框或複選框被選中。
::before 在元素以前添加內容。
::after 在元素以後添加內容,也能夠用來作清除浮動。
::first-line 添加一個特殊的樣式到文本的首字母。
::first-letter 添加一行特殊樣式到首行。

相信你們也看出來他們的不一樣，

僞類語法一個：，它是爲了彌補css常規類選擇器的不足
僞元素語法兩個：，它是憑空建立的一個虛擬容器生成的元素

6.IE盒子模型 、W3C盒子模型

W3C盒模型： 內容(content)、填充( padding )、邊界( margin )、 邊框( border )；

box-sizing: content-box
width = content width;

IE盒子模型： IE 的content 部分把 border 和 padding 計算了進去;

box-sizing: border-box
width = border + padding + content width

7.display:inline-block 何時不會顯示間隙？

移除空格
使用 margin 負值
使用 font-size:0
letter-spacing
word-spacing

8.行內元素float:left後是否變爲塊級元素？

行內元素設置成浮動以後變得更加像是 inline-block （行內塊級元素，設置
成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不一樣是它的默認寬度不是 100% ），這時候給行內元素設置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

9.CSS不一樣選擇器的權重(CSS層疊的規則)

！important 規則最重要，大於其它規則
行內樣式規則，加 1000
對於選擇器中給定的各個 ID 屬性值，加 100
對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加 10
對於選擇其中給定的各個元素標籤選擇器，加1
若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

10.stylus/sass/less區別

均具備「變量」、「混合」、「嵌套」、「繼承」、「顏色混合」五大基本特性
Sass 和 LESS 語法較爲嚴謹， LESS 要求必定要使用大括號「{}」， Sass 和 Stylus 能夠經過縮進表示層次與嵌套關係
Sass 無全局變量的概念， LESS 和 Stylus 有相似於其它語言的做用域概念
Sass 是基於 Ruby 語言的，而 LESS 和 Stylus 能夠基於 NodeJS NPM 下載相應庫後進行編譯；這也是爲何安裝Sass的時候有時候會報錯，須要安裝python腳本

優勢：就不用我多說了，誰用誰知道，真香。

JavaScript篇

1.js的各類位置，好比clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？

clientHeight：表示的是可視區域的高度，不包含border和滾動條
offsetHeight：表示可視區域的高度，包含了border和滾動條
scrollHeight：表示了全部區域的高度，包含了由於滾動被隱藏的部分。
clientTop：表示邊框border的厚度，在未指定的狀況下通常爲0
scrollTop：滾動後被隱藏的高度，獲取對象相對於由offsetParent屬性指定的父座標(css定位的元素或body元素)距離頂端的高度。

2.js拖拽功能的實現

首先是三個事件，分別是mousedown，mousemove，mouseup
當鼠標點擊按下的時候，須要一個tag標識此時已經按下，能夠執行mousemove裏面的具體方法。
clientX，clientY標識的是鼠標的座標，分別標識橫座標和縱座標，而且咱們用offsetX和offsetY來表示元素的元素的初始座標，移動的舉例應該是：
鼠標移動時候的座標-鼠標按下去時候的座標。
也就是說定位信息爲：
鼠標移動時候的座標-鼠標按下去時候的座標+元素初始狀況下的offetLeft.
還有一點也是原理性的東西，也就是拖拽的同時是絕對定位，咱們改變的是絕對定位條件下的left
以及top等等值。
補充：也能夠經過html5的拖放（Drag 和 drop）來實現

3.異步加載js的方法

defer：只支持IE若是您的腳本不會改變文檔的內容，可將 defer 屬性加入到<script>標籤中，以便加快處理文檔的速度。由於瀏覽器知道它將可以安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶爲止。
async，HTML5屬性僅適用於外部腳本，而且若是在IE中，同時存在defer和async，那麼defer的優先級比較高，腳本將在頁面完成時執行。
建立script標籤，插入到DOM中

4.js的防抖

防抖（Debouncing）
防抖技術便是能夠把多個順序地調用合併成一次，也就是在必定時間內，規定事件被觸發的次數。
通俗一點來講，看看下面這個簡化的例子：

// 簡單的防抖動函數
function debounce(func, wait, immediate) {
    // 定時器變量
    var timeout;
    return function() {
        // 每次觸發 scroll handler 時先清除定時器
        clearTimeout(timeout);
        // 指定 xx ms 後觸發真正想進行的操做 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 實際想綁定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 採用了防抖動
window.addEventListener('scroll',debounce(realFunc,500));
// 沒采用防抖動
window.addEventListener('scroll',realFunc);

上面簡單的防抖的例子能夠拿到瀏覽器下試一下，大概功能就是若是 500ms 內沒有連續觸發兩次 scroll 事件，那麼纔會觸發咱們真正想在 scroll 事件中觸發的函數。
上面的示例能夠更好的封裝一下

// 防抖動函數
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滾動中的真正的操做
}, 250);
 
// 綁定監聽
window.addEventListener('resize', myEfficientFn);

5.繞不過去的閉包

• 閉包就是可以讀取其餘函數內部變量的函數
• 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個
• 函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
• 閉包的特性：

函數內再嵌套函數
內部函數能夠引用外層的參數和變量
參數和變量不會被垃圾回收機制回收

• 優勢：可以實現封裝和緩存等
• 缺點：消耗內存、使用不當會內存溢出，
• 解決方法：在退出函數以前，將不使用的局部變量所有刪除

6.說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到 window對象即被終止，做用域鏈向下訪問變量是不被容許的。
簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

7.JavaScript原型，原型鏈 ? 有什麼特色？

每一個對象都會在其內部初始化一個屬性，就是 prototype (原型)，當咱們訪問一個對象的屬性時,若是這個對象內部不存在這個屬性，那麼他就會去 prototype 裏找這個屬性，這個prototype 又會有本身的 prototype ，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念

關係： instance.constructor.prototype = instance._proto_
特色：JavaScript 對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變當咱們須要一個屬性的時， Javascript 引擎會先看當前對象中是否有這個屬性， 若是沒有的,就會查找他的 Prototype 對象是否有這個屬性，如此遞推下去，一直檢索到 Object內建對象

8.請解釋什麼是事件委託/事件代理

事件代理（ Event Delegation ），又稱之爲事件委託。是 JavaScript 中經常使用的綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
能夠大量節省內存佔用，減小事件註冊，好比在 table 上代理全部 td 的 click 事件就很是棒
能夠實現當新增子對象時無需再次對其綁定

9.Javascript如何實現繼承？

• 構造繼承
• 原型繼承
• 實例繼承
• 拷貝繼承

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

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//繼承了Parent，經過原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//獲得被繼承的屬性

10.談談This對象的理解

this 老是指向函數的直接調用者（而非間接調用者）
若是有 new 關鍵字， this 指向 new 出來的那個對象
在事件中， this 指向觸發這個事件的對象，特殊的是， IE 中的 attachEvent 中的this 老是指向全局對象 Window

11.new操做符具體幹了什麼呢?

建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this

12.Ajax原理

Ajax 的原理簡單來講是在用戶和服務器之間加了—箇中間層( AJAX 引擎)，經過XmlHttpRequest 對象來向服務器發異步請求，從服務器得到數據，而後用 javascript來操做 DOM 而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據
Ajax 的過程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核心機制