本文旨在加深對前端知識點的理解工育，資料來源于網(wǎng)絡，由本人(博客：http://segmentfault.com/u/trigkit4) 收集整理搓彻。

一些開放性題目

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

2.項目介紹

3.如何看待前端開發(fā)旭贬？

4.平時是如何學習前端開發(fā)的怔接？

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

position的值稀轨， relative和absolute分別是相對于誰進行定位的扼脐？

• absolute :生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位奋刽。

• fixed （老IE不支持）生成絕對定位的元素瓦侮，通常相對于瀏覽器窗口或 frame 進行定位。

• relative 生成相對定位的元素佣谐，相對于其在普通流中的位置進行定位肚吏。

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

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

如何解決跨域問題

JSONP：

原理是：動態(tài)插入script標簽党觅，通過script標簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)斋泄，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入杯瞻。

由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名炫掐、協(xié)議魁莉、端口）的資源，為了實現(xiàn)跨域請求募胃，可以通過script標簽實現(xiàn)跨域請求旗唁，然后在服務端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請求摔认。

優(yōu)點是兼容性好逆皮，簡單易用宅粥，支持瀏覽器與服務器雙向通信参袱。缺點是只支持GET請求。

JSONP：json+padding（內(nèi)填充）秽梅，顧名思義抹蚀，就是把JSON填充到一個盒子里

<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

服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的企垦。如果瀏覽器檢測到相應的設置环壤，就可以允許Ajax進行跨域的訪問。

通過修改document.domain來跨子域

將子域和主域的document.domain設為同一個主域.前提條件：這兩個域名必須屬于同一個基礎域名!而且所用的協(xié)議钞诡，端口都要一致郑现，否則無法利用document.domain進行跨域

主域相同的使用document.domain

使用window.name來進行跨域

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

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

還有flash、在服務器上設置代理頁面等跨域方式朵诫。個人認為window.name的方法既不復雜辛友，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法剪返。

XML和JSON的區(qū)別废累？

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

JSON相對于XML來講脱盲，數(shù)據(jù)的體積小邑滨，傳遞的速度更快些。

(2).數(shù)據(jù)交互方面钱反。

JSON與JavaScript的交互更加方便驼修，更容易解析處理殿遂，更好的數(shù)據(jù)交互。

(3).數(shù)據(jù)描述方面乙各。

JSON對數(shù)據(jù)的描述性比XML較差墨礁。

(4).傳輸速度方面。

JSON的速度要遠遠快于XML耳峦。

談談你對webpack的看法

WebPack 是一個模塊打包工具恩静，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件蹲坷。它能夠很好地管理驶乾、打包Web開發(fā)中所用到的HTML、Javascript循签、CSS以及各種靜態(tài)文件（圖片级乐、字體等），讓開發(fā)過程更加高效县匠。對于不同類型的資源风科，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關系乞旦，最后 生成了優(yōu)化且合并后的靜態(tài)資源贼穆。

webpack的兩大特色：

1.code splitting（可以自動完成）

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

webpack 是以commonJS的形式來書寫腳本滴兰粉，但對 AMD/CMD 的支持也很全面故痊，方便舊項目進行代碼遷移。

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

1. 對 CommonJS 愕秫、 AMD 、ES6的語法做了兼容

2. 對js焰络、css戴甩、圖片等資源文件都支持打包

3. 串聯(lián)式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性舔琅，例如提供對CoffeeScript等恐、ES6的支持

4. 有獨立的配置文件webpack.config.js

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

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

7. 具有強大的Plugin接口，大多是內(nèi)部插件郊尝，使用起來比較靈活

8.webpack 使用異步 IO 并具有多級緩存二跋。這使得 webpack 很快且在增量編譯上更加快

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

為了準確無誤地把數(shù)據(jù)送達目標處，TCP協(xié)議采用了三次握手策略流昏。用TCP協(xié)議把數(shù)據(jù)包送出去后扎即，TCP不會對傳送 后的情況置之不理吞获，它一定會向?qū)Ψ酱_認是否成功送達。握手過程中使用了TCP的標志：SYN和ACK谚鄙。

發(fā)送端首先發(fā)送一個帶SYN標志的數(shù)據(jù)包給對方各拷。接收端收到后，回傳一個帶有SYN/ACK標志的數(shù)據(jù)包以示傳達確認信息闷营。
最后烤黍，發(fā)送端再回傳一個帶ACK標志的數(shù)據(jù)包，代表“握手”結(jié)束傻盟。
若在握手過程中某個階段莫名中斷速蕊，TCP協(xié)議會再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

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

• 第一次揮手：主動關閉方發(fā)送一個FIN娘赴，用來關閉主動方到被動關閉方的數(shù)據(jù)傳送规哲，也就是主動關閉方告訴被動關閉方：我已經(jīng)不 會再給你發(fā)數(shù)據(jù)了(當然，在fin包之前發(fā)送出去的數(shù)據(jù)诽表，如果沒有收到對應的ack確認報文唉锌，主動關閉方依然會重發(fā)這些數(shù)據(jù))，但是关顷，此時主動關閉方還可 以接受數(shù)據(jù)糊秆。

• 第二次揮手：被動關閉方收到FIN包后武福，發(fā)送一個ACK給對方议双，確認序號為收到序號+1（與SYN相同，一個FIN占用一個序號）捉片。

• 第三次揮手：被動關閉方發(fā)送一個FIN平痰，用來關閉被動關閉方到主動關閉方的數(shù)據(jù)傳送，也就是告訴主動關閉方伍纫，我的數(shù)據(jù)也發(fā)送完了宗雇，不會再給你發(fā)數(shù)據(jù)了。

• 第四次揮手：主動關閉方收到FIN后莹规，發(fā)送一個ACK給被動關閉方赔蒲，確認序號為收到序號+1，至此良漱，完成四次揮手舞虱。

TCP和UDP的區(qū)別

TCP（Transmission Control Protocol，傳輸控制協(xié)議）是基于連接的協(xié)議母市，也就是說矾兜，在正式收發(fā)數(shù)據(jù)前，必須和對方建立可靠的連接患久。一個TCP連接必須要經(jīng)過三次“對話”才能建立起來

UDP（User Data Protocol椅寺，用戶數(shù)據(jù)報協(xié)議）是與TCP相對應的協(xié)議浑槽。它是面向非連接的協(xié)議，它不與對方建立連接返帕，而是直接就把數(shù)據(jù)包發(fā)送過去桐玻！
UDP適用于一次只傳送少量數(shù)據(jù)、對可靠性要求不高的應用環(huán)境荆萤。

說說你對作用域鏈的理解

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

