摘要：個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文章。

個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。

本人只是對(duì)這些知識(shí)進(jìn)行了一個(gè)大概的總結(jié)，還有一部分技術(shù)還沒(méi)開(kāi)始涉及，后期會(huì)持續(xù)添加。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文章。

本文涵蓋了以下各個(gè)方面的知識(shí):

HTML, CSS, JS基礎(chǔ)知識(shí)

網(wǎng)站性能優(yōu)化知識(shí)

前端項(xiàng)目自動(dòng)化構(gòu)建相關(guān)知識(shí)

算法相關(guān)知識(shí)

網(wǎng)絡(luò)與HTTP協(xié)議相關(guān)知識(shí)

前端的安全相關(guān)知識(shí)

插件編寫(xiě)相關(guān)知識(shí)

JS模塊化編程相關(guān)知識(shí)

Github Repo：
https://github.com/Erichain/Front-End-Interview-Points

持續(xù)更新中。歡迎fork和star進(jìn)行完善。

---

關(guān)于前端是什么，以及需要學(xué)習(xí)什么，移步這里：

Front-End Developer Handbook

---

HTML部分 docType

混雜模式

標(biāo)準(zhǔn)模式

準(zhǔn)標(biāo)準(zhǔn)模式

標(biāo)簽語(yǔ)義化

去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)

有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重

方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)

便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化

塊級(jí)標(biāo)簽，行內(nèi)標(biāo)簽

塊級(jí)：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-6, p等

a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

meta標(biāo)簽

如何在不使用JS的情況下刷新頁(yè)面(http-equiv="refresh", content="time")

設(shè)置頁(yè)面緩存

移動(dòng)端設(shè)置

etc.

HTML代碼優(yōu)化

標(biāo)簽嵌套層級(jí)不要太深，標(biāo)簽盡量簡(jiǎn)潔化.如懶加載后將data屬性去除

大量圖片的懶加載策略，以及一些元素利用ajax在onload后實(shí)行延遲加載

對(duì)一些js的異步加載

搜索引擎優(yōu)化SEO

---

CSS部分 浮動(dòng)，清除浮動(dòng)的方法和原理(4種方法)

使用空標(biāo)簽設(shè)置clear: both;

為父級(jí)元素設(shè)置overflow: hidden;(利用BFC的原理)

使用偽元素，為要清除浮動(dòng)的元素添加.clearfix類(lèi)(推薦)

使用min-height: contain-floats;(不推薦，兼容性不好)

CSS塊級(jí)格式化上下文

觸發(fā)條件

position屬性不為static或者relative

float屬性不為none

非塊級(jí)的塊級(jí)元素(inline-block, table-cell)

overflow不為visible

特性

內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加

BFC的區(qū)域不會(huì)與float box疊加

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

用處

解決margin邊距疊加問(wèn)題。為元素多帶帶創(chuàng)建一個(gè)BFC來(lái)防止外邊距的折疊

布局

清除浮動(dòng)。為包含浮動(dòng)元素的container創(chuàng)建BFC來(lái)清除浮動(dòng)

盒子模型(IE盒子模型的區(qū)別)

總寬度 ＝ margin＋padding＋border＋content，IE的盒子模型的寬度不計(jì)padding和border

css3的box-sizing屬性，詳見(jiàn)https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

content-box，border和padding不計(jì)算入width之內(nèi)

border-box，border和padding計(jì)算入width之內(nèi)

定位

定位和浮動(dòng)的區(qū)別

什么時(shí)候使用定位，什么時(shí)候使用浮動(dòng)

樣式繼承

可繼承的樣式

font-size font-family color text-indent

z-index屬性

理解 CSS 的 z-index 屬性

IE瀏覽器的hack

條件hack

屬性hack

_ IE6

*+IE7

+IE6/7

.IE8

選擇符hack

*IE7

_IE6

CSS sprite

減少請(qǐng)求

布局模型

雙飛翼布局

圣杯布局

CSS優(yōu)先級(jí)

行內(nèi)樣式 > 內(nèi)聯(lián)樣式 > 外部樣式，ID > Class > Element

