對(duì)前端界面工程師這個(gè)職位是怎么樣理解的辐怕？它的前景會(huì)怎么樣逼蒙？

前端是最貼近用戶的程序員，比后端寄疏、數(shù)據(jù)庫(kù)是牢、產(chǎn)品經(jīng)理、運(yùn)營(yíng)陕截、安全都近驳棱。

1、實(shí)現(xiàn)界面交互
2农曲、提升用戶體驗(yàn)
3社搅、有了Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情

前端是最貼近用戶的程序員乳规，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分形葬，甚至更好， 參與項(xiàng)目驯妄，快速高質(zhì)量完成實(shí)現(xiàn)效果圖荷并，精確到1px；

與團(tuán)隊(duì)成員青扔，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通翩伪；

做好的頁(yè)面結(jié)構(gòu)微猖，頁(yè)面重構(gòu)和用戶體驗(yàn)；

處理hack缘屹，兼容凛剥、寫出優(yōu)美的代碼格式；

針對(duì)服務(wù)器的優(yōu)化轻姿、擁抱最新前端技術(shù)犁珠。

position的值逻炊， relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的？

absolute :生成絕對(duì)定位的元素犁享， 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來(lái)進(jìn)行定位余素。
fixed （老IE不支持）生成絕對(duì)定位的元素，通常相對(duì)于瀏覽器窗口或 frame 進(jìn)行定位炊昆。
relative 生成相對(duì)定位的元素桨吊，相對(duì)于其在普通流中的位置進(jìn)行定位。
static 默認(rèn)值凤巨。沒有定位，元素出現(xiàn)在正常的流中
sticky 生成粘性定位的元素敢茁，容器的位置根據(jù)正常文檔流計(jì)算得出

如何解決跨域問題

JSONP：

原理是：動(dòng)態(tài)插入script標(biāo)簽佑淀，通過script標(biāo)簽引入一個(gè)js文件，這個(gè)js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù)彰檬，并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入伸刃。
由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名僧叉、協(xié)議奕枝、端口）的資源，為了實(shí)現(xiàn)跨域請(qǐng)求瓶堕，可以通過script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求隘道，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請(qǐng)求郎笆。
優(yōu)點(diǎn)是兼容性好谭梗，簡(jiǎn)單易用，支持瀏覽器與服務(wù)器雙向通信宛蚓。缺點(diǎn)是只支持GET請(qǐng)求激捏。
JSONP：json+padding（內(nèi)填充），顧名思義凄吏，就是把JSON填充到一個(gè)盒子里

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

CORS

服務(wù)器端對(duì)于CORS的支持远舅，主要就是通過設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置痕钢，就可以允許Ajax進(jìn)行跨域的訪問图柏。

通過修改document.domain來(lái)跨子域

將子域和主域的document.domain設(shè)為同一個(gè)主域.前提條件：這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致任连，否則無(wú)法利用document.domain進(jìn)行跨域
主域相同的使用document.domain
window對(duì)象有個(gè)name屬性蚤吹，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的拿撩，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限柒莉，window.name是持久存在一個(gè)窗口載入過的所有頁(yè)面中的

使用HTML5中新引進(jìn)的window.postMessage方法來(lái)跨域傳送數(shù)據(jù)

還有flash、在服務(wù)器上設(shè)置代理頁(yè)面等跨域方式。個(gè)人認(rèn)為window.name的方法既不復(fù)雜妆兑，也能兼容到幾乎所有瀏覽器昙读，這真是極好的一種跨域方法

XML和JSON的區(qū)別每强？

(1).數(shù)據(jù)體積方面稿静。
JSON相對(duì)于XML來(lái)講，數(shù)據(jù)的體積小诸蚕，傳遞的速度更快些步势。

(2).數(shù)據(jù)交互方面。
JSON與JavaScript的交互更加方便背犯，更容易解析處理坏瘩，更好的數(shù)據(jù)交互。

(3).數(shù)據(jù)描述方面漠魏。
JSON對(duì)數(shù)據(jù)的描述性比XML較差倔矾。

(4).傳輸速度方面。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML柱锹。

談?wù)勀銓?duì)webpack的看法

WebPack 是一個(gè)模塊打包工具哪自，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件禁熏。它能夠很好地管理壤巷、打包Web開發(fā)中所用到的HTML、JavaScriptCSS以及各種靜態(tài)文件（圖片瞧毙、字體等）胧华，讓開發(fā)過程更加高效。對(duì)于不同類型的資源宙彪，webpack有對(duì)應(yīng)的模塊加載器矩动。webpack模塊打包器會(huì)分析模塊間的依賴關(guān)系，最后 生成了優(yōu)化且合并后的靜態(tài)資源释漆。

webpack的兩大特色：

1.code splitting（可以自動(dòng)完成）
2.loader 可以處理各種類型的靜態(tài)文件悲没，并且支持串聯(lián)操作

webpack 是以commonJS的形式來(lái)書寫腳本滴，但對(duì) AMD/CMD 的支持也很全面男图，方便舊項(xiàng)目進(jìn)行代碼遷移示姿。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1. 對(duì) CommonJS 逊笆、 AMD 峻凫、ES6的語(yǔ)法做了兼容

2. 對(duì)js、css览露、圖片等資源文件都支持打包

3. 串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性譬胎，例如提供對(duì)CoffeeScript差牛、ES6的支持

4. 有獨(dú)立的配置文件webpack.config.js

5. 可以將代碼切割成不同的chunk命锄，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間

6. 支持 SourceUrls 和 SourceMaps偏化，易于調(diào)試

7. 具有強(qiáng)大的Plugin接口脐恩，大多是內(nèi)部插件，使用起來(lái)比較靈活

8.webpack 使用異步 IO 并具有多級(jí)緩存侦讨。這使得 webpack 很快且在增量編譯上更加快

說(shuō)說(shuō)TCP傳輸?shù)娜挝帐炙拇螕]手策略

為了準(zhǔn)確無(wú)誤地把數(shù)據(jù)送達(dá)目標(biāo)處驶冒，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后韵卤，TCP不會(huì)對(duì)傳送 后的情況置之不理骗污，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)。握手過程中使用了TCP的標(biāo)志：SYN和ACK沈条。

發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方需忿。接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息蜡歹。
最后屋厘，發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束月而。
若在握手過程中某個(gè)階段莫名中斷汗洒，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包

斷開一個(gè)TCP連接則需要“四次握手”：

第一次揮手：

主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來(lái)關(guān)閉主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送父款，也就是主動(dòng)關(guān)閉方告訴被動(dòng)關(guān)閉方：我已經(jīng)不 會(huì)再給你發(fā)數(shù)據(jù)了(當(dāng)然溢谤，在fin包之前發(fā)送出去的數(shù)據(jù)，如果沒有收到對(duì)應(yīng)的ack確認(rèn)報(bào)文铛漓，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù))溯香，但是，此時(shí)主動(dòng)關(guān)閉方還可 以接受數(shù)據(jù)浓恶。

