作者：北風(fēng)菌
鏈接：https://juejin.im/post/6876623829574090760
來源：掘金
好久沒有更新帖子了，最近一直在復(fù)習(xí)準(zhǔn)備秋招膘怕，最近終于拿到了第一份意向書想诅，終于有時間來整理一下自己最近的復(fù)習(xí)內(nèi)容召庞，以下知識點都是樓主在面試中被問到的問題，我做了幾大塊的分類来破，各位需要的小伙伴可以收藏一下篮灼。因為還在繼續(xù)面試，所以還會不定時更新徘禁，因為掘金這邊文章有字?jǐn)?shù)限制诅诱，所以這邊放出了HTML部分，CSS部分送朱，JS部分的知識點娘荡，Vue，git驶沼，webpack炮沐，計網(wǎng)相關(guān)的知識點放在下一篇文章中juejin.im/post/687707… 。
HTML部分：
HTML標(biāo)簽的分類：
HTML文檔標(biāo)簽
<!DOCTYPE>：定義文檔類型回怜。
<html>： 定義HTML文檔大年。
<head>：定義文檔的頭部。<meta>：定義元素可提供的有關(guān)頁面的元信息玉雾，比如針對搜索引擎和更新頻度的描述和關(guān)鍵字翔试。meta標(biāo)簽共有兩個屬性， http-equiv屬性：相當(dāng)于http頭文件的作用复旬，向瀏覽器傳回一些有用的信息垦缅，使用content規(guī)定屬性的內(nèi)容比如
name屬性：主要用來描述網(wǎng)頁，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的驹碍。
<base>：定義頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)失都。<title>：定義文檔標(biāo)題。<link>：定義文檔與外部資源的關(guān)系幸冻。<style>：定義HTML文檔樣式信息粹庞。
<body>：定義文檔的主體。（腳本在非必需情況時在的最后）<script>：定義客戶端腳本洽损，比如javascript庞溜。<noscript>：定義腳本未被執(zhí)行時的替代內(nèi)容。（如文本）
按閉合特征分類：
閉合標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容流码，例如<html></html>又官、<p></p>等。
空標(biāo)簽是指沒有內(nèi)容的標(biāo)簽漫试，在開始標(biāo)簽中自動閉合六敬。常見的空標(biāo)簽有：<br>、<hr>驾荣、 <img>外构、 <input>、 <link> <meta>播掷。
按是否換行特征分類：
塊級元素：塊級元素是值本身屬性為display:block的元素审编。
內(nèi)聯(lián)元素：內(nèi)聯(lián)元素是指本身屬性為display:inline的元素，其寬度隨元素的內(nèi)容而變化歧匈。
塊級元素的特點：
每個塊級元素獨占一行垒酬，從上到下排布。
塊級元素可以直接控制寬度高度等盒子模型相關(guān)的css屬性件炉。
不設(shè)置寬度的情況下勘究，塊級元素的寬度是其父級元素內(nèi)容的寬度。
不設(shè)置高度的情況下斟冕，塊級元素的高度是他本身內(nèi)容的高度口糕。
常用塊級元素：
內(nèi)聯(lián)元素的特點：
內(nèi)聯(lián)元素會和其他元素從左到右顯示在一行中。
內(nèi)聯(lián)元素不能直接控制寬度高度以及盒子模型相關(guān)的css屬性宫静，可以設(shè)置內(nèi)外邊距的水平方向的值走净。也就是說，對于內(nèi)聯(lián)元素的margin和padding孤里，只有margin-left/margin-right和padding-left/padding-right是有效的伏伯，豎直方向的margin和pading無效果。
內(nèi)聯(lián)元素的寬高是由其內(nèi)容本身的大小決定的捌袜。
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素说搅，不允許在內(nèi)聯(lián)元素中嵌套塊級元素。
常見的內(nèi)聯(lián)元素：
H5新特性（常用）：
HTML5新增元素：
1）標(biāo)簽增刪 8個語義元素 header section footer aside nav main article figure內(nèi)容元素mark高亮 progress進(jìn)度
新的表單控件calander date time email url search新的input類型 color date datetime datetime-local email移除過時標(biāo)簽big font frame frameset2）canvas繪圖虏等，支持內(nèi)聯(lián)SVG弄唧。支持MathML
3）多媒體audio video source embed track4）本地離線存儲，把需要離線存儲在本地的文件列在一個manifest配置文件
5）web存儲,localStorage霍衫、SessionStorage cookie sessionStorage localStorage區(qū)別：
Cookie屬性詳解Name字段：為一個cookie的名稱Value字段：為一個cookie的值Domain字段：為可以訪問此cookie的域名候引，二級域名可以獲取頂級域名中的cookie，同二級域名之間不可相互獲取敦跌，頂級域名不可獲取二級域名的cookiePath字段：為可以訪問此cookie的頁面路徑澄干，只有此路徑下的頁面可以讀取此cookieExpires/Max-Age字段：為此cookie的超時時間，若設(shè)置為一個時間，則當(dāng)達(dá)到此時間之后麸俘，此cookie失效辩稽，不設(shè)置的話默認(rèn)值為Session，即瀏覽器關(guān)閉后才會失效从媚。Size字段：表示此cookie的大小http字段：表示此cookie的httponly屬性逞泄，若此屬性設(shè)置為true，則只有在http請求頭中會帶有此cookie的信息拜效，而不能通過document.cookie來訪問喷众。Secure字段：表示設(shè)置是否只能通過https來傳遞此條cookie。
Cookie與webstorage：
cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要)拂檩，即cookie在瀏覽器和服務(wù)器間來回傳遞侮腹。
cookie數(shù)據(jù)還有路徑（path）的概念嘲碧，可以限制稻励。cookie只屬于某個路徑下存儲大小限制也不同，cookie數(shù)據(jù)不能超過4K愈涩，同時因為每次http請求都會攜帶cookie艘希，所以cookie只適合保存很小的數(shù)據(jù)台丛，如回話標(biāo)識。
webStorage雖然也有存儲大小的限制，但是比cookie大得多炭庙，可以達(dá)到5M或更大
sessionStorage與localStorage：
數(shù)據(jù)的有效期不同：
sessionStorage：僅在當(dāng)前的瀏覽器窗口關(guān)閉有效；
localStorage：始終有效莉钙，窗口或瀏覽器關(guān)閉也一直保存仇冯，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過期時間之前一直有效已烤，即使窗口和瀏覽器關(guān)閉鸠窗。
作用域不同：
sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個頁面胯究；localStorage：在所有同源窗口都是共享的稍计；
cookie：也是在所有同源窗口中共享的。
HTTP狀態(tài)碼：
1xx(臨時響應(yīng))：表示臨時響應(yīng)并需要請求者繼續(xù)執(zhí)行操作的狀態(tài)碼裕循。
100(繼續(xù))請求者應(yīng)當(dāng)繼續(xù)提出請求臣嚣。服務(wù)器返回此代碼表示已收到請求的第一部分，正在等待其余部分剥哑。
101(切換協(xié)議)請求者已要求服務(wù)器切換協(xié)議硅则，服務(wù)器已確認(rèn)并準(zhǔn)備切換。
2xx (成功)：表示成功處理了請求的狀態(tài)碼株婴。
200(成功)服務(wù)器已成功處理了請求怎虫。通常，這表示服務(wù)器提供了請求的網(wǎng)頁。如果是對您的 robots.txt 文件顯示此狀態(tài)碼揪垄，則表示 Googlebot 已成功檢索到該文件穷吮。
201(已創(chuàng)建)請求成功并且服務(wù)器創(chuàng)建了新的資源。
202(已接受)服務(wù)器已接受請求饥努，但尚未處理捡鱼。
203(非授權(quán)信息)服務(wù)器已成功處理了請求，但返回的信息可能來自另一來源酷愧。
204(無內(nèi)容)服務(wù)器成功處理了請求驾诈，但沒有返回任何內(nèi)容。
205(重置內(nèi)容)服務(wù)器成功處理了請求溶浴，但沒有返回任何內(nèi)容乍迄。與 204 響應(yīng)不同，此響應(yīng)要求請求者重置文檔視圖(例如士败，清除表單內(nèi)容以輸入新內(nèi)容)闯两。
206(部分內(nèi)容)服務(wù)器成功處理了部分 GET 請求。
3xx (重定向)：要完成請求谅将，需要進(jìn)一步操作漾狼。通常，這些狀態(tài)碼用來重定向饥臂。
300(多種選擇)針對請求逊躁，服務(wù)器可執(zhí)行多種操作。服務(wù)器可根據(jù)請求者 (user agent) 選擇一項操作隅熙，或提供操作列表供請求者選擇稽煤。
301(永久移動)請求的網(wǎng)頁已永久移動到新位置。服務(wù)器返回此響應(yīng)(對 GET 或 HEAD 請求的響應(yīng))時囚戚，會自動將請求者轉(zhuǎn)到新位置酵熙。您應(yīng)使用此代碼告訴 Googlebot 某個網(wǎng)頁或網(wǎng)站已永久移動到新位置。
302(臨時移動)服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求弯淘，但請求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請求绿店。此代碼與響應(yīng) GET 和 HEAD 請求的 301 代碼類似，會自動將請求者轉(zhuǎn)到不同的位置庐橙，但您不應(yīng)使用此代碼來告訴 Googlebot 某個網(wǎng)頁或網(wǎng)站已經(jīng)移動假勿，因為 Googlebot 會繼續(xù)抓取原有位置并編制索引。
303(查看其他位置)請求者應(yīng)當(dāng)對不同的位置使用單獨的 GET 請求來檢索響應(yīng)時态鳖，服務(wù)器返回此代碼转培。對于除 HEAD 之外的所有請求，服務(wù)器會自動轉(zhuǎn)到其他位置浆竭。
304(未修改)自從上次請求后浸须，請求的網(wǎng)頁未修改過惨寿。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容删窒。如果網(wǎng)頁自請求者上次請求后再也沒有更改過裂垦，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為 If-Modified-Since HTTP 標(biāo)頭)。服務(wù)器可以告訴 Googlebot 自從上次抓取后網(wǎng)頁沒有變更肌索，進(jìn)而節(jié)省帶寬和開銷蕉拢。
305(使用代理)請求者只能使用代理訪問請求的網(wǎng)頁。如果服務(wù)器返回此響應(yīng)诚亚，還表示請求者應(yīng)使用代理晕换。
307(臨時重定向)服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請求站宗。此代碼與響應(yīng) GET 和 HEAD 請求的 301 代碼類似闸准，會自動將請求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來告訴 Googlebot 某個頁面或網(wǎng)站已經(jīng)移動梢灭，因為 Googlebot 會繼續(xù)抓取原有位置并編制索引夷家。
4xx(請求錯誤)：這些狀態(tài)碼表示請求可能出錯，妨礙了服務(wù)器的處理或辖。
400(錯誤請求)服務(wù)器不理解請求的語法瘾英。
401(未授權(quán))請求要求身份驗證枣接。對于登錄后請求的網(wǎng)頁颂暇，服務(wù)器可能返回此響應(yīng)。
403(禁止)服務(wù)器拒絕請求但惶。如果您在 Googlebot 嘗試抓取您網(wǎng)站上的有效網(wǎng)頁時看到此狀態(tài)碼(您可以在 Google 網(wǎng)站管理員工具診斷下的網(wǎng)絡(luò)抓取頁面上看到此信息)耳鸯，可能是您的服務(wù)器或主機拒絕了 Googlebot 訪問。
404(未找到)服務(wù)器找不到請求的網(wǎng)頁膀曾。例如县爬，對于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會返回此代碼。
405(方法禁用)禁用請求中指定的方法添谊。
406(不接受)無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁财喳。
407(需要代理授權(quán))此狀態(tài)碼與 401(未授權(quán))類似，但指定請求者應(yīng)當(dāng)授權(quán)使用代理斩狱。如果服務(wù)器返回此響應(yīng)耳高，還表示請求者應(yīng)當(dāng)使用代理。
408(請求超時)服務(wù)器等候請求時發(fā)生超時所踊。
5xx(服務(wù)器錯誤)：這些狀態(tài)碼表示服務(wù)器在處理請求時發(fā)生內(nèi)部錯誤泌枪。這些錯誤可能是服務(wù)器本身的錯誤，而不是請求出錯秕岛。
500(服務(wù)器內(nèi)部錯誤)服務(wù)器遇到錯誤碌燕，無法完成請求误证。
501(尚未實施)服務(wù)器不具備完成請求的功能。例如修壕，服務(wù)器無法識別請求方法時可能會返回此代碼愈捅。
502(錯誤網(wǎng)關(guān))服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)慈鸠。
503(服務(wù)不可用)服務(wù)器目前無法使用(由于超載或停機維護(hù))改鲫。通常，這只是暫時狀態(tài)林束。
504(網(wǎng)關(guān)超時)服務(wù)器作為網(wǎng)關(guān)或代理像棘，但是沒有及時從上游服務(wù)器收到請求。
505(HTTP 版本不受支持)服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本壶冒。
前端優(yōu)化方法：
方法分類：
降低請求量：合并資源缕题，減少HTTP 請求數(shù)，minify / gzip 壓縮胖腾， webPlazyLoad烟零。
加快請求速度：預(yù)解析DNS，減少域名數(shù)咸作，并行加載锨阿，CDN 分發(fā)。
緩存：HTTP 協(xié)議緩存請求记罚，離線緩存 manifest墅诡，離線數(shù)據(jù)緩存localStorage。
渲染：JS/CSS優(yōu)化桐智，加載順序末早，服務(wù)端渲染，pipeline说庭。
具體措施：
減少HTTP請求次數(shù)：CSS Sprites然磷，js、CSS源碼壓縮刊驴、圖片大小控制合適姿搜；網(wǎng)頁Gzip、CDN托管捆憎、data緩存舅柜、圖片服務(wù)器
前端模板JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費攻礼，前端用變量保存AJAX請求結(jié)果业踢，每次操作本地變量，不用請求礁扮，減少請求次數(shù)
用innerHTML替代DOM操作知举，減少DOM操作次數(shù)瞬沦，優(yōu)化JavaScript性能。
當(dāng)需要設(shè)置的樣式很多時雇锡，設(shè)置className而不是直接操作Style
少用全局變量逛钻、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取
避免使用CSS Expression（css表達(dá)式）又稱Dynamic properties（動態(tài)屬性）
圖片預(yù)加載锰提，將樣式表放在頂部曙痘，將腳本放在底部，加上時間戳立肘。
防止內(nèi)存泄漏：內(nèi)存泄漏指任何對象在不再擁有或需要它之后仍然繼續(xù)存在边坤。垃圾回收器定期掃描對象，并計算引用了每個對象的其他的數(shù)量谅年。如果一個對象的引用數(shù)量為0（沒有其他對象引用過該對象）茧痒，或?qū)υ搶ο蟮奈ㄒ灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收融蹂。
優(yōu)雅降級與漸進(jìn)增強：
瀏覽器輸入網(wǎng)址到頁面渲染全過程
漸進(jìn)增強：一開始就針對低版本瀏覽器進(jìn)行構(gòu)建頁面旺订，完成基本的功能，然后在針對高級瀏覽器進(jìn)行效果超燃，交互区拳，追加功能達(dá)到更好的體驗。
優(yōu)雅降級：一開始就構(gòu)建站點的完整功能意乓，然后針對瀏覽器測試和修復(fù)樱调，比如一開始使用css3的特性構(gòu)建一個應(yīng)用，然后逐步針對各大瀏覽器進(jìn)行hack使其可以在低版本瀏覽器上正常瀏覽洽瞬。
post和get區(qū)別：
get參數(shù)通過url傳遞本涕，post參數(shù)放在request body中。
get請求在url中傳遞的參數(shù)是有長度限制的伙窃，而post沒有。
get比post更不安全样漆，因為參數(shù)直接暴露在url中为障，所以不能用來傳遞敏感信息。
get請求只能進(jìn)行url編碼放祟，而post支持多種編碼方式
get請求參數(shù)會被完整保留在瀏覽歷史記錄里鳍怨，而post中的參數(shù)不會被保留。
GET和POST本質(zhì)上就是TCP鏈接跪妥，并無差別鞋喇。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們在應(yīng)用過程中體現(xiàn)出一些不同眉撵。
GET產(chǎn)生一個TCP數(shù)據(jù)包侦香；POST產(chǎn)生兩個TCP數(shù)據(jù)包落塑。對于GET方式的請求，瀏覽器會把http header和data一并發(fā)送出去罐韩，服務(wù)器響應(yīng)200（返回數(shù)據(jù)）憾赁；而對于POST，瀏覽器先發(fā)送header散吵，服務(wù)器響應(yīng)100 continue龙考，瀏覽器再發(fā)送data，服務(wù)器響應(yīng)200 ok（返回數(shù)據(jù)）矾睦。
http與https有什么區(qū)別晦款？
（1） https協(xié)議需要ca申請認(rèn)證書，一般免費的較少
（2） http是超文本傳輸協(xié)議枚冗，信息是明文傳輸柬赐，https則是具有安全性的ssl加密傳輸協(xié)議
（3） http和https使用的是完全不同的連接方式，用的端口也不一樣官紫，前者是80肛宋，后者是443
（4） http的連接很簡單，是無狀態(tài)的束世，https協(xié)議是由ssl+http協(xié)議構(gòu)建的可進(jìn)行加密傳輸酝陈，身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http安全
HTTP協(xié)議中緩存的處理流程：
緩存分為兩種：強緩存和協(xié)商緩存毁涉，根據(jù)響應(yīng)的header內(nèi)容來決定沉帮。
強緩存是利用http頭中的Expires和cache-Control兩個字段來控制的，用來表示資源的緩存時間贫堰。強緩存中穆壕，普通刷新會忽略它，但不會清除它其屏，需要強制刷新喇勋。瀏覽器強制刷新，請求會帶上cache-Control :no-cache和pragma: no-cache
協(xié)商緩存就是由服務(wù)器來確定緩存資源是否可用偎行，所以客戶端與服務(wù)器端要通過某種標(biāo)識來進(jìn)行通信川背，從而讓服務(wù)器判斷請求資源是否可以緩存訪問。
普通刷新會啟用弱緩存蛤袒，忽略強緩存熄云。只有在地址欄或收藏夾輸入網(wǎng)址、通過鏈接引用資源等情況下妙真，瀏覽器才會啟用強緩存缴允，這也是為什么有時候我們更新一張圖片、一個js文件珍德，頁面內(nèi)容依然是舊的练般，但是直接瀏覽器訪問那個圖片或文件矗漾，看到的內(nèi)容卻是新的。這個主要涉及到兩組協(xié)商緩存相關(guān)的header字段:Etag和If-None-Match踢俄、Last-Modified和If-Modified-Since缩功。
瀏覽器的緩存過程：
瀏覽器請求某一資源時，會先獲取該資源緩存的header信息都办，然后根據(jù)header中的cache-Control和Expires來判斷是否過期嫡锌。
若沒過期則直接從緩存中獲取資源信息，包括緩存的header的信息琳钉，所以此次請求不會與服務(wù)器進(jìn)行通信势木。這里判斷是否過期，則是強緩存相關(guān)歌懒。
如果顯示已過期啦桌，瀏覽器會向服務(wù)器端發(fā)送請求，這個請求會攜帶第一次請求返回的有關(guān)緩存的header字段信息及皂。 比如客戶端會通過If-None-Match頭將先前服務(wù)器端發(fā)送過來的Etag發(fā)送給服務(wù)器甫男，服務(wù)會對比這個客戶端發(fā)過來的Etag是否與服務(wù)器的相同， 若相同验烧，就將If-None-Match的值設(shè)為false板驳，返回狀態(tài)304，客戶端繼續(xù)使用本地緩存碍拆，不解析服務(wù)器端發(fā)回來的數(shù)據(jù)若治，若不相同就將If-None-Match的值設(shè)為true，返回狀態(tài)為200感混，客戶端重新機械服務(wù)器端返回的數(shù)據(jù);客戶端還會通過If-Modified-since頭將先前服務(wù)器端發(fā)過來的最后修改時間戳發(fā)送給服務(wù)器端幼，服務(wù)器端通過這個時間戳判斷客戶端的頁面是否是最新的，如果不是最新的弧满，則返回最新的內(nèi)容婆跑，如果是最新的，則返回304谱秽，客戶端繼續(xù)使用本地緩存洽蛀。
如何解決前端開發(fā)中的緩存問題
對開發(fā)者來說，只要關(guān)閉瀏覽器緩存就可以了疟赊，找到network，Disable cache選項峡碉，打鉤即可取消緩存近哟。
開發(fā)者可以關(guān)閉緩存，但是不能要求所有用戶都進(jìn)行此類操作鲫寄，此時可以在引用的文件之后拼接隨機數(shù)或者日期都可以吉执，如css/index.css?v=0.0001疯淫，瀏覽器就會認(rèn)為是新的請求，而不會使用緩存中的文件戳玫。由于每次資源的修改都要更新引用的位置熙掺，同時修改參數(shù)的值，所以操作起來不是很方便咕宿，除非是在動態(tài)頁面比如jsp中用服務(wù)器變量(v=${sysRnd})
如果緩存問題出現(xiàn)在ajax請求中币绩，則在ajax請求的地址追加隨機數(shù)
直接ctrl+f5，這個辦法能解決頁面直接引用的資源更新的問題
使用瀏覽器的隱私模式開發(fā)府阀；
如果資源引用的頁面缆镣，被嵌入到了一個iframe里面，可以在iframe的區(qū)域右鍵單擊重新加載該頁面
html5如何及時更新緩存文件(js试浙、css或圖片)
后端接口頁面設(shè)置
header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); 復(fù)制代碼
html頁面中設(shè)置meta標(biāo)簽的屬性(meta標(biāo)簽的http-equiv屬性語法格式是：＜meta http-equiv="參數(shù)" content="參數(shù)變量值"＞)
<meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">//是用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容董瞻，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出? <meta http-equiv="Expires" content="0"> 復(fù)制代碼
對于圖片或css文件，可以在文件名后面添加一個隨機數(shù)或標(biāo)志位田巴，例如
<link rel="stylesheet" href="./style/style.css?+Math.random()"> 復(fù)制代碼
對于js文件也可以采取3的方法钠糊，或者在文件名后使用時間戳
<script language="javascript" src="UILib/Common/Common.js?time=new Date()"> 復(fù)制代碼
輸入URL到后發(fā)生了什么：
簡單過程：
DNS域名解析；
建立TCP連接壹哺；
發(fā)送HTTP請求抄伍；
服務(wù)器處理請求；
返回響應(yīng)結(jié)果斗躏；
關(guān)閉TCP連接逝慧；
瀏覽器解析HTML；
瀏覽器布局渲染啄糙；
詳細(xì)分析構(gòu)建請求的過程:
應(yīng)用層進(jìn)行DNS解析 通過DNS將域名解析成IP地址笛臣，在解析過程中，按照瀏覽器緩存隧饼，系統(tǒng)緩存沈堡，路由器緩存，ISP(運營商)DNS緩存燕雁，根域名服務(wù)器诞丽，頂級域名服務(wù)器，主域名服務(wù)器的順序拐格，逐步讀取緩存僧免，直到拿到IP地址。 這里使用DNS預(yù)解析捏浊，可以根據(jù)瀏覽器定義的規(guī)則懂衩，提前解析之后可能會用到的域名，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時間浊洞，來提高網(wǎng)站的訪問速度牵敷。
應(yīng)用層生成HTTP請求報文 應(yīng)用層生成針對目標(biāo)服務(wù)器的HTTP報文請求，HTTP請求包括起始行法希，首部和主體部分枷餐。首部包括域名host，keep-alive苫亦，User-Agent毛肋，Accept-Endoding，Accept-Language著觉，cookie等信息
傳輸層建立TCP連接 http協(xié)議使用的TCP協(xié)議村生。 將http請求報文按序號分為多個報文段，并對每個報文段進(jìn)行封裝饼丘，使用本地的隨機tcp源端口簡歷到目標(biāo)服務(wù)器的tcp80端口(https是443端口)的連接趁桃，TCP源端口和目的端口被加入到報文中。即協(xié)議數(shù)據(jù)單元肄鸽，同時還會加入序列號卫病，確認(rèn)號，檢驗和等參數(shù)典徘，共計添加20個字節(jié)的頭部信息蟀苛。 這里構(gòu)建TCP連接請求會增加大量的網(wǎng)絡(luò)延時。常用的優(yōu)化方法如下：
1)資源打包逮诲，合并請求
2)多使用緩存帜平，減少網(wǎng)絡(luò)傳輸
3)使用keep-alive建立持久連接
4)使用多個域名，增加瀏覽器的資源并發(fā)加載數(shù)梅鹦，或者使用http2的管道化連接的多路復(fù)用技術(shù)
網(wǎng)絡(luò)層使用IP協(xié)議來選擇線路裆甩。 處理來自傳輸層的數(shù)據(jù)段segment，將數(shù)據(jù)段segment裝入數(shù)據(jù)包packet齐唆，填充包頭嗤栓，主要添加源和目的IP地址，然后發(fā)送數(shù)據(jù)箍邮。IP協(xié)議負(fù)責(zé)選擇傳送的路線口芍，稱為路由功能雹仿。
數(shù)據(jù)鏈路層實現(xiàn)網(wǎng)絡(luò)相鄰結(jié)點間可靠的數(shù)據(jù)通信 為了保證數(shù)據(jù)的可靠性私恬，把數(shù)據(jù)包packet封裝成幀柜裸，并按順序傳送各幀，對每個數(shù)據(jù)塊計算CRC(循環(huán)冗余檢驗),防止數(shù)據(jù)包丟失味滞，出錯就重傳全封。 將數(shù)據(jù)包封裝成幀马昙，分為幀頭和幀尾桃犬，幀尾是CRC校驗部分刹悴，幀頭主要是添加數(shù)據(jù)鏈路層的地址，源地址和目的地址攒暇，即網(wǎng)絡(luò)相鄰結(jié)點間的MAC地址
物理層傳輸數(shù)據(jù) 將數(shù)據(jù)鏈路層的幀轉(zhuǎn)換為二進(jìn)制形式的比特流土匀，從網(wǎng)卡發(fā)送出去，再轉(zhuǎn)換成電子形用，光學(xué)信號在網(wǎng)絡(luò)中傳輸就轧。
總結(jié)：6個步驟分別為：DNS協(xié)議解析URL地址，生成HTTP請求報文田度，構(gòu)建TCP鏈接妒御，使用IP協(xié)議選擇傳輸路線，數(shù)據(jù)鏈路層保證數(shù)據(jù)的可靠傳輸镇饺，物理層將數(shù)據(jù)轉(zhuǎn)換為物理信號進(jìn)行傳輸乎莉。
補充：服務(wù)器處理及反向傳輸:
服務(wù)器接收到這個比特流，把比特流轉(zhuǎn)換成幀格式奸笤，上傳到數(shù)據(jù)鏈路層惋啃，服務(wù)器發(fā)現(xiàn)數(shù)據(jù)幀中的目的MAC地址與本網(wǎng)卡的MAC地址相同，服務(wù)器拆除數(shù)據(jù)鏈路層的封裝后监右，把數(shù)據(jù)包上傳到網(wǎng)絡(luò)層边灭。服務(wù)器的網(wǎng)絡(luò)層比較數(shù)據(jù)包中的目的IP地址，發(fā)現(xiàn)與本機的IP地址相同健盒，服務(wù)器拆除網(wǎng)絡(luò)層的封裝后绒瘦，把數(shù)據(jù)分段上傳到傳輸層。傳輸層對數(shù)據(jù)分段進(jìn)行確認(rèn)扣癣、排序惰帽、重組，確保數(shù)據(jù)傳輸?shù)目煽啃圆?shù)據(jù)最后被傳到服務(wù)器的應(yīng)用層
接著善茎，通過傳輸層、網(wǎng)絡(luò)層频轿、數(shù)據(jù)鏈路層的層層封裝垂涯，最終將響應(yīng)報文封裝成二進(jìn)制比特流，并轉(zhuǎn)換成其他信號航邢，如電信號到網(wǎng)絡(luò)中傳輸
反向傳輸?shù)倪^程與正向傳輸?shù)倪^程類似
瀏覽器的渲染過程：
主要步驟
瀏覽器將獲取到的HTML文檔解析成DOM樹
處理css標(biāo)記耕赘，構(gòu)成層疊樣式表模型CSSOM（css object model）
將DOM和CSSOM合并為渲染樹(rendering tree)，代表一系列將要被渲染的對象
渲染樹的每個元素包含的內(nèi)容是計算過的膳殷，稱之為布局layout操骡，瀏覽器使用一種流式處理的方法九火，只需要一次繪制操作就可以布局所有元素
將渲染樹的各個節(jié)點繪制到屏幕上，這一步被稱為繪制painting 具體流程：
構(gòu)建DOM樹：
瀏覽器收到服務(wù)器響應(yīng)來的HTML文檔后册招，遍歷文檔節(jié)點岔激，生成DOM樹，DOM樹構(gòu)建時可能會被CSS和JS的加載而執(zhí)行阻塞是掰，display:none的元素虑鼎，注釋，script也會存在于DOM樹中键痛。
構(gòu)建CSSOM規(guī)則樹
瀏覽器解析CSS文件并對每個文件生成一個stylesheet對象炫彩，每個對象包含css規(guī)則。css解析可以和DOM解析同時進(jìn)行絮短，css的解析會被js互斥江兢。
構(gòu)建渲染樹(render tree):
瀏覽器從DOM樹的根結(jié)點遍歷每個可見結(jié)點，然后對每個可見結(jié)點找到css樣式規(guī)則并應(yīng)用丁频。Render tree與DOM tree不完全對應(yīng)杉允，display:none的元素不在render tree中，visibility:hidden元素在render tree中限府。這個時候還沒渲染到屏幕上夺颤，渲染到屏幕需要用到各個節(jié)點的位置信息，需要布局的處理
渲染樹布局(render tree layout)：
布局階段胁勺，遍歷每一個render object對象世澜，包含寬高，位置署穗，背景色等樣式信息寥裂，通過這些信息確定每個結(jié)點在頁面上的確切位置。脫離文檔流案疲，脫離的是render tree
渲染樹繪制(render tree paint):
繪制階段封恰，瀏覽器遍歷渲染樹，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容褐啡，由瀏覽器的后端UI組建完成诺舔。
Js阻塞：
JS可以操作DOM來改變DOM結(jié)構(gòu)，修改CSSOM樣式备畦，所以瀏覽器在遇到<script>標(biāo)簽時低飒，DOM構(gòu)建將暫停，直到腳本執(zhí)行完成懂盐，再繼續(xù)構(gòu)建DOM褥赊，所以<script>標(biāo)簽一般放在最后。現(xiàn)在可以在<script>標(biāo)簽上增加defer莉恼，async等屬性拌喉，單獨解析js中操作DOM和CSSOM的地方追加到DOM和CSSOM上速那。Css阻塞：
CSSOM負(fù)責(zé)存儲渲染信息，所以CSSOM在瀏覽器合成渲染樹之前必須是完備的尿背，否則就不會進(jìn)入渲染過程端仰。所以將樣式放在head中，為了更快的解析css残家。defer和async屬性的區(qū)別：
沒有defer和async屬性的時候瀏覽器在讀取到<script>標(biāo)簽的時候會立即讀取腳本文件榆俺，而不會加載后續(xù)的文檔元素，會阻塞后續(xù)DOM的構(gòu)建 文檔解析時坞淮，遇到設(shè)置了defer的腳本，就會在后臺進(jìn)行下載陪捷，但是并不會阻止文檔的渲染回窘，當(dāng)頁面解析&渲染完畢后。會等到所有的defer腳本加載完畢并按照順序執(zhí)行市袖，執(zhí)行完畢后會觸發(fā)DOMContentLoaded(dom內(nèi)容加載完畢)事件啡直。 async腳本會在加載完畢后執(zhí)行。async腳本的加載不計入DOMContentLoaded事件統(tǒng)計 有defer或者async屬性之后苍碟，腳本文件的讀取和后續(xù)文檔的加載是并行的也就是異步執(zhí)行酒觅，js腳本的執(zhí)行會等到所有元素被解析完成之后，DOMContentLoaded事件調(diào)用前執(zhí)行微峰。 存在多個defer的腳本文件時舷丹，他們會按照順序defer的順序執(zhí)行，而async的加載則是無序的蜓肆，只要DOM加載完成會立即執(zhí)行颜凯，不考慮腳本之間的依賴關(guān)系。
重排(layout)和重繪(repaint)：
DOM的變化影響到了已渲染完成的幾何屬性仗扬，比如寬高等症概，瀏覽器將重新計算元素的幾何屬性，其他元素的幾何屬性也會受到影響早芭，瀏覽器需要重新構(gòu)造渲染樹（Render樹）彼城，這個過程稱之為重排(也叫回流reflow)，瀏覽器將受到影響的部分重新繪制在屏幕上的過程稱之為重繪退个。display:none會觸發(fā)reflow募壕，而visibility: hidden屬性則并不算是不可見屬性，只會觸發(fā)repaint
重繪產(chǎn)生的原因有：
添加或刪除可見的DOM元素帜乞，
元素的尺寸位置發(fā)生改變司抱。
瀏覽器頁面初始化
瀏覽器窗口大小發(fā)生變化
重排一定導(dǎo)致重繪，重繪不一定導(dǎo)致重排黎烈。
減少重繪重排的方法：
不在布局信息改變時做DOM查詢
不要一條一條的修改DOM樣式习柠，使用csstext匀谣，className一次性改變屬性
在內(nèi)存中多次操作節(jié)點，完成后再添加到文檔中
對于一個元素進(jìn)行復(fù)雜的操作時资溃，先隱藏武翎，操作完再展示
需要經(jīng)常獲取那些引起瀏覽器重排的屬性時，緩存到變量中
不要使用table布局溶锭，一個小改動會導(dǎo)致table重新布局
對于多次重排的元素宝恶，比如說動畫，使用絕對定位讓其脫離文檔流趴捅，使其不影響其他元素垫毙，減少重繪范圍
http報文構(gòu)成：
使用HTTP長連接有哪些優(yōu)點：
HTTP長連接（持久化連接）:? 在一個TCP連接的基礎(chǔ)之上，發(fā)送多個HTTP請求以及接收多個HTTP響應(yīng)拱绑，這是為了避免每一次請求都去打開一個新的連接综芥。
在HTTP/1.0中默認(rèn)使用短連接。也就是說猎拨，客戶端和服務(wù)器每進(jìn)行一次HTTP操作膀藐，就建立一次連接，任務(wù)結(jié)束就中斷連接红省。 而從HTTP/1.1起额各，默認(rèn)使用長連接，用以保持連接特性吧恃。使用長連接的HTTP協(xié)議虾啦，會在響應(yīng)頭加入這行代碼：Connection:keep-alive 在使用長連接的情況下，當(dāng)一個網(wǎng)頁打開完成后蚜枢，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉缸逃，客戶端再次訪問這個服務(wù)器時，會繼續(xù)使用這一條已經(jīng)建立的連接厂抽。
Keep-Alive不會永久保持連接需频，它有一個保持時間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個時間筷凤。實現(xiàn)長連接需要客戶端和服務(wù)端都支持長連接昭殉。
HTTP協(xié)議的長連接和短連接，實質(zhì)上是TCP協(xié)議的長連接和短連接藐守。
長連接的特點：
可以省去較多的TCP連接建立和關(guān)閉的操作挪丢，減少浪費，節(jié)約時間卢厂。適用于頻繁請求服務(wù)器資源的客戶端之間建立乾蓬。
短連接的特點：
對于服務(wù)器來說管理較為簡單，存在的連接都是有用的連接慎恒，但是如果客戶請求頻繁任内，將在TCP的建立和關(guān)閉操作上浪費時間和帶寬撵渡。WEB網(wǎng)站的http服務(wù)一般采用的都是短連接服務(wù)。
客戶端和服務(wù)器之間的連接如果一直不關(guān)閉死嗦，隨著建立連接的客戶端越來越多，會增加服務(wù)器的壓力越除，所以一般采取以下幾種策略：
1.關(guān)閉一些長時間沒有發(fā)生讀寫事件的連接节腐。
2.限制每個客戶端的最大長連接數(shù)量。
TLS/SSL協(xié)議是如何保障信息安全的：
SSL(安全套接字協(xié)議):是web瀏覽器和web服務(wù)器之間安全交換信息的協(xié)議摘盆，提供兩個基本的安全服務(wù)翼雀，鑒別和保密 TLS(安全傳輸層協(xié)議):用于在兩個通信應(yīng)用程序之間提供保密性和數(shù)據(jù)完整性。其中TLS是SSL的升級版
SSL/TLS協(xié)議的基本過程
（1） 客戶端向服務(wù)器端索要并驗證公鑰骡澈。
（2） 雙方協(xié)商生成"對話密鑰"锅纺。
（3） 雙方采用"對話密鑰"進(jìn)行加密通信。具體過程可細(xì)分為8個步驟：
客戶端向服務(wù)器發(fā)起https請求肋殴，連接到服務(wù)器的443端口
服務(wù)器有密鑰對，即公鑰和私鑰坦弟，用來進(jìn)行非對稱加密
服務(wù)器將公鑰發(fā)送給客戶端
客戶端收到服務(wù)端的數(shù)據(jù)后护锤，先驗證其證書的合法性，如果合法酿傍，客戶端生成客戶端密鑰烙懦，并使用服務(wù)端接收到的公鑰對客戶端密鑰進(jìn)行加密。
客戶端再次發(fā)起https請求赤炒，將加密之后的客戶端密鑰發(fā)送給服務(wù)器
服務(wù)器接收到客戶端發(fā)送過來的加密后的密鑰氯析，用自己的私鑰進(jìn)行解密，然后用客戶端密鑰對要發(fā)送的數(shù)據(jù)進(jìn)行加密莺褒。
將加密后的數(shù)據(jù)發(fā)送給客戶端
客戶端使用客戶端密鑰對加密數(shù)據(jù)進(jìn)行解密掩缓，得到服務(wù)器發(fā)送的數(shù)據(jù)。SSL協(xié)議的內(nèi)容：
握手協(xié)議 握手協(xié)議是客戶端和服務(wù)器用SSL連接通信時使用的第一個子協(xié)議遵岩，握手協(xié)議包括客戶機與服務(wù)器之間的一系列消息你辣，是SSL協(xié)議中最復(fù)雜的協(xié)議，該協(xié)議允許服務(wù)器和客戶機相互驗證尘执，協(xié)商加密和MAC算法(帶秘密密鑰的Hash函數(shù))及保密密鑰舍哄，用來保護(hù)在SSL記錄中發(fā)送的數(shù)據(jù),握手協(xié)議是在應(yīng)用程序的數(shù)據(jù)傳輸之前使用的。 1.1 建立安全能力誊锭，發(fā)送信息表悬，交換版本，隨機數(shù)丧靡，會話ID蟆沫，密碼套件籽暇，壓縮方法等信息 1.2 服務(wù)器鑒別與密鑰交換 1.3 客戶機鑒別與密鑰交換 1.4 完成
記錄協(xié)議 記錄協(xié)議在客戶機和服務(wù)器成功握手之后使用，即客戶機和服務(wù)器鑒別對方和確定安全信息交換使用的算法后饥追，進(jìn)入SSL記錄協(xié)議图仓。
警報協(xié)議 客戶機和服務(wù)器發(fā)現(xiàn)錯誤時，向?qū)Ψ桨l(fā)送一個警報信息但绕，如果是致命錯誤救崔，則算法立即關(guān)閉SSL連接，雙方刪除相關(guān)的會話號捏顺，密鑰等六孵。
總結(jié)：SSL中，使用握手協(xié)議協(xié)商加密和MAC算法以及保密密鑰幅骄，使用握手協(xié)議對交換的數(shù)據(jù)進(jìn)行加密和簽名劫窒，使用警報協(xié)議定義數(shù)據(jù)傳輸過程中，出現(xiàn)問題改如何解決拆座。
HTTP 1.0,1.1,2.0協(xié)議的區(qū)別：
HTTP1.0 HTTP 1.1主要區(qū)別長連接HTTP 1.0需要使用keep-alive參數(shù)來告知服務(wù)器端要建立一個長連接主巍，而HTTP1.1默認(rèn)支持長連接。
HTTP是基于TCP/IP協(xié)議的挪凑，創(chuàng)建一個TCP連接是需要經(jīng)過三次握手的,有一定的開銷孕索，如果每次通訊都要重新建立連接的話，對性能有影響躏碳。因此最好能維持一個長連接搞旭，可以用個長連接來發(fā)多個請求。節(jié)約帶寬HTTP 1.1支持只發(fā)送header信息(不帶任何body信息)菇绵，如果服務(wù)器認(rèn)為客戶端有權(quán)限請求服務(wù)器肄渗，則返回100，否則返回401咬最◆岬眨客戶端如果接受到100，才開始把請求body發(fā)送到服務(wù)器丹诀。
這樣當(dāng)服務(wù)器返回401的時候钝的，客戶端就可以不用發(fā)送請求body了，節(jié)約了帶寬铆遭。
另外HTTP還支持傳送內(nèi)容的一部分硝桩。這樣當(dāng)客戶端已經(jīng)有一部分的資源后，只需要跟服務(wù)器請求另外的部分資源即可枚荣。這是支持文件斷點續(xù)傳的基礎(chǔ)碗脊。HOST域現(xiàn)在可以web server例如tomat，設(shè)置虛擬站點是非常常見的，也即是說衙伶，web server上的多個虛擬站點可以共享同一個ip和端口祈坠。
HTTP1.0是沒有host域的，HTTP1.1才支持這個參數(shù)矢劲。
HTTP1.1 HTTP 2.0主要區(qū)別多路復(fù)用HTTP2.0使用了(類似epoll)多路復(fù)用的技術(shù)赦拘，做到同一個連接并發(fā)處理多個請求，而且并發(fā)請求的數(shù)量比HTTP1.1大了好幾個數(shù)量級芬沉。
當(dāng)然HTTP1.1也可以多建立幾個TCP連接躺同，來支持處理更多并發(fā)的請求，但是創(chuàng)建TCP連接本身也是有開銷的丸逸。
TCP連接有一個預(yù)熱和保護(hù)的過程蹋艺，先檢查數(shù)據(jù)是否傳送成功，一旦成功過黄刚，則慢慢加大傳輸速度捎谨。因此對應(yīng)瞬時并發(fā)的連接，服務(wù)器的響應(yīng)就會變慢憔维。所以最好能使用一個建立好的連接涛救，并且這個連接可以支持瞬時并發(fā)的請求。數(shù)據(jù)壓縮HTTP1.1不支持header數(shù)據(jù)的壓縮业扒，HTTP2.0使用HPACK算法對header的數(shù)據(jù)進(jìn)行壓縮州叠，這樣數(shù)據(jù)體積小了，在網(wǎng)絡(luò)上傳輸就會更快凶赁。
請求與響應(yīng)首部的定義在HTTP2.0中基本沒有變，只是所有首部鍵必須全部小寫逆甜，而且要求行要獨立為:method:虱肄、:scheme:、:host:交煞、:path:這些鍵值對
對于相同的數(shù)據(jù)咏窿，不再重新通過每次請求和響應(yīng)發(fā)送。每個新的首部鍵值對要么追加到當(dāng)前表的末尾素征，要么替換表中之前的值集嵌。首部表在HTTP2.0的鏈接存續(xù)期內(nèi)始終存在，由客戶端和服務(wù)端共同漸進(jìn)的更新御毅。服務(wù)器推送意思是說根欧，當(dāng)我們對支持HTTP2.0的web server請求數(shù)據(jù)的時候，服務(wù)器會順便把一些客戶端需要的資源一起推送到客戶端端蛆，免得客戶端再次創(chuàng)建連接發(fā)送請求到服務(wù)器端獲取凤粗。這種方式非常合適加載靜態(tài)資源。
服務(wù)器端推送的這些資源其實存在客戶端的某處地方今豆，客戶端直接從本地加載這些資源就可以了嫌拣，不用走網(wǎng)絡(luò)柔袁，速度自然是快很多的。二進(jìn)制幀層HTTP2.0會把所有信息分割成更小的消息和幀异逐，并采用二進(jìn)制格式將其封裝捶索。例如header封裝到Headers幀，request body封裝到Data幀灰瞻。
HTTP2.0通信都在一個TCP連接上完成腥例，這個連接可以承載任意數(shù)量的雙向數(shù)據(jù)流，相應(yīng)的每個數(shù)據(jù)流以消息的形式發(fā)送箩祥。而消息由一或多個幀組成院崇，這些幀可以亂序發(fā)送，然后根據(jù)每個幀首部的流標(biāo)識符重新組裝袍祖。
WebSocket協(xié)議：
ajax輪詢ajax（異步的javascript與xml技術(shù)）是一種有效利用javascript和dom的操作底瓣，以達(dá)到局部web頁面的提花和加載的異步通信手段。和以前的同步通信相比蕉陋，他只更新一部分頁面捐凭，相應(yīng)中傳輸?shù)臄?shù)據(jù)量會因此的減少。
ajax輪詢的原理是凳鬓，讓瀏覽器每隔一段時間就發(fā)送一次請求茁肠，詢問服務(wù)器是否有新消息。而利用ajax實時的從服務(wù)器獲取內(nèi)容缩举，有可能導(dǎo)致大量的請求產(chǎn)生垦梆。
長輪詢原理和ajax輪詢差不多，都是采用輪詢的方式仅孩，不過采用的是阻塞模型托猩。也就是說，當(dāng)客戶端發(fā)起連接后辽慕，如果服務(wù)器端內(nèi)容沒有更新京腥，將響應(yīng)至于掛起狀態(tài)，一直不回復(fù)response給客戶端溅蛉，知道有內(nèi)容更新公浪，再返回響應(yīng)。
http的特點：被動性船侧，請求只能由客戶端發(fā)起欠气。服務(wù)器端不能主動聯(lián)系客戶端。
ajax輪詢 需要服務(wù)器有很快的處理速度和資源勺爱。（速度）
長輪詢 需要有很高的并發(fā)晃琳，也就是說同時接待客戶的能力。（場地大小）WebSocket
WebSocket是HTML5出的東西（協(xié)議）卫旱，是HTML5開始提供的一種瀏覽器與服務(wù)器進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)人灼，屬于應(yīng)用層協(xié)議。它基于TCP傳輸協(xié)議顾翼，并復(fù)用HTTP的握手通道投放。
一旦web服務(wù)器和客戶端建立起websocket協(xié)議的通信連接，之后所有的通信都依靠這個專用連接進(jìn)行适贸。只需要經(jīng)過一次HTTP請求灸芳，就可以做到源源不斷的信息傳送了。
通過在請求首部中設(shè)置Connection: Upgrade來使用websocket協(xié)議
websocket協(xié)議具有以下的特點推送功能支持服務(wù)器端向客戶端推送功能拜姿。服務(wù)器可以直接發(fā)送數(shù)據(jù)而不用等待客戶端的請求烙样。減少通信量只要建立起websocket連接，就一直保持連接蕊肥，在此期間可以源源不斷的傳送消息谒获，直到關(guān)閉請求。也就避免了HTTP的非狀態(tài)性壁却。
和http相比批狱，不但每次連接時的總開銷減少了，而且websocket的首部信息量也小 展东，通信量也減少了赔硫。
支持雙向通信，實時性更強盐肃。更好的二進(jìn)制支持爪膊。較少的控制開銷。
連接創(chuàng)建后砸王，ws客戶端惊完、服務(wù)端進(jìn)行數(shù)據(jù)交換時，協(xié)議控制的數(shù)據(jù)包頭部較小处硬。在不包含頭部的情況下，服務(wù)端到客戶端的包頭只有2~10字節(jié)（取決于數(shù)據(jù)包長度）拇派，客戶端到服務(wù)端的的話荷辕，需要加上額外的4字節(jié)的掩碼。而HTTP協(xié)議每次通信都需要攜帶完整的頭部件豌。支持?jǐn)U展ws協(xié)議定義了擴展疮方，用戶可以擴展協(xié)議，或者實現(xiàn)自定義的子協(xié)議茧彤。（比如支持自定義壓縮算法等）
CSS部分：
css3新增：
CSS3邊框如border-radius骡显，box-shadow等；CSS3背景如background-size，background-origin等惫谤；CSS3 2D壁顶，3D轉(zhuǎn)換如transform等恤煞；CSS3動畫如animation等验懊。
CSS3的新特性中示括，在布局方面新增了flex布局概页，在選擇器方面新增了例如first-of-type,nth-child等選擇器照弥，在盒模型方面添加了box-sizing來改變盒模型锁蠕，在動畫方面增加了animation养葵，2d變換入客，3d變換等自阱，在顏色方面添加透明嚎莉，rbga等，在字體方面允許嵌入字體和設(shè)置字體陰影沛豌，最后還有媒體查訊等.
css的兩種盒模型
在標(biāo)準(zhǔn)的盒子模型中趋箩，width指content部分的寬度
在IE盒子模型中，width表示content+padding+border這三個部分的寬度
如果想要切換盒模型也很簡單琼懊，這里需要借助css3的box-sizing屬性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默認(rèn)屬性是content-box
垂直居中方式：
使用定位和負(fù)外邊距阁簸，父元素，子元素固定寬高哼丈，父相子絕启妹，子元素top屬性50%,上外邊距margin-top為子元素本身高度的一半（這種方式需要知道子元素的高度）
使用定位和transform，父元素固定寬高醉旦，父相子絕饶米，子元素top屬性50%,transform屬性為Y軸方向偏移-50%
使用定位自動外邊距，父元素车胡，子元素固定寬高檬输，父相子絕，子元素top匈棘，bottom屬性為0,margin在垂直方向auto
使用flex布局丧慈，父元素，子元素固定寬高主卫，父元素使用flex布局逃默，設(shè)置align-items屬性為center
使用flex布局，父元素簇搅，子元素固定寬高完域，父元素使用flex布局，設(shè)置flex-direction屬性（設(shè)置主軸方向）為column（縱軸）,justify-content屬性設(shè)置主軸上的對齊方式為center
使用 display：table-cell 瘩将，父元素固定寬高吟税，父元素設(shè)置display:table凹耙，子元素設(shè)置display:table-cell，并且vertical-align:middle
transition和animation的區(qū)別：
animation和transition大部分屬性是相同的肠仪，他們都是隨時間改變元素的屬性值肖抱，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值藤韵，并且transition為2幀虐沥，從from .... to，而animation可以一幀一幀的泽艘。
animation屬性
name 設(shè)置動畫的名稱欲险，
duration 設(shè)置動畫完成的周期，
timing-function 設(shè)置動畫的速度曲線匹涮，
delay 設(shè)置動畫什么時候開始天试，
iteration-count 設(shè)置動畫播放的次數(shù)，
direction 規(guī)定下一個周期是否逆向的播放然低，
play-state 動畫是否正在進(jìn)行或者暫停喜每，
fill-mode 設(shè)置動畫停了之后位置什么狀態(tài)transition屬性
property 去設(shè)置過渡效果的屬性名稱，
duration 設(shè)置過渡效果的周期雳攘，
timing-function 規(guī)定速度效果的速度曲線带兜，
delay 設(shè)定過渡效果什么時候開始；區(qū)別：
transition 是過渡吨灭，是樣式值的變化的過程刚照，只有開始和結(jié)束；animation 其實也叫關(guān)鍵幀喧兄，通過和 @keyframe 結(jié)合可以設(shè)置中間幀的一個狀態(tài)无畔；
animation 配合 @keyframe 可以不觸發(fā)事件就觸發(fā)這個過程，而 transition 需要通過 hover 或者 js 事件來配合觸發(fā)吠冤；
animation 可以設(shè)置很多的屬性浑彰，比如循環(huán)次數(shù)，動畫結(jié)束的狀態(tài)等等拯辙，transition 只能觸發(fā)一次郭变；
animation 可以結(jié)合 keyframe 設(shè)置每一幀，但是 transition 只有兩幀涯保；
在性能方面：瀏覽器有一個主線程和排版線程饵较；主線程一般是對 js 運行的、頁面布局遭赂、生成位圖等等，然后把生成好的位圖傳遞給排版線程横辆，而排版線程會通過 GPU 將位圖繪制到頁面上撇他，也會向主線程請求位圖等等茄猫；我們在用使用 animation 的時候這樣就可以改變很多屬性，像我們改變了 width困肩、height划纽、position 等等這些改變文檔流的屬性的時候就會引起，頁面的回流和重繪锌畸，對性能影響就比較大勇劣，但是我們用 transition 的時候一般會結(jié)合 transform 來進(jìn)行旋轉(zhuǎn)和縮放等不會生成新的位圖，當(dāng)然也就不會引起頁面的重排了潭枣；
transition比默、transform和translate這三者
transform是轉(zhuǎn)換，指的是改變所在元素的外觀盆犁，它有很多種手段(轉(zhuǎn)換函數(shù))來改變外觀命咐，例如 位移、縮放谐岁、旋轉(zhuǎn)等醋奠，而其中的位移的函數(shù)名就叫translate，所以說伊佃，translate是transform的一部分窜司。
transform: [轉(zhuǎn)換函數(shù)];
屬性函數(shù)：
translate(x, y)：元素位移，元素偏移的x軸和y軸距離航揉，可為負(fù)
scale(x, y)：元素縮放塞祈，元素x軸和y軸縮放的倍數(shù)，小于1為縮小迷捧，大于1位放大织咧，小于0效果和為0時相等
rotate(angle)：元素旋轉(zhuǎn)，旋轉(zhuǎn)的角度漠秋，單位deg笙蒙，順時針旋轉(zhuǎn)
transform: translate(-10px, 10px);//當(dāng)前元素往上移動 10 像素，往右移動 10 像素庆锦。 transform: translate(10px, 10px) rotate(10deg);//指定多個轉(zhuǎn)換效果捅位。 復(fù)制代碼
transition是過渡，指的是某個CSS屬性值如何平滑的進(jìn)行改變搂抒，就是平常說的 動效艇搀。而transform是沒有動畫效果，你改變了它的值求晶，元素的樣子就唰的改變了焰雕。
transition: [屬性名] [持續(xù)時間] [速度曲線] [延遲時間]; transition: height 2s ease .5s;//高度屬性的值改變時，延遲 0.5 秒后以 ease 曲線進(jìn)行過渡芳杏，持續(xù)2秒矩屁。 復(fù)制代碼
visibility=hidden, opacity=0辟宗，display:none：
opacity=0，該元素隱藏起來了吝秕，但不會改變頁面布局泊脐，并且，如果該元素已經(jīng)綁定一些事件烁峭，如click事件容客，那么點擊該區(qū)域，也能觸發(fā)點擊事件的方法约郁。
visibility=hidden缩挑，該元素隱藏起來了，但不會改變頁面布局棍现，但是不會觸發(fā)該元素已經(jīng)綁定的事件调煎。
display=none，把元素隱藏起來己肮，并且會改變頁面布局士袄，可以理解成在頁面中把該元素刪除掉一樣。
position屬性比較：
固定定位fixed：
元素的位置相對于瀏覽器窗口是固定位置谎僻，即使窗口是滾動的它也不會移動娄柳。Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間艘绍。 Fixed定位的元素和其他元素重疊赤拒。
相對定位relative：相對于他原本的位置進(jìn)行移動
如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上诱鞠。然后挎挖，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進(jìn)行移動航夺。 在使用相對定位時蕉朵，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間阳掐。因此始衅，移動元素會導(dǎo)致它覆蓋其它框。
絕對定位absolute：相對于他的父元素進(jìn)行移動
絕對定位的元素的位置相對于最近的已定位父元素缭保，如果元素沒有已定位的父元素汛闸，那么它的位置相對于<html>。 absolute 定位使元素的位置與文檔流無關(guān)艺骂，因此不占據(jù)空間诸老。 absolute 定位的元素和其他元素重疊。
粘性定位sticky：
先是相對于他原本的位置進(jìn)行移動钳恕，然后在超出目標(biāo)區(qū)域后别伏，固定在目標(biāo)位置吮廉，即先按照relative定位方式定位，然后按照fix定位方式定位畸肆。 元素先按照普通文檔流定位，然后相對于該元素在流中的flow root（BFC）和 containing block（最近的塊級祖先元素）定位宙址。而后轴脐，元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位抡砂。
默認(rèn)定位Static：
默認(rèn)值大咱。沒有定位，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）注益。
繼承定位inherit:
規(guī)定應(yīng)該從父元素繼承position 屬性的值碴巾。
浮動清除的幾種方法：
方法一：使用帶clear屬性的空元素
在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動丑搔。亦可使用<br class="clear" />或<hr class="clear" />來進(jìn)行清理厦瓢。
方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發(fā) hasLayout 啤月，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1煮仇。
在添加overflow屬性后，浮動元素又回到了容器層谎仲，把容器高度撐起浙垫，達(dá)到了清理浮動的效果。
方法三：給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內(nèi)部浮動郑诺，但是這樣會使其整體浮動夹姥，影響布局，不推薦使用辙诞。
方法四：使用鄰接元素處理
什么都不做辙售，給浮動元素后面的元素添加clear屬性。
方法五：使用CSS的:after偽元素
結(jié)合:after 偽元素（注意這不是偽類倘要，而是偽元素圾亏，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器封拧，這里的 IEhack 指的是觸發(fā) hasLayout志鹃。
給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素（Block element）清理浮動泽西。
CSS選擇器有哪些曹铃，優(yōu)先級呢：
CSS的四種基本選擇器和四種高級選擇器：
基本選擇器：
標(biāo)簽選擇器：針對一類標(biāo)簽
P{}：選擇所有<p>元素
ID選擇器：針對某一個特定的標(biāo)簽使用
#id{}：選擇所有id="firstname"的元素
類選擇器：針對你想要的所有標(biāo)簽使用
.class{}：選擇所有class="intro"的元素
通用選擇器（通配符）：針對所有的標(biāo)簽都適用（不建議使用）
：選擇所有元素
高級選擇器：
后代選擇器：用空格隔開
div p： 選擇<div>元素內(nèi)的所有<p>元素
div>p： 選擇所有父級是 <div> 元素的 <p> 元素
div+p： 選擇所有緊接著<div>元素之后的<p>元素
屬性選擇器：帶有屬性或指定屬性內(nèi)容
[target]：選擇所有帶有target屬性元素
[target=-blank]：選擇所有使用target="-blank"的元素
[title~=flower]：選擇標(biāo)題屬性包含單詞"flower"的所有元素
[lang|=en]：選擇 lang 屬性以 en 為開頭的所有元素
交集選擇器：用.隔開
h3.special：選擇<h3>標(biāo)簽并且類是.special的標(biāo)簽
并集選擇器（分組選擇器）：用逗號隔開
div,p： 選擇所有<div>元素和<p>元素
p,h1,#mytitle,.one：選擇所有帶有p,h1,id="mytitle",class="one"的標(biāo)簽
偽類選擇器：
靜態(tài)偽類選擇器：
a:link：選擇所有未訪問鏈接
a:visited：選擇所有訪問過的鏈接
動態(tài)偽類選擇器：
a:active：選擇活動鏈接
a:hover：選擇鼠標(biāo)在鏈接上面時
input:focus：選擇具有焦點的輸入元素
序偽類選擇器：
p:first-letter：選擇每一個p元素的第一個字母
p:first-line：選擇每一個p元素的第一行
p:first-child：指定只有當(dāng)p元素是其父級的第一個子級的樣式。
p:before：在每個p元素之前插入內(nèi)容
p:after：在每個p元素之后插入內(nèi)容
Css3新增選擇器： p~ul：選擇p元素之后的每一個ul元素
a[src^"ttps"]：選擇每一個src屬性的值以"https "開頭的元素
a[src$=". pdf"]：選擇每一個src屬性的值以” pdf結(jié)尾的元素
a[src*=" runoob"]：選擇每一個src屬性的值包含子字符串" 'runoob"的元素
p:first-of-type：選擇每個p元素是其父級的第一個p元素
p:last-of-type：選擇每個p元素是其父級的最后一個p元素
p:only-of-type：選擇每個p元素是其父級的唯一p元素
p:only-child：選擇每個p元素是其父級的唯一子元素
p:nth-child(2)：選擇每個p元素是其父級的第二個子元素
p::nth-child(-n+3):選擇每個p元素是其父級的前三個子元素
p:th-last-child(2)：選擇每個p元素的是其父級的第二個子元素,從最后一個子項計數(shù)
p:th-of-type(2)：選擇每個p元素是其父級的第二個p元素
p:nth-last-of-type(2)：選擇每個p元素的是其父級的第二個p元素捧杉， 從最后一個子項計數(shù)
p:last-child：選擇每個p元素是其父級的最后-個子級陕见。
.root：選擇文檔的根元素
p:empty：選擇每個沒有任何子級的p元素(包括文本節(jié)點)
#news:target：選擇當(dāng)前活動的#news元素(包含該錨名稱的點擊的URL)
inputenabled：選擇每一個已啟用的輸入元素
input:disabled：選擇每一個禁用的輸入元素
input.checked：選擇每個選中的輸入元素
:not(p)：選擇每個并非p元素的元素
:selection：匹配元素中被用戶選中或處于高亮狀態(tài)的部分
:out-of-range：匹配值在指定區(qū)間之外的input元素
:in-range：匹配值在指定區(qū)間之內(nèi)的input元素
.read-write：用于匹配可讀及可寫的元素
:read-only：用于匹配設(shè)置"readonly" (只讀)屬性的元素
:optional：用于匹配可選的輸入元素
.required：用于匹配設(shè)置了"required" 屬性的元素
valid：用于匹配輸入值為臺法的元素
cinvalid：用于匹配輸入值為非法的元素
Css選擇器優(yōu)先級：
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式秘血。
作為style屬性寫在元素內(nèi)的樣式
id選擇器
類選擇器
元素選擇器
通配符選擇器
瀏覽器自定義或繼承
margin塌陷和合并問題：
首先，margin塌陷是相對于父子級關(guān)系的兩個元素评甜，而margin合并是相對兩個兄弟級關(guān)系的兩個元素
兩個兄弟級關(guān)系的元素灰粮，垂直方向上的margin，其外邊距會發(fā)生重疊現(xiàn)象忍坷，兩者兩個的外邊距取的是兩個所設(shè)置margin的最大值粘舟，就是所說的margin合并問題
兩個父子級關(guān)系的元素，垂直方向上的margin會粘合在一起佩研，外層和模型的margin-top取兩個元素中margin-top的最大值柑肴，發(fā)生margin塌陷的內(nèi)層元素相對于整個文檔移動
解決方案：兩者都可以通過觸發(fā)BFC來解決
什么是BFC：
直譯成：塊級格式化上下文，是一個獨立的渲染區(qū)域旬薯，并且有一定的布局規(guī)則晰骑。
BFC區(qū)域不會與float box重疊。
BFC是頁面上的一個獨立容器绊序，子元素不會影響到外面硕舆。
計算BFC的高度時，浮動元素也會參與計算政模。
并且在一個BFC中岗宣，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
哪些元素會生成BFC：
float不為none的元素
position為fixed和absolute的元素
display為inline-block淋样、table-cell耗式、table-caption，flex趁猴，inline-flex的元素
overflow不為visible的元素
inline-block刊咳、inline和block的區(qū)別：
Block是塊級元素，其前后都會有換行符儡司，能設(shè)置寬度娱挨，高度，margin/padding水平垂直方向都有效捕犬。
Inline：設(shè)置width和height無效跷坝，margin在豎直方向上無效，padding在水平方向垂直方向都有效碉碉，前后無換行符
Inline-block：能設(shè)置寬度高度柴钻，margin/padding水平垂直方向 都有效，前后無換行符
px垢粮、em贴届、rem、%、vw毫蚓、vh占键、vm這些單位的區(qū)別
em:參考的是父元素的font-size，具有繼承的特點元潘，如果自身定義了font-size則按自身來計算（瀏覽器默認(rèn)字體是16px）畔乙，整個頁面內(nèi)1em不是一個固定的值
rem:相對于根元素html，可以設(shè)置根元素html的font-size為10px翩概，則1.2em就是12px啸澡；
vw:css3新單位，view width的縮寫氮帐，是指可視窗口的高度，假如寬度是1200px,則10vw就是120px洛姑；舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px上沐。
Vh:類似vw，指的是可視窗口的高度楞艾。
Vm:相對于視口的寬度或高度中較小的那個参咙，其中最小的單位被均分為100個單位，舉個例子：瀏覽器高度900px硫眯，寬度1200px蕴侧，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px两入。
flex布局：
常用的Flex屬性：
display：指定 HTML 元素盒子類型净宵。
flex-direction：指定了彈性容器中子元素的排列方式
row：橫向從左到右排列（左對齊），默認(rèn)的排列方式裹纳。
row-reverse：反轉(zhuǎn)橫向排列（右對齊择葡，從后往前排，最后一項排在最前面剃氧。
column：縱向排列敏储。
column-reverse：反轉(zhuǎn)縱向排列，從后往前排朋鞍，最后一項排在最上面已添。
justify-content：設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
flex-start：彈性項目向行頭緊挨著填充滥酥。這個是默認(rèn)值更舞。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放恨狈。
flex-end：彈性項目向行尾緊挨著填充疏哗。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放。
center：彈性項目居中緊挨著填充返奉。（如果剩余的自由空間是負(fù)的贝搁，則彈性項目將在兩個方向上同時溢出）。
space-between：彈性項目平均分布在該行上芽偏。如果剩余空間為負(fù)或者只有一個彈性項雷逆，則該值等同于flex-start。否則污尉，第1個彈性項的外邊距和行的main-start邊線對齊膀哲，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上被碗，相鄰項目的間隔相等某宪。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間锐朴。如果剩余空間為負(fù)或者只有一個彈性項兴喂，則該值等同于center。否則焚志，彈性項目沿該行分布衣迷，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）酱酬。
align-items：設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式壶谒。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界膳沽。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置汗菜。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長? + 度）挑社。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條呵俏，則該值與'flex-start'等效。其它情況下滔灶，該值將參與基線對齊普碎。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸录平，但同時會遵照'min/max-width/height'屬性的限制麻车。
flex-wrap：設(shè)置彈性盒子的子元素超出父容器時是否換行。
nowrap - 默認(rèn)斗这， 彈性容器為單行动猬。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器為多行表箭。該情況下彈性子項溢出的部分會被放置到新行赁咙，子項內(nèi)部會發(fā)生斷行
wrap-reverse -反轉(zhuǎn) wrap 排列。
align-content：修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對齊彼水，而是設(shè)置行對齊崔拥。
stretch - 默認(rèn)。各行將會伸展以占用剩余的空間凤覆。
flex-start - 各行向彈性盒容器的起始位置堆疊链瓦。
flex-end - 各行向彈性盒容器的結(jié)束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊盯桦。
space-between -各行在彈性盒容器中平均分布慈俯。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半拥峦。
flex-flow：flex-direction 和 flex-wrap 的簡寫
order：設(shè)置彈性盒子的子元素排列順序贴膘。
integer：用整數(shù)值來定義排列順序，數(shù)值小的排在前面略号〔郊可以為負(fù)值。
align-self：在彈性子元素上使用璃哟。覆蓋容器的 align-items 屬性。
auto：如果'align-self'的值為'auto'喊递，則其計算值為元素的父元素的'align-items'值随闪，如果其沒有父元素，則計算值為'stretch'骚勘。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界铐伴。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置俏讹。（如果該行的尺寸小于彈性盒子元素的尺寸当宴，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條泽疆，則該值與'flex-start'等效户矢。其它情況下，該值將參與基線對齊殉疼。
stretch：如果指定側(cè)軸大小的屬性值為'auto'梯浪，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制瓢娜。
flex：設(shè)置彈性盒子的子元素如何分配空間挂洛。
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率眠砾。
[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值虏劲。
流式布局與響應(yīng)式布局的區(qū)別：
常用的Flex屬性：
流式布局：使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)行伸縮柒巫，不受固定像素的限制励堡，內(nèi)容自動填充。
響應(yīng)式布局吻育，利用css3中的Media Query(媒介查詢)念秧，通過查詢screen的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局 超小屏幕(移動設(shè)備):768px以下 小屏設(shè)備：768px-992px;
中屏設(shè)備：992-1200px；
寬屏設(shè)備：1200px以上
由于響應(yīng)式布局開發(fā)顯得繁瑣布疼，一般使用第三方響應(yīng)式框架來完成摊趾，比如bootstrap來完成一部分工作
三欄布局的實現(xiàn)方式：
常用的Flex屬性：
浮動
三欄設(shè)置高度，左右欄固定寬度游两，并分別設(shè)置左右浮動
優(yōu)點：兼容性好
缺點：浮動脫離文檔流砾层，需要做清除浮動的處理
絕對定位
父級元素設(shè)置絕對定位，左右欄固定寬度贱案，左欄設(shè)置left:0肛炮；右欄設(shè)置right:0；中間欄設(shè)置left和right分別為左右欄的寬度
優(yōu)點：快捷宝踪，不容易出問題
缺點：布局脫離文檔流侨糟，子元素也必須脫離文檔流，可使用性較差
Flex布局
父元素設(shè)置display:flex瘩燥，左右欄固定寬度秕重，中間欄設(shè)置flex:1，占據(jù)剩余空間
優(yōu)點：較為完美厉膀，移動端布局多屬flex
表格布局
父元素設(shè)置display:table,左右中三欄全部設(shè)置display:table-cell,左右欄固定寬度
優(yōu)點：兼容性好
缺點：操作繁瑣溶耘，當(dāng)其中一個單元格高度變大，其他單元格高度會隨之變大
網(wǎng)格布局
父元素設(shè)置display:grid服鹅，固定寬度凳兵，grid-template-rows: 100px;grid-template-columns: 300px auto 300px;優(yōu)點：可以做許多復(fù)雜的事情，代碼比較簡潔
缺點：新技術(shù)企软，低版本瀏覽器兼容性不好