設(shè)置了!important的樣式優(yōu)先級(jí)更高

Flexbox

A Complete Guide to Flexbox

各個(gè)單位的區(qū)別(px, em, rem, 百分比)

Understanding Font sizing in CSS: em – px – pt – percent – rem

REM vs EM – The Great Debate

居中

CSS Center Complete

link和@import的區(qū)別

link屬于XHTML標(biāo)簽，而@import是CSS提供的

頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載

@import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題

link方式的樣式的權(quán)重 高于@import的權(quán)重

如何將div與圖片設(shè)置等寬，inline-block元素之間的空隙如何解決

設(shè)置父元素font-size為0，再對(duì)里面的文字多帶帶設(shè)置font-size

全兼容的樣式解決方法

.finally-solve {
    letter-spacing: -4px; /*根據(jù)不同字體字號(hào)或許需要做一定的調(diào)整*/
    word-spacing: -4px;
    font-size: 0;
}
.finally-solve li {
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
}

CSS優(yōu)化

嵌套層級(jí)不要太深，一般三層最多

css解析從右向左，所以最右邊的應(yīng)該是相對(duì)少一點(diǎn)

html用了base64的img的話，并不會(huì)緩存起來(lái)，可以將這個(gè)base64的圖片放在css文件里，css會(huì)緩存，圖片就緩存起來(lái)了

盡量不用后代元素選擇器，最右邊的一層不要是標(biāo)簽，尤其是像div這種非常常用的標(biāo)簽

多使用css的繼承，而不是每一次都書(shū)寫(xiě)時(shí)都全部重寫(xiě)一遍。寫(xiě)多個(gè)css屬性時(shí)，能連在一起寫(xiě)的就連在一起寫(xiě)

預(yù)處理器

Sass

---

JS部分 嚴(yán)格模式

"use strict"

不能使用eval()

抑制this的行為

不允許讀寫(xiě)eval和arguments的值

不允許意外創(chuàng)建全局變量

變量

使用var定義的全局變量不能使用delete刪除

無(wú)var創(chuàng)建的全局變量可以使用delete刪除

隱式類(lèi)型轉(zhuǎn)換

數(shù)字與字符串相加，結(jié)果為字符串

數(shù)字與字符串相減，結(jié)果為數(shù)字

比較變量的是否相同時(shí)，要采用===，==會(huì)發(fā)生隱式類(lèi)型轉(zhuǎn)換

NaN與任何變量不相等

類(lèi)型檢測(cè)

typeof

instanceof

constructor

Object.prototype.toString.apply()

作用域

全局作用域

函數(shù)作用域

對(duì)象

hasOwnProperty, isPrototypeOf, propertyIsEnumerable

配置屬性(configurable, enumerable, writable, value)

特性

擴(kuò)展: isExtensible, preventExtensions(是否可以添加新的屬性)

密封: isSealed, seal(是否可以刪除屬性，是否可以配置屬性)

凍結(jié): isFrozen, freeze(所有屬性是否可讀可寫(xiě))

定義屬性

defineProperty, defineProperties

數(shù)組

數(shù)組的類(lèi)型檢測(cè)

數(shù)組的方法

slice()

map()

every()

some()

filter()

函數(shù)

柯里化

概念：部分求值（Partial Evaluation），是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)

function currying( fn ) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        return fn.apply(null, newArgs);
    }
}

arguments對(duì)象

JS函數(shù)不存在重載，后定義的函數(shù)會(huì)覆蓋先定義的函數(shù)

函數(shù)調(diào)用模式

方法調(diào)用

函數(shù)調(diào)用

構(gòu)造器調(diào)用

apply調(diào)用

new操作符的原理

使用new關(guān)鍵字來(lái)創(chuàng)建實(shí)例的時(shí)候，原理如下：

首先，在構(gòu)造函數(shù)內(nèi)部使用Object.create(constructor.prototype)創(chuàng)建一個(gè)對(duì)象繼承自構(gòu)造函數(shù)

然后，將這個(gè)對(duì)象引用到this上

最后，返回this

閉包

概念

作用