第二次揮手：

被動(dòng)關(guān)閉方收到FIN包后玫坛，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)為收到序號(hào)+1（與SYN相同包晰，一個(gè)FIN占用一個(gè)序號(hào)）湿镀。

第三次揮手：

被動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來(lái)關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送伐憾，也就是告訴主動(dòng)關(guān)閉方勉痴，我的數(shù)據(jù)也發(fā)送完了，不會(huì)再給你發(fā)數(shù)據(jù)了树肃。

第四次揮手：

主動(dòng)關(guān)閉方收到FIN后蒸矛，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1，至此雏掠，完成四次揮手斩祭。

TCP和UDP的區(qū)別

TCP

（Transmission Control Protocol，傳輸控制協(xié)議）是基于連接的協(xié)議乡话，也就是說(shuō)摧玫，在正式收發(fā)數(shù)據(jù)前，必須和對(duì)方建立可靠的連接绑青。一個(gè)TCP
連接必須要經(jīng)過三次“對(duì)話”才能建立起來(lái)

UDP

（User Data Protocol诬像，用戶數(shù)據(jù)報(bào)協(xié)議）是與TCP相對(duì)應(yīng)的協(xié)議。它是面向非連接的協(xié)議闸婴，它不與對(duì)方建立連接坏挠，而是直接就把數(shù)據(jù)包發(fā)送過去！ UDP適用于一次只傳送少量數(shù)據(jù)掠拳、對(duì)可靠性要求不高的應(yīng)用環(huán)境癞揉。

說(shuō)說(shuō)你對(duì)作用域鏈的理解

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問溺欧，變量訪問到window對(duì)象即被終止喊熟，作用域鏈向下訪問變量是不被允許的。

創(chuàng)建ajax過程:

   1.創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.
   2.創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法姐刁、URL及驗(yàn)證信息.
   3.設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).
   4.發(fā)送HTTP請(qǐng)求.
   5.獲取異步調(diào)用返回的數(shù)據(jù).
   6.使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

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

漸進(jìn)增強(qiáng) ：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面芥牌，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果聂使、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)壁拉。

優(yōu)雅降級(jí) ：

一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容柏靶。

常見web安全及防護(hù)原理

SQL注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁(yè)面請(qǐng)求的查詢字符串弃理，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令。

總的來(lái)說(shuō)有以下幾點(diǎn)：

1.永遠(yuǎn)不要信任用戶的輸入屎蜓，要對(duì)用戶的輸入進(jìn)行校驗(yàn)痘昌，可以通過正則表達(dá)式，或限制長(zhǎng)度炬转，對(duì)單引號(hào)和雙"-"進(jìn)行轉(zhuǎn)換等辆苔。

2.永遠(yuǎn)不要使用動(dòng)態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲(chǔ)過程進(jìn)行數(shù)據(jù)查詢存取扼劈。

3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫(kù)連接驻啤，為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫(kù)連接。

4.不要把機(jī)密信息明文存放荐吵，請(qǐng)加密或者h(yuǎn)ash掉密碼和敏感的信息骑冗。

XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁(yè)面里插入惡意 html標(biāo)簽或者javascript代碼赊瞬。比如：攻擊者在論壇中放一個(gè)

看似安全的鏈接，騙取用戶點(diǎn)擊后沐旨，竊取cookie中的用戶私密信息森逮；或者攻擊者在論壇中加一個(gè)惡意表單，

當(dāng)用戶提交表單的時(shí)候磁携，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點(diǎn)良风。

XSS防范方法

首先代碼里對(duì)用戶輸入的地方和變量都需要仔細(xì)檢查長(zhǎng)度和對(duì)”<”,”>”,”;”,”’”等字符做過濾谊迄；其次任何內(nèi)容寫到頁(yè)面之前都必須加以encode，避免不小心把html tag 弄出來(lái)烟央。這一個(gè)層面做好统诺，至少可以堵住超過一半的XSS 攻擊。

首先疑俭，避免直接在cookie 中泄露用戶隱私粮呢，例如email、密碼等等钞艇。

其次啄寡，通過使cookie 和系統(tǒng)ip 綁定來(lái)降低cookie 泄露后的危險(xiǎn)。這樣攻擊者得到的cookie 沒有實(shí)際價(jià)值哩照，不可能拿來(lái)重放挺物。

如果網(wǎng)站不需要再瀏覽器端對(duì)cookie 進(jìn)行操作，可以在Set-Cookie 末尾加上HttpOnly 來(lái)防止javascript 代碼直接獲取cookie 飘弧。

盡量采用POST 而非GET 提交表單

XSS與CSRF有什么區(qū)別嗎识藤？

XSS是獲取信息，不需要提前知道其他用戶頁(yè)面的代碼和數(shù)據(jù)包次伶。CSRF是代替用戶完成指定的動(dòng)作痴昧，需要知道其他用戶頁(yè)面的代碼和數(shù)據(jù)包。

要完成一次CSRF攻擊冠王，受害者必須依次完成兩個(gè)步驟：

1.登錄受信任網(wǎng)站A赶撰，并在本地生成Cookie。
2.在不登出A的情況下版确，訪問危險(xiǎn)網(wǎng)站B扣囊。

CSRF的防御

服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的绒疗，就是在客戶端頁(yè)面增加偽隨機(jī)數(shù)侵歇。
通過驗(yàn)證碼的方法

Web Worker 和webSocket

worker主線程:

1.通過 worker = new Worker( url ) 加載一個(gè)JS文件來(lái)創(chuàng)建一個(gè)worker，同時(shí)返回一個(gè)worker實(shí)例吓蘑。

2.通過worker.postMessage( data ) 方法來(lái)向worker發(fā)送數(shù)據(jù)惕虑。

3.綁定worker.onmessage方法來(lái)接收worker發(fā)送過來(lái)的數(shù)據(jù)坟冲。

4.可以使用 worker.terminate() 來(lái)終止一個(gè)worker的執(zhí)行。

WebSocket

WebSocket是Web應(yīng)用程序的傳輸協(xié)議溃蔫，它提供了雙向的健提，按序到達(dá)的數(shù)據(jù)流。他是一個(gè)Html5(http://lib.csdn.net/base/html5)協(xié)議伟叛，WebSocket
的連接是持久的私痹，他通過在客戶端和服務(wù)器之間保持雙工連接，服務(wù)器的更新可以被及時(shí)推送給客戶端统刮，而不需要客戶端以一定時(shí)間間隔去輪詢紊遵。

HTTP和HTTPS

HTTP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個(gè)安全協(xié)議層（SSL或TSL）侥蒙，這個(gè)時(shí)候暗膜，就成了我們常說(shuō)的HTTPS。
默認(rèn)HTTP的端口號(hào)為80鞭衩，HTTPS的端口號(hào)為443学搜。

為什么HTTPS安全

因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息论衍，而如果使用HTTPS瑞佩，密鑰在你和終點(diǎn)站才有。https之所以比http安全饲齐，是因?yàn)樗胹sl/tls協(xié)議傳輸钉凌。它包含證書，卸載捂人，流量轉(zhuǎn)發(fā)御雕，負(fù)載均衡，頁(yè)面適配滥搭，瀏覽器適配酸纲，refer傳遞等。保障了傳輸過程的安全性

