標簽（空格分隔）： 面試準備
[TOC]
1、講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個過程中發(fā)生了什么
- 域名解析
- 發(fā)起TCP的3次握手
- 建立TCP連接后發(fā)起http請求
- 服務器端響應http請求，瀏覽器得到html代碼
- 瀏覽器解析html代碼，并請求html代碼中的資源
- 瀏覽器對頁面進行渲染呈現(xiàn)給用戶
http://www.linux178.com/web/httprequest.html
2、談談你對前端性能優(yōu)化的理解
1.合并腳本和樣式表
2.服務器開啟GZip，精簡JavaScript，移除重復腳本，圖像優(yōu)化，將icon做成字體
3.使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存
4.將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出
5.避免重定向
http://div.io/topic/371
3、前端 MVC框架的意義
4、請簡述盒模型
IE6盒子模型與W3C盒子模型。
文檔中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content。
CSS3中有個box-sizing屬性可以控制盒子的計算方式，
content-box：padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設置的width值。（IE6盒子模型）
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
5、請你談談Cookie的弊端
1.每個特定的域名下生成的cookie個數(shù)有限制
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
2.cookie能傳遞的信息很少，最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)
3.安全性問題。如果cookie被人攔截了，就能取得用戶的信息。
優(yōu)點：極高的擴展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
缺點：
1.Cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發(fā)cookie就可以達到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。
6、瀏覽器本地存儲
在HTML5中提供了sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀，是會話級別的存儲。
localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
7、web storage和cookie的區(qū)別
1.Cookie的大小是受限的
2.每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬
3.cookie還需要指定作用域，不可以跨域調用
4.Web Storage擁有setItem,getItem等方法，cookie需要前端開發(fā)者自己封裝setCookie，getCookie
5.Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在，而WebStorage僅僅是為了在本地“存儲”數(shù)據(jù)而生
6.IE7、IE6中的UserData通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage
8、對BFC規(guī)范的理解
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
BFC布局規(guī)則：
1.內(nèi)部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
3.每個元素的margin box的左邊， 與包含塊border 4.box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
5.BFC的區(qū)域不會與float box重疊。
6.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
7.計算BFC的高度時，浮動元素也參與計算
滿足下列CSS聲明之一的元素便會生成BFC。
根元素
float的值不為none
overflow的值不為visible
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
9、線程與進程的區(qū)別
1.一個程序至少有一個進程，一個進程至少有一個線程
2.線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高
3.進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率
4.每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應用程序中，由應用程序提供多個線程執(zhí)行控制
5.多線程的意義在于一個應用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應用，來實現(xiàn)進程的調度和管理以及資源分配
10、請說出三種減少頁面加載時間的方法
1.盡量減少頁面中HTTP請求數(shù)量
2.服務器開啟gzip壓縮
3.css樣式的定義放置在文件頭部
4.Javascript腳本放在文件末尾
5.壓縮合并Javascript、CSS代碼
6.使用多域名負載網(wǎng)頁內(nèi)的多個文件、圖片，實現(xiàn)資源的并行下載
7.內(nèi)容分發(fā)網(wǎng)絡CDN
http://eadonlearning.blog.51cto.com/6642994/1334446
11、你都使用哪些工具來測試代碼的性能？
JSPerf, Dromaeo
13、常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應用或組件？
15、什么叫優(yōu)雅降級和漸進增強？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區(qū)別：
a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
參考《優(yōu)雅降級和漸進增強的區(qū)別》
16、WEB應用從服務器主動推送Data到客戶端有那些方式？
a. html5 websoket
b. WebSocket 通過 Flash
c. XHR長時間連接
d. XHR Multipart Streaming
e. 不可見的Iframe
f. <script>標簽的長時間連接(可跨域)
25、請解釋一下 JavaScript 的同源策略
同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
1.26、AMD和CMD 規(guī)范的區(qū)別？
AMD 提前執(zhí)行依賴 - 盡早執(zhí)行，requireJS 是它的實現(xiàn)
CMD 按需執(zhí)行依賴 - 懶執(zhí)行，seaJS 是它的實現(xiàn)
27、網(wǎng)站重構的理解
重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網(wǎng)站前端保持一致的行為。
a. 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)
b. 對于移動平臺的優(yōu)化，針對于SEO進行優(yōu)化
c. 減少代碼間的耦合，讓代碼保持彈性
d. 壓縮或合并JS、CSS、image等前端資源
28、瀏覽器的內(nèi)核分別是什么?
IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink；
29、請介紹下cache-control
每個資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存策略
Cache-Control 指令控制誰在什么條件下可以緩存響應以及可以緩存多久
Cache-Control 頭在 HTTP/1.1 規(guī)范中定義，取代了之前用來定義響應緩存策略的頭（例如 Expires）。
32、一次js請求一般情況下有哪些地方會有緩存處理？
a. 瀏覽器端存儲
b. 瀏覽器端文件緩存
c. HTTP緩存304
d. 服務器端文件類型緩存
e. 表現(xiàn)層&DOM緩存
http://www.nowamagic.net/librarys/veda/detail/162
33、一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。
a. 圖片懶加載，滾動到相應位置才加載圖片。
b. 圖片預加載，如果為幻燈片、相冊等，將當前展示圖片的前一張和后一張優(yōu)先下載。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。
d. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
34、談談以前端角度出發(fā)做好SEO需要考慮什么？
a. 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
b. meta標簽優(yōu)化
c. 關鍵詞分析
d. 付費給搜索引擎
e. 鏈接交換和鏈接廣泛度（Link Popularity）
f. 合理的標簽使用
35、框架和庫的區(qū)別
庫就是一些封裝好的方法，直接可以拿過來使用，簡化代碼的編寫。
框架更傾向于提供一整套的解決方案，使用的時候需要遵守一些給定的規(guī)則或者約定。