創(chuàng)建匿名執(zhí)行函數(shù)

緩存變量，防止被垃圾回收

實(shí)現(xiàn)函數(shù)的封裝

應(yīng)用場(chǎng)景

內(nèi)部函數(shù)訪問(wèn)外部函數(shù)的變量

使用閉包代替全局變量

封裝相關(guān)功能

回調(diào)函數(shù)

創(chuàng)建私有變量和公有變量

特性

經(jīng)典例子：列表點(diǎn)擊，彈出每一個(gè)的index

/* 錯(cuò)誤做法 */
var elems = document.getElementById("links").getElementsByTagName("li");

for ( var i = 0; i < elems.length; i++ ) {
    elems[i].addEventListener("click", function ( event ) {
        event.preventDefault();
        alert(i);
    }, false);
}

/* 正確的做法，使用閉包 */
var elems = document.getElementById("links").getElementsByTagName("li");

for ( var i = 0; i < elems.length; i++ ) {
    (function ( index ) {
        elems[i].addEventListener("click", function ( event ) {
            event.preventDefault();
            alert(index);
        }, false);
    
    })( i );
}

this

函數(shù)的this的值永遠(yuǎn)綁定在調(diào)用此函數(shù)的對(duì)象上

可以使用apply，call或者bind改變this值的指向

對(duì)象創(chuàng)建的模式和方法及區(qū)別

工廠模式

/* 缺點(diǎn)：無(wú)法檢測(cè)對(duì)象的類(lèi)型 */
var createPerson = function ( name, age, job ) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;

    return o;
};

var person1 = createPerson("Erichain", 21, "Web");

構(gòu)造函數(shù)模式

/* 缺點(diǎn)：每個(gè)方法要在每個(gè)實(shí)例上重新創(chuàng)建一遍 */
var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;
}

var person1 = new Person("Erichain", 21, "Web");

原型模式

var Person = function () {};

Person.prototype = {
    constructor: Person, // 如果這個(gè)屬性十分重要的話
    name: "Erichain",
    age: 21,
    job: "web"
};
var person1 = new Person();

組合構(gòu)造函數(shù)原型模式

動(dòng)態(tài)原型模式

var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;

    if ( typeof this.sayName !== "function" ) {
        Person.prototype.sayName = function () {
            alert( this.name );
        }
    }
};

寄生構(gòu)造函數(shù)模式

除了使用new來(lái)實(shí)例化外，與工廠模式?jīng)]區(qū)別

不能依賴(lài)instanceof來(lái)確定對(duì)象類(lèi)型，一般不建議使用

穩(wěn)妥構(gòu)造函數(shù)模式

原型和繼承

原型鏈

借用構(gòu)造函數(shù)

function Person( name ) {
    this.name = name;
}

function man() {
    // 繼承自Person，可以選擇是否傳入?yún)?shù)
    Person.call(this, "Erichain");
}

組合繼承

原型式繼承

寄生式繼承

寄生組合式繼承

new Object()和Object.create()的區(qū)別

Object.create創(chuàng)建的對(duì)象直接從他的第一個(gè)參數(shù)繼承，而new Object所創(chuàng)建的對(duì)象是從對(duì)象的原型上繼承

使用Object.create，可以創(chuàng)建一個(gè)不繼承于任何東西的對(duì)象，但是，如果設(shè)置someConstructor.prototype = null，那么，這個(gè)新創(chuàng)建的對(duì)象會(huì)繼承自Object.prototype

回調(diào)函數(shù) 變量提升，函數(shù)聲明提升

函數(shù)聲明優(yōu)于變量聲明

函數(shù)聲明會(huì)覆蓋變量聲明，但是不會(huì)覆蓋變量賦值

IIFE(立即執(zhí)行函數(shù))

在閉包中保存變量狀態(tài)

模塊化

IIFE和自執(zhí)行函數(shù)的區(qū)別

IIFE的幾種表示方法

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

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

事件

事件流

事件捕獲

處于目標(biāo)

事件冒泡

事件對(duì)象(IE的區(qū)別)

跨瀏覽器事件處理函數(shù)

