本文旨在加深對(duì)前端知識(shí)點(diǎn)的理解，資料來(lái)源于網(wǎng)絡(luò)

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)值蜓肆。沒(méi)有定位，元素出現(xiàn)在正常的流中

• sticky 生成粘性定位的元素谋币，容器的位置根據(jù)正常文檔流計(jì)算得出

如何解決跨域問(wèn)題

JSONP：

原理是：動(dòng)態(tài)插入script標(biāo)簽仗扬，通過(guò)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)求调炬，可以通過(guò)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的支持泼返，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置宝恶，就可以允許Ajax進(jìn)行跨域的訪問(wèn)符隙。

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

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

主域相同的使用document.domain

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

window對(duì)象有個(gè)name屬性霹疫，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的拱绑，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(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開(kāi)發(fā)中所用到的HTML卢厂、Javascript、CSS以及各種靜態(tài)文件（圖片惠啄、字體等）慎恒，讓開(kāi)發(fā)過(guò)程更加高效。對(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á)。握手過(guò)程中使用了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é)束宴凉。
若在握手過(guò)程中某個(gè)階段莫名中斷誊锭，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

斷開(kāi)一個(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ù)籽暇，如果沒(méi)有收到對(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)過(guò)三次“對(duì)話”才能建立起來(lái)

UDP（User Data Protocol，用戶數(shù)據(jù)報(bào)協(xié)議）是與TCP相對(duì)應(yīng)的協(xié)議镇眷。它是面向非連接的協(xié)議咬最，它不與對(duì)方建立連接，而是直接就把數(shù)據(jù)包發(fā)送過(guò)去欠动！
UDP適用于一次只傳送少量數(shù)據(jù)永乌、對(duì)可靠性要求不高的應(yīng)用環(huán)境。

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

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

創(chuàng)建ajax過(guò)程

(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í) ：一開(kāi)始就構(gòu)建完整的功能惕味，然后再針對(duì)低版本瀏覽器進(jìn)行兼容害碾。

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

sql注入原理

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

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

'' 1.永遠(yuǎn)不要信任用戶的輸入慌随，要對(duì)用戶的輸入進(jìn)行校驗(yàn)，可以通過(guò)正則表達(dá)式，或限制長(zhǎng)度阁猜，對(duì)單引號(hào)和雙"-"進(jìn)行轉(zhuǎn)換等丸逸。
'' 
'' 2.永遠(yuǎn)不要使用動(dòng)態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲(chǔ)過(guò)程進(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)臂寝。

Web Worker 和webSocket

worker主線程:

'' 1.通過(guò) worker = new Worker( url ) 加載一個(gè)JS文件來(lái)創(chuàng)建一個(gè)worker章鲤，同時(shí)返回一個(gè)worker實(shí)例。
'' 
'' 2.通過(guò)worker.postMessage( data ) 方法來(lái)向worker發(fā)送數(shù)據(jù)咆贬。
'' 
'' 3.綁定worker.onmessage方法來(lái)接收worker發(fā)送過(guò)來(lái)的數(shù)據(jù)败徊。
'' 
'' 4.可以使用 worker.terminate() 來(lái)終止一個(gè)worker的執(zhí)行。

WebSocket是Web應(yīng)用程序的傳輸協(xié)議掏缎，它提供了雙向的皱蹦，按序到達(dá)的數(shù)據(jù)流。他是一個(gè)HTML5協(xié)議御毅，WebSocket的連接是持久的，他通過(guò)在客戶端和服務(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)樗?code>ssl/tls協(xié)議傳輸酝润。它包含證書，卸載璃弄，流量轉(zhuǎn)發(fā)要销，負(fù)載均衡，頁(yè)面適配夏块，瀏覽器適配疏咐，refer傳遞等。保障了傳輸過(guò)程的安全性

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

AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出脐供。

CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出浑塞。

AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行患民。

