前端中高級(jí)工程師必備技能

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

image

一些開(kāi)放性題目

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

2.項(xiàng)目介紹

3.如何看待前端開(kāi)發(fā)乏沸？

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

5.未來(lái)三到五年的規(guī)劃是怎樣的美莫？

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](http://lib.csdn.net/base/javascript "JavaScript知識(shí)庫(kù)")弃酌、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)局部刷新.</pre>

漸進(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)励烦。

XSS防范方法

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

首先，避免直接在 cookie 中泄露用戶隱私改抡，例如email矢炼、密碼等等。

其次阿纤，通過(guò)使 cookie 和系統(tǒng) ip 綁定來(lái)降低 cookie 泄露后的危險(xiǎn)句灌。這樣攻擊者得到的 cookie 沒(méi)有實(shí)際價(jià)值，不可能拿來(lái)重放欠拾。

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

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

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

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

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

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

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

CSRF的防御

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

• 通過(guò)驗(yà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í)行涤躲。</pre>

WebSocket 是 Web 應(yīng)用程序的傳輸協(xié)議，它提供了雙向的贡未，按序到達(dá)的數(shù)據(jù)流种樱。他是一個(gè) [Html5](http://lib.csdn.net/base/html5 "HTML5知識(shí)庫(kù)") 協(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)樗?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è)面

什么是Etag硝清？

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

情景一：若沒(méi)有過(guò)期，則不向服務(wù)器發(fā)送請(qǐng)求查邢，直接使用緩存中的結(jié)果蔗崎，此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到 200 OK (from cache) ，此時(shí)的情況就是完全使用緩存扰藕，瀏覽器和服務(wù)器沒(méi)有任何交互的缓苛。

情景二：若已過(guò)期，則向服務(wù)器發(fā)送請(qǐng)求邓深，此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間未桥，和 Etag

然后笔刹，進(jìn)行資源更新判斷。服務(wù)器根據(jù)瀏覽器傳過(guò)來(lái)的文件修改時(shí)間冬耿，判斷自瀏覽器上一次請(qǐng)求之后舌菜，文件是不是沒(méi)有被修改過(guò)；根據(jù) Etag 淆党，判斷文件內(nèi)容自上一次請(qǐng)求之后酷师，有沒(méi)有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒(méi)有被修改過(guò)，則服務(wù)器就不給瀏覽器發(fā) index.html 的內(nèi)容了染乌，直接告訴它山孔，文件沒(méi)有被修改過(guò)，你用你那邊的緩存吧—— 304 Not Modified 荷憋，此時(shí)瀏覽器就會(huì)從本地緩存中獲取 index.html 的內(nèi)容台颠。此時(shí)的情況叫協(xié)議緩存，瀏覽器和服務(wù)器之間有一次請(qǐng)求交互勒庄。

情形二：若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒(méi)有通過(guò)串前，則服務(wù)器會(huì)受理此次請(qǐng)求侦香，之后的操作同①

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

Expires和Cache-Control

Expires 要求客戶端和服務(wù)端的時(shí)鐘嚴(yán)格同步担敌。 HTTP1.1 引入 Cache-Control來(lái)克服Expires頭的限制刀疙。如果max-age和Expires同時(shí)出現(xiàn)，則max-age有更高的優(yōu)先級(jí)碳想。

Cache-Control: no-cache, private, max-age=0

ETag: abcde

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

Pragma: private

Last-Modified: $now // RFC1123 format</pre>

ETag應(yīng)用:

Etag 由服務(wù)器端生成寇损，客戶端通過(guò) If-Match 或者說(shuō) If-None-Match 這個(gè)條件判斷請(qǐng)求來(lái)驗(yàn)證資源是否修改彤委。常見(jià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)開(kāi)啟了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ā)送過(guò)來(lái)的Etag和計(jì)算出來(lái)的Etag匹配爹脾，因此If-None-Match為False帖旨，不返回200，返回304灵妨，客戶端繼續(xù)使用本地緩存碉就；流程很簡(jiǎn)單，問(wèn)題是闷串，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦

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

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

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

Etag 主要為了解決 Last-Modified 無(wú)法解決的一些問(wèn)題碉熄。

棧和隊(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ù)轧邪，如：堆排序刽脖；

棧（數(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>

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

(答案僅供參考)

[jQuery](http://lib.csdn.net/base/jquery "jQuery知識(shí)庫(kù)") 源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染勺远，然后通過(guò)傳入window對(duì)象參數(shù)橙喘，可以使window對(duì)象作為局部變量使用，好處是當(dāng)jquery 中訪問(wèn)window對(duì)象的時(shí)候胶逢，就不用將作用域鏈退回到頂層作用域了厅瞎，從而可以更快的訪問(wèn) window 對(duì)象。同樣初坠，傳入 undefined 參數(shù)和簸，可以縮短查找undefined時(shí)的作用域鏈。

(function( window, undefined ) {
         //用一個(gè)函數(shù)域包起來(lái)碟刺，就是所謂的沙箱

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

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

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

        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了 jquery.prototype 中爽柒，為了縮短名稱吴菠，又賦值給了 jquery.fn ，這是很形象的寫法浩村。

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

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

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繼承方式詳解

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

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

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

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

它增加了頭壓縮（header compression）神妹，因此即使非常小的請(qǐng)求颓哮，其請(qǐng)求和響應(yīng)的 header 都只會(huì)占用很小比例的帶寬。

defer和async

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

談?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](http://lib.csdn.net/base/angularjs "AngularJS知識(shí)庫(kù)") 多出了2 次HTTP請(qǐng)求.

Backbone 的 Model 沒(méi)有與UI視圖數(shù)據(jù)綁定徒溪，而是需要在View中自行操作DOM來(lái)更新或讀取UI數(shù)據(jù)。 AngularJS 與此相反金顿，Model直接與UI視圖綁定臊泌， Model 與UI視圖的關(guān)系，通過(guò) directive 封裝揍拆， AngularJS 內(nèi)置的通用 directive 渠概，就能實(shí)現(xiàn)大部分操作了，也就是說(shuō)礁凡，基本不必關(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 指令碾牌。

用過(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í)例

構(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ù)器保存在客戶端匠题，那么它起不到任何作用。

瀏覽器本地存儲(chǔ)

在較高版本的瀏覽器中但金， js 提供了 sessionStorage 和 globalStorage 韭山。在HTML5 中提供了 localStorage 來(lái)取代 globalStorage 。

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

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

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

web storage和cookie的區(qū)別

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

除此之外， Web Storage 擁有 setItem,getItem,removeItem,clear 等方法另凌，不像 cookie 需要前端開(kāi)發(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ǔ)的解決方案王污。通過(guò)簡(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)訪問(wèn)增多租谈，會(huì)比較占用你服務(wù)器的性能

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

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

 5呻逆、所以個(gè)人建議：

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

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

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

display:none  隱藏對(duì)應(yīng)的元素咖城，在文檔布局中不再給它分配空間茬腿，它各邊的元素會(huì)合攏呼奢，就當(dāng)他從來(lái)不存在。

visibility:hidden  隱藏對(duì)應(yīng)的元素切平，但是在文檔布局中仍保留原來(lái)的空間握础。

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

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

(2) 頁(yè)面被加載的時(shí)禀综，link會(huì)同時(shí)被加載，而@import被引用的CSS會(huì)等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識(shí)別苔严，而link是HTML標(biāo)簽定枷，無(wú)兼容問(wèn)題;

(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ù)位置， absolute 會(huì)覆蓋文檔流中的其他元素退子。

介紹一下box-sizing屬性贱迟？

box-sizing 屬性主要用來(lái)控制元素的盒模型的解析模式。默認(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è)頁(yè)面的布局向拆。

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）</pre>

優(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ù)選框被選中噪奄。</pre>

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</pre>

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom</pre>

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)系和相互作用。

說(shuō)說(shuō)你對(duì)語(yǔ)義化的理解匆绣？

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

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

3，方便其他設(shè)備解析（如屏幕閱讀器拣凹、盲人閱讀器岖寞、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)刹悴；

4奠骄，便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)辰狡，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉蚓漳洌裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)付呕，可以減少差異化。

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

1）凡涩、 <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前疹蛉。告知瀏覽器以何種模式來(lái)渲染文檔活箕。

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

3）育韩、在混雜模式中克蚂，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作筋讨。

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

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

 該標(biāo)簽可聲明三種 DTD 類型赤屋，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 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)頁(yè)，而 Quirks

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

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

區(qū)別：

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

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

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

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

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

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

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

8.圖片必須有說(shuō)明文字

常見(jiàn)兼容性問(wèn)題逆日？

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

2室抽、瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一靡努。
3坪圾、IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下颤难，在ie6顯示margin比設(shè)置的大。

4已维、浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問(wèn)題：在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í)別)