創(chuàng)建ajax過程

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

(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請求.

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

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

漸進增強和優(yōu)雅降級

漸進增強 ：針對低版本瀏覽器進行構(gòu)建頁面梧油，保證最基本的功能苫耸，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗儡陨。

優(yōu)雅降級 ：一開始就構(gòu)建完整的功能褪子，然后再針對低版本瀏覽器進行兼容。

常見web安全及防護原理

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串骗村，最終達到欺騙服務器執(zhí)行惡意的SQL命令嫌褪。

總的來說有以下幾點：

    1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗胚股，可以通過正則表達式笼痛，或限制長度，對單引號和雙"-"進行轉(zhuǎn)換等琅拌。

    2.永遠不要使用動態(tài)拼裝SQL缨伊，可以使用參數(shù)化的SQL或者直接使用存儲過程進行數(shù)據(jù)查詢存取。

    3.永遠不要使用管理員權(quán)限的數(shù)據(jù)庫連接进宝，為每個應用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接刻坊。

    4.不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息党晋。

XSS原理及防范

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

看似安全的鏈接，騙取用戶點擊后未玻，竊取cookie中的用戶私密信息灾而；或者攻擊者在論壇中加一個惡意表單，

當用戶提交表單的時候深胳，卻把信息傳送到攻擊者的服務器中绰疤，而不是用戶原本以為的信任站點。

XSS防范方法

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

首先纷宇，避免直接在cookie 中泄露用戶隱私，例如email蛾方、密碼等等像捶。

其次，通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險桩砰。這樣攻擊者得到的cookie 沒有實際價值拓春，不可能拿來重放。

如果網(wǎng)站不需要再瀏覽器端對cookie 進行操作亚隅，可以在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 硼莽。

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

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

XSS是獲取信息煮纵，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包懂鸵。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包行疏。

要完成一次CSRF攻擊匆光，受害者必須依次完成兩個步驟：

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

在不登出A的情況下终息，訪問危險網(wǎng)站B。

CSRF的防御

• 服務端的CSRF方式方法很多樣货葬，但總的思想都是一致的采幌，就是在客戶端頁面增加偽隨機數(shù)劲够。

• 通過驗證碼的方法

Web Worker 和webSocket

worker主線程:

    1.通過 worker = new Worker( url ) 加載一個JS文件來創(chuàng)建一個worker震桶，同時返回一個worker實例。

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

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

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

WebSocket是Web應用程序的傳輸協(xié)議人柿，它提供了雙向的柴墩，按序到達的數(shù)據(jù)流。他是一個HTML5協(xié)議凫岖，WebSocket的連接是持久的江咳，他通過在客戶端和服務器之間保持雙工連接，服務器的更新可以被及時推送給客戶端哥放，而不需要客戶端以一定時間間隔去輪詢歼指。

HTTP和HTTPS

HTTP協(xié)議通常承載于TCP協(xié)議之上爹土，在HTTP和TCP之間添加一個安全協(xié)議層（SSL或TSL），這個時候踩身，就成了我們常說的HTTPS胀茵。

默認HTTP的端口號為80，HTTPS的端口號為443挟阻。

為什么HTTPS安全

因為網(wǎng)絡請求需要中間有很多的服務器路由器的轉(zhuǎn)發(fā)琼娘。中間的節(jié)點都可能篡改信息，而如果使用HTTPS附鸽，密鑰在你和終點站才有脱拼。https之所以比http安全，是因為他利用ssl/tls協(xié)議傳輸坷备。它包含證書挪拟，卸載，流量轉(zhuǎn)發(fā)击你，負載均衡玉组，頁面適配，瀏覽器適配丁侄，refer傳遞等鲸湃。保障了傳輸過程的安全性

對前端模塊化的認識

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

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

AMD 是提前執(zhí)行更舞，CMD 是延遲執(zhí)行。

AMD推薦的風格通過返回一個對象做為模塊對象拙吉，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的潮孽。

CMD模塊方式

    define(function(require, exports, module) {

      // 模塊代碼

    });

Javascript垃圾回收方法

標記清除（mark and sweep）

這是JavaScript最常見的垃圾回收方式，當變量進入執(zhí)行環(huán)境的時候筷黔，比如函數(shù)中聲明一個變量往史，垃圾回收器將其標記為“進入環(huán)境”，當變量離開環(huán)境的時候（函數(shù)執(zhí)行結(jié)束）將其標記為“離開環(huán)境”佛舱。

垃圾回收器會在運行的時候給存儲在內(nèi)存中的所有變量加上標記椎例，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標記的就是要刪除的變量了

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

在低版本IE中經(jīng)常會出現(xiàn)內(nèi)存泄露请祖，很多時候就是因為其采用引用計數(shù)方式進行垃圾回收订歪。引用計數(shù)的策略是跟蹤記錄每個值被使用的次數(shù)，當聲明了一個 變量并將一個引用類型賦值給該變量的時候這個值的引用次數(shù)就加1肆捕，如果該變量的值變成了另外一個刷晋，則這個值得引用次數(shù)減1，當這個值的引用次數(shù)變?yōu)?的時 候，說明沒有變量在使用眼虱，這個值沒法被訪問了或舞，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數(shù)為0的值占用的空間蒙幻。

在IE中雖然JavaScript對象通過標記清除的方式進行垃圾回收映凳，但BOM與DOM對象卻是通過引用計數(shù)回收垃圾的，
也就是說只要涉及BOM及DOM就會出現(xiàn)循環(huán)引用問題邮破。

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

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

為多個瀏覽器兼容性提供支持

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

為跨平臺或者其他基于webkit或其他渲染引擎的應用提供支持

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

談談性能優(yōu)化問題

代碼層面：避免使用css表達式诈豌，避免使用高級選擇器，通配選擇器抒和。

緩存利用：緩存Ajax矫渔，使用CDN，使用外部js和css文件以便緩存摧莽，添加Expires頭庙洼，服務端配置Etag，減少DNS查找等

請求數(shù)量：合并樣式和腳本镊辕，使用css圖片精靈油够，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載征懈。

請求帶寬：壓縮文件石咬，開啟GZIP，

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

• 用hash-table來優(yōu)化查找

• 少用全局變量

• 用innerHTML代替DOM操作卖哎，減少DOM操作次數(shù)鬼悠，優(yōu)化javascript性能

• 用setTimeout來避免頁面失去響應

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

• 避免使用CSS Expression

• 避免全局查詢

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

• 多個變量聲明合并

• 避免圖片和iFrame等的空Src亏娜』牢眩空Src會重新加載當前頁面，影響速度和效率

• 盡量避免寫在HTML標簽中寫Style屬性

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