對(duì)前端模塊化的認(rèn)識(shí)

AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出瑟匆。
CMD 是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出闽坡。

AMD是提前執(zhí)行，CMD是延遲執(zhí)行愁溜。
AMD推薦的風(fēng)格通過返回一個(gè)對(duì)象做為模塊對(duì)象疾嗅，CommonJS的風(fēng)格通過對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的。

CMD模塊方式

define(function(require, exports, module) {

  // 模塊代碼

});

Javascript垃圾回收方法

標(biāo)記清除（mark and sweep）

這是JavaScript最常見的垃圾回收方式冕象，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候代承，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”渐扮，當(dāng)變量離開環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開環(huán)境”论悴。

垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記掖棉，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了

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

在低版本IE中經(jīng)常會(huì)出現(xiàn)內(nèi)存泄露膀估，很多時(shí)候就是因?yàn)槠洳捎靡糜?jì)數(shù)方式進(jìn)行垃圾回收幔亥。引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)，當(dāng)聲明了一個(gè) 變量并將一個(gè)引用類型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1察纯，如果該變量的值變成了另外一個(gè)帕棉，則這個(gè)值得引用次數(shù)減1，當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí) 候捐寥，說(shuō)明沒有變量在使用笤昨，這個(gè)值沒法被訪問了，因此可以將其占用的空間回收握恳，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

在IE中雖然JavaScript對(duì)象通過標(biāo)記清除的方式進(jìn)行垃圾回收捺僻，但BOM與DOM對(duì)象卻是通過引用計(jì)數(shù)回收垃圾的乡洼， 也就是說(shuō)只要涉及BOM及DOM就會(huì)出現(xiàn)循環(huán)引用問題。

你覺得前端工程的價(jià)值體現(xiàn)在哪

為簡(jiǎn)化用戶使用提供技術(shù)支持（交互部分）

為多個(gè)瀏覽器兼容性提供支持

為提高用戶瀏覽速度（瀏覽器性能）提供支持

為跨平臺(tái)或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持

為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

談?wù)勑阅軆?yōu)化問題

代碼層面：避免使用css表達(dá)式匕坯，避免使用高級(jí)選擇器束昵，通配選擇器。

緩存利用：緩存Ajax葛峻，使用CDN锹雏，使用外部js和css文件以便緩存，添加Expires頭术奖，服務(wù)端配置Etag礁遵，減少DNS查找等

請(qǐng)求數(shù)量：合并樣式和腳本，使用css圖片精靈采记，初始首屏之外的圖片資源按需加載佣耐，靜態(tài)資源延遲加載。

請(qǐng)求帶寬：壓縮文件唧龄，開啟GZIP兼砖，

代碼層面的優(yōu)化

用hash-table來(lái)優(yōu)化查找

少用全局變量

用innerHTML代替DOM操作，減少DOM操作次數(shù)既棺，優(yōu)化javascript性能

用setTimeout來(lái)避免頁(yè)面失去響應(yīng)

緩存DOM節(jié)點(diǎn)查找的結(jié)果

避免使用CSS Expression

避免全局查詢

避免使用with(with會(huì)創(chuàng)建自己的作用域讽挟，會(huì)增加作用域鏈長(zhǎng)度)

多個(gè)變量聲明合并

避免圖片和iFrame等的空Src⊥杳幔空Src會(huì)重新加載當(dāng)前頁(yè)面耽梅，影響速度和效率

盡量避免寫在HTML標(biāo)簽中寫Style屬性

移動(dòng)端性能優(yōu)化

盡量使用css3動(dòng)畫，開啟硬件加速晨仑。

適當(dāng)使用touch事件代替click事件褐墅。

避免使用css3漸變陰影效果拆檬。

可以用transform: translateZ(0)來(lái)開啟硬件加速。

不濫用Float妥凳。Float在渲染時(shí)計(jì)算量比較大竟贯，盡量減少使用

不濫用Web字體。Web字體需要下載逝钥，解析屑那，重繪當(dāng)前頁(yè)面，盡量減少使用艘款。

合理使用requestAnimationFrame動(dòng)畫代替setTimeout

CSS中的屬性（CSS3 transitions持际、CSS3 3D transforms、Opacity哗咆、Canvas蜘欲、WebGL、Video）會(huì)觸發(fā)GPU渲染晌柬，請(qǐng)合理使用姥份。過渡使用會(huì)引發(fā)手機(jī)過耗電增加

PC端的在移動(dòng)端同樣適用

什么是Etag？

當(dāng)發(fā)送一個(gè)服務(wù)器請(qǐng)求時(shí)年碘，瀏覽器首先會(huì)進(jìn)行緩存過期判斷澈歉。瀏覽器根據(jù)緩存過期時(shí)間判斷緩存文件是否過期。

情景一：若沒有過期屿衅，則不向服務(wù)器發(fā)送請(qǐng)求埃难，直接使用緩存中的結(jié)果，此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到 200 OK(from cache) 涤久，此時(shí)的情況就是完全使用緩存涡尘，瀏覽器和服務(wù)器沒有任何交互的。
情景二：若已過期拴竹，則向服務(wù)器發(fā)送請(qǐng)求悟衩，此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間，和Etag

然后栓拜，進(jìn)行資源更新判斷座泳。服務(wù)器根據(jù)瀏覽器傳過來(lái)的文件修改時(shí)間，判斷自瀏覽器上一次請(qǐng)求之后幕与，文件是不是沒有被修改過挑势；根據(jù)Etag，判斷文件內(nèi)容自上一次請(qǐng)求之后啦鸣，有沒有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒有被修改過潮饱，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它诫给，文件沒有被修改過香拉，你用你那邊的緩存吧—— 304 Not Modified啦扬，此時(shí)瀏覽器就會(huì)從本地緩存中獲取index.html的內(nèi)容。此時(shí)的情況叫協(xié)議緩存凫碌，瀏覽器和服務(wù)器之間有一次請(qǐng)求交互扑毡。
情形二：若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒有通過，則服務(wù)器會(huì)受理此次請(qǐng)求盛险，之后的操作同①

① 只有g(shù)et請(qǐng)求會(huì)被緩存瞄摊，post請(qǐng)求不會(huì)

Expires和Cache-Control

Expires要求客戶端和服務(wù)端的時(shí)鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來(lái)克服Expires頭的限制苦掘。如果max-age和Expires同時(shí)出現(xiàn)换帜，則max-age有更高的優(yōu)先級(jí)。
Cache-Control: no-cache, private, max-age=0

