盒子模型？
在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。4個部分一起構成了css中元素的盒子模型
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b（粗體）、span、img、input、strong（強調文本）、select、label、em（強調+斜體）、button、textarea
塊級元素：div、ul、li、dl（列表）、dt（列表標題）、dd（列表標題下內容）、p、h1-h6、blockquote（塊引用）
空元素：沒有內容的HTML元素，例如：br、meta、hr、link、input、img
Http2.0 特點
二進制分幀：將傳輸信息分為兩個幀，分別是Headers幀和Data幀
HTTP1.x的首部信息會被封裝到Headers幀，request body信息封裝到Data幀里面
Web 語義化
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解
meta標簽作用
1.SEO相關
?提供有關頁面的元信息?
頁面重定向與刷新
頁面作者?版權?編輯器?
2.?移動設備
viewport?、WebApp全屏模式
3.?網頁相關
?聲明編碼、瀏覽器內核控制、禁止瀏覽器從本地計算機的緩存中訪問頁面內容、expires 、set-cookie
src與href的區(qū)別
href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
px、em、rem的區(qū)別
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
rem是CSS3新增的一個相對單位
????使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素
? ??通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應
? ??設備名稱? ? ? ? ? ?分辨率? ? ? ? ? 估算字體大小? ? ? ? ?rem與px轉換
????iphone5? ? ? ? ? 320*568? ? ? ? ? font-size：12px；? ? ?1rem=12px
????iphone6? ? ? ? ? 375*667? ? ? ? ?font-size：14px；? ? ?1rem=14px
????iphone6 Plus? 414*736? ? ? ? ?font-size：16px；? ? 1rem=16px
瀏覽器的內核
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))
什么叫優(yōu)雅降級和漸進增強
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區(qū)別：
a. 優(yōu)雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要
c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
sessionStorage 、localStorage 和?cookie 之間的區(qū)別
共同點：用于瀏覽器端存儲的緩存數據
不同點：
(1)、存儲內容是否發(fā)送到服務器端：當設置了Cookie后，數據會發(fā)送到服務器端，造成一定的寬帶浪費；
? ? ? ? web storage,會將數據保存到本地，不會造成寬帶浪費；
(2)、數據存儲大小不同：Cookie數據不能超過4K,適用于會話標識；web storage數據存儲可以達到5M;
(3)、數據存儲的有效期限不同：cookie只在設置了Cookid過期時間之前一直有效，即使關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器之前有效；localStorage,數據存儲永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；
Web Storage與Cookie相比存在的優(yōu)勢
(1)、存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。
(2)、存儲內容不會發(fā)送到服務器：當設置了Cookie后，Cookie的內容會隨著請求一并發(fā)送的服務器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發(fā)生任何交互。
(3)、更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操作更為簡便。cookie需要自己封裝。
(4)、獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂
ajax的優(yōu)缺點，工作原理
定義和用法:
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用于創(chuàng)建快速動態(tài)網頁的技術。Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
傳統(tǒng)的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。
優(yōu)點：
1.減輕服務器的負擔,按需取數據,最大程度的減少冗余請求
2.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗
3.基于xml標準化,并被廣泛支持,不需安裝插件等,進一步促進頁面和數據的分離
缺點：
1.AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.
2.AJAX只是局部刷新,所以頁面的后退按鈕是沒有用的.
3.對流媒體還有移動設備的支持不是太好等
AJAX的工作原理：
1.創(chuàng)建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
2.判斷數據傳輸方式(GET/POST)
3.打開鏈接 open()
4.發(fā)送 send()
5.當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調函數
三種減低頁面加載時間的方法
壓縮合并css、js文件? 減少http請求
外部js、css文件放在最底下
減少dom操作，盡可能用變量替代不必要的dom操作
web前端開發(fā)，如何提高頁面性能優(yōu)化？
內容方面：
????1.減少 HTTP 請求 (Make Fewer HTTP Requests)
????2.減少 DOM 元素數量 (Reduce the Number of DOM Elements)
????3.使得 Ajax 可緩存 (Make Ajax Cacheable)
針對CSS：
????1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
????2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
????3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
????4.避免 CSS 表達式 (Avoid CSS Expressions)
針對JavaScript ：
????1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
????2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
????3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
????4. 移除重復腳本 (Remove Duplicate Scripts)
面向圖片(Image)：
????1.優(yōu)化圖片
????2 不要在 HTML 中使用縮放圖片
????3 使用恰當的圖片格式
????4 使用 CSS Sprites 技巧對圖片優(yōu)化
瀏覽器是如何渲染頁面的
渲染的流程如下：
1.解析HTML文件，創(chuàng)建DOM樹。
? ?自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）
2.解析CSS。優(yōu)先級：瀏覽器默認設置<用戶設置<外部樣式<內嵌樣式<html標簽中的style樣式
3.將CSS與DOM合并，構建渲染樹（Render Tree）
4.布局和繪制，重繪（repaint）和重排（reflow）
