標簽（空格分隔）： 面試準備
[TOC]
1谐腰、講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個過程中發(fā)生了什么
- 域名解析
- 發(fā)起TCP的3次握手
- 建立TCP連接后發(fā)起http請求
- 服務(wù)器端響應(yīng)http請求涩盾，瀏覽器得到html代碼
- 瀏覽器解析html代碼十气，并請求html代碼中的資源
- 瀏覽器對頁面進行渲染呈現(xiàn)給用戶
http://www.linux178.com/web/httprequest.html
2、談?wù)勀銓η岸诵阅軆?yōu)化的理解
1.合并腳本和樣式表
2.服務(wù)器開啟GZip春霍，精簡JavaScript砸西，移除重復(fù)腳本，圖像優(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)。對象的實際寬度等于設(shè)置的width值和border浊竟、padding之和怨喘。（W3C盒子模型）
border-box：padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值逐沙。（IE6盒子模型）
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
5哲思、請你談?wù)凜ookie的弊端
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.通過加密和安全傳輸技術(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)不可能保存在客戶端婚惫。例如氛赐，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器先舷。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用滓侍。
6蒋川、瀏覽器本地存儲
在HTML5中提供了sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)撩笆，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(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還需要指定作用域，不可以跨域調(diào)用
4.Web Storage擁有setItem,getItem等方法弥姻，cookie需要前端開發(fā)者自己封裝setCookie南片，getCookie
5.Cookie的作用是與服務(wù)器進行交互，作為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í)行，必須依存在應(yīng)用程序中节吮，由應(yīng)用程序提供多個線程執(zhí)行控制
5.多線程的意義在于一個應(yīng)用程序中抽高，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用透绩，來實現(xiàn)進程的調(diào)度和管理以及資源分配
10翘骂、請說出三種減少頁面加載時間的方法
1.盡量減少頁面中HTTP請求數(shù)量
2.服務(wù)器開啟gzip壓縮
3.css樣式的定義放置在文件頭部
4.Javascript腳本放在文件末尾
5.壓縮合并Javascript、CSS代碼
6.使用多域名負載網(wǎng)頁內(nèi)的多個文件渺贤、圖片雏胃，實現(xiàn)資源的并行下載
7.內(nèi)容分發(fā)網(wǎng)絡(luò)CDN
http://eadonlearning.blog.51cto.com/6642994/1334446
11、你都使用哪些工具來測試代碼的性能志鞍？
JSPerf, Dromaeo
13瞭亮、常使用的庫有哪些？常用的前端開發(fā)工具固棚？開發(fā)過什么應(yīng)用或組件统翩？
15仙蚜、什么叫優(yōu)雅降級和漸進增強？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構(gòu)建頁面厂汗，保證最基本的功能委粉，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗娶桦。
優(yōu)雅降級 graceful degradation：
一開始就構(gòu)建完整的功能贾节，然后再針對低版本瀏覽器進行兼容。
區(qū)別：
a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始衷畦，并試圖減少用戶體驗的供給
b. 漸進增強則是從一個非忱跬浚基礎(chǔ)的，能夠起作用的版本開始祈争，并不斷擴充斤程，以適應(yīng)未來環(huán)境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看菩混，同時保證其根基處于安全地帶
參考《優(yōu)雅降級和漸進增強的區(qū)別》
16忿墅、WEB應(yīng)用從服務(wù)器主動推送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)站重構(gòu)的理解
重構(gòu)：在不改變外部行為的前提下采转，簡化結(jié)構(gòu)聪廉、添加可讀性，而在網(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 指令控制誰在什么條件下可以緩存響應(yīng)以及可以緩存多久
Cache-Control 頭在 HTTP/1.1 規(guī)范中定義留量，取代了之前用來定義響應(yīng)緩存策略的頭（例如 Expires）窄赋。
32、一次js請求一般情況下有哪些地方會有緩存處理楼熄？
a. 瀏覽器端存儲
b. 瀏覽器端文件緩存
c. HTTP緩存304
d. 服務(wù)器端文件類型緩存
e. 表現(xiàn)層&DOM緩存
http://www.nowamagic.net/librarys/veda/detail/162
33忆绰、一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢孝赫，你有哪些方法優(yōu)化這些圖片的加載较木，給用戶更好的體驗。
a. 圖片懶加載青柄，滾動到相應(yīng)位置才加載圖片伐债。
b. 圖片預(yù)加載，如果為幻燈片致开、相冊等峰锁，將當前展示圖片的前一張和后一張優(yōu)先下載。
c. 使用CSSsprite双戳，SVGsprite虹蒋，Iconfont、Base64等技術(shù)飒货，如果圖片為css圖片的話魄衅。
d. 如果圖片過大，可以使用特殊編碼的圖片塘辅，加載時會先加載一張壓縮的特別厲害的縮略圖晃虫，以提高用戶體驗。
34扣墩、談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么哲银？
a. 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
b. meta標簽優(yōu)化
c. 關(guān)鍵詞分析
d. 付費給搜索引擎
e. 鏈接交換和鏈接廣泛度（Link Popularity）
f. 合理的標簽使用
35、框架和庫的區(qū)別
庫就是一些封裝好的方法呻惕，直接可以拿過來使用荆责，簡化代碼的編寫。
框架更傾向于提供一整套的解決方案亚脆，使用的時候需要遵守一些給定的規(guī)則或者約定做院。