ETag: abcde

Expires: Thu, 15 Apr 2014 20:00:00 GMT

Pragma: private

Last-Modified: $now // RFC1123 format

ETag應(yīng)用:

Etag由服務(wù)器端生成鹤啡，客戶端通過If-Match或者說(shuō)If-None-Match這個(gè)條件判斷請(qǐng)求來(lái)驗(yàn)證資源是否修改惯驼。常見的是使用If-None-Match。請(qǐng)求一個(gè)文件的流程可能如下：
====第一次請(qǐng)求===

1.客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件递瑰；
2.服務(wù)器處理請(qǐng)求跳座，返回文件內(nèi)容和一堆Header，當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了)

====第二次請(qǐng)求===

客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件泣矛，注意這個(gè)時(shí)候客戶端同時(shí)發(fā)送一個(gè)If-None-Match頭，這個(gè)頭的內(nèi)容就是第一次請(qǐng)求時(shí)服務(wù)器返回的Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來(lái)的Etag和計(jì)算出來(lái)的Etag匹配禾蚕，因此If-None-Match為False您朽，不返回200，返回304换淆，客戶端繼續(xù)使用本地緩存哗总；流程很簡(jiǎn)單，問題是倍试，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢讯屈，怎么辦
答案是同時(shí)使用，也就是說(shuō)在完全匹配If-Modified-Since和If-None-Match即檢查完修改時(shí)間和Etag之后县习，服務(wù)器才能返回304.(不要陷入到底使用誰(shuí)的問題怪圈)

為什么使用Etag請(qǐng)求頭?

Etag 主要為了解決 Last-Modified 無(wú)法解決的一些問題涮母。

棧和隊(duì)列的區(qū)別?

棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的躁愿。

隊(duì)列先進(jìn)先出叛本，棧先進(jìn)后出。

棧只允許在表尾一端進(jìn)行插入和刪除彤钟，而隊(duì)列只允許在表尾一端進(jìn)行插入来候，在表頭一端進(jìn)行刪除

棧和堆的區(qū)別？

棧區(qū)（stack）—   由編譯器自動(dòng)分配釋放   逸雹，存放函數(shù)的參數(shù)值营搅，局部變量的值等云挟。

堆區(qū)（heap）   —   一般由程序員分配釋放，   若程序員不釋放转质，程序結(jié)束時(shí)可能由OS回收园欣。

堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹，如：堆排序峭拘；

棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)俊庇。

ES6的了解

新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)鸡挠，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs辉饱。）、for-of（用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值拣展。）arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替彭沼。ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象备埃。增加了let和const命令姓惑，用來(lái)聲明變量。增加了塊級(jí)作用域按脚。let命令實(shí)際上就增加了塊級(jí)作用域于毙。ES6規(guī)定，var命令和function命令聲明的全局變量辅搬，屬于全局對(duì)象的屬性唯沮；let命令、const命令堪遂、class命令聲明的全局變量介蛉，不屬于全局對(duì)象的屬性。溶褪。還有就是引入module模塊的概念

關(guān)于Http 2.0 你知道多少币旧？

HTTP/2引入了“服務(wù)端推（server push）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中猿妈，從而提高性能吹菱。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術(shù)，允許多個(gè)消息在一個(gè)連接上同時(shí)交差于游。
它增加了頭壓縮（header compression）毁葱，因此即使非常小的請(qǐng)求，其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬贰剥。

defer和async

defer并行加載js文件倾剿，會(huì)按照頁(yè)面上script標(biāo)簽的順序執(zhí)行 
async并行加載js文件，下載完成立即執(zhí)行，不會(huì)按照頁(yè)面上script標(biāo)簽的順序執(zhí)行

用過哪些設(shè)計(jì)模式前痘？

工廠模式：

主要好處就是可以消除對(duì)象間的耦合凛捏，通過使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個(gè)位置防止代碼重復(fù)芹缔。
工廠模式解決了重復(fù)實(shí)例化的問題 坯癣，但還有一個(gè)問題,那就是識(shí)別問題，因?yàn)楦緹o(wú)法 搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例最欠。

function createObject(name,age,profession){//集中實(shí)例化的函數(shù)var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個(gè)實(shí)例var test2 = createObject('mike',25,'engineer');//第二個(gè)實(shí)例

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

使用構(gòu)造函數(shù)的方法 示罗，即解決了重復(fù)實(shí)例化的問題 ，又解決了對(duì)象識(shí)別的問題芝硬，該模式與工廠模式的不同之處在于:

1.構(gòu)造函數(shù)方法沒有顯示的創(chuàng)建對(duì)象 (new Object());

2.直接將屬性和方法賦值給 this 對(duì)象;

3.沒有 renturn 語(yǔ)句蚜点。

說(shuō)說(shuō)你對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染拌阴，缺點(diǎn)是閉包會(huì)常駐內(nèi)存绍绘，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露迟赃。在js中陪拘，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念

閉包有三個(gè)特性：

1.函數(shù)嵌套函數(shù)

2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量

3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

請(qǐng)你談?wù)凜ookie的弊端

cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便纤壁，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)左刽，但還是有很多局限性的。
第一：每個(gè)特定的域名下最多生成20個(gè)cookie

1.IE6或更低版本最多20個(gè)cookie

2.IE7和之后的版本最后可以有50個(gè)cookie酌媒。

3.Firefox最多50個(gè)cookie

4.chrome和Safari沒有做硬性限制

IE和Opera 會(huì)清理近期最少使用的cookie悠反，F(xiàn)irefox會(huì)隨機(jī)清理cookie。
cookie的最大大約為4096字節(jié)馍佑，為了兼容性，一般不能超過4095字節(jié)梨水。

IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù)拭荤，叫做userdata，從IE5.0就開始支持疫诽。每個(gè)數(shù)據(jù)最多128K舅世，每個(gè)域名下最多1M。這個(gè)持久化數(shù)據(jù)放在緩存中奇徒，如果緩存沒有清理雏亚，那么會(huì)一直存在。

優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性

1.通過良好的編程摩钙，控制保存在cookie中的session對(duì)象的大小罢低。

2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。

3.只在cookie中存放不敏感數(shù)據(jù)网持，即使被盜也不會(huì)有重大損失宜岛。

4.控制cookie的生命期，使之不會(huì)永遠(yuǎn)有效功舀。偷盜者很可能拿到一個(gè)過期的cookie萍倡。

缺點(diǎn)：

1.`Cookie`數(shù)量和長(zhǎng)度的限制。每個(gè)domain最多只能有20條cookie辟汰，每個(gè)cookie長(zhǎng)度不能超過4KB列敲，否則會(huì)被截掉.

2.安全性問題。如果cookie被人攔截了帖汞，那人就可以取得所有的session信息戴而。即使加密也與事無(wú)補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義涨冀，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了填硕。

