一些開放性題目

1.自我介紹：除了基本個(gè)人信息以外宏多，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢(shì)。

2.項(xiàng)目介紹

3.如何看待前端開發(fā)澡罚？

4.平時(shí)是如何學(xué)習(xí)前端開發(fā)的伸但？

5.未來三年的規(guī)劃是怎樣的？

position的值留搔， relative和absolute分別是相對(duì)于誰進(jìn)行定位的更胖？

• absolute :生成絕對(duì)定位的元素， 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來進(jìn)行定位隔显。

• fixed （老IE不支持）生成絕對(duì)定位的元素却妨，相對(duì)于瀏覽器窗口進(jìn)行定位。

• relative 生成相對(duì)定位的元素括眠，相對(duì)于其在普通流中的位置進(jìn)行定位彪标。

• static 默認(rèn)值。沒有定位掷豺，元素出現(xiàn)在正常的流中

如何解決跨域問題

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來進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置咙冗，就可以允許Ajax進(jìn)行跨域的訪問沾歪。

通過修改document.domain來跨子域

將子域和主域的document.domain設(shè)為同一個(gè)主域.前提條件：這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致雾消，否則無法利用document.domain進(jìn)行跨域

主域相同的使用document.domain

使用window.name來進(jìn)行跨域

window對(duì)象有個(gè)name屬性灾搏，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的挫望，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁面中的

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

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

XML和JSON的區(qū)別？

(1).數(shù)據(jù)體積方面丛晦。

JSON相對(duì)于XML來講奕纫，數(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ù)勀銜?huì)webpack的看法

WebPack 是一個(gè)模塊打包工具蝶糯，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件辆沦。它能夠很好地管理昼捍、打包Web開發(fā)中所用到的HTML、Javascript肢扯、CSS以及各種靜態(tài)文件（圖片妒茬、字體等），讓開發(fā)過程更加高效蔚晨。對(duì)于不同類型的資源乍钻，webpack有對(duì)應(yīng)的模塊加載器。webpack模塊打包器會(huì)分析模塊間的依賴關(guān)系铭腕，最后 生成了優(yōu)化且合并后的靜態(tài)資源银择。

webpack是加強(qiáng)版的Browserify。

webpack的兩大特色：

1.code splitting（可以自動(dòng)完成）

2.loader 可以處理各種類型的靜態(tài)文件累舷，并且支持串聯(lián)操作

webpack的優(yōu)勢(shì)：

• require.js的所有功能它都有浩考。

• 編繹過程更快，因?yàn)?code>require.js會(huì)去處理不需要的文件

webpack 是以commonJS的形式來書寫腳本滴被盈，但對(duì) AMD/CMD 的支持也很全面析孽，方便舊項(xiàng)目進(jìn)行代碼遷移搭伤。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
布局所占高度Height

1. 對(duì) CommonJS 袜瞬、 AMD 怜俐、ES6的語法做了兼容

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)部插件，使用起來比較靈活

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

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

為了準(zhǔn)確無誤地把數(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嘴瓤，用來關(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，用來關(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é)議龙填，也就是說，在正式收發(fā)數(shù)據(jù)前拐叉，必須和對(duì)方建立可靠的連接岩遗。一個(gè)TCP連接必須要經(jīng)過三次“對(duì)話”才能建立起來

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)境。

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

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

onmousemove和onmouseover的區(qū)別：

時(shí)間上：onmousemove事件觸發(fā)后，再觸發(fā)onmouseover事件壁酬。

按鈕上：不區(qū)分鼠標(biāo)按鈕次酌。

動(dòng)作上：onmouseover只在剛進(jìn)入?yún)^(qū)域時(shí)觸發(fā)，onmousemove除了剛進(jìn)入?yún)^(qū)域觸發(fā)外舆乔，在區(qū)域內(nèi)移動(dòng)鼠標(biāo)岳服，也會(huì)觸發(fā)

創(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)建頁面希俩，保證最基本的功能吊宋，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)颜武。

優(yōu)雅降級(jí) ：一開始就構(gòu)建完整的功能璃搜，然后再針對(duì)低版本瀏覽器進(jìn)行兼容拖吼。

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

sql注入原理

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

總的來說有以下幾點(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ù)庫連接，為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫連接芋酌。

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

XSS原理及防范

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

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

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