AMD推薦的風(fēng)格通過(guò)返回一個(gè)對(duì)象做為模塊對(duì)象缩举，CommonJS的風(fēng)格通過(guò)對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的。

CMD模塊方式

'' define(function(require, exports, module) {
'' 
''   // 模塊代碼
'' 
'' });

Javascript垃圾回收方法

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

這是JavaScript最常見(jiàn)的垃圾回收方式匹颤，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候仅孩，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”印蓖，當(dāng)變量離開(kāi)環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開(kāi)環(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ō)明沒(méi)有變量在使用，這個(gè)值沒(méi)法被訪問(wèn)了队塘，因此可以將其占用的空間回收袁梗，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

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

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

'' 為簡(jiǎn)化用戶使用提供技術(shù)支持（交互部分）
''
'' 為多個(gè)瀏覽器兼容性提供支持
''
'' 為提高用戶瀏覽速度（瀏覽器性能）提供支持
''
'' 為跨平臺(tái)或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
''
'' 為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

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

代碼層面：避免使用css表達(dá)式鸿市，避免使用高級(jí)選擇器锯梁，通配選擇器即碗。

緩存利用：緩存Ajax，使用CDN涝桅，使用外部js和css文件以便緩存拜姿，添加Expires頭，服務(wù)端配置Etag冯遂，減少DNS查找等

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

請(qǐng)求帶寬：壓縮文件，開(kāi)啟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)畫砸王，開(kāi)啟硬件加速。
• 適當(dāng)使用touch事件代替click事件峦阁。
• 避免使用css3漸變陰影效果谦铃。
• 可以用transform: translateZ(0)來(lái)開(kā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)合理使用。過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加
• PC端的在移動(dòng)端同樣適用

相關(guān)閱讀：[如何做到一秒渲染一個(gè)移動(dòng)頁(yè)面]

棧和隊(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è)排序過(guò)程只需要三步：

（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>

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模塊的概念

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

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

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

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

'' 借用構(gòu)造函數(shù)雖然解決了剛才兩種問(wèn)題倚喂，但沒(méi)有原型每篷，則復(fù)用無(wú)從談起。所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式端圈，這種模式稱為組合繼承

組合式繼承

'' 組合式繼承是比較常用的一種繼承方法雳攘，其背后的思路是 使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承枫笛。這樣吨灭，既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性刑巧。

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

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

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

用過(guò)哪些設(shè)計(jì)模式恭理？

工廠模式：

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

工廠模式解決了重復(fù)實(shí)例化的問(wèn)題 涯保，但還有一個(gè)問(wèn)題,那就是識(shí)別問(wèn)題，因?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í)例

_<br>

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

使用構(gòu)造函數(shù)的方法 夕春，即解決了重復(fù)實(shí)例化的問(wèn)題 ，又解決了對(duì)象識(shí)別的問(wèn)題专挪，該模式與工廠模式的不同之處在于：

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

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

3.沒(méi)有 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)看：[詳解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沒(méi)有做硬性限制

IE和Opera 會(huì)清理近期最少使用的cookie盆犁，Firefox會(huì)隨機(jī)清理cookie。

cookie的最大大約為4096字節(jié)篡九，為了兼容性谐岁，一般不能超過(guò)4095字節(jié)。

IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù)榛臼，叫做userdata伊佃，從IE5.0就開(kāi)始支持。每個(gè)數(shù)據(jù)最多128K沛善，每個(gè)域名下最多1M航揉。這個(gè)持久化數(shù)據(jù)放在緩存中，如果緩存沒(méi)有清理金刁，那么會(huì)一直存在帅涂。

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

'' 1.通過(guò)良好的編程，控制保存在cookie中的session對(duì)象的大小尤蛮。
''
'' 2.通過(guò)加密和安全傳輸技術(shù)（SSL）媳友，減少cookie被破解的可能性。
''
'' 3.只在cookie中存放不敏感數(shù)據(jù)产捞，即使被盜也不會(huì)有重大損失。
''
'' 4.控制cookie的生命期，使之不會(huì)永遠(yuǎn)有效胖替。偷盜者很可能拿到一個(gè)過(guò)期的cookie故痊。