3.有些狀態(tài)不可能保存在客戶端。例如鹿鳖，為了防止重復(fù)提交表單扁眯，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保

瀏覽器本地存儲(chǔ)

在較高版本的瀏覽器中翅帜，js提供了sessionStorage和globalStorage姻檀。在HTML5中提供了localStorage來(lái)取代globalStorage。

html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage涝滴。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)绣版，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)歼疮，僅僅是會(huì)話級(jí)別的存儲(chǔ)杂抽。

而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)韩脏，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的怠蹂。

web storage和cookie的區(qū)別

Web Storage的概念和cookie相似翼悴，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的筷弦。Cookie的大小是受限的饱须，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie
都會(huì)被發(fā)送過去，這樣無(wú)形中浪費(fèi)了帶寬吹散，另外cookie還需要指定作用域弧械，不可以跨域調(diào)用。

除此之外空民，Web Storage擁有setItem,getItem,removeItem,clear等方法刃唐，不像cookie需要[前端開發(fā)](http://lib.csdn.net/base/javascript)者自己封裝setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互唁桩，作為HTTP規(guī)范的一部分而存在 闭树，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
瀏覽器的支持除了IE７及以下不支持外荒澡，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)报辱，值得一提的是IE總是辦好事，例如IE7单山、IE6中的userData其實(shí)就是javascript本地存儲(chǔ)的解決方案碍现。通過簡(jiǎn)單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法米奸，例如setItem昼接、getItem和removeItem等

cookie 和session 的區(qū)別：

1、cookie數(shù)據(jù)存放在客戶的瀏覽器上悴晰，session數(shù)據(jù)放在服務(wù)器上慢睡。

2、cookie不是很安全铡溪，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session漂辐。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上棕硫。當(dāng)訪問增多髓涯，會(huì)比較占用你服務(wù)器的性能

 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE哈扮。

4纬纪、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie滑肉。

5包各、所以個(gè)人建議：

將登陸信息等重要信息存放為SESSION

其他信息如果需要保留，可以放在COOKIE中

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用localstorge靶庙、cookies等本地存儲(chǔ)方式

什么是 FOUC（無(wú)樣式內(nèi)容閃爍）髓棋？你如何來(lái)避免 FOUC？

 FOUC - Flash Of Unstyled Content 文檔樣式閃爍

 <style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)谆讨蕖E會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件膳犹，因此恬吕，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速须床，電腦速度都有關(guān)系铐料。

 解決方法簡(jiǎn)單的出奇，只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。

null和undefined的區(qū)別钠惩？

null是一個(gè)表示”無(wú)”的對(duì)象柒凉，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無(wú)”的原始值篓跛，轉(zhuǎn)為數(shù)值時(shí)為NaN膝捞。

當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined愧沟。

null用來(lái)表示尚未存在的對(duì)象蔬咬，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。

undefined表示”缺少值”沐寺，就是此處應(yīng)該有一個(gè)值林艘，但是還沒有定義。典型用法是：

（1）變量被聲明了混坞，但沒有賦值時(shí)狐援，就等于undefined。

（2) 調(diào)用函數(shù)時(shí)究孕，應(yīng)該提供的參數(shù)沒有提供啥酱，該參數(shù)等于undefined。

（3）對(duì)象沒有賦值的屬性蚊俺，該屬性的值為undefined懈涛。

（4）函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined泳猬。

null表示”沒有對(duì)象”批钠，即該處不應(yīng)該有值。典型用法是：

（1） 作為函數(shù)的參數(shù)得封，表示該函數(shù)的參數(shù)不是對(duì)象埋心。
（2） 作為對(duì)象原型鏈的終點(diǎn)

new操作符具體干了什么呢?

   1、創(chuàng)建一個(gè)空對(duì)象忙上，并且 this 變量引用該對(duì)象拷呆，同時(shí)還繼承了該函數(shù)的原型。

   2疫粥、屬性和方法被加入到 this 引用的對(duì)象中茬斧。

   3、新創(chuàng)建的對(duì)象由 this 所引用梗逮，并且最后隱式的返回 this 项秉。

js延遲加載的方式有哪些？

  1慷彤、<script>標(biāo)簽的async="async"屬性
  2娄蔼、<script>標(biāo)簽的defer="defer"屬性
  3怖喻、動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽
  4、iframe方式

call() 和 apply() 的區(qū)別和作用岁诉？

功能一樣, 都是將當(dāng)前函數(shù)作為指定對(duì)象的方法執(zhí)行, 即函數(shù)中的this是指定對(duì)象
作用：動(dòng)態(tài)改變某個(gè)類的某個(gè)方法的運(yùn)行環(huán)境（執(zhí)行上下文）锚沸。

call(thisObj，arg1,arg2...)   //將所有參數(shù)一個(gè)一個(gè)傳遞進(jìn)去
apply(thisObj涕癣，[argArray])   //將所有參數(shù)放在數(shù)組中傳入

哪些操作會(huì)造成內(nèi)存泄漏哗蜈？

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象属划，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量恬叹。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒有其他對(duì)象引用過該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的同眯，那么該對(duì)象的內(nèi)存即可回收绽昼。
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏须蜗。
閉包硅确、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)明肮，就會(huì)產(chǎn)生一個(gè)循環(huán)）

列舉IE 與其他瀏覽器不一樣的特性菱农？

IE支持currentStyle，F(xiàn)Irefox使用getComputStyle

IE 使用innerText柿估，F(xiàn)irefox使用textContent

濾鏡方面：IE:filter:alpha(opacity= num)循未；Firefox：-moz-opacity:num

事件方面：IE：attachEvent：火狐是addEventListener

鼠標(biāo)位置：IE是event.clientX；火狐是event.pageX

IE使用event.srcElement秫舌；Firefox使用event.target

IE中消除list的原點(diǎn)僅需margin:0即可達(dá)到最終效果的妖；FIrefox需要設(shè)置margin:0;padding:0以及l(fā)ist-style:none

CSS圓角：ie9以下不支持圓角

WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？

Javascript數(shù)據(jù)推送

Commet：基于HTTP長(zhǎng)連接的服務(wù)器推送技術(shù)

基于WebSocket的推送方案

SSE（Server-Send Event）：服務(wù)器推送數(shù)據(jù)新方式

一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成足陨，這個(gè)過程中都發(fā)生了什么嫂粟？

分為4個(gè)步驟：

（1），當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)墨缘，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL星虹，瀏覽器都會(huì)開啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢镊讼。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址宽涌。

（2）， 瀏覽器與遠(yuǎn)程`Web`服務(wù)器通過`TCP`三次握手協(xié)商來(lái)建立一個(gè)`TCP/IP`連接蝶棋。該握手包括一個(gè)同步報(bào)文卸亮，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞嚼松。該握手首先由客戶端嘗試建立起通信嫡良，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文献酗。