XSS防范方法

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

首先忌堂，避免直接在cookie 中泄露用戶隱私，例如email酗洒、密碼等等士修。

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

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

XSS與CSRF有什么區(qū)別嗎矩桂？

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

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

登錄受信任網(wǎng)站A，并在本地生成Cookie笆制。

在不登出A的情況下绅这，訪問危險(xiǎn)網(wǎng)站B。

CSRF的防御

• 服務(wù)端的CSRF方式方法很多樣在辆，但總的思想都是一致的证薇，就是在客戶端頁面增加偽隨機(jī)數(shù)。

• 通過驗(yàn)證碼的方法

Web Worker 和webSocket

worker主線程:

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

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

    3.綁定worker.onmessage方法來接收worker發(fā)送過來的數(shù)據(jù)鸦概。

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

WebSocket是Web應(yīng)用程序的傳輸協(xié)議，它提供了雙向的窗市，按序到達(dá)的數(shù)據(jù)流先慷。他是一個(gè)HTML5協(xié)議，WebSocket的連接是持久的咨察，他通過在客戶端和服務(wù)器之間保持雙工連接论熙，服務(wù)器的更新可以被及時(shí)推送給客戶端箩朴，而不需要客戶端以一定時(shí)間間隔去輪詢朗儒。

HTTP和HTTPS

HTTP協(xié)議通常承載于TCP協(xié)議之上，有時(shí)也承載于TLS或SSL協(xié)議層之上擂红，這個(gè)時(shí)候媒役，就成了我們常說的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)樗?code>ssl/tls協(xié)議傳輸牡借。它包含證書，卸載袭异，流量轉(zhuǎn)發(fā)钠龙，負(fù)載均衡，頁面適配，瀏覽器適配碴里，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的屬性賦值來達(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í) 候睬辐，說明沒有變量在使用挠阁，這個(gè)值沒法被訪問了，因此可以將其占用的空間回收溯饵，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間侵俗。

在IE中雖然JavaScript對(duì)象通過標(biāo)記清除的方式進(jìn)行垃圾回收，但BOM與DOM對(duì)象卻是通過引用計(jì)數(shù)回收垃圾的丰刊，
也就是說只要涉及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來優(yōu)化查找

• 少用全局變量

• 用innerHTML代替DOM操作阵难，減少DOM操作次數(shù)岳枷，優(yōu)化javascript性能

• 用setTimeout來避免頁面失去響應(yīng)

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

• 避免使用CSS Expression

• 避免全局查詢

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

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

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

1.盡量使用css3動(dòng)畫呜叫，開啟硬件加速嫩舟。適當(dāng)使用touch事件代替click事件。避免使用css3漸變陰影效果怀偷。

什么是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ù)瀏覽器傳過來的文件修改時(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來克服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或者說If-None-Match這個(gè)條件判斷請(qǐng)求來驗(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)開啟了Etag).狀態(tài)碼200

====第二次請(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ā)送過來的Etag和計(jì)算出來的Etag匹配，因此If-None-Match為False美侦，不返回200产舞，返回304，客戶端繼續(xù)使用本地緩存菠剩；流程很簡(jiǎn)單易猫，問題是，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢具壮，怎么辦

答案是同時(shí)使用准颓，也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時(shí)間和Etag之后，

服務(wù)器才能返回304.(不要陷入到底使用誰的問題怪圈)

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

Etag 主要為了解決 Last-Modified 無法解決的一些問題棺妓。

棧和隊(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)心例。

快速 排序的思想并實(shí)現(xiàn)一個(gè)快排宵凌？

"快速排序"的思想很簡(jiǎn)單，整個(gè)排序過程只需要三步：

（1）在數(shù)據(jù)集之中止后，找一個(gè)基準(zhǔn)點(diǎn)

（2）建立兩個(gè)數(shù)組瞎惫，分別存儲(chǔ)左邊和右邊的數(shù)組

（3）利用遞歸進(jìn)行下次比較

