前端面試總結（轉載請標明）

最近在準備找工作，心理壓力過大，把準備的面試題都整理出來了。。剛剛把前端的整理好，後端的還在整理中。。有哪裏不對的還請大家指出

web前端優化

JS/CSS：
JS會阻塞頁面渲染，放在頁面最下方；
CSS在頁面頂部加載。避免CSS表達式
合併重用相同的代碼塊，對文件進行合併壓縮，減少HTTP請求數

圖片：合併壓縮圖片，減少HTTP請求數

頁面優化：
結構語義化，優化body裏面的標籤
優化 title， description， keywords 等

服務端：（根據實際情況而定）
開啓 gzip / bzip2 壓縮
使用HTTP的keep-alive減少連接數
開啓 Etags，實體標籤，進行頁面緩存
開啓 APC， opcode 緩存
memcache / redis 數據緩存
代碼優化

ajax跨域

代理

dataTpye: "jsonp" 或是一些其他的可以跨域的標籤（img iframe 等）

header("Access-Control-Allow-Origin:*");

jQuery getJson() （jquery jsonp）

事件捕獲/事件冒泡

捕獲由父級到子級
冒泡由子級到父級

element.addEventListener(event, function, useCapture);

useCapture
true - 事件句柄在捕獲階段執行
false- false- 默認。事件句柄在冒泡階段執行

事件按順序綁定

事件委託/事件綁定

委託在處理速度和內存佔用上都優於事件綁定
但委託會在事件冒泡中造成性能損失

委託對未來元素有效，事件綁定只對當前已有元素有效，對腳本後來生成的元素無效

on > delegate > live > bind

bind 直接綁定，只對現有元素有效

live 通過冒泡匹配到對應的元素，對未來有效

delegate 相對於 live 更精確

on 是以上幾種的綜合體

立即執行函數

(function(){}())
(function(){})()

只用於函數表達式例：

var kof = function(){}()

可以模仿出一個私有作用域，不會遺留全局變量，不會污染全局空間，用於JS模塊化編程，又被稱作“匿名包裹器”、“命名空間”

阻止冒泡

return false

event.target == event.currentTarget

event.stopPropagation

event.preventDefault

爲什麼使用閉包

進行信息的隱藏和封裝，模擬一些 OO 的特性，避免變量污染

函數表達式和函數聲明

變量提升（Hoisting）

會將變量聲明過程提升到頂部

    var a = 6;
    setTimeout(function () {
        alert(a);
        var a = 666;
    }, 1000);
    a = 66;  
    // undefined

作用域鏈

當代碼在一個環境中執行時，會創建變量對象的的一個作用域鏈（scope chain）。作用域鏈的用途，是保證對執行環境有權訪問的所有變量和函數的有序訪問。作用域鏈的前端，始終都是當前執行的代碼所在環境的變量對象。如果這個環境是一個函數，則將其活動對象作爲變量對象
每一個函數都有自己的執行環境，當執行流進一個函數時， 函數環境 就會被推入一個 環境棧 中，而在函數執行之後，棧將其環境彈出，把控制權返回給之前的執行環境，這個棧也就是 作用域鏈

_proto_ 與 prototype

__proto__是指向其原型對象的引用

原型鏈

__proto__ prototype

原型繼承鏈

延遲執行和延遲加載

setTimeout() / clearTimeout()

lazyload.js
通過 ajax 實現延遲加載

setTimeout() / clearTimeout()

加入到隊列末執行

    var kof = 6;
    setTimeout(function () {
        alert(kof);
    }, 1000);
    kof = 66;  
    // 66

用於清除 jQuery 操作

setInterval() / clearInterval()

用於計時器操作

模塊化編程思想

模塊化編程，高內聚,低耦合
保證各模塊之間的獨立性，使各模塊之間的依賴關係變的更加明確

原始寫法：

    function module () {

    }

污染全局變量，變量名可能衝突，各模塊之間依賴關係不明確

面向對象：

    var module = new Object({

    });

會暴露模塊成員變量，能夠從外部修改

立即執行函數：

    var module = function () {
        var _sum = 0;
        var init = 100;

        var count = function () {
            return _sum + 1;
        };

        return {
            init: init;
            count: count;
        };
    }();