缺點(diǎn)：

'' 1.Cookie數(shù)量和長(zhǎng)度的限制。每個(gè)domain最多只能有20條cookie看靠，每個(gè)cookie長(zhǎng)度不能超過(guò)4KB求晶，否則會(huì)被截掉.
''
''
'' 2.安全性問(wèn)題。如果cookie被人攔截了衷笋，那人就可以取得所有的session信息芳杏。即使加密也與事無(wú)補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義辟宗，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了爵赵。
''
'' 3.有些狀態(tài)不可能保存在客戶端。例如泊脐，為了防止重復(fù)提交表單空幻，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端容客，那么它起不到任何作用秕铛。

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() //并沒(méi)有insertAfter()

3）查找

'' getElementsByTagName() //通過(guò)標(biāo)簽名稱
''
'' getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)紧阔，
'' 會(huì)得到一個(gè)數(shù)組坊罢，其中包括id等于name值的)
''
'' getElementById() //通過(guò)元素Id，唯一性

html5有哪些新特性擅耽、移除了那些元素活孩？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5乖仇？

'' HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集诱鞠，主要是關(guān)于圖像，位置这敬，存儲(chǔ)航夺，多任務(wù)等功能的增加。
''
'' 拖拽釋放(Drag and drop) API
''
'' 語(yǔ)義化更好的內(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

移除的元素

'' 純表現(xiàn)的元素：basefont隆夯，big钳恕，center，font, s蹄衷，strike忧额，tt，u愧口；
''
'' 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame睦番，frameset，noframes；

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

'' IE8/IE7/IE6支持通過(guò)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)簽頁(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è)問(wèn)題的罪魁禍?zhǔn)壮笊ΑE會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件提揍，因此啤月，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(mé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è)值，但是還沒(méi)有定義容燕。典型用法是：

'' （1）變量被聲明了梁呈，但沒(méi)有賦值時(shí)，就等于undefined蘸秘。
''
''
'' （2) 調(diào)用函數(shù)時(shí)官卡，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined醋虏。
''
''
'' （3）對(duì)象沒(méi)有賦值的屬性味抖，該屬性的值為undefined。
''
''
'' （4）函數(shù)沒(méi)有返回值時(shí)灰粮，默認(rèn)返回undefined仔涩。

null表示"沒(méi)有對(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ū)別參見(jiàn)：[JavaScript學(xué)習(xí)總結(jié)（四）function函數(shù)部分]

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

'' 內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
''
'' 垃圾回收器定期掃描對(duì)象痪宰，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量捕犬。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(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)）

詳見(jiàn)：[詳解js變量蜡吧、作用域及內(nèi)存]

列舉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ù)庫(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ù)坎吻。

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

'' 分為4個(gè)步驟：
''
'' （1）瘦真，當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL黍瞧，瀏覽器都會(huì)開(kāi)啟一個(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ù)器通過(guò)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ì)通過(guò)該連接向遠(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ù)云矫，客戶端開(kāi)始下載資源膳沽。
''
''
''
'' 請(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操作DOM

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

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免钻，寄生組合式繼承

詳情：[JavaScript繼承方式詳解]

創(chuàng)建ajax的過(guò)程

'' (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){
'' 
''     }
'' 
'' }

詳情：[JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字]

異步加載和延遲加載

'' 1.異步加載的方案： 動(dòng)態(tài)插入script標(biāo)簽
''
'' 2.通過(guò)ajax去獲取js代碼崔拥，然后通過(guò)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適合處理多媒體卖子、矢量圖形略号、訪問(wèn)機(jī)器；對(duì)CSS洋闽、處理文本上不足玄柠，不容易被搜索。

