摘要：本來(lái)很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發(fā)現(xiàn)網(wǎng)上有些文章確實(shí)寫(xiě)的不錯(cuò)，就一直拖著沒(méi)寫(xiě)。但是有次去圖書(shū)館，看到一本書(shū)叫前端面試江湖，索性找了一個(gè)時(shí)間，把全部?jī)?nèi)容整合到一起。

本來(lái)很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發(fā)現(xiàn)網(wǎng)上有些文章確實(shí)寫(xiě)的不錯(cuò)，就一直拖著沒(méi)寫(xiě)。但是有次去圖書(shū)館，看到一本書(shū)叫《前端面試江湖》，索性找了一個(gè)時(shí)間，把全部?jī)?nèi)容整合到一起。這里面肯定有你不了解的東西，那些東西能夠很大程度上提高你的開(kāi)發(fā)效率。這本書(shū)2016年5月出的，卻還在講JQuery。所以有些地方我對(duì)其進(jìn)行了補(bǔ)充

獲取事件：

function et(e) {
    let event = window.event || e
}

鍵盤(pán)值的獲?。?br>Firfox下event.which和IE的event.keyCode相當(dāng)

let key = event.keyCode || event.which

事件源的獲?。?/p>

let target = event.srcElement || event.target

事件監(jiān)聽(tīng):

IE: element.attacthEvent("on" + eventName, function(){})
Firfox: element.addEventListener(eventName, handler, false)

鼠標(biāo)位置：
在IE下，event對(duì)象有x、y屬性，在Firfox下，event有PageX, PageY屬性
所有獲取鼠標(biāo)位置時(shí)：

x = event.x || event.pageX

阻止默認(rèn)瀏覽器行為：

e.preventDefault() || event.returnValue = false

阻止冒泡事件：

e.stopPropagation() || event.cancelBubble = true

    text 1
    text 2

拿到選中項(xiàng)的索引：

let index = document.getElementById("test").selectIndex.

selectIndex表示選中項(xiàng)的index

這個(gè)問(wèn)題一直在爭(zhēng)論，我就覺(jué)得明明一句話解決的問(wèn)題，非要弄得這么復(fù)雜。這是書(shū)上的答案：

get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器提交數(shù)據(jù)

get是把參數(shù)數(shù)據(jù)提交到表單的action屬性所指的URL中，值和表單各個(gè)字段一一對(duì)應(yīng)。post是通過(guò)HTTP
post機(jī)制，將表單內(nèi)各個(gè)字段和其內(nèi)容放置在HTML HEADER內(nèi)一起傳到action屬性所指的URL地址。

get傳送的數(shù)據(jù)不能大于2kb，post傳送的數(shù)據(jù)更大，但也有限制。

get安全性能非常低，post安全性較高

get限制Form表單的數(shù)據(jù)集的值必須為ASCII字符，而post支持整個(gè)ISO10646字符集。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
            alert(xhr.responseText)
        } else {
            alert("unsuccessful:" + xhr.status)
        }
    }
}
xhr.open("get", "example.txt", true)
xhr.send(null)

具體內(nèi)容看看MDN，這里就懶的寫(xiě)了
1xx: 信息
2xx: 成功
3xx：重定向
4xx：客戶端錯(cuò)誤
5xx：服務(wù)器錯(cuò)誤

getResponseHeader從響應(yīng)信息中返回指定的http信息
getAllResonponseHeaders 獲取響應(yīng)的所有HTTP頭信息

var Jsonp = document.createElement("script")
// Firfox: onload, IE: onreadyStatechange
Jsonp.onload = Jsonp.onreadyStatechange = function () {
    if (!this.readyState || this.readyState === "loaded"
        || this.readyState === "complete") {
        alert($("#demo").html())
        // 清理防止IE內(nèi)存泄露
        Jsonp.onload = Jsonp.onreadyStatechange = null
    }
}
Jsonp.type = "text/javascript"
Jsonp.src = "http://www.xxx.com/JS/JQuery.js"
// 往header里邊添加
document.getElementByTagName("head")[0].appendChild(Jsonp)

1、更多的描述性標(biāo)簽
2、良好的媒體支持
3、更強(qiáng)大的Web應(yīng)用
4、跨文檔信息通信
5、Web Sockets
6、客戶端存儲(chǔ)
7、更加精美的頁(yè)面
8、更強(qiáng)大的表單
9、提升可訪問(wèn)性
10、先進(jìn)的選擇器
11、視覺(jué)效果