標準模塊寫法，只能訪問 return 的值

繼承：

    var module = function (mod) {
        mod.k1 = function () {

        }();
        return mod;
    }(module);

防止空對象報錯

    var module = function (mod) {
        mod.k1 = function () {

        }();
        return mod;
    }(module || {});

輸入全局變量

    var module = function ($) {

    }(jQuery);

顯示輸入其他模塊

CommonJS 規範

同步加載模塊，如果模塊太大會阻塞渲染
後期seaJS / CMD

AMD 規範

異步模塊定義
require.js / curl.js

    <script src="js/require.js" defer async="true"></script>

require([module], callback);

defer : HTML4 中的異步加載
async : HTML5 中的異步加載，不阻塞渲染

JavaScript 數據類型

數據類型

boolean —— 布爾值；

string —— 字符串；

number —— 數值；

null —— 空；

object —— 對象；

undefined —— 未定義；

function —— 函數；

array —— 數組；

json —— json；

NaN —— 非法數字（not a number）

引用類型

Object Array Function

attribute / property

attribute 指的是頁面標籤中的可見的屬性，通過 setAttribute getAttribute 設置與獲取

property 指的是標籤的特有屬性，通過面向對象的方式獲取

jsonp 原理

利用

    $.ajax({  
        async:false,
        url: http://跨域的dns/document!searchJSONResult.action,
        type: "GET",
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        data: qsData,
        timeout: 5000,
        beforeSend: function(){
            //jsonp 方式此方法不被觸發.原因可能是dataType如果指定爲jsonp的話,就已經不是ajax事件了
        },
        success: function (json) {//客戶端jquery預先定義好的callback函數,成功獲取跨域服務器上的json數據後,會動態執行這個callback函數
            if(json.actionErrors.length!=0){
                alert(json.actionErrors);
            }
            genDynamicContent(qsData,type,json);
        },
        complete: function(XMLHttpRequest, textStatus){
            $.unblockUI({ fadeOut: 10 });
        },
        error: function(xhr){
            //jsonp 方式此方法不被觸發.原因可能是dataType如果指定爲jsonp的話,就已經不是ajax事件了
            //請求出錯處理
            alert("請求出錯(請檢查相關度網絡狀況.)");
        }
    });

JavaScript 同源策略

在JavaScript中，有一個很重要的安全性限制，被稱爲“Same-Origin Policy”（同源策略）。所謂同源是指，域名，協議，端口相同
這一策略對於JavaScript代碼能夠訪問的頁面內容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內容

字符串轉化

parseInt() parseFloat()
return NaN / number

Boolean(value) Number(value) String(value)

String.toString()

利用 js 弱類型，使用算術運算，實現字符串到數字的類型轉換

XMLHttpRequest

    xmlhttp=null;
    if (window.XMLHttpRequest) {
        // code for all new browsers
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // code for IE5 and IE6
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }  
    if (xmlhttp != null) {
        xmlhttp.open("GET",url,true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = xmlhttp.responseText;
            }
            xmlhttp.send();
        }
    }

JavaScript 繼承實現

原型繼承

實例既是父類的實例，又是子類的實例，但無法多重繼承

    function Gizmo(id) {  
        this.id = id;  
    }  
    Gizmo.prototype.toString = function () {  
        return "gizmo " + this.id;  
    };  
    function Hoozit(id) {  
        this.id = id;  
    }  
    Hoozit.prototype = new Gizmo();  
    Hoozit.prototype.test = function (id) {  
        return this.id === id;  
    };

Hoozit.prototype = new Gizmo(); 是原型繼承的核心，把父類 prototype 賦給子類 prototype

apply call，重定向 this，實現繼承

可以實現多重繼承，但對象不是父類的實例

    function Animal(name){    
        this.name = name;    
        this.showName = function(){    
            alert(this.name);    
        }    
    }    
    function Cat(name){  
        Animal.call(this, name);  
    }      
    var cat = new Cat("Black Cat");   
    cat.showName();

實例繼承

生成的對象實質僅僅是父類的實例，並非子類的對象；返回父類實例的一個擴充，不能多繼承

    var Base = function () {
        this.level = 1;
        this.name = "base";
        this.toString = function () {
            return "base";
        };
    };
    Base.CONSTANT = "constant";
    var Sub = function () {
        var instance = new Base();
        instance.name = "sub";
        return instance;
    };