-Ajax對(duì)CSS诫舅、文本支持很好羽利，支持搜索；多媒體刊懈、矢量圖形这弧、機(jī)器訪問(wèn)不足。

• 共同點(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è)面就可以通過(guò)Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名励堡，密碼就輕松到手了谷丸。

缺點(diǎn)：

現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮，一些文件用了嚴(yán)格模式应结，而另一些沒(méi)有刨疼。這時(shí)這些本來(lái)是嚴(yán)格模式的文件泉唁，被 merge 后，這個(gè)串就到了文件的中間揩慕，不僅沒(méi)有指示嚴(yán)格模式亭畜，反而在壓縮后浪費(fèi)了字節(jié)。

GET和POST的區(qū)別迎卤，何時(shí)使用POST拴鸵？

'' GET：一般用于信息獲取，使用URL傳遞參數(shù)蜗搔，對(duì)所發(fā)送信息的數(shù)量也有限制宝踪，一般在2000個(gè)字符
''
'' POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒(méi)有限制碍扔。
''
''
'' GET方式需要使用Request.QueryString來(lái)取得變量的值瘩燥，而POST方式通過(guò)Request.Form來(lái)獲取變量的值，
''
'' 也就是說(shuō)Get是通過(guò)地址欄來(lái)傳值不同，而Post是通過(guò)提交表單來(lái)傳值厉膀。
''
''
''
'' 然而，在以下情況中二拐，請(qǐng)使用 POST 請(qǐng)求：
''
'' 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
''
'' 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(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下的問(wèn)題斟珊？

詳情請(qǐng)見(jiàn)：[JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字]

ajax的缺點(diǎn)

'' 1苇倡、ajax不支持瀏覽器back按鈕。
''
'' 2囤踩、安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)旨椒。
''
'' 3、對(duì)搜索引擎的支持比較弱堵漱。
''
'' 4综慎、破壞了程序的異常機(jī)制。
''
'' 5怔锌、不容易調(diào)試寥粹。

IE緩存問(wèn)題

在IE瀏覽器下变过，如果請(qǐng)求的方法是GET，并且請(qǐng)求的URL不變涝涤，那么這個(gè)請(qǐng)求的結(jié)果就會(huì)被緩存媚狰。解決這個(gè)問(wèn)題的辦法可以通過(guò)實(shí)時(shí)改變請(qǐng)求的URL，只要URL改變阔拳，就不會(huì)被緩存崭孤，可以通過(guò)在URL末尾添加上隨機(jī)的時(shí)間戳參數(shù)('t'= + new Date().getTime())

或者：

open('GET','demo.php?rand=+Math.random()',true);//

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

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

還可以通過(guò)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è)未修改過(guò)吞鸭。
'' 
'' 
'' 400 Bad Request  服務(wù)器無(wú)法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求覆糟。
'' 
'' 401 Unauthorized  請(qǐng)求未授權(quán)刻剥。
'' 
'' 403 Forbidden  禁止訪問(wèn)。
'' 
'' 404 Not Found  找不到如何與 URI 相匹配的資源滩字。
'' 
'' 500 Internal Server Error  最常見(jiàn)的服務(wù)器端錯(cuò)誤造虏。
'' 
'' 503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過(guò)載或維護(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é)前端開(kāi)發(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)過(guò)測(cè)試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 >~是視覺(jué)要素叛氨，分別表示無(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)格通過(guò)返回一個(gè)對(duì)象做為模塊對(duì)象昌抠，CommonJS的風(fēng)格通過(guò)對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的患朱。

詳情：[也談webpack及其開(kāi)發(fā)模式]

document.write()的用法

document.write()方法可以用在兩個(gè)方面：頁(yè)面載入過(guò)程中用實(shí)時(shí)腳本創(chuàng)建頁(yè)面內(nèi)容，以及用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容炊苫。

document.write只能重繪整個(gè)頁(yè)面裁厅。innerHTML可以重繪頁(yè)面的一部分