• 盡量使用css3動畫维贺，開啟硬件加速它掂。
• 適當使用touch事件代替click事件。
• 避免使用css3漸變陰影效果幸缕。
• 可以用transform: translateZ(0)來開啟硬件加速群发。
• 不濫用Float。Float在渲染時計算量比較大发乔，盡量減少使用
• 不濫用Web字體。Web字體需要下載雪猪，解析栏尚，重繪當前頁面，盡量減少使用只恨。
• 合理使用requestAnimationFrame動畫代替setTimeout
• CSS中的屬性（CSS3 transitions译仗、CSS3 3D transforms抬虽、Opacity、Canvas纵菌、WebGL阐污、Video）會觸發(fā)GPU渲染，請合理使用咱圆。過渡使用會引發(fā)手機過耗電增加
• PC端的在移動端同樣適用

相關閱讀：如何做到一秒渲染一個移動頁面

什么是Etag笛辟？

當發(fā)送一個服務器請求時，瀏覽器首先會進行緩存過期判斷序苏。瀏覽器根據(jù)緩存過期時間判斷緩存文件是否過期手幢。

情景一：若沒有過期，則不向服務器發(fā)送請求忱详，直接使用緩存中的結(jié)果围来，此時我們在瀏覽器控制臺中可以看到 200 OK(from cache) ，此時的情況就是完全使用緩存匈睁，瀏覽器和服務器沒有任何交互的监透。

情景二：若已過期，則向服務器發(fā)送請求航唆，此時請求中會帶上①中設置的文件修改時間才漆，和Etag

然后，進行資源更新判斷佛点。服務器根據(jù)瀏覽器傳過來的文件修改時間醇滥，判斷自瀏覽器上一次請求之后，文件是不是沒有被修改過超营；根據(jù)Etag鸳玩，判斷文件內(nèi)容自上一次請求之后，有沒有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒有被修改過演闭，則服務器就不給瀏覽器發(fā)index.html的內(nèi)容了不跟，直接告訴它，文件沒有被修改過米碰，你用你那邊的緩存吧—— 304 Not Modified窝革，此時瀏覽器就會從本地緩存中獲取index.html的內(nèi)容。此時的情況叫協(xié)議緩存吕座，瀏覽器和服務器之間有一次請求交互虐译。

情形二：若修改時間和文件內(nèi)容判斷有任意一個沒有通過，則服務器會受理此次請求吴趴，之后的操作同①

① 只有g(shù)et請求會被緩存漆诽，post請求不會

Expires和Cache-Control

Expires要求客戶端和服務端的時鐘嚴格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時出現(xiàn)厢拭，則max-age有更高的優(yōu)先級兰英。

    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應用:

Etag由服務器端生成，客戶端通過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改供鸠。常見的是使用If-None-Match畦贸。請求一個文件的流程可能如下：

====第一次請求===

1.客戶端發(fā)起 HTTP GET 請求一個文件；

2.服務器處理請求楞捂，返回文件內(nèi)容和一堆Header薄坏，當然包括Etag(例如"2e681a-6-5d044840")(假設服務器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200

====第二次請求===

客戶端發(fā)起 HTTP GET 請求一個文件，注意這個時候客戶端同時發(fā)送一個If-None-Match頭泡一，這個頭的內(nèi)容就是第一次請求時服務器返回的Etag：2e681a-6-5d0448402.服務器判斷發(fā)送過來的Etag和計算出來的Etag匹配颤殴，因此If-None-Match為False，不返回200鼻忠，返回304涵但，客戶端繼續(xù)使用本地緩存；流程很簡單帖蔓，問題是矮瘟，如果服務器又設置了Cache-Control:max-age和Expires呢，怎么辦

答案是同時使用塑娇，也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag之后澈侠，

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

為什么使用Etag請求頭?

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

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

棧的插入和刪除操作都是在一端進行的哨啃，而隊列的操作卻是在兩端進行的。

隊列先進先出拳球，棧先進后出壶唤。

棧只允許在表尾一端進行插入和刪除，而隊列只允許在表尾一端進行插入棕所，在表頭一端進行刪除

棧和堆的區(qū)別闸盔？

棧區(qū)（stack）—   由編譯器自動分配釋放   ，存放函數(shù)的參數(shù)值琳省，局部變量的值等迎吵。

堆區(qū)（heap）   —   一般由程序員分配釋放，   若程序員不釋放针贬，程序結(jié)束時可能由OS回收击费。

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

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

快速 排序的思想并實現(xiàn)一個快排？

"快速排序"的思想很簡單快压，整個排序過程只需要三步：

（1）在數(shù)據(jù)集之中圆仔，找一個基準點

（2）建立兩個數(shù)組，分別存儲左邊和右邊的數(shù)組

（3）利用遞歸進行下次比較

    <script type="text/javascript">

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

            var num = Math.floor(arr.length/2);//找到中間數(shù)的索引值，如果是浮點數(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]);//基準點的左邊的數(shù)傳到左邊數(shù)組
                }
                else{
                   right.push(arr[i]);//基準點的右邊的數(shù)傳到右邊數(shù)組
                }
            }

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

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

    </script>

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

(答案僅供參考)

jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中歪沃，有助于防止變量的全局污染，然后通過傳入window對象參數(shù)嫌松，可以使window對象作為局部變量使用沪曙，好處是當jquery中訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了豆瘫，從而可以更快的訪問window對象珊蟀。同樣，傳入undefined參數(shù)外驱，可以縮短查找undefined時的作用域鏈育灸。

    (function( window, undefined ) {

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

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

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

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

        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中瓦哎，為了縮短名稱砸喻，又賦值給了jquery.fn柔逼，這是很形象的寫法。

有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到割岛，jQuery將其保存為局部變量以提高訪問速度愉适。

jquery實現(xiàn)的鏈式調(diào)用可以節(jié)約代碼，所返回的都是同一個對象癣漆，可以提高代碼效率维咸。

ES6的了解

新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)惠爽，而右邊則是進行的操作以及返回的值Inputs=>outputs癌蓖。）、for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值婚肆。）arguments對象可被不定參數(shù)和默認參數(shù)完美代替租副。ES6將promise對象納入規(guī)范，提供了原生的Promise對象较性。增加了let和const命令用僧，用來聲明變量。增加了塊級作用域两残。let命令實際上就增加了塊級作用域永毅。ES6規(guī)定，var命令和function命令聲明的全局變量人弓，屬于全局對象的屬性沼死；let命令、const命令崔赌、class命令聲明的全局變量意蛀，不屬于全局對象的屬性。健芭。還有就是引入module模塊的概念

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

原型鏈繼承的缺點

一是字面量重寫原型會中斷關系县钥，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)慈迈。

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

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