（3）寝受，一旦`TCP/IP`連接建立，瀏覽器會(huì)通過該連接向遠(yuǎn)程服務(wù)器發(fā)送`HTTP`的`GET`請(qǐng)求罕偎。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源很澄，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。

（4）颜及，此時(shí)甩苛，`Web`服務(wù)器提供資源服務(wù)，客戶端開始下載資源俏站。

請(qǐng)求返回后讯蒲，便進(jìn)入了我們關(guān)注的前端模塊

簡(jiǎn)單來(lái)說(shuō)，瀏覽器會(huì)解析HTML生成DOM Tree肄扎，其次會(huì)根據(jù)CSS生成CSS Rule Tree墨林，而javascript又可以根據(jù)DOM API操

javascript對(duì)象的幾種創(chuàng)建方式

1，工廠模式
2犯祠，構(gòu)造函數(shù)模式
3旭等，原型模式
4，混合構(gòu)造函數(shù)和原型模式
5衡载，動(dòng)態(tài)原型模式
6搔耕，寄生構(gòu)造函數(shù)模式
7，穩(wěn)妥構(gòu)造函數(shù)模式

javascript繼承的6種方法

1痰娱，原型鏈繼承
2弃榨，借用構(gòu)造函數(shù)繼承
3，組合繼承(原型+借用構(gòu)造)
4猜揪，原型式繼承
5惭墓，寄生式繼承
6，寄生組合式繼承

創(chuàng)建ajax的過程

(1)創(chuàng)建`XMLHttpRequest`對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的`HTTP`請(qǐng)求,并指定該`HTTP`請(qǐng)求的方法而姐、`URL`及驗(yàn)證信息.

(3)設(shè)置響應(yīng)`HTTP`請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送`HTTP`請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.


var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

    }

}

異步加載和延遲加載

1.異步加載的方案： 動(dòng)態(tài)插入script標(biāo)簽

2.通過ajax去獲取js代碼腊凶，然后通過eval執(zhí)行

3.script標(biāo)簽上添加defer或者async屬性

4.創(chuàng)建并插入iframe，讓它異步執(zhí)行js

5.延遲加載：有些 js 代碼并不是頁(yè)面初始化的時(shí)候就立刻需要的拴念，而稍后的某些情況才需要的钧萍。

ie各版本和chrome可以并行下載多少個(gè)資源

IE6 兩個(gè)并發(fā)，iE7升級(jí)之后的6個(gè)并發(fā)政鼠，之后版本也是6個(gè)
Firefox风瘦，chrome也是6個(gè)

Flash、Ajax各自的優(yōu)缺點(diǎn)公般，在使用中如何取舍万搔？

Flash適合處理多媒體胡桨、矢量圖形、訪問機(jī)器瞬雹；對(duì)CSS昧谊、處理文本上不足，不容易被搜索酗捌。
Ajax對(duì)CSS呢诬、文本支持很好，支持搜索胖缤；多媒體尚镰、矢量圖形、機(jī)器訪問不足哪廓。

共同點(diǎn)：與服務(wù)器的無(wú)刷新傳遞消息狗唉、用戶離線和在線狀態(tài)、操作DOM

請(qǐng)解釋一下 JavaScript 的同源策略

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)撩独。它最早出自Netscape Navigator2.0敞曹，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。

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

為什么要有同源限制橄登？

我們舉例說(shuō)明：比如一個(gè)黑客程序，他利用Iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上讥此，當(dāng)你使用真實(shí)的用戶名拢锹，密碼登錄時(shí)，他的頁(yè)面就可以通過Javascript讀取到你的表單中input中的內(nèi)容萄喳，這樣用戶名卒稳，密碼就輕松到手了

缺點(diǎn)：

現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮，一些文件用了嚴(yán)格模式他巨，而另一些沒有充坑。這時(shí)這些本來(lái)是嚴(yán)格模式的文件，被 merge 后染突，這個(gè)串就到了文件的中間捻爷，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)份企。

GET和POST的區(qū)別也榄，何時(shí)使用POST？

GET：一般用于信息獲取司志，使用URL傳遞參數(shù)甜紫，對(duì)所發(fā)送信息的數(shù)量也有限制降宅，一般在2000個(gè)字符

POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制囚霸。

GET方式需要使用Request.QueryString來(lái)取得變量的值钉鸯，而POST方式通過Request.Form來(lái)獲取變量的值，

也就是說(shuō)Get是通過地址欄來(lái)傳值邮辽，而Post是通過提交表單來(lái)傳值。

然而贸营，在以下情況中吨述，請(qǐng)使用 POST 請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

事件钞脂、IE與火狐的事件機(jī)制有什么區(qū)別揣云？ 如何阻止冒泡？

 1. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）冰啃。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件邓夕。是可以被 JavaScript 偵測(cè)到的行為。

 2. 事件處理機(jī)制：IE是事件冒泡阎毅、firefox同時(shí)支持兩種事件模型焚刚，也就是：捕獲型事件和冒泡型事件。扇调；

 3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

ajax的缺點(diǎn)和在IE下的問題矿咕？

  1、ajax不支持瀏覽器back按鈕狼钮。

  2碳柱、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

  3熬芜、對(duì)搜索引擎的支持比較弱莲镣。

  4、破壞了程序的異常機(jī)制涎拉。

  5瑞侮、不容易調(diào)試。

IE緩存問題

在IE瀏覽器下曼库，如果請(qǐng)求的方法是GET区岗，并且請(qǐng)求的URL不變，那么這個(gè)請(qǐng)求的結(jié)果就會(huì)被緩存毁枯。解決這個(gè)問題的辦法可以通過實(shí)時(shí)改變請(qǐng)求的URL慈缔，只要URL改變，就不會(huì)被緩存种玛，可以通過在URL末尾添加上隨機(jī)的時(shí)間戳參數(shù)('t'= + new Date().getTime())
或者：
open('GET','demo.php?rand=+Math.random()',true);//

Ajax請(qǐng)求的頁(yè)面歷史記錄狀態(tài)問題

可以通過錨點(diǎn)來(lái)記錄狀態(tài)藐鹤，location.hash瓤檐。讓瀏覽器記錄Ajax請(qǐng)求時(shí)頁(yè)面狀態(tài)的變化。

還可以通過HTML5的history.pushState娱节，來(lái)實(shí)現(xiàn)瀏覽器地址欄的無(wú)刷新改變

談?wù)勀銓?duì)重構(gòu)的理解

網(wǎng)站重構(gòu)：在不改變外部行為的前提下挠蛉，簡(jiǎn)化結(jié)構(gòu)、添加可讀性肄满，而在網(wǎng)站前端保持一致的行為谴古。也就是說(shuō)是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化稠歉， 在擴(kuò)展的同時(shí)保持一致的UI掰担。

對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是：

表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化
針對(duì)于SEO進(jìn)行優(yōu)化

深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面