<script type="text/javascript">

    function quickSort(arr){
        if(arr.length<=1){
            return arr;//如果數(shù)組只有一個(gè)數(shù)，就直接返回译株；
        }

        var num = Math.floor(arr.length/2);//找到中間數(shù)的索引值瓜喇，如果是浮點(diǎn)數(shù)，則向下取整

        var numValue = arr.splice(num,1);//找到中間數(shù)的值
        var left = [];
        var right = [];

        for(var i=0;i<arr.length;i++){
            if(arr[i]<numValue){
                left.push(arr[i]);//基準(zhǔn)點(diǎn)的左邊的數(shù)傳到左邊數(shù)組
            }
            else{
               right.push(arr[i]);//基準(zhǔn)點(diǎn)的右邊的數(shù)傳到右邊數(shù)組
            }
        }

        return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重復(fù)比較
    }

    alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”

</script>

你覺得jQuery或zepto源碼有哪些寫的好的地方

jquery源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中歉糜，有助于防止變量的全局污染乘寒，然后通過傳入window對(duì)象參數(shù)，可以使window對(duì)象作為局部變量使用匪补，好處是當(dāng)jquery中訪問window對(duì)象的時(shí)候肃续，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對(duì)象叉袍。同樣始锚，傳入undefined參數(shù)，可以縮短查找undefined時(shí)的作用域鏈喳逛。

    (function( window, undefined ) {

         //用一個(gè)函數(shù)域包起來瞧捌，就是所謂的沙箱

         //在這里邊var定義的變量，屬于這個(gè)函數(shù)域內(nèi)的局部變量润文，避免污染全局

         //把當(dāng)前沙箱需要的外部變量通過函數(shù)參數(shù)引入進(jìn)來

         //只要保證參數(shù)對(duì)內(nèi)提供的接口的一致性姐呐，你還可以隨意替換傳進(jìn)來的這個(gè)參數(shù)



        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱典蝌，又賦值給了jquery.fn曙砂，這是很形象的寫法。

有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到骏掀，應(yīng)將它們保存為局部變量以提高訪問速度截驮。

將全局對(duì)象window作為參數(shù)傳入，則可以使之在匿名函數(shù)內(nèi)部作為局部變量訪問葵袭，提供訪問速度。

jquery實(shí)現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼哲鸳，所返回的都是同一個(gè)對(duì)象踊沸，可以提高代碼效率。

ES6的了解

新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)骤素，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs谆甜。）、for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值集绰。）arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替规辱。ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象栽燕。增加了let和const命令罕袋，用來聲明變量。增加了塊級(jí)作用域碍岔。let命令實(shí)際上就增加了塊級(jí)作用域浴讯。ES6規(guī)定，var命令和function命令聲明的全局變量蔼啦，屬于全局對(duì)象的屬性榆纽；let命令、const命令、class命令聲明的全局變量奈籽，不屬于全局對(duì)象的屬性饥侵。。還有就是引入module模塊的概念

js繼承方式及其優(yōu)缺點(diǎn)

原型鏈繼承的缺點(diǎn)

一是字面量重寫原型會(huì)中斷關(guān)系衣屏，使用引用類型的原型躏升，并且子類型還無法給超類型傳遞參數(shù)。

借用構(gòu)造函數(shù)（類式繼承）

借用構(gòu)造函數(shù)雖然解決了剛才兩種問題狼忱，但沒有原型膨疏，則復(fù)用無從談起。所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式钻弄，這種模式稱為組合繼承

組合式繼承

組合式繼承是比較常用的一種繼承方法佃却，其背后的思路是 使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承斧蜕。這樣双霍，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用砚偶，又保證每個(gè)實(shí)例都有它自己的屬性批销。

具體請(qǐng)看：JavaScript繼承方式詳解

關(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并行加載js文件，會(huì)按照頁面上script標(biāo)簽的順序執(zhí)行
async并行加載js文件儒喊，下載完成立即執(zhí)行镣奋，不會(huì)按照頁面上script標(biāo)簽的順序執(zhí)行

談?wù)劯?dòng)和清除浮動(dòng)

浮動(dòng)的框可以向左或向右移動(dòng)，直到他的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹够忱ⅰＳ捎诟?dòng)框不在文檔的普通流中侨颈，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)的塊框會(huì)漂浮在文檔普通流的塊框上芯义。

如何評(píng)價(jià)AngularJS和BackboneJS

backbone具有依賴性哈垢，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個(gè)AngularJS 多出了2 次HTTP請(qǐng)求.