var EventUtil = {
    getEvent: function ( event ) {
        return event ? event : window.event;
    },
    getTarget: function ( event ) {
        return event.target || event.srcElement;
    },
    addHandler: function ( elem, type, handler ) {
        if ( elem.addEventListener ) {
            elem.addEventListener(type, handler, false);
        }
        else if ( elem.attachEvent ) {
            elem.attachEvent("on" + type, handler);
        }
        else {
            elem["on" + type] = handler;
        }
    },
    preventDefault: function ( event ) {
        if ( event.preventDefault ) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    stopPropagation: function ( event ) {
        if ( event.stopPropagation ) {
            event.stopPropagation();
        }
        else {
            event.cancelable = true;
        }
    }
};

事件廣播

事件委托

    
Link1
    
Link2
    
Link3

var links = document.getElementById("links");

// 使用之前定義的跨瀏覽器事件處理程序
EventUtil.addHandler(links, "click", function ( event ) {
    var target = EventUtil.getTarget(event);
    event = EventUtil.getEvent(event);

    switch ( target.id ) {
        case "link1":
            // do something
            break;
        case "link2":
            // do something
            break;
        case "link3":
            // do something
            break;
    }
});

事件函數(shù)的參數(shù)(注意addEventListener()的最后一個(gè)參數(shù)，如果為false表示在冒泡階段獲取事件，如果為true，表示在事件捕獲階段獲取事件)

call, apply, bind(手動(dòng)實(shí)現(xiàn))

call(obj, args), apply(obj, array)

call與apply支持低版本瀏覽器，bind只支持高版本瀏覽器

bind原生代碼實(shí)現(xiàn)

if ( !Function.prototype.bind ) {
    Function.prototype.bind = function ( oThis ) {
        if ( typeof this !== "function") {
            throw new Error("What is trying to be bound is not callable");
        }

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBound = this,
            fNOP = function () {},
            fBound = function () {
                return fToBound.apply(
                    this instanceof fNOP ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments))
                )
            };

        if ( this.prototype ) {
            fNOP.prototype = this.prototype;
        }

        fBound.prototype = new fNOP();
        return fBound;
    };
}

能力檢測(cè) BOM

window對(duì)象

location對(duì)象

screen對(duì)象

navigator對(duì)象

檢測(cè)插件navigator.plugins

檢測(cè)用戶代理navigator.userAgent

history對(duì)象

promise

Javascript Promise 迷你書(shū)

JavaScript Promise API

DOM 操作

查找

document.getElementById

document.getElementsByTagName

document.getElementsByName

document.getElementsByClassName

document.querySelector

document.querySelectAll

節(jié)點(diǎn)關(guān)系

element.childNodes

element.firstChild

element.lastChild

element.previousSibling

element.nextSibling

element.parentNode

element.appendChild()

element.insertBefore()

element.removeChild()

element.replaceChild()

屬性操作

element.getAttribute()

element.setAttribute()

樣式操作

element.style[PROPERTY_NAME]

element.classList

element.classList.add

element.classList.remove

element.classList.contains

element.classList.toggle

元素遍歷

childElementCount子元素?cái)?shù)量

firstElementChild第一個(gè)子元素: firstChild的元素版

lastElementChild最后一個(gè)子元素: lastChild的元素版

previousElementSibling->previousSibling的元素版

nextElementSibling->nextSibling的元素版

遍歷方法

document.createNodeIterator(root, whatToShow, filter)參見(jiàn)https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

document.createTreeWalker(root, whatToShow, filter, expandEntityReferences, currentNode)參見(jiàn)https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

性能優(yōu)化

操作DOM的時(shí)候一定要緩存變量，避免發(fā)生大量的重排重繪

異步加載Javascript文件

使用document.write()

動(dòng)態(tài)改變已有script標(biāo)簽的src屬性

使用DOM方法動(dòng)態(tài)創(chuàng)建script元素

使用Ajax獲取腳本內(nèi)容再加載

在script標(biāo)簽中使用defer以及async屬性

按需加載

合并文件

合理使用二進(jìn)制

CDN加速，原理

圖片懶加載