編寫一個(gè)方法 求一個(gè)字符串的字節(jié)長(zhǎng)度

假設(shè)：一個(gè)英文字符占用一個(gè)字節(jié)，一個(gè)中文字符占用兩個(gè)字節(jié)

 function GetBytes(str){

''     var len = str.length;
'' 
''     var bytes = len;
'' 
''     for(var i=0; i<len; i++){
'' 
''         if (str.charCodeAt(i) > 255) bytes++;
'' 
''     }
'' 
''     return bytes;
'' 
'' }

alert(GetBytes("你好,as"));

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

'' View 傳送指令到 Controller
''
'' Controller 完成業(yè)務(wù)邏輯后姐直，要求 Model 改變狀態(tài)
''
'' Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋

所有通信都是單向的蒋畜。

Angular它采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在 ViewModel撞叽，反之亦然姻成。

'' 組成部分Model插龄、View、ViewModel
''
'' View：UI界面
''
'' ViewModel：它是View的抽象科展，負(fù)責(zé)View與Model之間信息轉(zhuǎn)換均牢，將View的Command傳送到Model；
''
'' Model：數(shù)據(jù)訪問(wèn)層

請(qǐng)解釋什么是事件代理

事件代理（Event Delegation）才睹，又稱之為事件委托徘跪。是 JavaScript 中常用綁定事件的常用技巧。顧名思義琅攘，“事件代理”即是把原本需要綁定的事件委托給父元素垮庐，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽(tīng)的職務(wù)。事件代理的原理是DOM元素的事件冒泡坞琴。使用事件代理的好處是可以提高性能哨查。

attribute和property的區(qū)別是什么？

attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性剧辐；

property就是dom元素在js中作為對(duì)象擁有的屬性寒亥。

所以：

對(duì)于html的標(biāo)準(zhǔn)屬性來(lái)說(shuō)，attribute和property是同步的荧关，是會(huì)自動(dòng)更新的溉奕，

但是對(duì)于自定義的屬性來(lái)說(shuō)，他們是不同步的忍啤，

說(shuō)說(shuō)網(wǎng)絡(luò)分層里七層模型是哪七層

• 應(yīng)用層：應(yīng)用層腐宋、表示層窟感、會(huì)話層（從上往下）（HTTP枕荞、FTP、SMTP训桶、DNS）

• 傳輸層（TCP和UDP）

• 網(wǎng)絡(luò)層（IP）

• 物理和數(shù)據(jù)鏈路層（以太網(wǎng)）

每一層的作用如下：

物理層：通過(guò)媒介傳輸比特,確定機(jī)械及電氣規(guī)范（比特Bit）
數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞（幀F(xiàn)rame）
網(wǎng)絡(luò)層：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連（包PackeT）
傳輸層：提供端到端的可靠報(bào)文傳遞和錯(cuò)誤恢復(fù)（段Segment）
會(huì)話層：建立参萄、管理和終止會(huì)話（會(huì)話協(xié)議數(shù)據(jù)單元SPDU）
表示層：對(duì)數(shù)據(jù)進(jìn)行翻譯卫枝、加密和壓縮（表示協(xié)議數(shù)據(jù)單元PPDU）
應(yīng)用層：允許訪問(wèn)OSI環(huán)境的手段（應(yīng)用協(xié)議數(shù)據(jù)單元APDU）

各種協(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ù)雜马篮、開(kāi)銷不大的文件傳輸服務(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)有：
①弱一致性（最終一致）导匣，更能保證用戶的訪問(wèn)速度：
②文檔結(jié)構(gòu)的存儲(chǔ)方式才菠，能夠更便捷的獲取數(shù)據(jù)。

講講304緩存的原理

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

_<br>

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

_<br>

客戶端請(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)體。

_<br>

什么樣的前端代碼是好的

高復(fù)用低耦合背苦，這樣文件小互捌，好維護(hù)，而且好擴(kuò)展行剂。

代碼題

• [css代碼題]
• [js代碼題]