組合式繼承

組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實現(xiàn)對原型屬性和方法的繼承伸头，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承匾效。這樣，既通過在原型上定義方法實現(xiàn)了函數(shù)復用恤磷，又保證每個實例都有它自己的屬性面哼。

具體請看：JavaScript繼承方式詳解

關于Http 2.0 你知道多少野宜？

HTTP/2引入了“服務端推（server push）”的概念，它允許服務端在客戶端需要數(shù)據(jù)之前就主動地將數(shù)據(jù)發(fā)送到客戶端緩存中魔策，從而提高性能匈子。

HTTP/2提供更多的加密支持

HTTP/2使用多路技術(shù)，允許多個消息在一個連接上同時交差代乃。

它增加了頭壓縮（header compression）旬牲，因此即使非常小的請求仿粹，其請求和響應的header都只會占用很小比例的帶寬搁吓。

defer和async

defer并行加載js文件，會按照頁面上script標簽的順序執(zhí)行
async并行加載js文件吭历，下載完成立即執(zhí)行堕仔，不會按照頁面上script標簽的順序執(zhí)行

談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止晌区。由于浮動框不在文檔的普通流中摩骨，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上朗若。

如何評價AngularJS和BackboneJS

backbone具有依賴性恼五，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個AngularJS 多出了2 次HTTP請求.

Backbone的Model沒有與UI視圖數(shù)據(jù)綁定哭懈，而是需要在View中自行操作DOM來更新或讀取UI數(shù)據(jù)灾馒。AngularJS與此相反，Model直接與UI視圖綁定遣总，Model與UI視圖的關系睬罗，通過directive封裝，AngularJS內(nèi)置的通用directive旭斥，就能實現(xiàn)大部分操作了容达，也就是說，基本不必關心Model與UI視圖的關系垂券，直接操作Model就行了花盐，UI視圖自動更新。

AngularJS的directive菇爪，你輸入特定數(shù)據(jù)算芯，他就能輸出相應UI視圖。是一個比較完善的前端MVW框架娄帖，包含模板也祠，數(shù)據(jù)雙向綁定，路由近速，模塊化诈嘿，服務堪旧，依賴注入等所有功能，模板功能強大豐富奖亚，并且是聲明式的淳梦，自帶了豐富的 Angular 指令。

用過哪些設計模式昔字？

工廠模式：

主要好處就是可以消除對象間的耦合爆袍，通過使用工程方法而不是new關鍵字。將所有實例化的代碼集中在一個位置防止代碼重復作郭。

    工廠模式解決了重復實例化的問題 陨囊，但還有一個問題,那就是識別問題，因為根本無法 搞清楚他們到底是哪個對象的實例夹攒。


function createObject(name,age,profession){//集中實例化的函數(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');//第一個實例var test2 = createObject('mike',25,'engineer');//第二個實例

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

使用構(gòu)造函數(shù)的方法 蜘醋，即解決了重復實例化的問題 ，又解決了對象識別的問題咏尝，該模式與工廠模式的不同之處在于：

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

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

3.沒有 renturn 語句压语。

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變量。閉包的優(yōu)點是可以避免全局變量的污染编检，缺點是閉包會常駐內(nèi)存胎食，會增大內(nèi)存使用量，使用不當很容易造成內(nèi)存泄露允懂。在js中厕怜，函數(shù)即閉包，只有函數(shù)才會產(chǎn)生作用域的概念

閉包有三個特性：

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

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

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

具體請看：詳解js閉包

請你談談Cookie的弊端

cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便累驮，分擔了服務器存儲的負擔酣倾，但還是有很多局限性的。

第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和之后的版本最后可以有50個cookie谤专。

3.Firefox最多50個cookie

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

IE和Opera 會清理近期最少使用的cookie躁锡，Firefox會隨機清理cookie。

cookie的最大大約為4096字節(jié)置侍，為了兼容性映之，一般不能超過4095字節(jié)。

IE 提供了一種存儲可以持久化用戶數(shù)據(jù)蜡坊，叫做userdata杠输，從IE5.0就開始支持。每個數(shù)據(jù)最多128K秕衙，每個域名下最多1M蠢甲。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理据忘，那么會一直存在鹦牛。

優(yōu)點：極高的擴展性和可用性

1.通過良好的編程搞糕，控制保存在cookie中的session對象的大小。

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

3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失礼殊。

4.控制cookie的生命期驹吮，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie晶伦。

缺點：

1.`Cookie`數(shù)量和長度的限制碟狞。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB坝辫，否則會被截掉.


2.安全性問題篷就。如果cookie被人攔截了，那人就可以取得所有的session信息近忙。即使加密也與事無補，因為攔截者并不需要知道cookie的意義智润，他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了及舍。

3.有些狀態(tài)不可能保存在客戶端。例如窟绷，為了防止重復提交表單锯玛，我們需要在服務器端保存一個計數(shù)器妙色。如果我們把這個計數(shù)器保存在客戶端蛮寂，那么它起不到任何作用胸完。

瀏覽器本地存儲

在較高版本的瀏覽器中缸逃，js提供了sessionStorage和globalStorage吏饿。在HTML5中提供了localStorage來取代globalStorage量窘。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage荐捻。

sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)潘明，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀辐棒。因此sessionStorage不是一種持久化的本地存儲病曾，僅僅是會話級別的存儲。

而localStorage用于持久化的本地存儲漾根，除非主動刪除數(shù)據(jù)泰涂，否則數(shù)據(jù)是永遠不會過期的。

web storage和cookie的區(qū)別

Web Storage的概念和cookie相似辐怕，區(qū)別是它是為了更大容量存儲設計的逼蒙。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去寄疏，這樣無形中浪費了帶寬是牢，另外cookie還需要指定作用域顶考，不可以跨域調(diào)用。

除此之外妖泄，Web Storage擁有setItem,getItem,removeItem,clear等方法驹沿，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie蹈胡。

但是cookie也是不可以或缺的：cookie的作用是與服務器進行交互渊季，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生

瀏覽器的支持除了IE７及以下不支持外罚渐，其他標準瀏覽器都完全支持(ie及FF需在web服務器里運行)却汉，值得一提的是IE總是辦好事，例如IE7荷并、IE6中的userData其實就是javascript本地存儲的解決方案合砂。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法源织，例如setItem翩伪、getItem和removeItem等