自己定義繼承函數

    Function.method('inherits', function (parent) {
        //...
    });

this

指向當前對象，使用 call apply 可以改變指向

動畫算法

拖拽實現

熟悉的框架

模塊化工具的特點

模塊化工具

AMD / CMD CommonJS sea.js webpack

上古時期 Module? 從設計模式說起

石器時代 Script Loader 只有封裝性可不夠，我們還需要加載

蒸汽朋克 Module Loader 模塊化架構的工業革命

號角吹響 CommonJS 征服世界的第一步是跳出瀏覽器

雙塔奇兵 AMD/CMD 瀏覽器環境模塊化方案

精靈寶鑽 Browserify/Webpack 大勢所趨，去掉這層包裹！

王者歸來 ES6 Module 最後的戰役（ECMAScript 6）

模塊是指可組合成系統的、具有某種確定功能和接口結構的典型的通用獨立單元

通過模塊化工具對代碼進行組織編排，使各個模塊的功能單一獨立，實現高內聚，低耦合，明確各個模塊之間的依賴關係，便於資源的統一管理

便於多人開發時制定統一的標準規範，以便後期的維護測試

JavaScript 壓縮合並

gulp grunt

批處理的方式 .bat
copy a.js+b.js final.js /b

———————————————————————————————————————

結構、表現、行爲分離

用html進行結構化，拋開一切的表現形式，只考慮語義

用CSS進行表現處理，包括html的默認表現，他擁有了視覺表現，這個表現體現出了結構化，也體現出了用戶體驗，用戶體驗中包含了交互的排版和視覺體驗

javascript行爲，比如各種事件的行爲

CSS 模塊化

配合 less / sass / stylus 實現 css 的封裝繼承多態

CSS reset

重置瀏覽器的CSS默認屬性，因爲瀏覽器的品種很多，每個瀏覽器的默認樣式也不同，所以，通過重置CSS屬性，然後再將它統一定義，就可以產生相同的顯示效果。

包裹性

其寬度自適應於內部元素
浮動，absolute，inline-block，overflow:hidden; zoom:1;
對於，浮動(float)，絕對定位(position:absolute)以及inline-block的包裹性稱之爲“ 主動包裹 ”，其標籤寬度會收縮至內部元素大小；而overflow與zoom，稱之爲“ 被動包裹 ”。

浮動的原理和工作方式

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留

浮動會導致高度塌陷

清除浮動

<div style="clear:both;"></div>

overflow:hidden; zoom:1;

after + zoom方法

    .fix{zoom:1;}
    .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

定位

不要總是用 float
float 後注意 clear
position: relative; 相對於前一個父級元素，用 margin 調整
display: inline / inline-block

標籤比較

<b> 與 <strong>, <i> 與 <em>

一個是物理標籤，一個是邏輯標籤，前者強調的是物理行爲，後者強調了當前環境的語義，更符合標籤語義化，更符合w3c標準

<h1> 與 <title>

SEO 時，title 權重高於 h1

<alt> 與 <title>

alt 主要是爲圖像未加載時做的說明（只用於 img area input）
title 用於文字或鏈接加註釋

雙飛翼佈局

雙飛翼佈局：
1、三列布局，中間寬度自適應，兩邊定寬；
2、中間欄要在瀏覽器中優先展示渲染。