懶加載——網(wǎng)頁(yè)圖片的加載技術(shù)

Lazy Load Plugin for jQuery

預(yù)加載

3 Ways to Preload Images with CSS, JavaScript, or Ajax

Prefetching, preloading, prebrowsing

prefetch

HTML5 Prefetch

函數(shù)節(jié)流

淺談函數(shù)節(jié)流

垃圾回收

引用計(jì)數(shù)

/* 出現(xiàn)循環(huán)引用的例子 */
function () {
    var objectA = {},
        objectB = {};

    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

標(biāo)記清除

內(nèi)存泄漏

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏

循環(huán)引用

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問(wèn)題，針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用

JSON

JSON.stringify() json序列化為字符串

JSON.parse() 將類(lèi)JSON的字符串轉(zhuǎn)化為JSON對(duì)象

XMLHttpRequest對(duì)象

一段比較完整的使用原生Javascript實(shí)現(xiàn)ajax請(qǐng)求方法

function createRequestObject() {
    if ( window.XMLHttpRequest ) {
        return new XMLHttpRequest();
    }

    // 針對(duì)IE
    else if ( window.ActiveXObject ) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

// 請(qǐng)求的回調(diào)函數(shù)
function requestCallBack() {
    if ( request.readyState === 4 && request.status === 200 ) {
        console.log(request.responseText);
    }
}

var request = createRequestObject();

request.onreadystatechange = requestCallBack;
// open函數(shù)的三個(gè)參數(shù)分別是請(qǐng)求的方法, 請(qǐng)求的地址, 是否異步(true表示異步)
request.open("POST", url, true);
request.send(null);

使用Javascript計(jì)算兩個(gè)日期的時(shí)間差

JavaScript: DateDiff & DateMeasure: Calculate days, hours, minutes, seconds between two Dates

性能測(cè)試工具

Performance Tools

代碼審查工具

JSHint

JSLint

ESLint(針對(duì)ECMAScript 2015)

代碼壓縮

JSMin

YUI Compressor

Gzip

Javascript原生函數(shù)使用

You-Dont-Need-jQuery

Array.prototype.slice.call()原理

how does Array.prototype.slice.call() work?

RESTful

---

瀏覽器部分 各個(gè)瀏覽器內(nèi)核

IE: Trident

Chrome: Webkit, Blink(now)

Firefox: Gecko

Opera: Presto

sessionStorage，cookie，localStorage

cookie 由服務(wù)器生成，可設(shè)置失效時(shí)間。如果是瀏覽器端生成的cookie，則在瀏覽器關(guān)閉之后失效；而localStorage除非被清除，否則永久保存，sessionStorage則在關(guān)閉瀏覽器或者頁(yè)面之后清除

cookie的大小為4k左右，localStorage和sessionStorage的大小一般為5MB

與服務(wù)器痛心的時(shí)候，cookie每次都會(huì)攜帶在http頭中，但是其他兩個(gè)不參與服務(wù)器通信

cookie中最好不要放置任何的明文的東西，其他兩個(gè)的數(shù)據(jù)如果提交到服務(wù)器一定要校驗(yàn)

瀏覽器的多個(gè)標(biāo)簽頁(yè)之間如何通信

Javascript communication between browser tabs/windows

關(guān)于瀏覽器緩存

淺談Web緩存

---

前端安全

防止XSS(跨站點(diǎn)腳本)攻擊

防止CSRF(跨站點(diǎn)偽造請(qǐng)求攻擊)

防止跨iframe攻擊

---

自動(dòng)化 npm與bower的區(qū)別

bower與npm的不同點(diǎn)

gulp流與管道的概念

Unix流

管道

管道是一個(gè)固定大小的緩沖區(qū)

從管道讀數(shù)據(jù)是一次性操作，數(shù)據(jù)一旦被讀，它就從管道中被拋棄，釋放空間以便寫(xiě)更多的數(shù)據(jù)

可以把一個(gè)進(jìn)程的標(biāo)準(zhǔn)輸出流與另一個(gè)進(jìn)程的標(biāo)準(zhǔn)輸入流連接起來(lái)

打包后靜態(tài)資源路徑的修改 gulp和grunt的區(qū)別

前端工程的構(gòu)建工具對(duì)比 Gulp vs Grunt

測(cè)試工具

Mocha

Karma

Jasmine

---

網(wǎng)絡(luò)知識(shí)部分 Ajax 同源策略

同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。 指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性

跨域處理(方法和區(qū)別)

JSONP

document.domain

window.name

HTML5的window.postMessage和window.onmessage

HTTP基本知識(shí)

前端進(jìn)階--讓你升級(jí)的網(wǎng)絡(luò)知識(shí)

三次握手

客戶端發(fā)起連接試探

服務(wù)端接收到試探請(qǐng)求，向客戶端發(fā)送確認(rèn)消息

客戶端得到服務(wù)端的確認(rèn)消息之后，再次向服務(wù)端發(fā)送確認(rèn)消息

一次完整的http請(qǐng)求是怎么樣的

域名解析

TCP三次握手

發(fā)起http請(qǐng)求

服務(wù)器端響應(yīng)http請(qǐng)求，客戶端得到html代碼

瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源

瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶

---

框架相關(guān)知識(shí) jQuery

jQuery Tips Everyone Should Know

如何組織jQuery項(xiàng)目的代碼結(jié)構(gòu)

Best Practice to Organize Javascript Library & CSS Folder Structure

Bootstrap，插件原理

柵格布局實(shí)現(xiàn)原理

.img-responsive實(shí)現(xiàn)原理

內(nèi)聯(lián)表單實(shí)現(xiàn)原理

Bootstrap組件實(shí)現(xiàn)原理

AngularJS

雙向綁定

$digest循環(huán)

dirty checking

$watch

MVC

獨(dú)立作用域

依賴(lài)注入

循環(huán)監(jiān)聽(tīng)

ng-if與ng-hide/show的區(qū)別

ng-if為true的時(shí)候節(jié)點(diǎn)才會(huì)存在于DOM中

ng-show/hide只是控制節(jié)點(diǎn)的顯示和隱藏

factory，service與provider的區(qū)別和關(guān)系

使用factory創(chuàng)建的服務(wù)，是一個(gè)對(duì)象，然后，將方法和屬性定義在這個(gè)對(duì)象上，在返回這個(gè)對(duì)象，就可以供外部controller調(diào)用了

使用service創(chuàng)建的服務(wù)，是使用new進(jìn)行實(shí)例化的，所以，方法和屬性要定義在this上，并且這個(gè)服務(wù)會(huì)自動(dòng)返回this

使用provider創(chuàng)建的服務(wù)，是唯一可以注入到config()函數(shù)的服務(wù)，可以用來(lái)提供模塊化的配置。并且，定義在this上的屬性和方法，在config函數(shù)里才可以訪問(wèn)，從this.$get()函數(shù)里返回的屬性和方法，才能被控制器所訪問(wèn)

ng-click是否可以使用原生函數(shù)

不可以，因?yàn)閷?duì)應(yīng)的方法不存在于其控制器中，除非在控制器中聲明