cookie 和session 的區(qū)別：

 1、cookie數(shù)據(jù)存放在客戶的瀏覽器上谈息，session數(shù)據(jù)放在服務器上缘屹。

 2、cookie不是很安全侠仇，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙

    考慮到安全應當使用session轻姿。

 3、session會在一定時間內(nèi)保存在服務器上逻炊。當訪問增多互亮，會比較占用你服務器的性能

     考慮到減輕服務器性能方面，應當使用COOKIE余素。

 4豹休、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie溺森。

 5慕爬、所以個人建議：

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

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

display:none和visibility:hidden的區(qū)別屏积？

display:none  隱藏對應的元素医窿，在文檔布局中不再給它分配空間，它各邊的元素會合攏炊林，就當他從來不存在姥卢。

visibility:hidden  隱藏對應的元素，但是在文檔布局中仍保留原來的空間。

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

(1) link屬于HTML標簽僧叉，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載棺榔，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識別瓶堕，而link是HTML標簽，無兼容問題;

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

position:absolute和float屬性的異同

• 共同點：對內(nèi)聯(lián)元素設置float和absolute屬性症歇，可以讓元素脫離文檔流郎笆，并且可以設置其寬高。

• 不同點：float仍會占據(jù)位置忘晤，absolute會覆蓋文檔流中的其他元素宛蚓。

介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式设塔。默認值是content-box凄吏。

• content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定闰蛔，設置width/height屬性指的是content部分的寬/高

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

標準瀏覽器下，按照W3C規(guī)范對盒模型解析钞护，一旦修改了元素的邊框或內(nèi)距盖喷，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸难咕，從而影響整個頁面的布局。

CSS 選擇符有哪些距辆？哪些屬性可以繼承余佃？優(yōu)先級算法如何計算？ CSS3新增偽類有那些跨算？

    1.id選擇器（ # myid）

    2.類選擇器（.myclassname）

    3.標簽選擇器（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)先級為:

!important > id > class > tag

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

CSS3新增偽類舉例：

    p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素爆土。

    p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。

    p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素诸蚕。

    p:only-child    選擇屬于其父元素的唯一子元素的每個 <p> 元素步势。

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

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

    :checked        單選框或復選框被選中坏瘩。

CSS3有哪些新特性？

CSS3實現(xiàn)圓角（border-radius）漠魏，陰影（box-shadow）倔矾，

對文字加特效（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中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box壤巷，幾種盒模型計算元素寬高的區(qū)別如下：

content-box（默認）

布局所占寬度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)

對BFC規(guī)范的理解邑彪？

      BFC，塊級格式化上下文胧华，一個創(chuàng)建了新的BFC的盒子是獨立布局的寄症，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin會發(fā)生折疊撑柔。

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

說說你對語義化的理解剪决？

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

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

3峻凫，方便其他設備解析（如屏幕閱讀器渗鬼、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁荧琼；

4譬胎，便于團隊開發(fā)和維護，語義化更具可讀性命锄，是下一步吧網(wǎng)頁的重要動向堰乔，遵循W3C標準的團隊都遵循這個標準，可以減少差異化脐恩。

Doctype作用? 嚴格模式與混雜模式如何區(qū)分镐侯？它們有何意義?

1）、<!DOCTYPE> 聲明位于文檔中的最前面驶冒，處于 <html> 標簽之前苟翻。告知瀏覽器以何種模式來渲染文檔。

2）骗污、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行崇猫。

3）、在混雜模式中身堡，頁面以寬松的向后兼容的方式顯示邓尤。模擬老式瀏覽器的行為以防止站點無法工作。

4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)汞扎。

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

 該標簽可聲明三種 DTD 類型，分別表示嚴格版本澈魄、過渡版本以及基于框架的 HTML 文檔景鼠。

 HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset痹扇。

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

Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁鲫构，而 Quirks

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

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

區(qū)別：

1.所有的標記都必須要有一個相應的結(jié)束標記

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

3.所有的XML標記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

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

8.圖片必須有說明文字

常見兼容性問題？

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

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

IE6雙邊距bug:塊屬性標簽float后炕吸，又有橫行的margin情況下伐憾，在ie6顯示margin比設置的大。

浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下赫模，如果對元素設置了浮動树肃，同時又設置了margin-left或margin-right，margin值會加倍瀑罗。）

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

這種情況之下IE會產(chǎn)生20px的距離胸嘴，解決方案是在float的標簽樣式控制中加入
_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)

漸進識別的方式斩祭，從總體中逐漸排除局部筛谚。


  首先，巧妙的使用“\9”這一標記停忿，將IE游覽器從所有情況中分離出來。

  接著蚊伞，再次使用“+”將IE8和IE7席赂、IE6分離開來，這樣IE8已經(jīng)獨立識別时迫。

  css

      .bb{

       background-color:#f1ee18;/*所有識別*/

      .background-color:#00deff\9; /*IE6颅停、7、8識別*/

      +background-color:#a200ff;/*IE6掠拳、7識別*/

      _background-color:#1e0bd1;/*IE6識別*/

      }


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

上下margin重合問題

ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合芥牌，但是margin-top和margin-bottom卻會發(fā)生重合烦味。

解決方法，養(yǎng)成良好的代碼編寫習慣壁拉，同時采用margin-top或者同時采用margin-bottom谬俄。

解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流弃理，不占據(jù)空間溃论。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。


1.使用空標簽清除浮動痘昌。

   這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽钥勋。

2.使用overflow。

   給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6控汉。

3.使用after偽對象清除浮動笔诵。

   該方法只適用于非IE瀏覽器。具體寫法可參照以下示例姑子。使用中需注意以下幾點乎婿。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0街佑，否則該元素會比實際高出若干像素谢翎；

浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

（1）父元素的高度無法被撐開沐旨，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后

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

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2磁携、3問題褒侧，對于問題1，添加如下樣式谊迄，給父元素添加clearfix樣式：

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

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

清除浮動的幾種方法：

    1闷供，額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結(jié)構(gòu)看起來不夠簡潔统诺。）

    2歪脏，使用after偽類

    #parent:after{

        content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }


    3,浮動外部元素

    4,設置overflow為hidden或者auto

DOM操作——怎樣添加、移除粮呢、移動婿失、復制钞艇、創(chuàng)建和查找節(jié)點。

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

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

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

      createTextNode()   //創(chuàng)建一個文本節(jié)點

2）添加豪硅、移除哩照、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //并沒有insertAfter()

3）查找

      getElementsByTagName()    //通過標簽名稱

      getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強舟误，
      會得到一個數(shù)組葡秒，其中包括id等于name值的)

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

