作者：北風(fēng)菌
鏈接：https://juejin.im/post/6876623829574090760
來(lái)源：掘金
好久沒(méi)有更新帖子了，最近一直在復(fù)習(xí)準(zhǔn)備秋招，最近終于拿到了第一份意向書(shū)，終于有時(shí)間來(lái)整理一下自己最近的復(fù)習(xí)內(nèi)容，以下知識(shí)點(diǎn)都是樓主在面試中被問(wèn)到的問(wèn)題，我做了幾大塊的分類，各位需要的小伙伴可以收藏一下。因?yàn)檫€在繼續(xù)面試，所以還會(huì)不定時(shí)更新，因?yàn)榫蚪疬@邊文章有字?jǐn)?shù)限制，所以這邊放出了HTML部分，CSS部分，JS部分的知識(shí)點(diǎn)，Vue，git，webpack，計(jì)網(wǎng)相關(guān)的知識(shí)點(diǎn)放在下一篇文章中juejin.im/post/687707… 。
HTML部分：
HTML標(biāo)簽的分類：
HTML文檔標(biāo)簽
<!DOCTYPE>：定義文檔類型。
<html>： 定義HTML文檔。
<head>：定義文檔的頭部。<meta>：定義元素可提供的有關(guān)頁(yè)面的元信息，比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵字。meta標(biāo)簽共有兩個(gè)屬性， http-equiv屬性：相當(dāng)于http頭文件的作用，向?yàn)g覽器傳回一些有用的信息，使用content規(guī)定屬性的內(nèi)容比如
name屬性：主要用來(lái)描述網(wǎng)頁(yè)，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<base>：定義頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。<title>：定義文檔標(biāo)題。<link>：定義文檔與外部資源的關(guān)系。<style>：定義HTML文檔樣式信息。
<body>：定義文檔的主體。（腳本在非必需情況時(shí)在的最后）<script>：定義客戶端腳本，比如javascript。<noscript>：定義腳本未被執(zhí)行時(shí)的替代內(nèi)容。（如文本）
按閉合特征分類：
閉合標(biāo)簽是指由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，例如<html></html>、<p></p>等。
空標(biāo)簽是指沒(méi)有內(nèi)容的標(biāo)簽，在開(kāi)始標(biāo)簽中自動(dòng)閉合。常見(jiàn)的空標(biāo)簽有：<br>、<hr>、 <img>、 <input>、 <link> <meta>。
按是否換行特征分類：
塊級(jí)元素：塊級(jí)元素是值本身屬性為display:block的元素。
內(nèi)聯(lián)元素：內(nèi)聯(lián)元素是指本身屬性為display:inline的元素，其寬度隨元素的內(nèi)容而變化。
塊級(jí)元素的特點(diǎn)：
每個(gè)塊級(jí)元素獨(dú)占一行，從上到下排布。
塊級(jí)元素可以直接控制寬度高度等盒子模型相關(guān)的css屬性。
不設(shè)置寬度的情況下，塊級(jí)元素的寬度是其父級(jí)元素內(nèi)容的寬度。
不設(shè)置高度的情況下，塊級(jí)元素的高度是他本身內(nèi)容的高度。
常用塊級(jí)元素：
內(nèi)聯(lián)元素的特點(diǎn)：
內(nèi)聯(lián)元素會(huì)和其他元素從左到右顯示在一行中。
內(nèi)聯(lián)元素不能直接控制寬度高度以及盒子模型相關(guān)的css屬性，可以設(shè)置內(nèi)外邊距的水平方向的值。也就是說(shuō)，對(duì)于內(nèi)聯(lián)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，豎直方向的margin和pading無(wú)效果。
內(nèi)聯(lián)元素的寬高是由其內(nèi)容本身的大小決定的。
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，不允許在內(nèi)聯(lián)元素中嵌套塊級(jí)元素。
常見(jiàn)的內(nèi)聯(lián)元素：
H5新特性（常用）：
HTML5新增元素：
1）標(biāo)簽增刪 8個(gè)語(yǔ)義元素 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移除過(guò)時(shí)標(biāo)簽big font frame frameset2）canvas繪圖，支持內(nèi)聯(lián)SVG。支持MathML
3）多媒體audio video source embed track4）本地離線存儲(chǔ)，把需要離線存儲(chǔ)在本地的文件列在一個(gè)manifest配置文件
5）web存儲(chǔ),localStorage、SessionStorage cookie sessionStorage localStorage區(qū)別：
Cookie屬性詳解Name字段：為一個(gè)cookie的名稱Value字段：為一個(gè)cookie的值Domain字段：為可以訪問(wèn)此cookie的域名，二級(jí)域名可以獲取頂級(jí)域名中的cookie，同二級(jí)域名之間不可相互獲取，頂級(jí)域名不可獲取二級(jí)域名的cookiePath字段：為可以訪問(wèn)此cookie的頁(yè)面路徑，只有此路徑下的頁(yè)面可以讀取此cookieExpires/Max-Age字段：為此cookie的超時(shí)時(shí)間，若設(shè)置為一個(gè)時(shí)間，則當(dāng)達(dá)到此時(shí)間之后，此cookie失效，不設(shè)置的話默認(rèn)值為Session，即瀏覽器關(guān)閉后才會(huì)失效。Size字段：表示此cookie的大小http字段：表示此cookie的httponly屬性，若此屬性設(shè)置為true，則只有在http請(qǐng)求頭中會(huì)帶有此cookie的信息，而不能通過(guò)document.cookie來(lái)訪問(wèn)。Secure字段：表示設(shè)置是否只能通過(guò)https來(lái)傳遞此條cookie。
Cookie與webstorage：
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。
cookie數(shù)據(jù)還有路徑（path）的概念，可以限制。cookie只屬于某個(gè)路徑下存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4K，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如回話標(biāo)識(shí)。
webStorage雖然也有存儲(chǔ)大小的限制，但是比cookie大得多，可以達(dá)到5M或更大
sessionStorage與localStorage：
數(shù)據(jù)的有效期不同：
sessionStorage：僅在當(dāng)前的瀏覽器窗口關(guān)閉有效；
localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口和瀏覽器關(guān)閉。
作用域不同：
sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage：在所有同源窗口都是共享的；
cookie：也是在所有同源窗口中共享的。
HTTP狀態(tài)碼：
1xx(臨時(shí)響應(yīng))：表示臨時(shí)響應(yīng)并需要請(qǐng)求者繼續(xù)執(zhí)行操作的狀態(tài)碼。
100(繼續(xù))請(qǐng)求者應(yīng)當(dāng)繼續(xù)提出請(qǐng)求。服務(wù)器返回此代碼表示已收到請(qǐng)求的第一部分，正在等待其余部分。
101(切換協(xié)議)請(qǐng)求者已要求服務(wù)器切換協(xié)議，服務(wù)器已確認(rèn)并準(zhǔn)備切換。
2xx (成功)：表示成功處理了請(qǐng)求的狀態(tài)碼。
200(成功)服務(wù)器已成功處理了請(qǐng)求。通常，這表示服務(wù)器提供了請(qǐng)求的網(wǎng)頁(yè)。如果是對(duì)您的 robots.txt 文件顯示此狀態(tài)碼，則表示 Googlebot 已成功檢索到該文件。
201(已創(chuàng)建)請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源。
202(已接受)服務(wù)器已接受請(qǐng)求，但尚未處理。
203(非授權(quán)信息)服務(wù)器已成功處理了請(qǐng)求，但返回的信息可能來(lái)自另一來(lái)源。
204(無(wú)內(nèi)容)服務(wù)器成功處理了請(qǐng)求，但沒(méi)有返回任何內(nèi)容。
205(重置內(nèi)容)服務(wù)器成功處理了請(qǐng)求，但沒(méi)有返回任何內(nèi)容。與 204 響應(yīng)不同，此響應(yīng)要求請(qǐng)求者重置文檔視圖(例如，清除表單內(nèi)容以輸入新內(nèi)容)。
206(部分內(nèi)容)服務(wù)器成功處理了部分 GET 請(qǐng)求。
3xx (重定向)：要完成請(qǐng)求，需要進(jìn)一步操作。通常，這些狀態(tài)碼用來(lái)重定向。
300(多種選擇)針對(duì)請(qǐng)求，服務(wù)器可執(zhí)行多種操作。服務(wù)器可根據(jù)請(qǐng)求者 (user agent) 選擇一項(xiàng)操作，或提供操作列表供請(qǐng)求者選擇。
301(永久移動(dòng))請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。服務(wù)器返回此響應(yīng)(對(duì) GET 或 HEAD 請(qǐng)求的響應(yīng))時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。您應(yīng)使用此代碼告訴 Googlebot 某個(gè)網(wǎng)頁(yè)或網(wǎng)站已永久移動(dòng)到新位置。
302(臨時(shí)移動(dòng))服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)響應(yīng)以后的請(qǐng)求。此代碼與響應(yīng) GET 和 HEAD 請(qǐng)求的 301 代碼類似，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來(lái)告訴 Googlebot 某個(gè)網(wǎng)頁(yè)或網(wǎng)站已經(jīng)移動(dòng)，因?yàn)?Googlebot 會(huì)繼續(xù)抓取原有位置并編制索引。
303(查看其他位置)請(qǐng)求者應(yīng)當(dāng)對(duì)不同的位置使用單獨(dú)的 GET 請(qǐng)求來(lái)檢索響應(yīng)時(shí)，服務(wù)器返回此代碼。對(duì)于除 HEAD 之外的所有請(qǐng)求，服務(wù)器會(huì)自動(dòng)轉(zhuǎn)到其他位置。
304(未修改)自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁(yè)內(nèi)容。如果網(wǎng)頁(yè)自請(qǐng)求者上次請(qǐng)求后再也沒(méi)有更改過(guò)，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為 If-Modified-Since HTTP 標(biāo)頭)。服務(wù)器可以告訴 Googlebot 自從上次抓取后網(wǎng)頁(yè)沒(méi)有變更，進(jìn)而節(jié)省帶寬和開(kāi)銷。
305(使用代理)請(qǐng)求者只能使用代理訪問(wèn)請(qǐng)求的網(wǎng)頁(yè)。如果服務(wù)器返回此響應(yīng)，還表示請(qǐng)求者應(yīng)使用代理。
307(臨時(shí)重定向)服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)響應(yīng)以后的請(qǐng)求。此代碼與響應(yīng) GET 和 HEAD 請(qǐng)求的 301 代碼類似，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來(lái)告訴 Googlebot 某個(gè)頁(yè)面或網(wǎng)站已經(jīng)移動(dòng)，因?yàn)?Googlebot 會(huì)繼續(xù)抓取原有位置并編制索引。
4xx(請(qǐng)求錯(cuò)誤)：這些狀態(tài)碼表示請(qǐng)求可能出錯(cuò)，妨礙了服務(wù)器的處理。
400(錯(cuò)誤請(qǐng)求)服務(wù)器不理解請(qǐng)求的語(yǔ)法。
401(未授權(quán))請(qǐng)求要求身份驗(yàn)證。對(duì)于登錄后請(qǐng)求的網(wǎng)頁(yè)，服務(wù)器可能返回此響應(yīng)。
403(禁止)服務(wù)器拒絕請(qǐng)求。如果您在 Googlebot 嘗試抓取您網(wǎng)站上的有效網(wǎng)頁(yè)時(shí)看到此狀態(tài)碼(您可以在 Google 網(wǎng)站管理員工具診斷下的網(wǎng)絡(luò)抓取頁(yè)面上看到此信息)，可能是您的服務(wù)器或主機(jī)拒絕了 Googlebot 訪問(wèn)。
404(未找到)服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)。例如，對(duì)于服務(wù)器上不存在的網(wǎng)頁(yè)經(jīng)常會(huì)返回此代碼。
405(方法禁用)禁用請(qǐng)求中指定的方法。
406(不接受)無(wú)法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁(yè)。
407(需要代理授權(quán))此狀態(tài)碼與 401(未授權(quán))類似，但指定請(qǐng)求者應(yīng)當(dāng)授權(quán)使用代理。如果服務(wù)器返回此響應(yīng)，還表示請(qǐng)求者應(yīng)當(dāng)使用代理。
408(請(qǐng)求超時(shí))服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí)。
5xx(服務(wù)器錯(cuò)誤)：這些狀態(tài)碼表示服務(wù)器在處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤。這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請(qǐng)求出錯(cuò)。
500(服務(wù)器內(nèi)部錯(cuò)誤)服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求。
501(尚未實(shí)施)服務(wù)器不具備完成請(qǐng)求的功能。例如，服務(wù)器無(wú)法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼。
502(錯(cuò)誤網(wǎng)關(guān))服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無(wú)效響應(yīng)。
503(服務(wù)不可用)服務(wù)器目前無(wú)法使用(由于超載或停機(jī)維護(hù))。通常，這只是暫時(shí)狀態(tài)。
504(網(wǎng)關(guān)超時(shí))服務(wù)器作為網(wǎng)關(guān)或代理，但是沒(méi)有及時(shí)從上游服務(wù)器收到請(qǐng)求。
505(HTTP 版本不受支持)服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。
前端優(yōu)化方法：
方法分類：
降低請(qǐng)求量：合并資源，減少HTTP 請(qǐng)求數(shù)，minify / gzip 壓縮， webPlazyLoad。
加快請(qǐng)求速度：預(yù)解析DNS，減少域名數(shù)，并行加載，CDN 分發(fā)。
緩存：HTTP 協(xié)議緩存請(qǐng)求，離線緩存 manifest，離線數(shù)據(jù)緩存localStorage。
渲染：JS/CSS優(yōu)化，加載順序，服務(wù)端渲染，pipeline。
具體措施：
減少HTTP請(qǐng)求次數(shù)：CSS Sprites，js、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip、CDN托管、data緩存、圖片服務(wù)器
前端模板JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
用innerHTML替代DOM操作，減少DOM操作次數(shù)，優(yōu)化JavaScript性能。
當(dāng)需要設(shè)置的樣式很多時(shí)，設(shè)置className而不是直接操作Style
少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取
避免使用CSS Expression（css表達(dá)式）又稱Dynamic properties（動(dòng)態(tài)屬性）
圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時(shí)間戳。
防止內(nèi)存泄漏：內(nèi)存泄漏指任何對(duì)象在不再擁有或需要它之后仍然繼續(xù)存在。垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的唯一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。
優(yōu)雅降級(jí)與漸進(jìn)增強(qiáng)：
瀏覽器輸入網(wǎng)址到頁(yè)面渲染全過(guò)程
漸進(jìn)增強(qiáng)：一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后在針對(duì)高級(jí)瀏覽器進(jìn)行效果，交互，追加功能達(dá)到更好的體驗(yàn)。
優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)，比如一開(kāi)始使用css3的特性構(gòu)建一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行hack使其可以在低版本瀏覽器上正常瀏覽。
post和get區(qū)別：
get參數(shù)通過(guò)url傳遞，post參數(shù)放在request body中。
get請(qǐng)求在url中傳遞的參數(shù)是有長(zhǎng)度限制的，而post沒(méi)有。
get比post更不安全，因?yàn)閰?shù)直接暴露在url中，所以不能用來(lái)傳遞敏感信息。
get請(qǐng)求只能進(jìn)行url編碼，而post支持多種編碼方式
get請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽歷史記錄里，而post中的參數(shù)不會(huì)被保留。
GET和POST本質(zhì)上就是TCP鏈接，并無(wú)差別。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們?cè)趹?yīng)用過(guò)程中體現(xiàn)出一些不同。
GET產(chǎn)生一個(gè)TCP數(shù)據(jù)包；POST產(chǎn)生兩個(gè)TCP數(shù)據(jù)包。對(duì)于GET方式的請(qǐng)求，瀏覽器會(huì)把http header和data一并發(fā)送出去，服務(wù)器響應(yīng)200（返回?cái)?shù)據(jù)）；而對(duì)于POST，瀏覽器先發(fā)送header，服務(wù)器響應(yīng)100 continue，瀏覽器再發(fā)送data，服務(wù)器響應(yīng)200 ok（返回?cái)?shù)據(jù)）。
http與https有什么區(qū)別？
（1） https協(xié)議需要ca申請(qǐng)認(rèn)證書(shū)，一般免費(fèi)的較少
（2） http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議
（3） http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443
（4） http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的，https協(xié)議是由ssl+http協(xié)議構(gòu)建的可進(jìn)行加密傳輸，身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http安全
HTTP協(xié)議中緩存的處理流程：
緩存分為兩種：強(qiáng)緩存和協(xié)商緩存，根據(jù)響應(yīng)的header內(nèi)容來(lái)決定。
強(qiáng)緩存是利用http頭中的Expires和cache-Control兩個(gè)字段來(lái)控制的，用來(lái)表示資源的緩存時(shí)間。強(qiáng)緩存中，普通刷新會(huì)忽略它，但不會(huì)清除它，需要強(qiáng)制刷新。瀏覽器強(qiáng)制刷新，請(qǐng)求會(huì)帶上cache-Control :no-cache和pragma: no-cache
協(xié)商緩存就是由服務(wù)器來(lái)確定緩存資源是否可用，所以客戶端與服務(wù)器端要通過(guò)某種標(biāo)識(shí)來(lái)進(jìn)行通信，從而讓服務(wù)器判斷請(qǐng)求資源是否可以緩存訪問(wèn)。
普通刷新會(huì)啟用弱緩存，忽略強(qiáng)緩存。只有在地址欄或收藏夾輸入網(wǎng)址、通過(guò)鏈接引用資源等情況下，瀏覽器才會(huì)啟用強(qiáng)緩存，這也是為什么有時(shí)候我們更新一張圖片、一個(gè)js文件，頁(yè)面內(nèi)容依然是舊的，但是直接瀏覽器訪問(wèn)那個(gè)圖片或文件，看到的內(nèi)容卻是新的。這個(gè)主要涉及到兩組協(xié)商緩存相關(guān)的header字段:Etag和If-None-Match、Last-Modified和If-Modified-Since。
瀏覽器的緩存過(guò)程：
瀏覽器請(qǐng)求某一資源時(shí)，會(huì)先獲取該資源緩存的header信息，然后根據(jù)header中的cache-Control和Expires來(lái)判斷是否過(guò)期。
若沒(méi)過(guò)期則直接從緩存中獲取資源信息，包括緩存的header的信息，所以此次請(qǐng)求不會(huì)與服務(wù)器進(jìn)行通信。這里判斷是否過(guò)期，則是強(qiáng)緩存相關(guān)。
如果顯示已過(guò)期，瀏覽器會(huì)向服務(wù)器端發(fā)送請(qǐng)求，這個(gè)請(qǐng)求會(huì)攜帶第一次請(qǐng)求返回的有關(guān)緩存的header字段信息。 比如客戶端會(huì)通過(guò)If-None-Match頭將先前服務(wù)器端發(fā)送過(guò)來(lái)的Etag發(fā)送給服務(wù)器，服務(wù)會(huì)對(duì)比這個(gè)客戶端發(fā)過(guò)來(lái)的Etag是否與服務(wù)器的相同， 若相同，就將If-None-Match的值設(shè)為false，返回狀態(tài)304，客戶端繼續(xù)使用本地緩存，不解析服務(wù)器端發(fā)回來(lái)的數(shù)據(jù)，若不相同就將If-None-Match的值設(shè)為true，返回狀態(tài)為200，客戶端重新機(jī)械服務(wù)器端返回的數(shù)據(jù);客戶端還會(huì)通過(guò)If-Modified-since頭將先前服務(wù)器端發(fā)過(guò)來(lái)的最后修改時(shí)間戳發(fā)送給服務(wù)器，服務(wù)器端通過(guò)這個(gè)時(shí)間戳判斷客戶端的頁(yè)面是否是最新的，如果不是最新的，則返回最新的內(nèi)容，如果是最新的，則返回304，客戶端繼續(xù)使用本地緩存。
如何解決前端開(kāi)發(fā)中的緩存問(wèn)題
對(duì)開(kāi)發(fā)者來(lái)說(shuō)，只要關(guān)閉瀏覽器緩存就可以了，找到network，Disable cache選項(xiàng)，打鉤即可取消緩存。
開(kāi)發(fā)者可以關(guān)閉緩存，但是不能要求所有用戶都進(jìn)行此類操作，此時(shí)可以在引用的文件之后拼接隨機(jī)數(shù)或者日期都可以，如css/index.css?v=0.0001，瀏覽器就會(huì)認(rèn)為是新的請(qǐng)求，而不會(huì)使用緩存中的文件。由于每次資源的修改都要更新引用的位置，同時(shí)修改參數(shù)的值，所以操作起來(lái)不是很方便，除非是在動(dòng)態(tài)頁(yè)面比如jsp中用服務(wù)器變量(v=${sysRnd})
如果緩存問(wèn)題出現(xiàn)在ajax請(qǐng)求中，則在ajax請(qǐng)求的地址追加隨機(jī)數(shù)
直接ctrl+f5，這個(gè)辦法能解決頁(yè)面直接引用的資源更新的問(wèn)題
使用瀏覽器的隱私模式開(kāi)發(fā)；
如果資源引用的頁(yè)面，被嵌入到了一個(gè)iframe里面，可以在iframe的區(qū)域右鍵單擊重新加載該頁(yè)面
html5如何及時(shí)更新緩存文件(js、css或圖片)
后端接口頁(yè)面設(shè)置
header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); 復(fù)制代碼
html頁(yè)面中設(shè)置meta標(biāo)簽的屬性(meta標(biāo)簽的http-equiv屬性語(yǔ)法格式是：＜meta http-equiv="參數(shù)" content="參數(shù)變量值"＞)
<meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">//是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從Cache中再調(diào)出? <meta http-equiv="Expires" content="0"> 復(fù)制代碼
對(duì)于圖片或css文件，可以在文件名后面添加一個(gè)隨機(jī)數(shù)或標(biāo)志位，例如
<link rel="stylesheet" href="./style/style.css?+Math.random()"> 復(fù)制代碼
對(duì)于js文件也可以采取3的方法，或者在文件名后使用時(shí)間戳
<script language="javascript" src="UILib/Common/Common.js?time=new Date()"> 復(fù)制代碼
輸入U(xiǎn)RL到后發(fā)生了什么：
簡(jiǎn)單過(guò)程：
DNS域名解析；
建立TCP連接；
發(fā)送HTTP請(qǐng)求；
服務(wù)器處理請(qǐng)求；
返回響應(yīng)結(jié)果；
關(guān)閉TCP連接；
瀏覽器解析HTML；
瀏覽器布局渲染；
詳細(xì)分析構(gòu)建請(qǐng)求的過(guò)程:
應(yīng)用層進(jìn)行DNS解析 通過(guò)DNS將域名解析成IP地址，在解析過(guò)程中，按照瀏覽器緩存，系統(tǒng)緩存，路由器緩存，ISP(運(yùn)營(yíng)商)DNS緩存，根域名服務(wù)器，頂級(jí)域名服務(wù)器，主域名服務(wù)器的順序，逐步讀取緩存，直到拿到IP地址。 這里使用DNS預(yù)解析，可以根據(jù)瀏覽器定義的規(guī)則，提前解析之后可能會(huì)用到的域名，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時(shí)間，來(lái)提高網(wǎng)站的訪問(wèn)速度。
應(yīng)用層生成HTTP請(qǐng)求報(bào)文 應(yīng)用層生成針對(duì)目標(biāo)服務(wù)器的HTTP報(bào)文請(qǐng)求，HTTP請(qǐng)求包括起始行，首部和主體部分。首部包括域名host，keep-alive，User-Agent，Accept-Endoding，Accept-Language，cookie等信息
傳輸層建立TCP連接 http協(xié)議使用的TCP協(xié)議。 將http請(qǐng)求報(bào)文按序號(hào)分為多個(gè)報(bào)文段，并對(duì)每個(gè)報(bào)文段進(jìn)行封裝，使用本地的隨機(jī)tcp源端口簡(jiǎn)歷到目標(biāo)服務(wù)器的tcp80端口(https是443端口)的連接，TCP源端口和目的端口被加入到報(bào)文中。即協(xié)議數(shù)據(jù)單元，同時(shí)還會(huì)加入序列號(hào)，確認(rèn)號(hào)，檢驗(yàn)和等參數(shù)，共計(jì)添加20個(gè)字節(jié)的頭部信息。 這里構(gòu)建TCP連接請(qǐng)求會(huì)增加大量的網(wǎng)絡(luò)延時(shí)。常用的優(yōu)化方法如下：
1)資源打包，合并請(qǐng)求
2)多使用緩存，減少網(wǎng)絡(luò)傳輸
3)使用keep-alive建立持久連接
4)使用多個(gè)域名，增加瀏覽器的資源并發(fā)加載數(shù)，或者使用http2的管道化連接的多路復(fù)用技術(shù)
網(wǎng)絡(luò)層使用IP協(xié)議來(lái)選擇線路。 處理來(lái)自傳輸層的數(shù)據(jù)段segment，將數(shù)據(jù)段segment裝入數(shù)據(jù)包packet，填充包頭，主要添加源和目的IP地址，然后發(fā)送數(shù)據(jù)。IP協(xié)議負(fù)責(zé)選擇傳送的路線，稱為路由功能。
數(shù)據(jù)鏈路層實(shí)現(xiàn)網(wǎng)絡(luò)相鄰結(jié)點(diǎn)間可靠的數(shù)據(jù)通信 為了保證數(shù)據(jù)的可靠性，把數(shù)據(jù)包packet封裝成幀，并按順序傳送各幀，對(duì)每個(gè)數(shù)據(jù)塊計(jì)算CRC(循環(huán)冗余檢驗(yàn)),防止數(shù)據(jù)包丟失，出錯(cuò)就重傳。 將數(shù)據(jù)包封裝成幀，分為幀頭和幀尾，幀尾是CRC校驗(yàn)部分，幀頭主要是添加數(shù)據(jù)鏈路層的地址，源地址和目的地址，即網(wǎng)絡(luò)相鄰結(jié)點(diǎn)間的MAC地址
物理層傳輸數(shù)據(jù) 將數(shù)據(jù)鏈路層的幀轉(zhuǎn)換為二進(jìn)制形式的比特流，從網(wǎng)卡發(fā)送出去，再轉(zhuǎn)換成電子，光學(xué)信號(hào)在網(wǎng)絡(luò)中傳輸。
總結(jié)：6個(gè)步驟分別為：DNS協(xié)議解析URL地址，生成HTTP請(qǐng)求報(bào)文，構(gòu)建TCP鏈接，使用IP協(xié)議選擇傳輸路線，數(shù)據(jù)鏈路層保證數(shù)據(jù)的可靠傳輸，物理層將數(shù)據(jù)轉(zhuǎn)換為物理信號(hào)進(jìn)行傳輸。
補(bǔ)充：服務(wù)器處理及反向傳輸:
服務(wù)器接收到這個(gè)比特流，把比特流轉(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)與本機(jī)的IP地址相同，服務(wù)器拆除網(wǎng)絡(luò)層的封裝后，把數(shù)據(jù)分段上傳到傳輸層。傳輸層對(duì)數(shù)據(jù)分段進(jìn)行確認(rèn)、排序、重組，確保數(shù)據(jù)傳輸?shù)目煽啃浴?shù)據(jù)最后被傳到服務(wù)器的應(yīng)用層
接著，通過(guò)傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層的層層封裝，最終將響應(yīng)報(bào)文封裝成二進(jìn)制比特流，并轉(zhuǎn)換成其他信號(hào)，如電信號(hào)到網(wǎng)絡(luò)中傳輸
反向傳輸?shù)倪^(guò)程與正向傳輸?shù)倪^(guò)程類似
瀏覽器的渲染過(guò)程：
主要步驟
瀏覽器將獲取到的HTML文檔解析成DOM樹(shù)
處理css標(biāo)記，構(gòu)成層疊樣式表模型CSSOM（css object model）
將DOM和CSSOM合并為渲染樹(shù)(rendering tree)，代表一系列將要被渲染的對(duì)象
渲染樹(shù)的每個(gè)元素包含的內(nèi)容是計(jì)算過(guò)的，稱之為布局layout，瀏覽器使用一種流式處理的方法，只需要一次繪制操作就可以布局所有元素
將渲染樹(shù)的各個(gè)節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制painting 具體流程：
構(gòu)建DOM樹(shù)：
瀏覽器收到服務(wù)器響應(yīng)來(lái)的HTML文檔后，遍歷文檔節(jié)點(diǎn)，生成DOM樹(shù)，DOM樹(shù)構(gòu)建時(shí)可能會(huì)被CSS和JS的加載而執(zhí)行阻塞，display:none的元素，注釋，script也會(huì)存在于DOM樹(shù)中。
構(gòu)建CSSOM規(guī)則樹(shù)
瀏覽器解析CSS文件并對(duì)每個(gè)文件生成一個(gè)stylesheet對(duì)象，每個(gè)對(duì)象包含css規(guī)則。css解析可以和DOM解析同時(shí)進(jìn)行，css的解析會(huì)被js互斥。
構(gòu)建渲染樹(shù)(render tree):
瀏覽器從DOM樹(shù)的根結(jié)點(diǎn)遍歷每個(gè)可見(jiàn)結(jié)點(diǎn)，然后對(duì)每個(gè)可見(jiàn)結(jié)點(diǎn)找到css樣式規(guī)則并應(yīng)用。Render tree與DOM tree不完全對(duì)應(yīng)，display:none的元素不在render tree中，visibility:hidden元素在render tree中。這個(gè)時(shí)候還沒(méi)渲染到屏幕上，渲染到屏幕需要用到各個(gè)節(jié)點(diǎn)的位置信息，需要布局的處理
渲染樹(shù)布局(render tree layout)：
布局階段，遍歷每一個(gè)render object對(duì)象，包含寬高，位置，背景色等樣式信息，通過(guò)這些信息確定每個(gè)結(jié)點(diǎn)在頁(yè)面上的確切位置。脫離文檔流，脫離的是render tree
渲染樹(shù)繪制(render tree paint):
繪制階段，瀏覽器遍歷渲染樹(shù)，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容，由瀏覽器的后端UI組建完成。
Js阻塞：
JS可以操作DOM來(lái)改變DOM結(jié)構(gòu)，修改CSSOM樣式，所以瀏覽器在遇到<script>標(biāo)簽時(shí)，DOM構(gòu)建將暫停，直到腳本執(zhí)行完成，再繼續(xù)構(gòu)建DOM，所以<script>標(biāo)簽一般放在最后。現(xiàn)在可以在<script>標(biāo)簽上增加defer，async等屬性，單獨(dú)解析js中操作DOM和CSSOM的地方追加到DOM和CSSOM上。Css阻塞：
CSSOM負(fù)責(zé)存儲(chǔ)渲染信息，所以CSSOM在瀏覽器合成渲染樹(shù)之前必須是完備的，否則就不會(huì)進(jìn)入渲染過(guò)程。所以將樣式放在head中，為了更快的解析css。defer和async屬性的區(qū)別：
沒(méi)有defer和async屬性的時(shí)候?yàn)g覽器在讀取到<script>標(biāo)簽的時(shí)候會(huì)立即讀取腳本文件，而不會(huì)加載后續(xù)的文檔元素，會(huì)阻塞后續(xù)DOM的構(gòu)建 文檔解析時(shí)，遇到設(shè)置了defer的腳本，就會(huì)在后臺(tái)進(jìn)行下載，但是并不會(huì)阻止文檔的渲染，當(dāng)頁(yè)面解析&渲染完畢后。會(huì)等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會(huì)觸發(fā)DOMContentLoaded(dom內(nèi)容加載完畢)事件。 async腳本會(huì)在加載完畢后執(zhí)行。async腳本的加載不計(jì)入DOMContentLoaded事件統(tǒng)計(jì) 有defer或者async屬性之后，腳本文件的讀取和后續(xù)文檔的加載是并行的也就是異步執(zhí)行，js腳本的執(zhí)行會(huì)等到所有元素被解析完成之后，DOMContentLoaded事件調(diào)用前執(zhí)行。 存在多個(gè)defer的腳本文件時(shí)，他們會(huì)按照順序defer的順序執(zhí)行，而async的加載則是無(wú)序的，只要DOM加載完成會(huì)立即執(zhí)行，不考慮腳本之間的依賴關(guān)系。
重排(layout)和重繪(repaint)：
DOM的變化影響到了已渲染完成的幾何屬性，比如寬高等，瀏覽器將重新計(jì)算元素的幾何屬性，其他元素的幾何屬性也會(huì)受到影響，瀏覽器需要重新構(gòu)造渲染樹(shù)（Render樹(shù)），這個(gè)過(guò)程稱之為重排(也叫回流reflow)，瀏覽器將受到影響的部分重新繪制在屏幕上的過(guò)程稱之為重繪。display:none會(huì)觸發(fā)reflow，而visibility: hidden屬性則并不算是不可見(jiàn)屬性，只會(huì)觸發(fā)repaint
重繪產(chǎn)生的原因有：
添加或刪除可見(jiàn)的DOM元素，
元素的尺寸位置發(fā)生改變。
瀏覽器頁(yè)面初始化
瀏覽器窗口大小發(fā)生變化
重排一定導(dǎo)致重繪，重繪不一定導(dǎo)致重排。
減少重繪重排的方法：
不在布局信息改變時(shí)做DOM查詢
不要一條一條的修改DOM樣式，使用csstext，className一次性改變屬性
在內(nèi)存中多次操作節(jié)點(diǎn)，完成后再添加到文檔中
對(duì)于一個(gè)元素進(jìn)行復(fù)雜的操作時(shí)，先隱藏，操作完再展示
需要經(jīng)常獲取那些引起瀏覽器重排的屬性時(shí)，緩存到變量中
不要使用table布局，一個(gè)小改動(dòng)會(huì)導(dǎo)致table重新布局
對(duì)于多次重排的元素，比如說(shuō)動(dòng)畫(huà)，使用絕對(duì)定位讓其脫離文檔流，使其不影響其他元素，減少重繪范圍
http報(bào)文構(gòu)成：
使用HTTP長(zhǎng)連接有哪些優(yōu)點(diǎn)：
HTTP長(zhǎng)連接（持久化連接）:? 在一個(gè)TCP連接的基礎(chǔ)之上，發(fā)送多個(gè)HTTP請(qǐng)求以及接收多個(gè)HTTP響應(yīng)，這是為了避免每一次請(qǐng)求都去打開(kāi)一個(gè)新的連接。
在HTTP/1.0中默認(rèn)使用短連接。也就是說(shuō)，客戶端和服務(wù)器每進(jìn)行一次HTTP操作，就建立一次連接，任務(wù)結(jié)束就中斷連接。 而從HTTP/1.1起，默認(rèn)使用長(zhǎng)連接，用以保持連接特性。使用長(zhǎng)連接的HTTP協(xié)議，會(huì)在響應(yīng)頭加入這行代碼：Connection:keep-alive 在使用長(zhǎng)連接的情況下，當(dāng)一個(gè)網(wǎng)頁(yè)打開(kāi)完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會(huì)關(guān)閉，客戶端再次訪問(wèn)這個(gè)服務(wù)器時(shí)，會(huì)繼續(xù)使用這一條已經(jīng)建立的連接。
Keep-Alive不會(huì)永久保持連接，它有一個(gè)保持時(shí)間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個(gè)時(shí)間。實(shí)現(xiàn)長(zhǎng)連接需要客戶端和服務(wù)端都支持長(zhǎng)連接。
HTTP協(xié)議的長(zhǎng)連接和短連接，實(shí)質(zhì)上是TCP協(xié)議的長(zhǎng)連接和短連接。
長(zhǎng)連接的特點(diǎn)：
可以省去較多的TCP連接建立和關(guān)閉的操作，減少浪費(fèi)，節(jié)約時(shí)間。適用于頻繁請(qǐng)求服務(wù)器資源的客戶端之間建立。
短連接的特點(diǎn)：
對(duì)于服務(wù)器來(lái)說(shuō)管理較為簡(jiǎn)單，存在的連接都是有用的連接，但是如果客戶請(qǐng)求頻繁，將在TCP的建立和關(guān)閉操作上浪費(fèi)時(shí)間和帶寬。WEB網(wǎng)站的http服務(wù)一般采用的都是短連接服務(wù)。
客戶端和服務(wù)器之間的連接如果一直不關(guān)閉，隨著建立連接的客戶端越來(lái)越多，會(huì)增加服務(wù)器的壓力，所以一般采取以下幾種策略：
1.關(guān)閉一些長(zhǎng)時(shí)間沒(méi)有發(fā)生讀寫(xiě)事件的連接。
2.限制每個(gè)客戶端的最大長(zhǎng)連接數(shù)量。
TLS/SSL協(xié)議是如何保障信息安全的：
SSL(安全套接字協(xié)議):是web瀏覽器和web服務(wù)器之間安全交換信息的協(xié)議，提供兩個(gè)基本的安全服務(wù)，鑒別和保密 TLS(安全傳輸層協(xié)議):用于在兩個(gè)通信應(yīng)用程序之間提供保密性和數(shù)據(jù)完整性。其中TLS是SSL的升級(jí)版
SSL/TLS協(xié)議的基本過(guò)程
（1） 客戶端向服務(wù)器端索要并驗(yàn)證公鑰。
（2） 雙方協(xié)商生成"對(duì)話密鑰"。
（3） 雙方采用"對(duì)話密鑰"進(jìn)行加密通信。具體過(guò)程可細(xì)分為8個(gè)步驟：
客戶端向服務(wù)器發(fā)起https請(qǐng)求，連接到服務(wù)器的443端口
服務(wù)器有密鑰對(duì)，即公鑰和私鑰，用來(lái)進(jìn)行非對(duì)稱加密
服務(wù)器將公鑰發(fā)送給客戶端
客戶端收到服務(wù)端的數(shù)據(jù)后，先驗(yàn)證其證書(shū)的合法性，如果合法，客戶端生成客戶端密鑰，并使用服務(wù)端接收到的公鑰對(duì)客戶端密鑰進(jìn)行加密。
客戶端再次發(fā)起https請(qǐng)求，將加密之后的客戶端密鑰發(fā)送給服務(wù)器
服務(wù)器接收到客戶端發(fā)送過(guò)來(lái)的加密后的密鑰，用自己的私鑰進(jìn)行解密，然后用客戶端密鑰對(duì)要發(fā)送的數(shù)據(jù)進(jìn)行加密。
將加密后的數(shù)據(jù)發(fā)送給客戶端
客戶端使用客戶端密鑰對(duì)加密數(shù)據(jù)進(jìn)行解密，得到服務(wù)器發(fā)送的數(shù)據(jù)。SSL協(xié)議的內(nèi)容：
握手協(xié)議 握手協(xié)議是客戶端和服務(wù)器用SSL連接通信時(shí)使用的第一個(gè)子協(xié)議，握手協(xié)議包括客戶機(jī)與服務(wù)器之間的一系列消息，是SSL協(xié)議中最復(fù)雜的協(xié)議，該協(xié)議允許服務(wù)器和客戶機(jī)相互驗(yàn)證，協(xié)商加密和MAC算法(帶秘密密鑰的Hash函數(shù))及保密密鑰，用來(lái)保護(hù)在SSL記錄中發(fā)送的數(shù)據(jù),握手協(xié)議是在應(yīng)用程序的數(shù)據(jù)傳輸之前使用的。 1.1 建立安全能力，發(fā)送信息，交換版本，隨機(jī)數(shù)，會(huì)話ID，密碼套件，壓縮方法等信息 1.2 服務(wù)器鑒別與密鑰交換 1.3 客戶機(jī)鑒別與密鑰交換 1.4 完成
記錄協(xié)議 記錄協(xié)議在客戶機(jī)和服務(wù)器成功握手之后使用，即客戶機(jī)和服務(wù)器鑒別對(duì)方和確定安全信息交換使用的算法后，進(jìn)入SSL記錄協(xié)議。
警報(bào)協(xié)議 客戶機(jī)和服務(wù)器發(fā)現(xiàn)錯(cuò)誤時(shí)，向?qū)Ψ桨l(fā)送一個(gè)警報(bào)信息，如果是致命錯(cuò)誤，則算法立即關(guān)閉SSL連接，雙方刪除相關(guān)的會(huì)話號(hào)，密鑰等。
總結(jié)：SSL中，使用握手協(xié)議協(xié)商加密和MAC算法以及保密密鑰，使用握手協(xié)議對(duì)交換的數(shù)據(jù)進(jìn)行加密和簽名，使用警報(bào)協(xié)議定義數(shù)據(jù)傳輸過(guò)程中，出現(xiàn)問(wèn)題改如何解決。
HTTP 1.0,1.1,2.0協(xié)議的區(qū)別：
HTTP1.0 HTTP 1.1主要區(qū)別長(zhǎng)連接HTTP 1.0需要使用keep-alive參數(shù)來(lái)告知服務(wù)器端要建立一個(gè)長(zhǎng)連接，而HTTP1.1默認(rèn)支持長(zhǎng)連接。
HTTP是基于TCP/IP協(xié)議的，創(chuàng)建一個(gè)TCP連接是需要經(jīng)過(guò)三次握手的,有一定的開(kāi)銷，如果每次通訊都要重新建立連接的話，對(duì)性能有影響。因此最好能維持一個(gè)長(zhǎng)連接，可以用個(gè)長(zhǎng)連接來(lái)發(fā)多個(gè)請(qǐng)求。節(jié)約帶寬HTTP 1.1支持只發(fā)送header信息(不帶任何body信息)，如果服務(wù)器認(rèn)為客戶端有權(quán)限請(qǐng)求服務(wù)器，則返回100，否則返回401。客戶端如果接受到100，才開(kāi)始把請(qǐng)求body發(fā)送到服務(wù)器。
這樣當(dāng)服務(wù)器返回401的時(shí)候，客戶端就可以不用發(fā)送請(qǐng)求body了，節(jié)約了帶寬。
另外HTTP還支持傳送內(nèi)容的一部分。這樣當(dāng)客戶端已經(jīng)有一部分的資源后，只需要跟服務(wù)器請(qǐng)求另外的部分資源即可。這是支持文件斷點(diǎn)續(xù)傳的基礎(chǔ)。HOST域現(xiàn)在可以web server例如tomat，設(shè)置虛擬站點(diǎn)是非常常見(jiàn)的，也即是說(shuō)，web server上的多個(gè)虛擬站點(diǎn)可以共享同一個(gè)ip和端口。
HTTP1.0是沒(méi)有host域的，HTTP1.1才支持這個(gè)參數(shù)。
HTTP1.1 HTTP 2.0主要區(qū)別多路復(fù)用HTTP2.0使用了(類似epoll)多路復(fù)用的技術(shù)，做到同一個(gè)連接并發(fā)處理多個(gè)請(qǐng)求，而且并發(fā)請(qǐng)求的數(shù)量比HTTP1.1大了好幾個(gè)數(shù)量級(jí)。
當(dāng)然HTTP1.1也可以多建立幾個(gè)TCP連接，來(lái)支持處理更多并發(fā)的請(qǐng)求，但是創(chuàng)建TCP連接本身也是有開(kāi)銷的。
TCP連接有一個(gè)預(yù)熱和保護(hù)的過(guò)程，先檢查數(shù)據(jù)是否傳送成功，一旦成功過(guò)，則慢慢加大傳輸速度。因此對(duì)應(yīng)瞬時(shí)并發(fā)的連接，服務(wù)器的響應(yīng)就會(huì)變慢。所以最好能使用一個(gè)建立好的連接，并且這個(gè)連接可以支持瞬時(shí)并發(fā)的請(qǐng)求。數(shù)據(jù)壓縮HTTP1.1不支持header數(shù)據(jù)的壓縮，HTTP2.0使用HPACK算法對(duì)header的數(shù)據(jù)進(jìn)行壓縮，這樣數(shù)據(jù)體積小了，在網(wǎng)絡(luò)上傳輸就會(huì)更快。
請(qǐng)求與響應(yīng)首部的定義在HTTP2.0中基本沒(méi)有變，只是所有首部鍵必須全部小寫(xiě)，而且要求行要獨(dú)立為:method:、:scheme:、:host:、:path:這些鍵值對(duì)
對(duì)于相同的數(shù)據(jù)，不再重新通過(guò)每次請(qǐng)求和響應(yīng)發(fā)送。每個(gè)新的首部鍵值對(duì)要么追加到當(dāng)前表的末尾，要么替換表中之前的值。首部表在HTTP2.0的鏈接存續(xù)期內(nèi)始終存在，由客戶端和服務(wù)端共同漸進(jìn)的更新。服務(wù)器推送意思是說(shuō)，當(dāng)我們對(duì)支持HTTP2.0的web server請(qǐng)求數(shù)據(jù)的時(shí)候，服務(wù)器會(huì)順便把一些客戶端需要的資源一起推送到客戶端，免得客戶端再次創(chuàng)建連接發(fā)送請(qǐng)求到服務(wù)器端獲取。這種方式非常合適加載靜態(tài)資源。
服務(wù)器端推送的這些資源其實(shí)存在客戶端的某處地方，客戶端直接從本地加載這些資源就可以了，不用走網(wǎng)絡(luò)，速度自然是快很多的。二進(jìn)制幀層HTTP2.0會(huì)把所有信息分割成更小的消息和幀，并采用二進(jìn)制格式將其封裝。例如header封裝到Headers幀，request body封裝到Data幀。
HTTP2.0通信都在一個(gè)TCP連接上完成，這個(gè)連接可以承載任意數(shù)量的雙向數(shù)據(jù)流，相應(yīng)的每個(gè)數(shù)據(jù)流以消息的形式發(fā)送。而消息由一或多個(gè)幀組成，這些幀可以亂序發(fā)送，然后根據(jù)每個(gè)幀首部的流標(biāo)識(shí)符重新組裝。
WebSocket協(xié)議：
ajax輪詢ajax（異步的javascript與xml技術(shù)）是一種有效利用javascript和dom的操作，以達(dá)到局部web頁(yè)面的提花和加載的異步通信手段。和以前的同步通信相比，他只更新一部分頁(yè)面，相應(yīng)中傳輸?shù)臄?shù)據(jù)量會(huì)因此的減少。
ajax輪詢的原理是，讓瀏覽器每隔一段時(shí)間就發(fā)送一次請(qǐng)求，詢問(wèn)服務(wù)器是否有新消息。而利用ajax實(shí)時(shí)的從服務(wù)器獲取內(nèi)容，有可能導(dǎo)致大量的請(qǐng)求產(chǎn)生。
長(zhǎng)輪詢?cè)砗蚢jax輪詢差不多，都是采用輪詢的方式，不過(guò)采用的是阻塞模型。也就是說(shuō)，當(dāng)客戶端發(fā)起連接后，如果服務(wù)器端內(nèi)容沒(méi)有更新，將響應(yīng)至于掛起狀態(tài)，一直不回復(fù)response給客戶端，知道有內(nèi)容更新，再返回響應(yīng)。
http的特點(diǎn)：被動(dòng)性，請(qǐng)求只能由客戶端發(fā)起。服務(wù)器端不能主動(dòng)聯(lián)系客戶端。
ajax輪詢 需要服務(wù)器有很快的處理速度和資源。（速度）
長(zhǎng)輪詢 需要有很高的并發(fā)，也就是說(shuō)同時(shí)接待客戶的能力。（場(chǎng)地大小）WebSocket
WebSocket是HTML5出的東西（協(xié)議），是HTML5開(kāi)始提供的一種瀏覽器與服務(wù)器進(jìn)行全雙工通訊的網(wǎng)絡(luò)技術(shù)，屬于應(yīng)用層協(xié)議。它基于TCP傳輸協(xié)議，并復(fù)用HTTP的握手通道。
一旦web服務(wù)器和客戶端建立起websocket協(xié)議的通信連接，之后所有的通信都依靠這個(gè)專用連接進(jìn)行。只需要經(jīng)過(guò)一次HTTP請(qǐng)求，就可以做到源源不斷的信息傳送了。
通過(guò)在請(qǐng)求首部中設(shè)置Connection: Upgrade來(lái)使用websocket協(xié)議
websocket協(xié)議具有以下的特點(diǎn)推送功能支持服務(wù)器端向客戶端推送功能。服務(wù)器可以直接發(fā)送數(shù)據(jù)而不用等待客戶端的請(qǐng)求。減少通信量只要建立起websocket連接，就一直保持連接，在此期間可以源源不斷的傳送消息，直到關(guān)閉請(qǐng)求。也就避免了HTTP的非狀態(tài)性。
和http相比，不但每次連接時(shí)的總開(kāi)銷減少了，而且websocket的首部信息量也小 ，通信量也減少了。
支持雙向通信，實(shí)時(shí)性更強(qiáng)。更好的二進(jìn)制支持。較少的控制開(kāi)銷。
連接創(chuàng)建后，ws客戶端、服務(wù)端進(jìn)行數(shù)據(jù)交換時(shí)，協(xié)議控制的數(shù)據(jù)包頭部較小。在不包含頭部的情況下，服務(wù)端到客戶端的包頭只有2~10字節(jié)（取決于數(shù)據(jù)包長(zhǎng)度），客戶端到服務(wù)端的的話，需要加上額外的4字節(jié)的掩碼。而HTTP協(xié)議每次通信都需要攜帶完整的頭部。支持?jǐn)U展ws協(xié)議定義了擴(kuò)展，用戶可以擴(kuò)展協(xié)議，或者實(shí)現(xiàn)自定義的子協(xié)議。（比如支持自定義壓縮算法等）
CSS部分：
css3新增：
CSS3邊框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D轉(zhuǎn)換如transform等；CSS3動(dòng)畫(huà)如animation等。
CSS3的新特性中，在布局方面新增了flex布局，在選擇器方面新增了例如first-of-type,nth-child等選擇器，在盒模型方面添加了box-sizing來(lái)改變盒模型，在動(dòng)畫(huà)方面增加了animation，2d變換，3d變換等，在顏色方面添加透明，rbga等，在字體方面允許嵌入字體和設(shè)置字體陰影，最后還有媒體查訊等.
css的兩種盒模型
在標(biāo)準(zhǔn)的盒子模型中，width指content部分的寬度
在IE盒子模型中，width表示content+padding+border這三個(gè)部分的寬度
如果想要切換盒模型也很簡(jiǎn)單，這里需要借助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%
使用定位自動(dòng)外邊距，父元素，子元素固定寬高，父相子絕，子元素top，bottom屬性為0,margin在垂直方向auto
使用flex布局，父元素，子元素固定寬高，父元素使用flex布局，設(shè)置align-items屬性為center
使用flex布局，父元素，子元素固定寬高，父元素使用flex布局，設(shè)置flex-direction屬性（設(shè)置主軸方向）為column（縱軸）,justify-content屬性設(shè)置主軸上的對(duì)齊方式為center
使用 display：table-cell ，父元素固定寬高，父元素設(shè)置display:table，子元素設(shè)置display:table-cell，并且vertical-align:middle
transition和animation的區(qū)別：
animation和transition大部分屬性是相同的，他們都是隨時(shí)間改變?cè)氐膶傩灾担麄兊闹饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。
animation屬性
name 設(shè)置動(dòng)畫(huà)的名稱，
duration 設(shè)置動(dòng)畫(huà)完成的周期，
timing-function 設(shè)置動(dòng)畫(huà)的速度曲線，
delay 設(shè)置動(dòng)畫(huà)什么時(shí)候開(kāi)始，
iteration-count 設(shè)置動(dòng)畫(huà)播放的次數(shù)，
direction 規(guī)定下一個(gè)周期是否逆向的播放，
play-state 動(dòng)畫(huà)是否正在進(jìn)行或者暫停，
fill-mode 設(shè)置動(dòng)畫(huà)停了之后位置什么狀態(tài)transition屬性
property 去設(shè)置過(guò)渡效果的屬性名稱，
duration 設(shè)置過(guò)渡效果的周期，
timing-function 規(guī)定速度效果的速度曲線，
delay 設(shè)定過(guò)渡效果什么時(shí)候開(kāi)始；區(qū)別：
transition 是過(guò)渡，是樣式值的變化的過(guò)程，只有開(kāi)始和結(jié)束；animation 其實(shí)也叫關(guān)鍵幀，通過(guò)和 @keyframe 結(jié)合可以設(shè)置中間幀的一個(gè)狀態(tài)；
animation 配合 @keyframe 可以不觸發(fā)事件就觸發(fā)這個(gè)過(guò)程，而 transition 需要通過(guò) hover 或者 js 事件來(lái)配合觸發(fā)；
animation 可以設(shè)置很多的屬性，比如循環(huán)次數(shù)，動(dòng)畫(huà)結(jié)束的狀態(tài)等等，transition 只能觸發(fā)一次；
animation 可以結(jié)合 keyframe 設(shè)置每一幀，但是 transition 只有兩幀；
在性能方面：瀏覽器有一個(gè)主線程和排版線程；主線程一般是對(duì) js 運(yùn)行的、頁(yè)面布局、生成位圖等等，然后把生成好的位圖傳遞給排版線程，而排版線程會(huì)通過(guò) GPU 將位圖繪制到頁(yè)面上，也會(huì)向主線程請(qǐng)求位圖等等；我們?cè)谟檬褂?animation 的時(shí)候這樣就可以改變很多屬性，像我們改變了 width、height、position 等等這些改變文檔流的屬性的時(shí)候就會(huì)引起，頁(yè)面的回流和重繪，對(duì)性能影響就比較大，但是我們用 transition 的時(shí)候一般會(huì)結(jié)合 transform 來(lái)進(jìn)行旋轉(zhuǎn)和縮放等不會(huì)生成新的位圖，當(dāng)然也就不會(huì)引起頁(yè)面的重排了；
transition、transform和translate這三者
transform是轉(zhuǎn)換，指的是改變所在元素的外觀，它有很多種手段(轉(zhuǎn)換函數(shù))來(lái)改變外觀，例如 位移、縮放、旋轉(zhuǎn)等，而其中的位移的函數(shù)名就叫translate，所以說(shuō)，translate是transform的一部分。
transform: [轉(zhuǎn)換函數(shù)];
屬性函數(shù)：
translate(x, y)：元素位移，元素偏移的x軸和y軸距離，可為負(fù)
scale(x, y)：元素縮放，元素x軸和y軸縮放的倍數(shù)，小于1為縮小，大于1位放大，小于0效果和為0時(shí)相等
rotate(angle)：元素旋轉(zhuǎn)，旋轉(zhuǎn)的角度，單位deg，順時(shí)針旋轉(zhuǎn)
transform: translate(-10px, 10px);//當(dāng)前元素往上移動(dòng) 10 像素，往右移動(dòng) 10 像素。 transform: translate(10px, 10px) rotate(10deg);//指定多個(gè)轉(zhuǎn)換效果。 復(fù)制代碼
transition是過(guò)渡，指的是某個(gè)CSS屬性值如何平滑的進(jìn)行改變，就是平常說(shuō)的 動(dòng)效。而transform是沒(méi)有動(dòng)畫(huà)效果，你改變了它的值，元素的樣子就唰的改變了。
transition: [屬性名] [持續(xù)時(shí)間] [速度曲線] [延遲時(shí)間]; transition: height 2s ease .5s;//高度屬性的值改變時(shí)，延遲 0.5 秒后以 ease 曲線進(jìn)行過(guò)渡，持續(xù)2秒。 復(fù)制代碼
visibility=hidden, opacity=0，display:none：
opacity=0，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件的方法。
visibility=hidden，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件。
display=none，把元素隱藏起來(lái)，并且會(huì)改變頁(yè)面布局，可以理解成在頁(yè)面中把該元素刪除掉一樣。
position屬性比較：
固定定位fixed：
元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)。Fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。 Fixed定位的元素和其他元素重疊。
相對(duì)定位relative：相對(duì)于他原本的位置進(jìn)行移動(dòng)
如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。 在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。
絕對(duì)定位absolute：相對(duì)于他的父元素進(jìn)行移動(dòng)
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于<html>。 absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。 absolute 定位的元素和其他元素重疊。
粘性定位sticky：
先是相對(duì)于他原本的位置進(jìn)行移動(dòng)，然后在超出目標(biāo)區(qū)域后，固定在目標(biāo)位置，即先按照relative定位方式定位，然后按照f(shuō)ix定位方式定位。 元素先按照普通文檔流定位，然后相對(duì)于該元素在流中的flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。
默認(rèn)定位Static：
默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）。
繼承定位inherit:
規(guī)定應(yīng)該從父元素繼承position 屬性的值。
浮動(dòng)清除的幾種方法：
方法一：使用帶clear屬性的空元素
在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。亦可使用<br class="clear" />或<hr class="clear" />來(lái)進(jìn)行清理。
方法二：使用CSS的overflow屬性
給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1。
在添加overflow屬性后，浮動(dòng)元素又回到了容器層，把容器高度撐起，達(dá)到了清理浮動(dòng)的效果。
方法三：給浮動(dòng)的元素的容器添加浮動(dòng)
給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)，影響布局，不推薦使用。
方法四：使用鄰接元素處理
什么都不做，給浮動(dòng)元素后面的元素添加clear屬性。
方法五：使用CSS的:after偽元素
結(jié)合:after 偽元素（注意這不是偽類，而是偽元素，代表一個(gè)元素之后最近的元素）和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。
給浮動(dòng)元素的容器添加一個(gè)clearfix的class，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見(jiàn)的塊元素（Block element）清理浮動(dòng)。
CSS選擇器有哪些，優(yōu)先級(jí)呢：
CSS的四種基本選擇器和四種高級(jí)選擇器：
基本選擇器：
標(biāo)簽選擇器：針對(duì)一類標(biāo)簽
P{}：選擇所有<p>元素
ID選擇器：針對(duì)某一個(gè)特定的標(biāo)簽使用
#id{}：選擇所有id="firstname"的元素
類選擇器：針對(duì)你想要的所有標(biāo)簽使用
.class{}：選擇所有class="intro"的元素
通用選擇器（通配符）：針對(duì)所有的標(biāo)簽都適用（不建議使用）
：選擇所有元素
高級(jí)選擇器：
后代選擇器：用空格隔開(kāi)
div p： 選擇<div>元素內(nèi)的所有<p>元素
div>p： 選擇所有父級(jí)是 <div> 元素的 <p> 元素
div+p： 選擇所有緊接著<div>元素之后的<p>元素
屬性選擇器：帶有屬性或指定屬性內(nèi)容
[target]：選擇所有帶有target屬性元素
[target=-blank]：選擇所有使用target="-blank"的元素
[title~=flower]：選擇標(biāo)題屬性包含單詞"flower"的所有元素
[lang|=en]：選擇 lang 屬性以 en 為開(kāi)頭的所有元素
交集選擇器：用.隔開(kāi)
h3.special：選擇<h3>標(biāo)簽并且類是.special的標(biāo)簽
并集選擇器（分組選擇器）：用逗號(hào)隔開(kāi)
div,p： 選擇所有<div>元素和<p>元素
p,h1,#mytitle,.one：選擇所有帶有p,h1,id="mytitle",class="one"的標(biāo)簽
偽類選擇器：
靜態(tài)偽類選擇器：
a:link：選擇所有未訪問(wèn)鏈接
a:visited：選擇所有訪問(wèn)過(guò)的鏈接
動(dòng)態(tài)偽類選擇器：
a:active：選擇活動(dòng)鏈接
a:hover：選擇鼠標(biāo)在鏈接上面時(shí)
input:focus：選擇具有焦點(diǎn)的輸入元素
序偽類選擇器：
p:first-letter：選擇每一個(gè)p元素的第一個(gè)字母
p:first-line：選擇每一個(gè)p元素的第一行
p:first-child：指定只有當(dāng)p元素是其父級(jí)的第一個(gè)子級(jí)的樣式。
p:before：在每個(gè)p元素之前插入內(nèi)容
p:after：在每個(gè)p元素之后插入內(nèi)容
Css3新增選擇器： p~ul：選擇p元素之后的每一個(gè)ul元素
a[src^"ttps"]：選擇每一個(gè)src屬性的值以"https "開(kāi)頭的元素
a[src$=". pdf"]：選擇每一個(gè)src屬性的值以” pdf結(jié)尾的元素
a[src*=" runoob"]：選擇每一個(gè)src屬性的值包含子字符串" 'runoob"的元素
p:first-of-type：選擇每個(gè)p元素是其父級(jí)的第一個(gè)p元素
p:last-of-type：選擇每個(gè)p元素是其父級(jí)的最后一個(gè)p元素
p:only-of-type：選擇每個(gè)p元素是其父級(jí)的唯一p元素
p:only-child：選擇每個(gè)p元素是其父級(jí)的唯一子元素
p:nth-child(2)：選擇每個(gè)p元素是其父級(jí)的第二個(gè)子元素
p::nth-child(-n+3):選擇每個(gè)p元素是其父級(jí)的前三個(gè)子元素
p:th-last-child(2)：選擇每個(gè)p元素的是其父級(jí)的第二個(gè)子元素,從最后一個(gè)子項(xiàng)計(jì)數(shù)
p:th-of-type(2)：選擇每個(gè)p元素是其父級(jí)的第二個(gè)p元素
p:nth-last-of-type(2)：選擇每個(gè)p元素的是其父級(jí)的第二個(gè)p元素， 從最后一個(gè)子項(xiàng)計(jì)數(shù)
p:last-child：選擇每個(gè)p元素是其父級(jí)的最后-個(gè)子級(jí)。
.root：選擇文檔的根元素
p:empty：選擇每個(gè)沒(méi)有任何子級(jí)的p元素(包括文本節(jié)點(diǎn))
#news:target：選擇當(dāng)前活動(dòng)的#news元素(包含該錨名稱的點(diǎn)擊的URL)
inputenabled：選擇每一個(gè)已啟用的輸入元素
input:disabled：選擇每一個(gè)禁用的輸入元素
input.checked：選擇每個(gè)選中的輸入元素
:not(p)：選擇每個(gè)并非p元素的元素
:selection：匹配元素中被用戶選中或處于高亮狀態(tài)的部分
:out-of-range：匹配值在指定區(qū)間之外的input元素
:in-range：匹配值在指定區(qū)間之內(nèi)的input元素
.read-write：用于匹配可讀及可寫(xiě)的元素
:read-only：用于匹配設(shè)置"readonly" (只讀)屬性的元素
:optional：用于匹配可選的輸入元素
.required：用于匹配設(shè)置了"required" 屬性的元素
valid：用于匹配輸入值為臺(tái)法的元素
cinvalid：用于匹配輸入值為非法的元素
Css選擇器優(yōu)先級(jí)：
在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
作為style屬性寫(xiě)在元素內(nèi)的樣式
id選擇器
類選擇器
元素選擇器
通配符選擇器
瀏覽器自定義或繼承
margin塌陷和合并問(wèn)題：
首先，margin塌陷是相對(duì)于父子級(jí)關(guān)系的兩個(gè)元素，而margin合并是相對(duì)兩個(gè)兄弟級(jí)關(guān)系的兩個(gè)元素
兩個(gè)兄弟級(jí)關(guān)系的元素，垂直方向上的margin，其外邊距會(huì)發(fā)生重疊現(xiàn)象，兩者兩個(gè)的外邊距取的是兩個(gè)所設(shè)置margin的最大值，就是所說(shuō)的margin合并問(wèn)題
兩個(gè)父子級(jí)關(guān)系的元素，垂直方向上的margin會(huì)粘合在一起，外層和模型的margin-top取兩個(gè)元素中margin-top的最大值，發(fā)生margin塌陷的內(nèi)層元素相對(duì)于整個(gè)文檔移動(dòng)
解決方案：兩者都可以通過(guò)觸發(fā)BFC來(lái)解決
什么是BFC：
直譯成：塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，并且有一定的布局規(guī)則。
BFC區(qū)域不會(huì)與float box重疊。
BFC是頁(yè)面上的一個(gè)獨(dú)立容器，子元素不會(huì)影響到外面。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。
并且在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
哪些元素會(huì)生成BFC：
float不為none的元素
position為fixed和absolute的元素
display為inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不為visible的元素
inline-block、inline和block的區(qū)別：
Block是塊級(jí)元素，其前后都會(huì)有換行符，能設(shè)置寬度，高度，margin/padding水平垂直方向都有效。
Inline：設(shè)置width和height無(wú)效，margin在豎直方向上無(wú)效，padding在水平方向垂直方向都有效，前后無(wú)換行符
Inline-block：能設(shè)置寬度高度，margin/padding水平垂直方向 都有效，前后無(wú)換行符
px、em、rem、%、vw、vh、vm這些單位的區(qū)別
em:參考的是父元素的font-size，具有繼承的特點(diǎn)，如果自身定義了font-size則按自身來(lái)計(jì)算（瀏覽器默認(rèn)字體是16px），整個(gè)頁(yè)面內(nèi)1em不是一個(gè)固定的值
rem:相對(duì)于根元素html，可以設(shè)置根元素html的font-size為10px，則1.2em就是12px；
vw:css3新單位，view width的縮寫(xiě)，是指可視窗口的高度，假如寬度是1200px,則10vw就是120px；舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
Vh:類似vw，指的是可視窗口的高度。
Vm:相對(duì)于視口的寬度或高度中較小的那個(gè)，其中最小的單位被均分為100個(gè)單位，舉個(gè)例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
flex布局：
常用的Flex屬性：
display：指定 HTML 元素盒子類型。
flex-direction：指定了彈性容器中子元素的排列方式
row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。
justify-content：設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
flex-start：彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。
flex-end：彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。
center：彈性項(xiàng)目居中緊挨著填充。（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。
space-between：彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-start。否則，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等。
space-around：彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
align-items：設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)? + 度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
flex-wrap：設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行。
nowrap - 默認(rèn)， 彈性容器為單行。該情況下彈性子項(xiàng)可能會(huì)溢出容器。
wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
wrap-reverse -反轉(zhuǎn) wrap 排列。
align-content：修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊。
stretch - 默認(rèn)。各行將會(huì)伸展以占用剩余的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結(jié)束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
flex-flow：flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)
order：設(shè)置彈性盒子的子元素排列順序。
integer：用整數(shù)值來(lái)定義排列順序，數(shù)值小的排在前面。可以為負(fù)值。
align-self：在彈性子元素上使用。覆蓋容器的 align-items 屬性。
auto：如果'align-self'的值為'auto'，則其計(jì)算值為元素的父元素的'align-items'值，如果其沒(méi)有父元素，則計(jì)算值為'stretch'。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
flex：設(shè)置彈性盒子的子元素如何分配空間。
auto: 計(jì)算值為 1 1 auto
initial: 計(jì)算值為 0 1 auto
none：計(jì)算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值。
流式布局與響應(yīng)式布局的區(qū)別：
常用的Flex屬性：
流式布局：使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容，也就是百分比布局，通過(guò)盒子的度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮，不受固定像素的限制，內(nèi)容自動(dòng)填充。
響應(yīng)式布局，利用css3中的Media Query(媒介查詢)，通過(guò)查詢screen的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局 超小屏幕(移動(dòng)設(shè)備):768px以下 小屏設(shè)備：768px-992px;
中屏設(shè)備：992-1200px；
寬屏設(shè)備：1200px以上
由于響應(yīng)式布局開(kāi)發(fā)顯得繁瑣，一般使用第三方響應(yīng)式框架來(lái)完成，比如bootstrap來(lái)完成一部分工作
三欄布局的實(shí)現(xiàn)方式：
常用的Flex屬性：
浮動(dòng)
三欄設(shè)置高度，左右欄固定寬度，并分別設(shè)置左右浮動(dòng)
優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：浮動(dòng)脫離文檔流，需要做清除浮動(dòng)的處理
絕對(duì)定位
父級(jí)元素設(shè)置絕對(duì)定位，左右欄固定寬度，左欄設(shè)置left:0；右欄設(shè)置right:0；中間欄設(shè)置left和right分別為左右欄的寬度
優(yōu)點(diǎn)：快捷，不容易出問(wèn)題
缺點(diǎn)：布局脫離文檔流，子元素也必須脫離文檔流，可使用性較差
Flex布局
父元素設(shè)置display:flex，左右欄固定寬度，中間欄設(shè)置flex:1，占據(jù)剩余空間
優(yōu)點(diǎn)：較為完美，移動(dòng)端布局多屬flex
表格布局
父元素設(shè)置display:table,左右中三欄全部設(shè)置display:table-cell,左右欄固定寬度
優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：操作繁瑣，當(dāng)其中一個(gè)單元格高度變大，其他單元格高度會(huì)隨之變大
網(wǎng)格布局
父元素設(shè)置display:grid，固定寬度，grid-template-rows: 100px;grid-template-columns: 300px auto 300px;優(yōu)點(diǎn)：可以做許多復(fù)雜的事情，代碼比較簡(jiǎn)潔
缺點(diǎn)：新技術(shù)，低版本瀏覽器兼容性不好