5栈雳、漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部缔莲。

首先哥纫，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)痴奏。

接著蛀骇，再次使用“+”將IE8和IE7厌秒、IE6分離開(kāi)來(lái)，這樣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í)別*/

  }

怪異模式問(wèn)題：漏寫DTD聲明蚌讼，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè)，但在IE中會(huì)觸發(fā)
怪異模式个榕。為避免怪異模式給我們帶來(lái)不必要的麻煩篡石，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在
可以使用html5推薦的寫法：<doctype html>

上下margin重合問(wèn)題

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. 弊端就是增加了無(wú)意義標(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)元素引起的問(wèn)題和解決辦法耀里？

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

（1）父元素的高度無(wú)法被撐開(kāi)蜈缤，影響與父元素同級(jí)的元素

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

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

解決方法：

使用 CSS 中的 clear:both ;屬性來(lái)清除元素的浮動(dòng)可解決2底哥、3問(wèn)題，對(duì)于問(wèn)題1，添加如下樣式叠艳，給父元素添加 clearfix 樣式：

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

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

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

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

2吃粒，使用after偽類

     #parent:after{

       content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }

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

4,設(shè)置overflow為hidden或者auto</pre>

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>元素就可以了难菌。</pre>

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){

    }

}</pre>

詳情： 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)。</pre

說(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）</pre>

各種協(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](http://lib.csdn.net/base/mysql "MySQL知識(shí)庫(kù)") 是傳統(tǒng)的關(guān)系型數(shù)據(jù)庫(kù)， [MongoDB](http://lib.csdn.net/base/mongodb "MongoDB知識(shí)庫(kù)") 則是非關(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)證其（客戶端）緩存九串。

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

客戶端請(qǐng)求一個(gè)頁(yè)面（A）析既。 服務(wù)器返回頁(yè)面A躬贡，并在給 A 加上一個(gè) ETag 谆奥。 客戶端展現(xiàn)該頁(yè)面眼坏，并將頁(yè)面連同 ETag 一起緩存。 客戶再次請(qǐng)求頁(yè)面 A 酸些，并將上次請(qǐng)求時(shí)服務(wù)器返回的 ETag 一起傳遞給服務(wù)器宰译。 服務(wù)器檢查該 ETag ，并判斷出該頁(yè)面自上次客戶端請(qǐng)求之后還未被修改魄懂，直接返回響應(yīng) 304 （未修改—— Not Modified ）和一個(gè)空的響應(yīng)體沿侈。

什么樣的前端代碼是好的

高復(fù)用低耦合，這樣文件小市栗，好維護(hù)缀拭，而且好擴(kuò)展咳短。