Backbone的Model沒有與UI視圖數(shù)據(jù)綁定扛拨，而是需要在View中自行操作DOM來更新或讀取UI數(shù)據(jù)耘分。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關(guān)系求泰，通過directive封裝啤贩，AngularJS內(nèi)置的通用directive，就能實(shí)現(xiàn)大部分操作了拜秧，也就是說痹屹，基本不必關(guān)心Model與UI視圖的關(guān)系，直接操作Model就行了枉氮，UI視圖自動(dòng)更新志衍。

AngularJS的directive，你輸入特定數(shù)據(jù)聊替，他就能輸出相應(yīng)UI視圖楼肪。是一個(gè)比較完善的前端MVW框架，包含模板惹悄，數(shù)據(jù)雙向綁定春叫，路由，模塊化泣港，服務(wù)暂殖，依賴注入等所有功能，模板功能強(qiáng)大豐富当纱，并且是聲明式的呛每，自帶了豐富的 Angular 指令。

用過哪些設(shè)計(jì)模式坡氯？

工廠模式：

主要好處就是可以消除對(duì)象間的耦合晨横，通過使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個(gè)位置防止代碼重復(fù)箫柳。

    工廠模式解決了重復(fù)實(shí)例化的問題 手形，但還有一個(gè)問題,那就是識(shí)別問題，因?yàn)楦緹o法 搞清楚他們到底是哪個(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 語句曼玩。

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

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染窒百，缺點(diǎn)是閉包會(huì)常駐內(nèi)存黍判，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露篙梢。

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

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

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

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

具體請(qǐng)看：詳解js閉包

請(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榴嗅，Firefox會(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信息。即使加密也與事無補(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來取代globalStorage器予。

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

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)捐迫，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(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è)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去巧婶，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域涂乌，不可以跨域調(diào)用艺栈。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法湾盒，不像cookie需要前端開發(fā)者自己封裝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中

CSS 相關(guān)問題

display:none和visibility:hidden的區(qū)別跌榔？

display:none  隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間捶障，它各邊的元素會(huì)合攏僧须，就當(dāng)他從來不存在。

visibility:hidden  隱藏對(duì)應(yīng)的元素项炼，但是在文檔布局中仍保留原來的空間担平。

CSS中link 和@import的區(qū)別是？

(1) link屬于HTML標(biāo)簽锭部，而@import是CSS提供的;

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

(3) import只在IE5以上才能識(shí)別拌禾，而link是HTML標(biāo)簽取胎，無兼容問題;

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

position:absolute和float屬性的異同

• 共同點(diǎn)：對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流湃窍，并且可以設(shè)置其寬高闻蛀。

• 不同點(diǎn)：float仍會(huì)占據(jù)位置，position會(huì)覆蓋文檔流中的其他元素坝咐。

介紹一下box-sizing屬性循榆？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box墨坚。

• content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定映挂，設(shè)置width/height屬性指的是content部分的寬/高

• border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）泽篮。設(shè)置width/height屬性指的是border + padding + content

標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對(duì)盒模型解析柑船，一旦修改了元素的邊框或內(nèi)距帽撑，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸鞍时，從而影響整個(gè)頁面的布局亏拉。

CSS 選擇符有哪些扣蜻？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算及塘？ CSS3新增偽類有那些莽使？

    1.id選擇器（ # myid）

    2.類選擇器（.myclassname）

    3.標(biāo)簽選擇器（div, h1, p）

    4.相鄰選擇器（h1 + p）

    5.子選擇器（ul > li）

    6.后代選擇器（li a）

    7.通配符選擇器（ * ）

    8.屬性選擇器（a[rel = "external"]）

    9.偽類選擇器（a: hover, li:nth-child）

優(yōu)先級(jí)為:

!important > id > class > tag

important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高

CSS3新增偽類舉例：

    p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。

    p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素笙僚。

    p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素芳肌。

    p:only-child    選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。

    p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素肋层。

    :enabled  :disabled 控制表單控件的禁用狀態(tài)亿笤。

    :checked        單選框或復(fù)選框被選中。

CSS3有哪些新特性栋猖？

CSS3實(shí)現(xiàn)圓角（border-radius）净薛，陰影（box-shadow），

對(duì)文字加特效（text-shadow蒲拉、）罕拂，線性漸變（gradient），旋轉(zhuǎn)（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜

增加了更多的CSS選擇器  多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢全陨，多欄布局

border-image

CSS3中新增了一種盒模型計(jì)算方式：box-sizing爆班。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高的區(qū)別如下：

content-box（默認(rèn)）

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

對(duì)BFC規(guī)范的理解辱姨？

      BFC柿菩，塊級(jí)格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的雨涛，盒子里面的子元素的樣式不會(huì)影響到外面的元素枢舶。在同一個(gè)BFC中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的margin會(huì)發(fā)生折疊。

    （W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用篡腌。）

html部分

說說你對(duì)語義化的理解瀑粥？

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

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

3蒂誉，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器距帅、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁右锨；

4，便于團(tuán)隊(duì)開發(fā)和維護(hù)碌秸，語義化更具可讀性绍移，是下一步吧網(wǎng)頁的重要?jiǎng)酉蚯那裕裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化蹂窖。

Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分轧抗？它們有何意義?

1）、<!DOCTYPE> 聲明位于文檔中的最前面恼策，處于 <html> 標(biāo)簽之前鸦致。告知瀏覽器以何種模式來渲染文檔。

2）涣楷、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行分唾。

3）、在混雜模式中狮斗，頁面以寬松的向后兼容的方式顯示绽乔。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

4）碳褒、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)折砸。

你知道多少種Doctype文檔類型？

 該標(biāo)簽可聲明三種 DTD 類型沙峻，分別表示嚴(yán)格版本睦授、過渡版本以及基于框架的 HTML 文檔。

 HTML 4.01 規(guī)定了三種文檔類型：Strict摔寨、Transitional 以及 Frameset去枷。

 XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset是复。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁删顶，而 Quirks

 （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

HTML與XHTML——二者有什么區(qū)別

區(qū)別：

1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記

2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫

3.所有的XML標(biāo)記都必須合理嵌套

4.所有的屬性必須用引號(hào)""括起來

5.把所有<和&特殊符號(hào)用編碼表示

6.給所有屬性賦一個(gè)值

7.不要在注釋內(nèi)容中使“--”

8.圖片必須有說明文字

常見兼容性問題淑廊？

png24位的圖片在iE6瀏覽器上出現(xiàn)背景逗余，解決方案是做成PNG8.也可以引用一段腳本處理.

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一季惩。

IE6雙邊距bug:塊屬性標(biāo)簽float后录粱，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大蜀备。

浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下关摇，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right碾阁，margin值會(huì)加倍。）

#box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會(huì)產(chǎn)生20px的距離些楣，解決方案是在float的標(biāo)簽樣式控制中加入
_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性脂凶。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

漸進(jìn)識(shí)別的方式宪睹，從總體中逐漸排除局部。

  首先蚕钦，巧妙的使用“\9”這一標(biāo)記亭病，將IE游覽器從所有情況中分離出來。

  接著嘶居，再次使用“+”將IE8和IE7罪帖、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別邮屁。

  css

      .bb{

       background-color:#f1ee18;/*所有識(shí)別*/

      .background-color:#00deff\9; /*IE6整袁、7、8識(shí)別*/

      +background-color:#a200ff;/*IE6佑吝、7識(shí)別*/

      _background-color:#1e0bd1;/*IE6識(shí)別*/

      }

怪異模式問題：漏寫DTD聲明坐昙，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會(huì)觸發(fā)
怪異模式芋忿。為避免怪異模式給我們帶來不必要的麻煩炸客，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在
可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

上下margin重合問題

ie和ff都存在戈钢，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合痹仙，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。

解決方法殉了，養(yǎng)成良好的代碼編寫習(xí)慣开仰，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。

解釋下浮動(dòng)和它的工作原理宣渗？清除浮動(dòng)的技巧

浮動(dòng)元素脫離文檔流抖所，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留痕囱。

1.使用空標(biāo)簽清除浮動(dòng)田轧。

   這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。

2.使用overflow鞍恢。

   給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6傻粘。

3.使用after偽對(duì)象清除浮動(dòng)。

   該方法只適用于非IE瀏覽器帮掉。具體寫法可參照以下示例弦悉。使用中需注意以下幾點(diǎn)。一蟆炊、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0稽莉，否則該元素會(huì)比實(shí)際高出若干像素；

浮動(dòng)元素引起的問題和解決辦法涩搓？

浮動(dòng)元素引起的問題：

（1）父元素的高度無法被撐開污秆，影響與父元素同級(jí)的元素

（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

（3）若非第一個(gè)元素浮動(dòng)劈猪，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決2良拼、3問題战得，對(duì)于問題1，添加如下樣式庸推，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動(dòng)的幾種方法：

1常侦，額外標(biāo)簽法，<div style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡(jiǎn)潔贬媒。）

2聋亡，使用after偽類

#parent:after{

    content:".";

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

    }