減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫代碼
設(shè)計(jì)可擴(kuò)展的API
代替舊有的框架怒炸、語(yǔ)言(如VB)
增強(qiáng)用戶體驗(yàn)

通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中

壓縮JS带饱、CSS、image等前端資源(通常是由服務(wù)器來(lái)解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
采用CDN來(lái)加速資源加載
對(duì)于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存

HTTP狀態(tài)碼

100  Continue  繼續(xù)阅羹，一般在發(fā)送post請(qǐng)求時(shí)勺疼，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)捏鱼，之后發(fā)送具體參數(shù)信息

200  OK   正常返回信息

201  Created  請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

202  Accepted  服務(wù)器已接受請(qǐng)求执庐，但尚未處理

301  Moved Permanently  請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。

302 Found  臨時(shí)性重定向导梆。

303 See Other  臨時(shí)性重定向耕肩，且總是使用 GET 請(qǐng)求新的 URI。

304  Not Modified  自從上次請(qǐng)求后问潭，請(qǐng)求的網(wǎng)頁(yè)未修改過猿诸。

400 Bad Request  服務(wù)器無(wú)法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求狡忙。

401 Unauthorized  請(qǐng)求未授權(quán)梳虽。

403 Forbidden  禁止訪問。

404 Not Found  找不到如何與 URI 相匹配的資源灾茁。

500 Internal Server Error  最常見的服務(wù)器端錯(cuò)誤窜觉。

503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過載或維護(hù)）。

說(shuō)說(shuō)你對(duì)Promise的理解

依照 Promise/A+ 的定義北专，Promise 有四種狀態(tài)：

pending: 初始狀態(tài), 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

settled: Promise已被fulfilled或rejected禀挫，且不是pending另外， fulfilled 與 rejected 一起合稱 settled拓颓。

Promise 對(duì)象用來(lái)進(jìn)行延遲(deferred) 和異步(asynchronous ) 計(jì)算语婴。

Promise 的構(gòu)造函數(shù)

構(gòu)造一個(gè) Promise，最基本的用法如下：
var promise = new Promise(function(resolve, reject) {

    if (...) {  // succeed

        resolve(result);

    } else {   // fails

        reject(Error(errMessage));

    }
});

Promise 實(shí)例擁有 then 方法（具有 then 方法的對(duì)象，通常被稱為 thenable）砰左。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個(gè)函數(shù)作為參數(shù)匿醒，一個(gè)在 fulfilled 的時(shí)候被調(diào)用，一個(gè)在 rejected 的時(shí)候被調(diào)用缠导，接收參數(shù)就是 future廉羔，onFulfilled對(duì)應(yīng) resolve, onRejected 對(duì)應(yīng) reject。

說(shuō)說(shuō)你對(duì)前端架構(gòu)師的理解

負(fù)責(zé)前端團(tuán)隊(duì)的管理及與其他團(tuán)隊(duì)的協(xié)調(diào)工作僻造，提升團(tuán)隊(duì)成員能力和整體效率憋他； 
帶領(lǐng)團(tuán)隊(duì)完成研發(fā)工具及平臺(tái)前端部分的設(shè)計(jì)、研發(fā)和維護(hù)髓削； 
帶領(lǐng)團(tuán)隊(duì)進(jìn)行前端領(lǐng)域前沿技術(shù)研究及新技術(shù)調(diào)研举瑰，保證團(tuán)隊(duì)的技術(shù)領(lǐng)先 
負(fù)責(zé)前端開發(fā)規(guī)范制定、功能模塊化設(shè)計(jì)蔬螟、公共組件搭建等工作，并組織培訓(xùn)汽畴。

實(shí)現(xiàn)一個(gè)函數(shù)clone旧巾，可以對(duì)JavaScript中的5種主要的數(shù)據(jù)類型（包括Number、String忍些、Object鲁猩、Array、Boolean）進(jìn)行值復(fù)制

Object.prototype.clone = function(){

        var o = this.constructor === Array ? [] : {};

        for(var e in this){

                o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

        }

        return o;
}

說(shuō)說(shuō)嚴(yán)格模式的限制

嚴(yán)格模式主要有以下限制：

變量必須聲明后再使用
函數(shù)的參數(shù)不能有同名屬性罢坝，否則報(bào)錯(cuò)
不能使用with語(yǔ)句
不能對(duì)只讀屬性賦值廓握，否則報(bào)錯(cuò)
不能使用前綴0表示八進(jìn)制數(shù)，否則報(bào)錯(cuò)
不能刪除不可刪除的屬性嘁酿，否則報(bào)錯(cuò)
不能刪除變量delete prop隙券，會(huì)報(bào)錯(cuò)，只能刪除屬性delete global[prop]
eval不會(huì)在它的外層作用域引入變量
eval和arguments不能被重新賦值
arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對(duì)象
不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
增加了保留字（比如protected闹司、static和interface）

設(shè)立”嚴(yán)格模式”的目的娱仔，主要有以下幾個(gè)：

消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處游桩，減少一些怪異行為;

消除代碼運(yùn)行的一些不安全之處牲迫，保證代碼運(yùn)行的安全；

提高編譯器效率借卧，增加運(yùn)行速度盹憎；

為未來(lái)新版本的Javascript做好鋪墊。

注：經(jīng)過[測(cè)試](http://lib.csdn.net/base/softwaretest)IE6,7,8,9均不支持嚴(yán)格模式铐刘。

如何刪除一個(gè)cookie

1.將時(shí)間設(shè)為當(dāng)前時(shí)間往前一點(diǎn)陪每。

var date = new Date();
date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用于設(shè)置一個(gè)月的某一天。

2.expires的設(shè)置
document.cookie = 'user='+ encodeURIComponent('name') + ';expires = ' + new Date(0)
<strong>，<em>和<b>奶稠，<i>標(biāo)簽

<strong> 標(biāo)簽和 <em> 標(biāo)簽一樣俯艰，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些锌订。
em 是 斜體強(qiáng)調(diào)標(biāo)簽竹握，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)辆飘。相當(dāng)于html元素中的 <i>...</i>;
< b > < i >是視覺要素啦辐，分別表示無(wú)意義的加粗，無(wú)意義的斜體蜈项。
em 和 strong 是表達(dá)要素(phrase elements)芹关。

說(shuō)說(shuō)你對(duì)AMD和Commonjs的理解

CommonJS
是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范紧卒。CommonJS規(guī)范加載模塊是同步的侥衬，也就是說(shuō)，只有加載完成跑芳，才能執(zhí)行后面的操作轴总。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)博个。
AMD
推薦的風(fēng)格通過返回一個(gè)對(duì)象做為模塊對(duì)象怀樟，CommonJS的風(fēng)格通過對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的。

document.write()的用法

document.write()方法可以用在兩個(gè)方面：頁(yè)面載入過程中用實(shí)時(shí)腳本創(chuàng)建頁(yè)面內(nèi)容盆佣，以及用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容往堡。
document.write只能重繪整個(gè)頁(yè)面。innerHTML可以重繪頁(yè)面的一部分