ng-repeat數(shù)組中有相同元素的解決辦法

可以添加track by $index

$emit，$broadcast和$on

$emit由子級(jí)向父級(jí)廣播，$broadcast由父級(jí)向子級(jí)廣播

controllerAs與$scope的區(qū)別

AngularJS的缺點(diǎn)

強(qiáng)約束，學(xué)習(xí)成本高

不利于SEO

性能問(wèn)題

減少監(jiān)控項(xiàng)

主動(dòng)設(shè)置索引

降低渲染的數(shù)據(jù)數(shù)量

數(shù)據(jù)扁平化

---

算法 數(shù)組降維

優(yōu)雅的數(shù)組降維——Javascript中apply方法的妙用

數(shù)組去重

最簡(jiǎn)單的方法

function removeDuplicate( arr ) {
    var len = arr.length,
        temp = [];

    for ( var i = 0; i < len; i+=1 ) {
        if ( temp.indexOf(arr[i]) === -1 ) {
            temp.push(arr[i]);
        }
    }
    return temp;
}

對(duì)象深度復(fù)制

function clone( Obj ) {   
        var buf;   
        if ( Obj instanceof Array ) {   
            buf = [];  //創(chuàng)建一個(gè)空的數(shù)組 
            var i = Obj.length;   
            while ( i-- ) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }
        else if ( Obj instanceof Object ) {   
            buf = {};  //創(chuàng)建一個(gè)空對(duì)象 
            for ( var k in Obj ) {  //為這個(gè)對(duì)象添加新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }
        else {   
            return Obj;   
        }   
    }  

各個(gè)類(lèi)型的復(fù)制

function clone( obj ) {
    var dest;
    
    switch( typeof obj ) {
        case "undefined":
            break;
            
        case "number":
            dest = +obj;
            break;
            
        case "string":
            dest = obj + "";
            break;
            
        case "boolean":
            dest = obj;
            break;
        
        case "object":
            if ( obj instanceof Array ) {
                dest = [];

                for ( var i = 0; i < obj.length; i++ ) {
                    dest[i] = obj[i];
                }
            }
            else {
                dest = {};
                for ( var i in obj ) {
                    dest[i] = obj[i];
                }
            }
        
        default:
            break;
    }

    return dest;
}

排序

快速排序

function quickSort( arr ) {
    var left = [],
        right = [],
        len = arr.length,
        breakPoint = arr[0];

    if ( len === 1 || len === 0 ) {
        return arr;
    }

    for ( var i = 1; i < len; i++ ) {
        if ( arr[i] < breakPoint ) {
            left.push(arr[i]);
        }
        else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat(breakPoint, quickSort(right));
}

冒泡排序

function bubbleSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 0; i < len - 1; i ++ ) {
        for ( var j = 0; j < len - 1 - i; j++ ) {
            if ( arr[j] > arr[j+1] ) {
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }

    return arr;
}

插入排序

function insertSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 1; i < len; i++ ) {
        var j;
        temp = arr[i];
        j = i;

        while ( j > 0 && arr[j-1] > temp ) {
            arr[j] = arr[j-1];
            j--;
        }
        arr[j] = temp;
    }
    return arr;
}

去除首尾空格

function removePlace( str ) {
    var reg = /(^s*)|(s*)$/;

    if ( str && typeof str === "string" ) {
        return str.replace(reg, "");
    }
}

統(tǒng)計(jì)字符數(shù)量

function charCount( str ) {
    var obj = {},
        len = str.length,
        i = 0;

    for ( ; i < len; i++ ) {
        var val = str.charAt(i);

        if ( obj[val] && obj[val].value === val ) {
            obj[val].count++;
        }
        else {
            obj[val] = {};
            obj[val].count = 1;
            obj[val].value = val;
        }
    }

    for ( var key in obj ) {
        console.log( key + " is " + obj[key].count );
    }

    return obj;
}

---

插件編寫(xiě)

關(guān)于插件編寫(xiě)，可參考：jQuery插件庫(kù)

焦點(diǎn)輪播圖 彈窗效果 多級(jí)菜單 tab切換 Lightbox

---

Javascript模塊化 CommonJS

同步的方式加載模塊，服務(wù)器優(yōu)先

使用require加載模塊，使用module.exports定義模塊

AMD

瀏覽器優(yōu)先的方式，通過(guò)異步加載的方式完成任務(wù)

使用define(["module"], function ( module ) {})加載模塊

不兼容 io、文件系統(tǒng)（filesystem）和其它通過(guò) CommonJS 實(shí)現(xiàn)的面向服務(wù)器的功能

推崇依賴(lài)前置

對(duì)于依賴(lài)的模塊提前執(zhí)行

CMD

推崇依賴(lài)就近

對(duì)于依賴(lài)的模塊延遲執(zhí)行

使用define(function ( require, exports, module ) {})加載模塊

UMD(通用模塊定義，Universal Module Definition)

同時(shí)支持 AMD 和 CommonJS 特性

---

Javascript設(shè)計(jì)模式

Learning JavaScript Design Patterns

---

NodeJS HTML5 CSS3 Websocket Canvas