1、什么是盒模型
盒模型，是CSS布局的基石，主要規(guī)定了元素是如何顯示元素間相互關系。具體有：
content(內容）：內容的自身寬高，width和height。
padding（內邊距）：盒子邊緣與盒子內容之間的空白區(qū)，內填充。
?border（內邊框）：盒子邊緣
?margin（外邊距） ：盒子邊緣以外的距離。
此外，在Ie5及更早版本中，元素的height包括的是除margin之外的所有屬性的和，但在ie6之后則使用標準盒模型。
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什么區(qū)別？
行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：<br> <hr> <img> <input> <link> <meta>
區(qū)別：?1.行內元素會在一條直線上排列（默認寬度只與內容有關），都是同一行的，水平方向排列
2.塊級元素各占據一行（默認寬度是它本身父容器的100%（和父元素的寬度一致），與內容無關），垂直方向排列。塊級元素從新行開始，結束接著一個斷行。
3.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素，只能包含文本或者其它行內元素。
4.行內元素設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效
3、簡述src和href的區(qū)別
1.href:超文本引用，Hypertext Reference的縮寫，指向網絡資源所在的位置，建立和當前元素（錨點）或當前文檔（鏈接之間的鏈接）用在link和a等元素上，用于在當前文檔和引用資源之間確立聯(lián)系。
2.src是source的縮寫，src用于替換當前的元素，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src = “js.js”></script>當瀏覽器解析到這一句話時，會暫停其他資源的下載和處理，直至將該資源加載，編譯，執(zhí)行完畢，圖片和框架等元素也是如此，類似于這個元素所指向的資源嵌套入當前元素內。因此，這也是為什么要把js放在底部而不是頭部的原因。
<link href = "common.css" rel = "stylesheet"/>當瀏覽器解析到這一句話的時候，會識別該文檔為css文件，會下載并且不會停止對當前文檔的處理，這也是為什么建議使用link方式來加載css而不是使用@import的原因。
4、什么是css Hack
css hack指各版本及各品牌瀏覽器之間對CSS解釋后出現(xiàn)網頁內容的誤差(比如我們常說錯位)的處理。CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器
5、什么叫優(yōu)雅降級和漸進增強
漸進增強 progressive enhancement： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 優(yōu)雅降級 graceful degradation： 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 區(qū)別： a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給 b. 漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要 c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
6、px和em的區(qū)別
兩者都是制作web頁面時用到的單位，PX實際上就是像素，用PX設置字體大小時，比較穩(wěn)定和精確。但如果改變?yōu)g覽器的縮放，原本的布局就會被打破，這時候就可以使用em定義頁面的字體大小，em是相對于父元素的，1em等于一倍的父元素字體大小。
EM是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，也比較麻煩。而Rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，所以rem用的更廣泛。
IE6-IE8，不支持em和rem屬性，px是所有瀏覽器都支持。
因此為了瀏覽器的兼容性，可“px”和“rem”一起使用，用"px"來實現(xiàn)IE6-8下的效果，然后使用“Rem”來實現(xiàn)代瀏覽器的效果。
7、HTML5 為什么只需要寫 <!DOCTYPE html>
HTML5 不基于 SGML，告訴瀏覽器解析成什么語言，這樣瀏覽器才能獲知文檔類型。另外?charset?也是需要的指定的，需要注意一下，否則中文會出現(xiàn)亂碼的情況
SGML 是標準通用標記語言
HTML 是超文本標記語言，主要是用于規(guī)定怎么顯示網頁
XML 是可擴展標記語言是未來網頁語言的發(fā)展方向，可能會替代 HTML，他和 HTML 都是由 SGML 延伸轉變而來的，你可以理解 SGML 是最早的版本，但現(xiàn)在已經淘汰不用了
XML 和 HTML 的最大區(qū)別就在于 XML 的標簽是可以自己創(chuàng)建的，數(shù)量無限多，而 HTML 的標簽都是固定的而且數(shù)量有限。
還有一個是 XHTML 也是現(xiàn)在基本上所有網頁都在用的標記語言，他其實和 HTML 沒什么本質的區(qū)別標簽都一樣，用法也都一樣，就是比 HTML 更嚴格，比如標簽必須都用小寫，標簽都必須有閉合標簽等。
8、Http的狀態(tài)碼有哪些
分類描述：
1**信息，服務器收到請求，需要請求者繼續(xù)執(zhí)行操作
2**成功，操作被成功接手并處理
3**重定向，需要進一步的操作已完成請求
4**客戶端請求錯誤，請求中包含語法錯誤或無法完成的請求
5**服務器錯誤，服務器在處理請求的過程中發(fā)生了錯誤
1**信息狀態(tài)類：
100Continue繼續(xù)?？蛻舳藨^續(xù)其請求
101Switching Protocols切換協(xié)議。服務器根據客戶端的請求切換協(xié)議。只能切換到更高級的協(xié)議，例如，切換到HTTP的新版本協(xié)議
2**信息狀態(tài)類：
200OK請求成功。一般用于GET與POST請求
201Created已創(chuàng)建。成功請求并創(chuàng)建了新的資源
202Accepted已接受。已經接受請求，但未處理完成
203Non-Authoritative Information非授權信息。請求成功。但返回的meta信息不在原始的服務器，而是一個副本
204No Content無內容。服務器成功處理，但未返回內容。在未更新網頁的情況下，可確保瀏覽器繼續(xù)顯示當前文檔
205Reset Content重置內容。服務器處理成功，用戶終端(例如：瀏覽器)應重置文檔視圖?？赏ㄟ^此返回碼清除瀏覽器的表單域
206Partial Content部分內容。服務器成功處理了部分GET請求
3**信息狀態(tài)類：
300Multiple Choices多種選擇。請求的資源可包括多個位置，相應可返回一個資源特征與地址的列表用于用戶終端(例如：瀏覽器)選擇
301Moved Permanently永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。今后任何新的請求都應使用新的URI代替
302Found臨時移動。與301類似。但資源只是臨時被移動。客戶端應繼續(xù)使用原有URI
303See Other查看其它地址。與301類似。使用GET和POST請求查看
304Not Modified未修改。所請求的資源未修改，服務器返回此狀態(tài)碼時，不會返回任何資源?？蛻舳送ǔ彺嬖L問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源
305Use Proxy使用代理。所請求的資源必須通過代理訪問
306Unused已經被廢棄的HTTP狀態(tài)碼
307Temporary Redirect臨時重定向。與302類似。使用GET請求重定向
4**信息狀態(tài)類：、
400Bad Request客戶端請求的語法錯誤，服務器無法理解
401Unauthorized請求要求用戶的身份認證
402Payment Required保留，將來使用
403Forbidden服務器理解請求客戶端的請求，但是拒絕執(zhí)行此請求
404Not Found服務器無法根據客戶端的請求找到資源(網頁)。通過此代碼，網站設計人員可設置”您所請求的資源無法找到”的個性頁面
405Method Not Allowed客戶端請求中的方法被禁止
406Not Acceptable服務器無法根據客戶端請求的內容特性完成請求
407Proxy Authentication Required請求要求代理的身份認證，與401類似，但請求者應當使用代理進行授權
408Request Time-out服務器等待客戶端發(fā)送的請求時間過長，超時
409Conflict服務器完成客戶端的PUT請求是可能返回此代碼，服務器處理請求時發(fā)生了沖突
410Gone客戶端請求的資源已經不存在。410不同于404，如果資源以前有現(xiàn)在被永久刪除了可使用410代碼，網站設計人員可通過301代碼指定資源的新位置
411Length Required服務器無法處理客戶端發(fā)送的不帶Content-Length的請求信息
412Precondition Failed客戶端請求信息的先決條件錯誤
413Request Entity Too Large由于請求的實體過大，服務器無法處理，因此拒絕請求。為防止客戶端的連續(xù)請求，服務器可能會關閉連接。如果只是服務器暫時無法處理，則會包含一個Retry-After的響應信息
414Request-URI Too Large請求的URI過長(URI通常為網址)，服務器無法處理
415Unsupported Media Type服務器無法處理請求附帶的媒體格式
416Requested range not satisfiable客戶端請求的范圍無效
417Expectation Failed服務器無法滿足Expect的請求頭信息
5**信息狀態(tài)類：
500Internal Server Error服務器內部錯誤，無法完成請求
501Not Implemented服務器不支持請求的功能，無法完成請求
502Bad Gateway充當網關或代理的服務器，從遠端服務器接收到了一個無效的請求
503Service Unavailable由于超載或系統(tǒng)維護，服務器暫時的無法處理客戶端的請求。延時的長度可包含在服務器的Retry-After頭信息中
504Gateway Time-out充當網關或代理的服務器，未及時從遠端服務器獲取請求
505HTTP Version not supported服務器不支持請求的HTTP協(xié)議的版本，無法完成處理
開發(fā)中常見到的：
200 OK //客戶端請求成功
301 Moved Permanently（永久移除)，請求的 URL 已移走，Response 中應該包含一個 Location URL, 說明資源現(xiàn)在所處的位置
302 found 重定向
400 Bad Request //客戶端請求有語法錯誤，不能被服務器所理解
401 Unauthorized //請求未經授權，這個狀態(tài)代碼必須和 WWW-Authenticate 報頭域一起使用
403 Forbidden //服務器收到請求，但是拒絕提供服務
404 Not Found //請求資源不存在，eg：輸入了錯誤的 URL
500 Internal Server Error //服務器發(fā)生不可預期的錯誤
503 Server Unavailable //服務器當前不能處理客戶端的請求，一段時間后可能恢復正常
9、一次完整的HTTP事務是怎么一個過程
10、HTTPS是如何實現(xiàn)加密
11、瀏覽器是如何渲染頁面的
渲染的流程如下：
1.解析HTML文件，創(chuàng)建DOM樹。
? ?自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
2.解析CSS。優(yōu)先級：瀏覽器默認設置<用戶設置<外部樣式<內聯(lián)樣式<HTML中的style樣式；
3.將CSS與DOM合并，構建渲染樹（Render Tree）
4.布局和繪制，重繪（repaint）和重排（reflow）
12.瀏覽器的內核有哪些？分別有什么代表的瀏覽器
Trident 內核：IE，搜狗高速瀏覽器等
Gecko 內核：Mozilla Firefox（火狐瀏覽器），Netscape6及以上版本
Webkit 內核：Safari 、曾經的 Chrome
Presto 內核：Opera 7到Opera12.17（歐朋瀏覽器）之間的版本采用的內核
Blink 內核：現(xiàn)在 Chrome 內核是 Blink，Opera現(xiàn)已改用Google Chrome的Blink內核
13、頁面導入時，使用link和@import有什么區(qū)別
1.類型不同
link: 是html標簽
@import: 是css語法
2. 加載時機不同
link: 引入的樣式在頁面加載時同時加載
@import: 引入的樣式需等頁面完全載入以后再加載
3. 兼容性
link: 是XHTML標簽沒有兼容性問題
@import: 不兼容ie5以下
4.動態(tài)改變
link: 支持使用Javascript控制DOM去改變樣式
@import: 不支持
14.如何優(yōu)化圖像，圖像格式的區(qū)別
1、不用圖片，盡量用css3代替。 比如說要實現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2、?使用矢量圖SVG替代位圖。對于絕大多數(shù)圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！
3.、使用恰當?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類的，適用于JPEG。
而修飾圖片通常更適合用無損壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。
4、按照HTTP協(xié)議設置合理的緩存。
5、使用字體圖標webfont、CSS Sprites等。
6、用CSS或JavaScript實現(xiàn)預加載。
7、WebP圖片格式能給前端帶來的優(yōu)化。WebP支持無損、有損壓縮，動態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網絡等圖片傳輸。
15.列舉你了解Html5. Css3 新特性
1、拖拽釋放(Drap and drop) API ondrop
2、自定義屬性data-id
3、語義化更好的內容標簽(header,nav,footer ,aside, article, section)
4、地理(Geolocation) API
5、表單控件 calendar , date , time , email , url , search , tel , file , number
6、新的技術 webworker, websocket , Geolocation
C3::
顏色: 新增RGBA , HSLA模式
文字陰影(text-shadow)
邊框: 圓角(border-radius) 邊框陰影 : box-shadow
盒子模型: box-sizing
背景:background-size background-origin background-clip
漸變: linear-gradient , radial-gradient
過渡 : transition 可實現(xiàn)動畫
自定義動畫 animate @keyfrom
媒體查詢 多欄布局 @media screen and (width:800px) {…}
border-image
2D轉換;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
3D轉換
字體圖標 font-face
彈性布局flex
16.可以通過哪些方法優(yōu)化css3 animation渲染
CSS動畫屬性會觸發(fā)整個頁面的重排，重繪,box-shadow和gradients的性能殺手
在使用css3 transtion做動畫效果時，優(yōu)先選擇transform，盡量不要使用height，width，margin和padding。
17.列舉幾個前端性能方面的優(yōu)化
從三個方面就前端性能進行總結：網絡方面、DOM操作及渲染方面、數(shù)據方面。
1、網絡方面
減少http請求：合并js文件/合并css文件/雪碧圖的使用(css sprite)/使用base64表示簡單的圖片
減小資源體積：gzip壓縮/js混淆/css壓縮/圖片壓縮
緩存：DNS緩存 /CDN部署與緩存 /http緩存
移動端優(yōu)化：/使用長cache，減少重定向/首屏優(yōu)化，保證首屏加載數(shù)據小于14kb/不濫用web字體
2、渲染和DOM操作方面
優(yōu)化網頁渲染：?css的文件放在頭部，js文件放在尾部或者異步、盡量避免內聯(lián)樣式
DOM操作優(yōu)化：避免在document上直接進行頻繁的DOM操作、使用classname代替大量的內聯(lián)樣式修改、對于復雜的UI元素，設置position為absolute或fixed、盡量使用css動畫、使用requestAnimationFrame代替setInterval操作、適當使用canvas、盡量減少css表達式的使用、使用事件代理
操作細節(jié)注意：避免圖片或者frame使用空src、在css屬性為0時，去掉單位、禁止圖像縮放、正確的css前綴的使用、移除空的css規(guī)則、對于css中可繼承的屬性，如font-size，盡量使用繼承，少一點設置、縮短css選擇器，多使用偽元素等幫助定位
移動端優(yōu)化：?長列表滾動優(yōu)化、函數(shù)防抖和函數(shù)節(jié)流、使用touchstart、touchend代替click、HTML的viewport設置、開啟GPU渲染加速
3、數(shù)據方面
圖片加載處理：圖片預加載、圖片懶加載、首屏加載時進度條的顯示
異步請求的優(yōu)化：使用正常的json數(shù)據格式進行交互、部分常用數(shù)據的緩存、數(shù)據埋點和統(tǒng)計
Yslow是雅虎開發(fā)的基于網頁性能分析瀏覽器插件，可以檢測出網頁的具體性能值，并且有著名的Yslow 23條優(yōu)化規(guī)則，這23條，就夠我們玩的了。
1. 減少HTTP請求次數(shù)
盡量合并圖片、CSS、JS。比如加載一個頁面，如果有5個css文件的話，那么會發(fā)出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而如果把這個5個文件合成一個的話，就只需要發(fā)出一次http請求，節(jié)省網絡請求時間，加快頁面的加載。
2. 使用CDN
網站上靜態(tài)資源即css、js全都使用cdn分發(fā)，圖片亦然。
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容加載進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區(qū)讀取，不需要再發(fā)出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數(shù)據量。
6. 把CSS放到頂部
網頁上的資源加載時從上網下順序加載的，所以css放在頁面的頂部能夠優(yōu)先渲染頁面，讓用戶感覺頁面加載很快。
7. 把JS放到底部
加載js時會對后續(xù)的資源造成阻塞，必須得等js加載完才去加載后續(xù)的文件 ，所以就把js放在頁面底部最后加載。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
這個表達式會持續(xù)的在頁面上計算樣式，影響頁面的性能。并且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數(shù)
減少主機名可以節(jié)省響應時間。但同時，需要注意，減少主機會減少頁面中并行下載的數(shù)量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小?，F(xiàn)在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現(xiàn)象會比較坑爹，看起來沒什么差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問?http://baidu.com?時，實際上返回的是一個包含301代碼的跳轉，它指向的是?http://baidu.com/（注意末尾的斜杠）。在nginx服務器可以使用rewrite；Apache服務器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問?http://baidu.com/bbs?跳轉到http://bbs.baidu.com/。那么可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來服務器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節(jié)點(inode)數(shù))，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 服務器集群使用，可取后兩個參數(shù)。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
異步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){
}
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據。因此使用GET獲取數(shù)據時更加有意義。
17. 減少DOM元素數(shù)量
這是一門大學問，這里可以引申出一堆優(yōu)化的細節(jié)。想要具體研究的可以看后面推薦書籍?？傊笤瓌t減少DOM數(shù)量，就會減少瀏覽器的解析負擔
18. 避免404
比如外鏈的css或者js文件出現(xiàn)問題返回404時，會破壞瀏覽器對文件的并行加載。并且瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作JavaScript代碼來執(zhí)行。
19. 減少Cookie的大小
Cookie里面別塞那么多東西，因為每個請求都得帶著他跑
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態(tài)文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內容的呈現(xiàn)并且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響加載
23. 縮小favicon.ico并緩存