html5有哪些新特性嵌溢、移除了那些元素眯牧？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5赖草？

  HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集学少，主要是關于圖像，位置秧骑，存儲版确，多任務等功能的增加。

  拖拽釋放(Drag and drop) API

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

  音頻乎折、視頻API(audio,video)

  畫布(Canvas) API

  地理(Geolocation) API

  本地離線存儲 localStorage 長期存儲數(shù)據(jù)绒疗，瀏覽器關閉后數(shù)據(jù)不丟失；

  sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除


  表單控件骂澄，calendar吓蘑、date、time坟冲、email磨镶、url、search

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

移除的元素

純表現(xiàn)的元素：basefont健提，big琳猫，center，font, s私痹，strike脐嫂，tt，u紊遵；

對可用性產(chǎn)生負面影響的元素：frame雹锣，frameset，noframes癞蚕；

支持HTML5新標簽：

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

    可以利用這一特性讓這些瀏覽器支持HTML5新標簽辉哥，

    當然最好的方式是直接使用成熟的框架桦山、使用最多的是html5shim框架

       <!--[if lt IE 9]>

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

       <![endif]-->

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

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

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

什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC恒水？

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

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

    而引用CSS文件的@import就是造成這個問題的罪魁禍首会放。IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件钉凌，因此咧最，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速御雕，電腦速度都有關系矢沿。

     解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了酸纲。

null和undefined的區(qū)別捣鲸？

null是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0闽坡；undefined是一個表示"無"的原始值栽惶，轉(zhuǎn)為數(shù)值時為NaN。

當聲明的變量還未被初始化時疾嗅，變量的默認值為undefined外厂。

null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象代承。

undefined表示"缺少值"汁蝶，就是此處應該有一個值，但是還沒有定義次泽。典型用法是：

（1）變量被聲明了穿仪，但沒有賦值時，就等于undefined意荤。


（2) 調(diào)用函數(shù)時啊片，應該提供的參數(shù)沒有提供，該參數(shù)等于undefined玖像。


（3）對象沒有賦值的屬性紫谷，該屬性的值為undefined。


（4）函數(shù)沒有返回值時捐寥，默認返回undefined笤昨。

null表示"沒有對象"，即該處不應該有值握恳。典型用法是：

（1） 作為函數(shù)的參數(shù)瞒窒，表示該函數(shù)的參數(shù)不是對象。

（2） 作為對象原型鏈的終點乡洼。

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

   1崇裁、創(chuàng)建一個空對象匕坯，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型拔稳。

   2葛峻、屬性和方法被加入到 this 引用的對象中。

   3巴比、新創(chuàng)建的對象由 this 所引用术奖，并且最后隱式的返回 this 。



var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

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

defer和async采记、動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中铲球，加載完畢后callBack）挺庞、按需異步載入js

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

作用：動態(tài)改變某個類的某個方法的運行環(huán)境（執(zhí)行上下文）稼病。

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

哪些操作會造成內(nèi)存泄漏选侨？

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對象然走，并計算引用了每個對象的其他對象的數(shù)量援制。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的芍瑞，那么該對象的內(nèi)存即可回收晨仑。



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