3,浮動(dòng)外部元素

4,設(shè)置overflow為hidden或者auto

DOM操作——怎樣添加、移除掖蛤、移動(dòng)杀捻、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)蚓庭。

1）創(chuàng)建新節(jié)點(diǎn)

      createDocumentFragment()    //創(chuàng)建一個(gè)DOM片段

      createElement()   //創(chuàng)建一個(gè)具體的元素

      createTextNode()   //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2）添加致讥、移除、替換器赞、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //并沒有insertAfter()

3）查找

      getElementsByTagName()    //通過標(biāo)簽名稱

      getElementsByName()    //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)垢袱，
      會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)

      getElementById()    //通過元素Id港柜，唯一性

html5有哪些新特性请契、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題夏醉？如何區(qū)分 HTML 和 HTML5爽锥？

  HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像畔柔，位置氯夷，存儲(chǔ)，多任務(wù)等功能的增加靶擦。

  拖拽釋放(Drag and drop) API

  語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

  音頻腮考、視頻API(audio,video)

  畫布(Canvas) API

  地理(Geolocation) API

  本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失玄捕；

  sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

  表單控件踩蔚，calendar、date枚粘、time馅闽、email、url、search

  新的技術(shù)webworker, websocket, Geolocation

![what-is-html5][16]