git fetch和git pull的區(qū)別

git pull：相當(dāng)于是從遠(yuǎn)程獲取最新版本并merge到本地
git fetch：相當(dāng)于是從遠(yuǎn)程獲取最新版本到本地共耍，不會(huì)自動(dòng)merge

說(shuō)說(shuō)你對(duì)MVC和MVVM的理解

MVC

MVC把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）虑灰、視圖（View）和控制器（Controller），關(guān)系如下圖所示：
模型（Model）：數(shù)據(jù)庫(kù)相關(guān)的操作痹兜、文件的訪問和數(shù)據(jù)結(jié)構(gòu)等瘩缆。
視圖（View）：專注于顯示，如Web前端（HTML/CSS/Java Script）
控制器（Controller）：連接模型和視圖佃蚜，如把視圖的請(qǐng)求發(fā)送給模型或把數(shù)據(jù)返回給視圖等

MVC只是一種框架模式庸娱，針對(duì)不同的平臺(tái)環(huán)境的實(shí)現(xiàn)方式會(huì)有些區(qū)別：
Web MVC
經(jīng)典的Web MVC模式，實(shí)現(xiàn)的框架有ASP.Net MVC/Spring MVC 等谐算，在Web MVC中Model的數(shù)據(jù)通過Controller返回給View熟尉。
桌面UI MVC
經(jīng)典實(shí)現(xiàn)有PureMVC，PureMVC 是在基于MVC模式建立的一個(gè)輕量級(jí)的應(yīng)用框架洲脂。它的Model與View的交互是通過觀察者模式實(shí)現(xiàn)的斤儿，當(dāng)Model有變化要通知View的時(shí)候Model把消息發(fā)送給通知分發(fā)中心剧包，然后通知分發(fā)中心把消息發(fā)送到View。
總結(jié)：

MVC的實(shí)現(xiàn)了視圖和模型的分離往果，避免了視圖和模型糅合在一起疆液，當(dāng)視圖改變的時(shí)候只要業(yè)務(wù)邏輯沒變不需要改變模型；但是它有一個(gè)缺點(diǎn)缺點(diǎn)是因?yàn)镸VC中的控制器并不能直接更新視圖陕贮，所以MVC并不能實(shí)現(xiàn)視圖和模型的完全分離堕油，視圖依然依賴模型的數(shù)據(jù)（數(shù)據(jù)結(jié)構(gòu)）來(lái)顯示，也就是說(shuō)視圖依賴模型肮之。

MVVM

MVVM是MVP更進(jìn)一步的發(fā)展掉缺，把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和視圖模型（ViewModel）戈擒，關(guān)系如下圖所示：
模型（Model）：數(shù)據(jù)庫(kù)相關(guān)的操作眶明、文件的訪問和數(shù)據(jù)結(jié)構(gòu)等。
視圖（View）：專注于顯示筐高，如Web前端（HTML/CSS/Java Script）
視圖模型（ViewModel）：連接模型和視圖搜囱，視圖模型和視圖是雙休綁定的。

總結(jié)：
MVVM用視圖模型代替了MVP中的展示器柑土，視圖模型和視圖實(shí)現(xiàn)了雙向綁定蜀肘，當(dāng)視圖發(fā)生變化的時(shí)候視圖模型也會(huì)發(fā)生改變，當(dāng)視圖模型變化的時(shí)候視圖也隨之變化

各種協(xié)議

ICMP協(xié)議： 因特網(wǎng)控制報(bào)文協(xié)議冰单。它是TCP/IP協(xié)議族的一個(gè)子協(xié)議，用于在IP主機(jī)灸促、路由器之間傳遞控制消息诫欠。 
TFTP協(xié)議： 是TCP/IP協(xié)議族中的一個(gè)用來(lái)在客戶機(jī)與服務(wù)器之間進(jìn)行簡(jiǎn)單文件傳輸?shù)膮f(xié)議，提供不復(fù)雜浴栽、開銷不大的文件傳輸服務(wù)荒叼。 
HTTP協(xié)議： 超文本傳輸協(xié)議，是一個(gè)屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議典鸡，由于其簡(jiǎn)捷被廓、快速的方式，適用于分布式超媒體信息系統(tǒng)萝玷。 
DHCP協(xié)議： 動(dòng)態(tài)主機(jī)配置協(xié)議嫁乘，是一種讓系統(tǒng)得以連接到網(wǎng)絡(luò)上，并獲取所需要的配置參數(shù)手段球碉。

說(shuō)說(shuō)mongoDB和MySQL的區(qū)別

MySQL是傳統(tǒng)的關(guān)系型數(shù)據(jù)庫(kù)蜓斧，MongoDB則是非關(guān)系型數(shù)據(jù)庫(kù)
mongodb以BSON結(jié)構(gòu)（二進(jìn)制）進(jìn)行存儲(chǔ)，對(duì)海量數(shù)據(jù)存儲(chǔ)有著很明顯的優(yōu)勢(shì)睁冬。

對(duì)比傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù),NoSQL有著非常顯著的性能和擴(kuò)展性優(yōu)勢(shì)挎春，與關(guān)系型數(shù)據(jù)庫(kù)相比，MongoDB的優(yōu)點(diǎn)有：

①弱一致性（最終一致），更能保證用戶的訪問速度： 
②文檔結(jié)構(gòu)的存儲(chǔ)方式直奋，能夠更便捷的獲取數(shù)據(jù)能庆。

講講304緩存的原理

服務(wù)器首先產(chǎn)生ETag，服務(wù)器可在稍后使用它來(lái)判斷頁(yè)面是否已經(jīng)被修改脚线。本質(zhì)上搁胆，客戶端通過將該記號(hào)傳回服務(wù)器要求服務(wù)器驗(yàn)證其（客戶端）緩存。

304是HTTP狀態(tài)碼殉挽，服務(wù)器用來(lái)標(biāo)識(shí)這個(gè)文件沒修改丰涉，不返回內(nèi)容，瀏覽器在接收到個(gè)狀態(tài)碼后斯碌，會(huì)使用瀏覽器已緩存的文件

客戶端請(qǐng)求一個(gè)頁(yè)面（A）一死。 服務(wù)器返回頁(yè)面A，并在給A加上一個(gè)ETag傻唾。 客戶端展現(xiàn)該頁(yè)面投慈，并將頁(yè)面連同ETag一起緩存。 客戶再次請(qǐng)求頁(yè)面A冠骄，并將上次請(qǐng)求時(shí)服務(wù)器返回的ETag一起傳遞給服務(wù)器伪煤。 服務(wù)器檢查該ETag，并判斷出該頁(yè)面自上次客戶端請(qǐng)求之后還未被修改凛辣，直接返回響應(yīng)304（未修改——Not Modified）和一個(gè)空的響應(yīng)體抱既。