<style>
    .column { float: left; height: 200px; }
    .header { height: 50px; width: 100%; display: inline-block; background: #000; }
    .footer { height: 100px; width: 100%; display: inline-block; background: #000; }  
    #container { width: 100%; }
    #center_div { width: 100%; }
    #center_div #mainWrap { margin-left: 200px; margin-right: 220px; background: #abcdef; height: 100%; }
    #left_div { width: 200px; margin-left: -100%; background: #D1EB2F; }
    #right_div { width: 220px; margin-left: -220px; background: #ccc; }
</style>
<div class="header">header</div>
<div id="container">
    <div id="center_div" class="column">
        <div id="mainWrap">main</div>
    </div>
    <div id="left_div" class="column">left</div> 
    <div id="right_div" class="column">right</div>
</div>
<div class="footer">footer</div>

聖盃佈局

聖盃佈局：
1、三列布局，中間寬度自適應，兩邊定寬；
2、中間欄要在瀏覽器中優先展示渲染。
3、與雙飛翼佈局相比，使用 relative 定位，但少了一個 div 塊

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
    .main {       
        float: left;      
        width: 100%;  
        background: #39c;
        height: 300px;
     } 
    .sub {      
        float: left;       
        width: 200px;       
        margin-left: -100%;  
        background: #f60;
        height: 300px;
        position: relative;
        left: -200px;
    }  
    .extra {       
        float: left;       
        width: 220px;       
        margin-left: -230px;
        background: #666;
        height: 300px;
        position: relative;
        right: -230px;
    } 
    #bd {       
        padding: 0 220px 0 200px;  
    }
</style>
<div id="page">              
    <div id="hd">header</div>              
    <div id="bd">                   
        <div class="main">main</div>                
        <div class="sub">left</div>                   
        <div class="extra">right</div>       
    </div>          
    <div id="ft">footer</div>    
</div>

IE 某些兼容性問題

CSS 合併方法

grunt gulp

批處理的方式 .bat
copy a.css+b.css final.css /b

盒子模型

元素內容（element content）、內邊距（padding）、邊框（border）和外邊距（margin）

CSS 動畫原理

關於 less / sass / stylus 等 CSS 預處理器

開始的時候，因爲配合less，能夠很好的進行模塊化開發，並且代碼量很少很少，似乎是彌補了css原本的缺陷，他有變量，能像函數一樣用，有嵌套，能夠更直觀的進行開發並使工作量大大減少，有一段時間簡直愛上了他。不過慢慢的，開始意識到問題了

因爲他給我了一種錯覺，讓我過分依賴於less了，他的確很強大，能夠用變量全局控制一些值，不過在某些情況下效果也不是很好，雖然你的工作量小了，但是編譯後的css代碼量並沒有減少，在某些情況下甚至會出現更大的代碼冗餘，就好比說，有些樣式可以直接通過一個class進行重用的，但是盲目的使用less反而會使代碼冗餘量更大

歸根到底，less css還是要編譯你寫的.less文件，最終生成的還是標準的css代碼。換句話說，就是你再怎麼定義變量，再怎麼計算，最終它生成的還是一個固定的數值，幫我們減少的只是我們書寫的時間

HTML5 新特性

新的文檔類型：<!DOCTYPE html>

腳本和鏈接無需指定 type 屬性

語義 Header 和 Footer

    <header>
        ....
    </header>
    <footer>
        ....
    </footer>

Email Inputs
如果我們給Input的type設置爲email，瀏覽器就會驗證這個輸入是否是email類型，當然不能只依賴前端的校驗，後端也得有相應的校驗

內容可編輯，只需要加一個 contenteditable 屬性

重新定義的<small>
<small>已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明

Placeholders
這個input屬性的意義就是不必通過 js 來做placeholder的效果

    <input type="search" name="search" placeholder="please entry the keywords" />

IE和HTML5
默認的，HTML5新元素被以inline的方式渲染，但IE會忽略這些樣式

Local Storage
使用Local Storage可以永久存儲大的數據片段在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用之前可以檢測一下window.localStorage是否存在

required 屬性
required屬性定義了一個input是否是必須填寫的，你可以像下面這樣聲明
<input type="text" name="someInput" required>
或者
<input type="text" name="someInput" required="required">

autofocus 屬性
正如它的詞義，就是聚焦到輸入框裏面
<input type="text" name="someInput" placeholder="focus" required autofocus>

audio 支持

video 支持

預加載視頻
preload 屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面加載的時候去預加載視頻
<video preload>

顯示視頻控制
<video preload controls>

正則表達式
由於pattern屬性，我們可以在你的markup裏面直接使用正則表達式了

    <input type="text" name="username" id="username" placeholder="" pattern="[A-Za-z]{4,10}" autofocus required>

檢測屬性支持
除了Modernizr之外我們還可以通過javascript簡單地檢測一些屬性是否支持，如：

    <script> 
    if (!'pattern' in document.createElement('input') ) { 
    // do client/server side validation 
    } 
</script>

Mark元素
把<mark>元素看做是高亮的作用

Output元素
<output>元素用來顯示計算結果，也有一個for屬性

    <input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>

擴充了 input 的 type 屬性

重新定義<small>
在HTML4或XHTML中，<small>元素已經存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，<small>被用來定義小字。試想下你網站底部的版權狀態，根據對此元素新的HTML5定義，<small>可以正確地詮釋這些信息。

什麼時候用<div>
HTML5已經引入了這麼多元素，那麼div我們還要用嗎？div你可以在沒有更好的元素的時候去用。

Modernizr.js

專爲HTML5和CSS3開發的功能檢測類庫

———————————————————————————————————————

HTTP 狀態碼

1XX —— 消息報文

2XX —— 成功

3XX —— 重定向

4XX —— 請求錯誤

5XX / 6XX —— 服務器錯誤

Cache-control

緩存控制

頁面加載過程

瀏覽器渲染
加載：

加載過程中遇到外部css文件，瀏覽器另外發出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。這是異步請求，並不會影響html文檔進行加載
內部 <style></style> 這種樣式定義，也可能會阻塞渲染

但是當文檔加載過程中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不僅要等待文檔中js文件加載完畢，還要等待解析執行完畢，纔可以恢復html文檔的渲染線程。
原因：JS有可能會修改DOM

解析：

html文檔解析生成解析樹即dom樹，是由dom元素及屬性節點組成，樹的根是document對象，（DOM 文檔對象模型）

css解析將css文件解析爲樣式表對象。該對象包含css規則，該規則包含選擇器和聲明對象

js解析因爲文件在加載的同時也進行解析，加載時解析

渲染：

爲每一個元素查找到匹配的樣式規則，需要遍歷整個規則表（解析後生成的最終 CSS 樣式表）

javascript-event-loop 事件循環

由於 javascript引擎線程爲單線程，所以代碼都是先壓到隊列，採用先進先出的方式運行，事件處理函數，timer函數也會壓在隊列中，不斷的從隊頭取出事件，這就叫： javascript-event-loop

前後端協同開發

確定功能，根據功能制定前後端接口

前後端分別進行開發，並且分別進行測試

前端先使用模擬數據

前後端完成後，進行連接調試

session

基礎算法

各種排序算法

一些鏈表，隊列，棧的操作

還有些常見的比較巧妙的計算方式

智力問答題

前端的暫時就這些了。。後端整理中，還有啊各位找工作的應屆生實習生大大，一定好好看數據結構和操作系統。。各個原理一定要搞清楚，千萬不要覺得自己會，更不要面試的時候給自己挖坑。。到時候怎麼掛的都不造

期待能找到工作吧。。

最後，轉載請註明哈，畢竟手敲得很累的（生無可戀）。。

Arno_好久不見

發佈了29 篇原創文章 · 獲贊 5 · 訪問量 5萬+

私信關注

前端面試總結（轉載請標明）

web前端優化

ajax跨域

事件捕獲/事件冒泡

事件委託/事件綁定

立即執行函數

阻止冒泡

爲什麼使用閉包

函數表達式 和 函數聲明

變量提升（Hoisting）

作用域鏈

_proto_ 與 prototype

原型鏈

延遲執行 和 延遲加載

模塊化編程思想

CommonJS 規範

AMD 規範

JavaScript 數據類型

attribute / property

jsonp 原理

JavaScript 同源策略

字符串轉化

XMLHttpRequest

JavaScript 繼承實現

this

動畫算法

拖拽實現

熟悉的框架

模塊化工具的特點

JavaScript 壓縮合並

———————————————————————————————————————

結構、表現、行爲分離

CSS 模塊化

CSS reset

包裹性

浮動的原理和工作方式

清除浮動

定位

標籤比較

雙飛翼佈局

聖盃佈局

IE 某些兼容性問題

CSS 合併方法

盒子模型

CSS 動畫原理

關於 less / sass / stylus 等 CSS 預處理器

HTML5 新特性

Modernizr.js

———————————————————————————————————————

HTTP 狀態碼

Cache-control

頁面加載過程

javascript-event-loop 事件循環

前後端協同開發

session

基礎算法

函數表達式和函數聲明

延遲執行和延遲加載