移除的元素

純表現(xiàn)的元素：basefont捞蛋，big孝冒，center柬姚，font, s拟杉，strike，tt量承，u搬设；

對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset撕捍，noframes拿穴；

支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽忧风，

當(dāng)然最好的方式是直接使用成熟的框架默色、使用最多的是html5shim框架

   <!--[if lt IE 9]>

   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

   <![endif]-->

如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

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

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

什么是 FOUC（無樣式內(nè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文件吃度，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的贴硫，這段時(shí)間的長(zhǎng)短跟網(wǎng)速椿每，電腦速度都有關(guān)系。

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

null和undefined的區(qū)別？

null是一個(gè)表示"無"的對(duì)象挖诸，轉(zhuǎn)為數(shù)值時(shí)為0汁尺；undefined是一個(gè)表示"無"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN税灌。

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

null用來表示尚未存在的對(duì)象菱涤，常用來表示函數(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 越驻。

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

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

defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script缀旁，插入到DOM中记劈，加載完畢后callBack）、按需異步載入js

call() 和 apply() 的區(qū)別和作用并巍？

作用：動(dòng)態(tài)改變某個(gè)類的某個(gè)方法的運(yùn)行環(huán)境（執(zhí)行上下文）目木。

區(qū)別參見：[JavaScript學(xué)習(xí)總結(jié)（四）function函數(shù)部分][3]

哪些操作會(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)）

詳見：[詳解js變量姑宽、作用域及內(nèi)存][4]

列舉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圓角：ie7以下不支持圓角

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

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

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

• 基于WebSocket的推送方案

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

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

前端是最貼近用戶的程序員亿絮，比后端、數(shù)據(jù)庫麸拄、產(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)理的溝通架曹；

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

 處理hack绑雄，兼容、寫出優(yōu)美的代碼格式夹抗；

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

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

    分為4個(gè)步驟：

    （1）靡砌，當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁面的URL還是Web頁面上每個(gè)資源的URL珊楼，瀏覽器都會(huì)開啟一個(gè)線程來處理這個(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é)商來建立一個(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)單來說宗收，瀏覽器會(huì)解析`HTML`生成`DOM Tree`，其次會(huì)根據(jù)CSS生成CSS Rule Tree亚兄，而`javascript`又可以根據(jù)`DOM API`操作`DOM`

詳情：[從輸入 URL 到瀏覽器接收的過程中發(fā)生了什么事情混稽？][8]

Web最新資訊，請(qǐng)關(guān)注我的微信公眾號(hào)“一起玩前端”或掃描二維碼關(guān)注.

qrcode_for_gh_7a765c30aeb7_344.jpg