除了頁(yè)面在首次加載時(shí)必然要經(jīng)歷該過(guò)程之外，還有以下行為會(huì)觸發(fā)這個(gè)行為：
１、dom元素的添加、修改、刪除。(這就是為什么避免dom元素的修改，因?yàn)閞eflow和repaint最耗性能)
2、僅修改DOM元素的字體顏色（只有repaint,因?yàn)椴恍枰{(diào)整布局）
3、應(yīng)用新的樣式或者修改任何影響元素外觀的屬性
4、resize瀏覽器窗口，滾動(dòng)頁(yè)面
5、讀取元素的某些屬性

存儲(chǔ)：localStorage.setItem(key, value)
獲?。簂ocalStorage.getItem(key)
刪除：localStorage.removeItem(key)
全部刪除：localStorage.clear()

cookie數(shù)據(jù)始終在同源的HTTP請(qǐng)求中攜帶。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑(path)的概念，可以限制cookie只屬于某個(gè)路徑下。

存儲(chǔ)大小限制不同，cookie數(shù)據(jù)不能超過(guò)4KB,同時(shí)因?yàn)槊看蜨TTP請(qǐng)求都會(huì)攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù)。sessionStorage和localStorage也有存儲(chǔ)限制，但是要大的多

數(shù)據(jù)有效期不同: sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。localStorage:始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存。cookie:只要在設(shè)置的cookie過(guò)期時(shí)間之前一直有效
作用域不同：sessionStorage不在不同的瀏覽器窗口中共享(我們可以不可以通過(guò)使用sessionStorage實(shí)現(xiàn)跨域).localStorage在所有同源串口都是共享的。cookie在所有同源窗口都是共享的。

1、CSS Sprites: 通俗來(lái)講就是圖片合并，可以把網(wǎng)站中一些比較通用的小圖，合并到一張大圖上
2、啟用keep-alive屬性：Keep-Alive可以理解為長(zhǎng)連接。啟用connection的Keep-Alive屬性之外，這個(gè)連接能保持一段時(shí)間，從而提高頁(yè)面加載的速度
3、啟用瀏覽器緩存，可以用緩存技術(shù)來(lái)提高頁(yè)面的加載速度
4、啟用GZIP壓縮

1、用Web Storage替換cookie
2、使用css動(dòng)畫(huà)代替JavaScript動(dòng)畫(huà)
3、使用客戶端數(shù)據(jù)庫(kù)
4、使用JavaScript的新功能
5、使用硬件加速

@font-face {font-family: name; src: url(url); sRules}

sRules樣式表定義

前端安全問(wèn)題主要有XSS、CSRF攻擊
XSS：跨站腳本攻擊
它允許用戶將惡意代碼植入到提供給其他用戶使用的頁(yè)面中，可以簡(jiǎn)單的理解為一種javascript代碼注入。
XSS的防御措施：
過(guò)濾轉(zhuǎn)義輸入輸出
避免使用eval、new Function等執(zhí)行字符串的方法，除非確定字符串和用戶輸入無(wú)關(guān)
使用cookie的httpOnly屬性，加上了這個(gè)屬性的cookie字段，js是無(wú)法進(jìn)行讀寫(xiě)的
使用innerHTML、document.write的時(shí)候，如果數(shù)據(jù)是用戶輸入的，那么需要對(duì)象關(guān)鍵字符進(jìn)行過(guò)濾與轉(zhuǎn)義
CSRF：跨站請(qǐng)求偽造
其實(shí)就是網(wǎng)站中的一些提交行為，被黑客利用，在你訪問(wèn)黑客的網(wǎng)站的時(shí)候進(jìn)行操作，會(huì)被操作到其他網(wǎng)站上
CSRF防御措施：
檢測(cè)http referer是否是同域名
避免登錄的session長(zhǎng)時(shí)間存儲(chǔ)在客戶端中
關(guān)鍵請(qǐng)求使用驗(yàn)證碼或者token機(jī)制
其他的一些攻擊方法還有HTTP劫持、界面操作劫持

使用prototype的方法并不是很好，很容易出錯(cuò)，建議使用ES6的class。但這里不講，因?yàn)橛行├享?xiàng)目沒(méi)用ES6，所以了解prototype還有有必要的
借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承：

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}

借用原型鏈實(shí)現(xiàn)繼承：

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();

組合式繼承：

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

工廠模式：

function cratePerson (name, age, job) {
    var o = new Object(
    o.name = name 
    o.age = age 
    o.job = job 
    o.sayName = function () {
        alert(this.name)
    }
    return o 
}

var person1 = cratePerson("Greg", 27, "Doctor")

構(gòu)造函數(shù)：

function Person (name, age, job) {
    this.name = name 
    this.age = age 
    this.job = job 
    this.sayName = function () {
        alert(this.name )
    }
}

var person1 = cratePerson("Greg", 27, "Doctor")

原型模式：

function Person () {
}

Person.prototype.name = "Greg"
Person.prototype.age = 18
Person.prototype.job = "Doctor"
Person.prototype.sayName = function () {
    alert(this.name)
}
var person1 = new Person()
person1.sayName()   // Greg

本文只講了一些理論性的知識(shí)，很少涉及編程。編程的部分我決定使用leetcode習(xí)題的方式進(jìn)行講解
o)因?yàn)檫@個(gè)不太好多帶帶寫(xiě)一篇博客來(lái)進(jìn)行講解。請(qǐng)關(guān)注我的github了解實(shí)時(shí)的進(jìn)度