閉包洪己、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時竟贯，就會產(chǎn)生一個循環(huá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

• 鼠標位置：IE是event.clientX；火狐是event.pageX

• IE使用event.srcElement娱颊；Firefox使用event.target

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

• CSS圓角：ie7以下不支持圓角

WEB應用從服務器主動推送Data到客戶端有那些方式？

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

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

• 基于WebSocket的推送方案

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

對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣镇防？

前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫扑毡、產(chǎn)品經(jīng)理、運營、安全都近膜赃。

    1惫恼、實現(xiàn)界面交互

    2、提升用戶體驗

    3狂丝、有了Node.js，前端可以實現(xiàn)服務端的一些事情


前端是最貼近用戶的程序員县习，前端的能力就是能讓產(chǎn)品從 90分進化到 100 分，甚至更好攘已，



 參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到1px辫樱；

 與團隊成員辉饱，UI設計缔逛，產(chǎn)品經(jīng)理的溝通敦冬；

 做好的頁面結(jié)構(gòu)伞辛，頁面重構(gòu)和用戶體驗；

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

 針對服務器的優(yōu)化芹缔、擁抱最新前端技術(shù)芝硬。

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

    分為4個步驟：

    （1），當發(fā)送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL梨水，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢茵臭。這能使瀏覽器獲得請求對應的IP地址疫诽。

    （2）， 瀏覽器與遠程`Web`服務器通過`TCP`三次握手協(xié)商來建立一個`TCP/IP`連接旦委。該握手包括一個同步報文奇徒，一個同步-應答報文和一個應答報文匀钧，這三個報文在 瀏覽器和服務器之間傳遞酿炸。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求歼疮，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文霎槐。

    （3）报辱，一旦`TCP/IP`連接建立慢睡，瀏覽器會通過該連接向遠程服務器發(fā)送`HTTP`的`GET`請求瘤泪。遠程服務器找到資源并使用HTTP響應返回該資源，值為200的HTTP響應狀態(tài)表示一個正確的響應。

    （4）坦刀，此時，`Web`服務器提供資源服務泳猬，客戶端開始下載資源得封。



請求返回后疫粥，便進入了我們關注的前端模塊

簡單來說属划，瀏覽器會解析`HTML`生成`DOM Tree`羔味，其次會根據(jù)CSS生成CSS Rule Tree忘蟹，而`javascript`又可以根據(jù)`DOM API`操作`DOM`

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

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

1褥芒，工廠模式

2锰扶，構(gòu)造函數(shù)模式

3，原型模式

4京闰，混合構(gòu)造函數(shù)和原型模式

5，動態(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的過程

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

    (2)創(chuàng)建一個新的`HTTP`請求,并指定該`HTTP`請求的方法、`URL`及驗證信息.

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

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

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

    (6)使用JavaScript和DOM實現(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學習總結(jié)（七）Ajax和Http狀態(tài)字

異步加載和延遲加載

1.異步加載的方案： 動態(tài)插入script標簽

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

3.script標簽上添加defer或者async屬性

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

5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的馅巷。

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

IE6 兩個并發(fā)，iE7升級之后的6個并發(fā)敞曹，之后版本也是6個
Firefox局齿，chrome也是6個

Flash抓歼、Ajax各自的優(yōu)缺點，在使用中如何取舍蹋半？

• Flash適合處理多媒體、矢量圖形您市、訪問機器；對CSS榕莺、處理文本上不足钉鸯，不容易被搜索。

-Ajax對CSS岩睁、文本支持很好，支持搜索阎毅；多媒體扇调、矢量圖形、機器訪問不足燃领。

• 共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態(tài)曼库、操作DOM

請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準种玛。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載祭示。

這里的同源策略指的是：協(xié)議质涛，域名，端口相同横媚，同源策略是一種安全協(xié)議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性孝宗。

為什么要有同源限制？

我們舉例說明：比如一個黑客程序婚被，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名谷炸，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容描孟，這樣用戶名，密碼就輕松到手了青抛。

缺點：

現(xiàn)在網(wǎng)站的JS 都會進行壓縮，一些文件用了嚴格模式举瑰，而另一些沒有。這時這些本來是嚴格模式的文件忍些，被 merge 后罢坝，這個串就到了文件的中間男应，不僅沒有指示嚴格模式开仰，反而在壓縮后浪費了字節(jié)。

GET和POST的區(qū)別谓娃，何時使用POST俯艰？

    GET：一般用于信息獲取画株，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制续挟，一般在2000個字符

    POST：一般用于修改服務器上的資源跑芳，對所發(fā)送的信息沒有限制。


    GET方式需要使用Request.QueryString來取得變量的值漂佩，而POST方式通過Request.Form來獲取變量的值养葵，

    也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。



然而归露，在以下情況中往果，請使用 POST 請求：

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

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

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

事件馍迄、IE與火狐的事件機制有什么區(qū)別峦甩？ 如何阻止冒泡嗦篱？

 1. 我們在網(wǎng)頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產(chǎn)生一個事件浴栽。是可以被 JavaScript 偵測到的行為轿偎。

 2. 事件處理機制：IE是事件冒泡典鸡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件坏晦。萝玷；

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

ajax的缺點和在IE下的問題？

詳情請見：JavaScript學習總結(jié)（七）Ajax和Http狀態(tài)字

ajax的缺點

  1、ajax不支持瀏覽器back按鈕痴突。

  2、安全問題 AJAX暴露了與服務器交互的細節(jié)一死。

  3凛辣、對搜索引擎的支持比較弱。

  4、破壞了程序的異常機制谆焊。

  5莲兢、不容易調(diào)試。

IE緩存問題

在IE瀏覽器下，如果請求的方法是GET碘饼，并且請求的URL不變柳爽，那么這個請求的結(jié)果就會被緩存俩功。解決這個問題的辦法可以通過實時改變請求的URL，只要URL改變团南，就不會被緩存萄唇，可以通過在URL末尾添加上隨機的時間戳參數(shù)('t'= + new Date().getTime())

或者：

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

Ajax請求的頁面歷史記錄狀態(tài)問題

可以通過錨點來記錄狀態(tài)俩由，location.hash肛鹏。讓瀏覽器記錄Ajax請求時頁面狀態(tài)的變化裹芝。

還可以通過HTML5的history.pushState享完，來實現(xiàn)瀏覽器地址欄的無刷新改變

談談你對重構(gòu)的理解

網(wǎng)站重構(gòu)：在不改變外部行為的前提下洒擦，簡化結(jié)構(gòu)边苹、添加可讀性涉馁，而在網(wǎng)站前端保持一致的行為好渠。也就是說是在不改變UI的情況下贞滨，對網(wǎng)站進行優(yōu)化链蕊，
在擴展的同時保持一致的UI。

對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：

表格(table)布局改為DIV+CSS

使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)

對于移動平臺的優(yōu)化

針對于SEO進行優(yōu)化

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


減少代碼間的耦合

讓代碼保持彈性

嚴格按規(guī)范編寫代碼

設計可擴展的API

代替舊有的框架沟突、語言(如VB)

增強用戶體驗

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



壓縮JS棒呛、CSS葡公、image等前端資源(通常是由服務器來解決)

程序的性能優(yōu)化(如數(shù)據(jù)讀寫)

采用CDN來加速資源加載

對于JS DOM的優(yōu)化

HTTP服務器的文件緩存

HTTP狀態(tài)碼

    100  Continue  繼續(xù)，一般在發(fā)送post請求時条霜，已發(fā)送了http header之后服務端將返回此信息催什，表示確認，之后發(fā)送具體參數(shù)信息

    200  OK   正常返回信息

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

    202  Accepted  服務器已接受請求宰睡，但尚未處理

    301  Moved Permanently  請求的網(wǎng)頁已永久移動到新位置蒲凶。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向拆内，且總是使用 GET 請求新的 URI旋圆。

    304  Not Modified  自從上次請求后，請求的網(wǎng)頁未修改過麸恍。


    400 Bad Request  服務器無法理解請求的格式灵巧，客戶端不應當嘗試再次使用相同的內(nèi)容發(fā)起請求。

    401 Unauthorized  請求未授權(quán)抹沪。

    403 Forbidden  禁止訪問刻肄。

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

    500 Internal Server Error  最常見的服務器端錯誤融欧。

    503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）敏弃。

說說你對Promise的理解

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

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

fulfilled: 成功的操作.

rejected: 失敗的操作.

settled: Promise已被fulfilled或rejected噪馏，且不是pending

另外麦到， fulfilled 與 rejected 一起合稱 settled。

Promise 對象用來進行延遲(deferred) 和異步(asynchronous ) 計算欠肾。

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

構(gòu)造一個 Promise瓶颠，最基本的用法如下：

    var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

Promise 實例擁有 then 方法（具有 then 方法的對象，通常被稱為 thenable）刺桃。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個函數(shù)作為參數(shù)粹淋，一個在 fulfilled 的時候被調(diào)用，一個在 rejected 的時候被調(diào)用虏肾，接收參數(shù)就是 future廓啊，onFulfilled 對應 resolve, onRejected 對應 reject欢搜。

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

負責前端團隊的管理及與其他團隊的協(xié)調(diào)工作封豪，提升團隊成員能力和整體效率；
帶領團隊完成研發(fā)工具及平臺前端部分的設計炒瘟、研發(fā)和維護吹埠；
帶領團隊進行前端領域前沿技術(shù)研究及新技術(shù)調(diào)研，保證團隊的技術(shù)領先
負責前端開發(fā)規(guī)范制定、功能模塊化設計缘琅、公共組件搭建等工作粘都，并組織培訓。

實現(xiàn)一個函數(shù)clone刷袍，可以對JavaScript中的5種主要的數(shù)據(jù)類型（包括Number翩隧、String、Object呻纹、Array堆生、Boolean）進行值復制

    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;
    }

說說嚴格模式的限制

嚴格模式主要有以下限制：

變量必須聲明后再使用

函數(shù)的參數(shù)不能有同名屬性，否則報錯

不能使用with語句

不能對只讀屬性賦值雷酪，否則報錯

不能使用前綴0表示八進制數(shù)淑仆，否則報錯

不能刪除不可刪除的屬性，否則報錯

不能刪除變量delete prop哥力，會報錯蔗怠，只能刪除屬性delete global[prop]

eval不會在它的外層作用域引入變量

eval和arguments不能被重新賦值

arguments不會自動反映函數(shù)參數(shù)的變化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局對象

不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧

增加了保留字（比如protected、static和interface）

設立"嚴格模式"的目的吩跋，主要有以下幾個：

• 消除Javascript語法的一些不合理寞射、不嚴謹之處，減少一些怪異行為;

• 消除代碼運行的一些不安全之處锌钮，保證代碼運行的安全怠惶；

• 提高編譯器效率，增加運行速度轧粟；

• 為未來新版本的Javascript做好鋪墊策治。

注：經(jīng)過測試IE6,7,8,9均不支持嚴格模式。

如何刪除一個cookie

1.將時間設為當前時間往前一點兰吟。

var date = new Date();

date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用于設置一個月的某一天通惫。

2.expires的設置

    document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

<strong>，<em>和<b>混蔼，<i>標簽

<strong> 標簽和 <em> 標簽一樣履腋，用于強調(diào)文本，但它強調(diào)的程度更強一些惭嚣。

em 是 斜體強調(diào)標簽遵湖，更強烈強調(diào)，表示內(nèi)容的強調(diào)點晚吞。相當于html元素中的 <i>...</i>;

< b > < i >是視覺要素延旧，分別表示無意義的加粗，無意義的斜體槽地。

em 和 strong 是表達要素(phrase elements)迁沫。

說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規(guī)范芦瘾，Node.js采用了這個規(guī)范集畅。CommonJS規(guī)范加載模塊是同步的挺智，也就是說祷愉，只有加載完成谣辞，才能執(zhí)行后面的操作沐扳。AMD規(guī)范則是非同步加載模塊泥从，允許指定回調(diào)函數(shù)躯嫉。

AMD推薦的風格通過返回一個對象做為模塊對象祈餐，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的帆阳。

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

document.write()的用法

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

document.write只能重繪整個頁面阶祭。innerHTML可以重繪頁面的一部分

編寫一個方法 求一個字符串的字節(jié)長度

假設：一個英文字符占用一個字節(jié)濒募，一個中文字符占用兩個字節(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：相當于是從遠程獲取最新版本并merge到本地

git fetch：相當于是從遠程獲取最新版本到本地瑰剃，不會自動merge

說說你對MVC和MVVM的理解

MVC

View 傳送指令到 Controller

Controller 完成業(yè)務邏輯后培他，要求 Model 改變狀態(tài)

Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋

所有通信都是單向的猛遍。

Angular它采用雙向綁定（data-binding）：View的變動懊烤，自動反映在 ViewModel腌紧，反之亦然。

組成部分Model浸遗、View跛锌、ViewModel

View：UI界面

ViewModel：它是View的抽象，負責View與Model之間信息轉(zhuǎn)換氢卡，將View的Command傳送到Model译秦；

Model：數(shù)據(jù)訪問層

請解釋什么是事件代理

事件代理（Event Delegation），又稱之為事件委托阁吝。是 JavaScript 中常用綁定事件的常用技巧突勇。顧名思義甲馋，“事件代理”即是把原本需要綁定的事件委托給父元素账磺，讓父元素擔當事件監(jiān)聽的職務碧聪。事件代理的原理是DOM元素的事件冒泡逞姿。使用事件代理的好處是可以提高性能欲间。

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

attribute是dom元素在文檔中作為html標簽擁有的屬性她渴；

property就是dom元素在js中作為對象擁有的屬性。

所以：

對于html的標準屬性來說苛败，attribute和property是同步的，是會自動更新的缠捌，

但是對于自定義的屬性來說曼月，他們是不同步的炎辨，

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

• 應用層：應用層蹦魔、表示層乒躺、會話層（從上往下）（HTTP嘉冒、FTP顶籽、SMTP礼饱、DNS）

• 傳輸層（TCP和UDP）

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

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

每一層的作用如下：

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

各種協(xié)議

ICMP協(xié)議： 因特網(wǎng)控制報文協(xié)議。它是TCP/IP協(xié)議族的一個子協(xié)議庆尘，用于在IP主機、路由器之間傳遞控制消息位岔。
TFTP協(xié)議： 是TCP/IP協(xié)議族中的一個用來在客戶機與服務器之間進行簡單文件傳輸?shù)膮f(xié)議杨刨，提供不復雜妖胀、開銷不大的文件傳輸服務。
HTTP協(xié)議： 超文本傳輸協(xié)議涂臣，是一個屬于應用層的面向?qū)ο蟮膮f(xié)議，由于其簡捷岩四、快速的方式，適用于分布式超媒體信息系統(tǒng)末捣。
DHCP協(xié)議： 動態(tài)主機配置協(xié)議，是一種讓系統(tǒng)得以連接到網(wǎng)絡上邦邦，并獲取所需要的配置參數(shù)手段。

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

MySQL是傳統(tǒng)的關系型數(shù)據(jù)庫黔龟，MongoDB則是非關系型數(shù)據(jù)庫

mongodb以BSON結(jié)構(gòu)（二進制）進行存儲巍棱，對海量數(shù)據(jù)存儲有著很明顯的優(yōu)勢航徙。

對比傳統(tǒng)關系型數(shù)據(jù)庫,NoSQL有著非常顯著的性能和擴展性優(yōu)勢，與關系型數(shù)據(jù)庫相比窝稿，MongoDB的優(yōu)點有：
①弱一致性（最終一致）菩彬，更能保證用戶的訪問速度：
②文檔結(jié)構(gòu)的存儲方式惨恭，能夠更便捷的獲取數(shù)據(jù)。

講講304緩存的原理

服務器首先產(chǎn)生ETag锉罐，服務器可在稍后使用它來判斷頁面是否已經(jīng)被修改。本質(zhì)上侨舆，客戶端通過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。

304是HTTP狀態(tài)碼臭笆，服務器用來標識這個文件沒修改凿菩，不返回內(nèi)容，瀏覽器在接收到個狀態(tài)碼后获黔，會使用瀏覽器已緩存的文件

客戶端請求一個頁面（A）。 服務器返回頁面A盏触，并在給A加上一個ETag。 客戶端展現(xiàn)該頁面辨嗽，并將頁面連同ETag一起緩存。 客戶再次請求頁面A，并將上次請求時服務器返回的ETag一起傳遞給服務器杈帐。 服務器檢查該ETag，并判斷出該頁面自上次客戶端請求之后還未被修改，直接返回響應304（未修改——Not Modified）和一個空的響應體换薄。

什么樣的前端代碼是好的

高復用低耦合，這樣文件小冲泥，好維護，而且好擴展。

代碼題

• css代碼題
• js代碼題