1、HTTP和HTTPS

1.1、http和https的基本概念

http: 是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP），用于從 WWW 服務(wù)器傳輸超文本到本地瀏覽器的超文本傳輸協(xié)議。

https: 是以安全為目標(biāo)的 HTTP 通道，即 HTTP 下 加入 SSL 層進(jìn)行加密。其作

用是：建立一個(gè)信息安全通道，來(lái)確保數(shù)據(jù)的傳輸，確保網(wǎng)站的真實(shí)性。

1.2、?http 和 https 的區(qū)別及優(yōu)缺點(diǎn)？

• http 是超文本傳輸協(xié)議，信息是明文傳輸，HTTPS 協(xié)議要比 http 協(xié)議安全，https 是具有安全性的 ssl 加密傳輸協(xié)議，可防止數(shù)據(jù)在傳輸過(guò)程中被竊取、改變，確保數(shù)據(jù)的完整性(當(dāng)然這種安全性并非絕對(duì)的，對(duì)于更深入的 Web 安全問(wèn)題，此處暫且不表)。
• http 協(xié)議的默認(rèn)端口為 80，https 的默認(rèn)端口為 443。
• http 的連接很簡(jiǎn)單，是無(wú)狀態(tài)的。https 握手階段比較費(fèi)時(shí)，會(huì)使頁(yè)面加載時(shí)間延長(zhǎng) 50%，增加 10%~20%的耗電。
• https 緩存不如 http 高效，會(huì)增加數(shù)據(jù)開(kāi)銷。
• Https 協(xié)議需要 ca 證書(shū)，費(fèi)用較高，功能越強(qiáng)大的證書(shū)費(fèi)用越高。
• SSL 證書(shū)需要綁定 IP，不能再同一個(gè) IP 上綁定多個(gè)域名，IPV4 資源支持不了這種消耗

1.?3、https 協(xié)議的工作原理

客戶端在使用 HTTPS 方式與 Web 服務(wù)器通信時(shí)有以下幾個(gè)步驟：

1. 客戶端使用 https url 訪問(wèn)服務(wù)器，則要求 web 服務(wù)器 建立 ssl 鏈接 。

2. web 服務(wù)器接收到客戶端的請(qǐng)求之后，會(huì) 將網(wǎng)站的證書(shū)（證書(shū)中包含了公鑰），傳輸給客戶端。

3. 客戶端和 web 服務(wù)器端開(kāi)始 協(xié)商 SSL 鏈接的安全等級(jí) ，也就是加密等級(jí)。

4. 客戶端瀏覽器通過(guò)雙方協(xié)商一致的安全等級(jí)， 建立會(huì)話密鑰 ，然后通過(guò)網(wǎng)站的公鑰來(lái)加密會(huì)話密鑰，并傳送給網(wǎng)站。

5. web 服務(wù)器 通過(guò)自己的私鑰解密出會(huì)話密鑰 。

6. web 服務(wù)器 通過(guò)會(huì)話密鑰加密與客戶端之間的通信 。

2、TCP三次握手

1. 第一次握手： 建立連接時(shí)，客戶端發(fā)送 syn 包（ syn=j ）到服務(wù)器，并進(jìn)入 SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)； SYN ：同步序列編號(hào)（Synchronize Sequence Numbers）。

2. 第二次握手： 服務(wù)器收到 syn 包并確認(rèn)客戶的 SYN （ack=j+1）， 同時(shí)也發(fā)送一個(gè)自己的 SYN 包 （syn=k），即 SYN+ACK 包，此時(shí)服務(wù)器進(jìn)入 SYN_RECV 狀態(tài)；

3. 第三次握手： 客戶端收到服務(wù)器的 SYN+ACK 包，向服務(wù)器發(fā)送確認(rèn)包 ACK(ack=k+1 ）， 此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入 ESTABLISHED （TCP 連接成功）狀態(tài)，完成三次握手。

?3、TCP/IP / 如何保證數(shù)據(jù)包傳輸?shù)挠行蚩煽浚?/h3>

對(duì)字節(jié)流分段并進(jìn)行編號(hào)然后 通過(guò) ACK 回復(fù) 和 超時(shí)重發(fā) 這兩個(gè)機(jī)制來(lái)保證。

（1）為了保證數(shù)據(jù)包的可靠傳遞，發(fā)送方必須把已發(fā)送的數(shù)據(jù)包保留在緩沖區(qū)；

（2）并為每個(gè)已發(fā)送的數(shù)據(jù)包啟動(dòng)一個(gè)超時(shí)定時(shí)器；

（3）如在定時(shí)器超時(shí)之前收到了對(duì)方發(fā)來(lái)的應(yīng)答信息（可能是對(duì)本包的應(yīng)答，也可以是對(duì)本包后續(xù)包的應(yīng)答），則釋放該數(shù)據(jù)包占用的緩沖區(qū);

（4）否則，重傳該數(shù)據(jù)包，直到收到應(yīng)答或重傳次數(shù)超過(guò)規(guī)定的最大次數(shù)為止。

（5）接收方收到數(shù)據(jù)包后，先進(jìn)行 CRC 校驗(yàn)，如果正確則把數(shù)據(jù)交給上層協(xié)議，然后給發(fā)送方發(fā)送一個(gè)累計(jì)應(yīng)答包，表明該數(shù)據(jù)已收到，如果接收方正好也有數(shù)據(jù)要發(fā)給發(fā)送方，應(yīng)答包也可方在數(shù)據(jù)包中捎帶過(guò)去。

?4、TCP 和 UDP 的區(qū)別

1. TCP 是面向 鏈接 的，而 UDP 是面向無(wú)連接的。

2. TCP 僅支持 單播傳輸 ， UDP 提供了單播，多播，廣播的功能。

3. TCP 的三次握手保證了連接的 可靠性 ; UDP 是無(wú)連接的、不可靠的一種數(shù)據(jù)傳輸協(xié)議， 首先不可靠性體現(xiàn)在無(wú)連接上，通信都不需要建立連接，對(duì)接收到的數(shù)據(jù)也不發(fā)送 確認(rèn)信號(hào)，發(fā)送端不知道數(shù)據(jù)是否會(huì)正確接收。

4. UDP 的 頭部開(kāi)銷 比 TCP 的更小，數(shù)據(jù) 傳輸速率更高 ， 實(shí)時(shí)性更好 。

?5、HTTP請(qǐng)求跨域問(wèn)題

跨域問(wèn)題指的是在瀏覽器發(fā)起 HTTP 請(qǐng)求時(shí)，由于瀏覽器的安全限制，只允許相同域名、協(xié)議、端口號(hào)之間的請(qǐng)求，而禁止不同域名之間的請(qǐng)求。例如，如果網(wǎng)站 A 的頁(yè)面中使用 JavaScript 向網(wǎng)站 B 發(fā)起 HTTP 請(qǐng)求，由于跨域限制，這個(gè)請(qǐng)求會(huì)被瀏覽器拒絕。

解決跨域問(wèn)題可以采取以下幾種方法：

• JSONP

JSONP 是一種利用 <script> 標(biāo)簽的跨域方法。通過(guò)在頁(yè)面中添加一個(gè) <script> 標(biāo)簽，并將 src 屬性設(shè)置為目標(biāo) URL，服務(wù)器返回的內(nèi)容會(huì)被當(dāng)作 JavaScript 代碼執(zhí)行，從而實(shí)現(xiàn)跨域請(qǐng)求。

缺點(diǎn)：JSON 只支持 get，因?yàn)?script 標(biāo)簽只能使用 get 請(qǐng)求；JSONP 需

要后端配合返回指定格式的數(shù)據(jù)。

• CORS

CORS（Cross-Origin Resource Sharing）是一種基于 HTTP 頭部的跨域解決方案。通過(guò)在服務(wù)器端設(shè)置響應(yīng)頭 Access-Control-Allow-Origin，可以允許指定源的請(qǐng)求訪問(wèn)資源。

• 代理

在客戶端和服務(wù)器之間添加一個(gè)代理層，所有的 HTTP 請(qǐng)求都先經(jīng)過(guò)代理服務(wù)器，再由代理服務(wù)器向目標(biāo)服務(wù)器發(fā)起請(qǐng)求。由于代理服務(wù)器和目標(biāo)服務(wù)器之間沒(méi)有跨域問(wèn)題，因此可以成功地完成請(qǐng)求。

?6、Cookie、sessionStorage、localStorage 的區(qū)別

Cookie、sessionStorage、localStorage 都是瀏覽器端存儲(chǔ)數(shù)據(jù)的方式，但它們之間有以下區(qū)別：

1. 存儲(chǔ)大小：Cookie 最大只能存儲(chǔ) 4KB 的數(shù)據(jù)，而 sessionStorage 和 localStorage 可以存儲(chǔ)更多的數(shù)據(jù)，一般最大可存儲(chǔ)幾十 MB 的數(shù)據(jù)。

2. 生命周期：Cookie 的生命周期由 expires 或 max-age 字段控制，在其生存期內(nèi)有效，可以在不同的頁(yè)面之間共享。相比之下，sessionStorage 只在當(dāng)前會(huì)話（頁(yè)面關(guān)閉后即失效）中有效，而 localStorage 的數(shù)據(jù)則始終有效，除非通過(guò)代碼或用戶手動(dòng)清除。

3. 與服務(wù)器的通信：Cookie 在請(qǐng)求時(shí)會(huì)自動(dòng)攜帶到服務(wù)器端，因此可以用于保存會(huì)話信息等。sessionStorage 和 localStorage 則僅存儲(chǔ)在本地，不會(huì)與服務(wù)器進(jìn)行交互。

4. 安全性：Cookie 的數(shù)據(jù)可以在瀏覽器和服務(wù)器之間傳輸，存在被劫持的風(fēng)險(xiǎn)。相比之下，sessionStorage 和 localStorage 數(shù)據(jù)僅存儲(chǔ)在本地，相對(duì)更加安全。

綜上所述，Cookie、sessionStorage、localStorage 在存儲(chǔ)數(shù)據(jù)的大小、生命周期、與服務(wù)器的通信和安全性等方面不同，使用時(shí)需要根據(jù)具體情況選擇合適的方式。

?7、粘包問(wèn)題分析與對(duì)策

粘包問(wèn)題是指在網(wǎng)絡(luò)傳輸過(guò)程中，對(duì)于多個(gè)數(shù)據(jù)包的發(fā)送，在接收端會(huì)被看成一個(gè)大的數(shù)據(jù)包，導(dǎo)致數(shù)據(jù)處理出錯(cuò)。粘包問(wèn)題的原因一般是由于發(fā)送方和接收方之間的通信協(xié)議不同步導(dǎo)致的。

對(duì)于解決粘包問(wèn)題，主要可以從以下幾個(gè)方面入手：

1. 固定包長(zhǎng)：可以將每個(gè)數(shù)據(jù)包的長(zhǎng)度固定為一個(gè)特定值，例如設(shè)置為 1024 字節(jié)，則每次發(fā)送時(shí)都會(huì)按照這個(gè)長(zhǎng)度進(jìn)行封包，從而避免粘包問(wèn)題的發(fā)生。

2. 添加分隔符：通過(guò)在每個(gè)數(shù)據(jù)包的結(jié)尾加上特殊的分隔符（例如 "\r\n"），接收端就可以根據(jù)分隔符將接收到的數(shù)據(jù)拆分成多個(gè)數(shù)據(jù)包進(jìn)行處理，從而避免粘包問(wèn)題的發(fā)生。

3. 發(fā)送數(shù)據(jù)大小信息：在每個(gè)數(shù)據(jù)包的開(kāi)頭添加一個(gè)表示數(shù)據(jù)包大小的字段，接收端在接收數(shù)據(jù)時(shí)先讀取該字段，并根據(jù)該字段決定本次讀取多少字節(jié)的數(shù)據(jù)，從而避免粘包問(wèn)題的發(fā)生。

4. 使用應(yīng)用層協(xié)議：應(yīng)用層協(xié)議可以定義數(shù)據(jù)包的具體格式，包括包頭、包體等信息，從而確保每個(gè)數(shù)據(jù)包的邊界清晰明確，避免粘包問(wèn)題的發(fā)生。

8、?從輸入 URL 到頁(yè)面加載的全過(guò)程

從輸入 URL 到頁(yè)面加載的全過(guò)程可以概括為以下幾個(gè)步驟：

1. DNS 解析：瀏覽器首先根據(jù) URL 中的域名部分解析出對(duì)應(yīng)的 IP 地址，查詢本地 DNS 緩存，如果不存在則向 ISP 的 DNS 服務(wù)器發(fā)起請(qǐng)求，并遞歸查詢直到查到對(duì)應(yīng)的 IP 地址。

2. TCP 連接：瀏覽器使用 HTTP 協(xié)議向?qū)?yīng)的 Web 服務(wù)器發(fā)送請(qǐng)求時(shí)，需要通過(guò) TCP 協(xié)議建立與 Web 服務(wù)器的連接，包括三次握手和四次揮手等過(guò)程。

3. 發(fā)送 HTTP 請(qǐng)求：在建立好 TCP 連接后，瀏覽器向 Web 服務(wù)器發(fā)送 HTTP 請(qǐng)求，包括請(qǐng)求頭、請(qǐng)求方法、請(qǐng)求參數(shù)等信息。

4. 服務(wù)器處理請(qǐng)求：Web 服務(wù)器接收到瀏覽器發(fā)送的 HTTP 請(qǐng)求后，根據(jù)請(qǐng)求的內(nèi)容進(jìn)行相應(yīng)的處理，包括解析請(qǐng)求參數(shù)、讀取數(shù)據(jù)庫(kù)、處理業(yè)務(wù)邏輯等操作，并將處理結(jié)果返回給瀏覽器。

5. 接收 HTTP 響應(yīng)：瀏覽器接收到 Web 服務(wù)器返回的 HTTP 響應(yīng)后，開(kāi)始解析響應(yīng)頭、解壓縮響應(yīng)體、校驗(yàn)響應(yīng)狀態(tài)碼等。

6. 渲染頁(yè)面：瀏覽器根據(jù)響應(yīng)體中的 HTML、CSS 和 JavaScript 文件開(kāi)始渲染頁(yè)面，包括構(gòu)建 DOM 樹(shù)、解析 CSS 樣式、執(zhí)行 JavaScript 腳本等操作。

7. 頁(yè)面加載完成：當(dāng)頁(yè)面所有資源都下載完成并且解析完畢后，頁(yè)面便加載完成，此時(shí)瀏覽器會(huì)觸發(fā) DOMContentLoaded 事件，通知網(wǎng)頁(yè)已經(jīng)加載完畢，可以開(kāi)始交互。

綜上所述，從輸入 URL 到頁(yè)面加載的全過(guò)程包括 DNS 解析、TCP 連接、發(fā)送 HTTP 請(qǐng)求、服務(wù)器處理請(qǐng)求、接收 HTTP 響應(yīng)、渲染頁(yè)面和頁(yè)面加載完成等多個(gè)階段。在每個(gè)階段中，各種協(xié)議和技術(shù)都發(fā)揮了重要作用，并通過(guò)協(xié)同工作實(shí)現(xiàn)了整個(gè)過(guò)程。

?9、瀏覽器重繪與重排的區(qū)別？?

瀏覽器的重繪（repaint）指的是一個(gè)元素的外觀被改變，但是沒(méi)有改變布局的情況下瀏覽器需要重新繪制這個(gè)元素。例如，修改了文字顏色、背景顏色、邊框顏色等屬性，都會(huì)觸發(fā)瀏覽器的重繪過(guò)程。

而重排（reflow）指的則是因?yàn)樵氐牟季只蛘邘缀螌傩园l(fā)生了改變，導(dǎo)致整個(gè)頁(yè)面布局的重新計(jì)算和繪制。例如，改變了元素的大小、位置、字體等屬性都會(huì)觸發(fā)重排，因?yàn)樗鼈兌紩?huì)影響到其他元素的布局和位置。

重排比重繪更加耗費(fèi)瀏覽器性能，因?yàn)樗粌H會(huì)重新計(jì)算和繪制當(dāng)前元素，還會(huì)涉及到其他元素的計(jì)算和繪制，引起全局性的效果。在優(yōu)化網(wǎng)站性能的時(shí)候，我們應(yīng)該盡量避免觸發(fā)瀏覽器的重排過(guò)程，而通過(guò)合理的 CSS 設(shè)計(jì)和使用一些技巧，可以減少重排的次數(shù)，提高頁(yè)面加載速度和響應(yīng)速度。

10、如何避免重繪或者重排？

為了避免頁(yè)面中的重排和重繪，可以考慮以下幾個(gè)方面來(lái)優(yōu)化頁(yè)面：

1. 使用 CSS transform 代替 top 或者 left 來(lái)進(jìn)行元素的位置移動(dòng)，因?yàn)槭褂?top 和 left 會(huì)導(dǎo)致瀏覽器進(jìn)行頁(yè)面布局的計(jì)算，而使用 transform 進(jìn)行位移則不會(huì)影響到布局的計(jì)算。

2. 使用 CSS opacity 代替 visibility 來(lái)控制元素的顯示和隱藏，因?yàn)槭褂?visibility 屬性會(huì)影響到布局的計(jì)算，而使用 opacity 不會(huì)影響布局。

3. 避免逐條修改 DOM 元素的樣式，而是通過(guò)預(yù)先定義好 class，然后修改 DOM 的 className 來(lái)統(tǒng)一修改樣式。

4. 可以將需要頻繁操作的 DOM 元素先從文檔中移除出來(lái)，再修改其樣式和屬性，最后再把元素加回文檔中，可以避免由于對(duì) DOM 元素頻繁修改而導(dǎo)致的多次重排、重繪等性能問(wèn)題。

5. 使用 CSS3 動(dòng)畫(huà)或者過(guò)渡代替 JavaScript 對(duì)元素樣式的直接操作，因?yàn)槭褂?CSS3 動(dòng)畫(huà)或過(guò)渡可以利用 GPU 加速，使得動(dòng)畫(huà)效果更加流暢。

11、介紹下 304 過(guò)程?

304 是 HTTP 協(xié)議中的一個(gè)狀態(tài)碼，表示請(qǐng)求資源未被修改，可以直接從本地緩存中獲取。

瀏覽器在發(fā)起 HTTP 請(qǐng)求時(shí)，會(huì)先檢查瀏覽器緩存是否有可用的資源副本，如果有則向服務(wù)器發(fā)送一個(gè)條件請(qǐng)求，該請(qǐng)求會(huì)包含一個(gè) If-Modified-Since 頭部，這個(gè)頭部的值是上次請(qǐng)求時(shí)服務(wù)器返回的 Last-Modified 值。如果服務(wù)器端驗(yàn)證發(fā)現(xiàn)這個(gè)時(shí)間之后文件沒(méi)有發(fā)生改變，則會(huì)返回狀態(tài)碼 304 Not Modified，此時(shí)瀏覽器就可以從本地緩存中獲取資源而不需要重新下載。

此外，在請(qǐng)求資源時(shí)，瀏覽器還會(huì)檢查資源的 ETag 和 Cache-Control 頭部信息，如果命中了緩存策略，則同樣返回 304 狀態(tài)碼。

需要注意的是，瀏覽器的緩存機(jī)制依賴于響應(yīng)頭中的各種緩存控制字段，比如 Expires、Cache-Control、Last-Modified 等，需要在服務(wù)器端進(jìn)行正確的配置，才能使得緩存起到良好的性能優(yōu)化作用。?

12、瀏覽器的緩存機(jī)制?強(qiáng)制緩存 && 協(xié)商緩存

瀏覽器的緩存機(jī)制可以分為強(qiáng)制緩存和協(xié)商緩存兩種類型。

• 強(qiáng)制緩存

當(dāng)瀏覽器需要請(qǐng)求某個(gè)資源時(shí)，會(huì)先檢查該資源的緩存情況，并根據(jù)緩存情況來(lái)決定是否需要從服務(wù)器重新獲取資源。如果該資源在瀏覽器中有可用的緩存副本并且沒(méi)有過(guò)期，則瀏覽器會(huì)直接使用該緩存副本，而不需要向服務(wù)器發(fā)送 HTTP 請(qǐng)求。這被稱為“強(qiáng)制緩存”。

強(qiáng)制緩存可以通過(guò)設(shè)置資源的響應(yīng)頭信息來(lái)實(shí)現(xiàn)，常見(jiàn)的設(shè)置方式有兩種：Expires 和 Cache-Control。

• Expires 是一個(gè)絕對(duì)時(shí)間，表示資源的過(guò)期時(shí)間，當(dāng)請(qǐng)求資源時(shí)，如果當(dāng)前時(shí)間未超過(guò) Expires 的值，則直接使用緩存資源。
• Cache-Control 則是一個(gè)相對(duì)時(shí)間，表示資源的有效期，在請(qǐng)求資源時(shí)，如果當(dāng)前時(shí)間距離上次資源請(qǐng)求時(shí)間在 Cache-Control 規(guī)定的時(shí)間范圍內(nèi)，則直接使用緩存資源。

• 協(xié)商緩存

當(dāng)瀏覽器發(fā)現(xiàn)某個(gè)資源的緩存已經(jīng)過(guò)期了，或者沒(méi)有緩存副本可用時(shí)，就需要向服務(wù)器發(fā)送條件請(qǐng)求，詢問(wèn)該資源是否有修改。如果服務(wù)器返回的響應(yīng)中包含了該資源的 ETag 或者 Last-Modified 等標(biāo)識(shí)資源版本的請(qǐng)求頭信息，則瀏覽器可以根據(jù)這些頭信息來(lái)決定是否需要從服務(wù)器重新獲取資源。這種緩存方式被稱為“協(xié)商緩存”。

協(xié)商緩存的邏輯是，瀏覽器在請(qǐng)求資源時(shí)，會(huì)帶上一個(gè) If-None-Match 頭部，該頭部的值就是上一次服務(wù)器返回的 ETag 值；或者帶上一個(gè) If-Modified-Since 頭部，該頭部的值是上次請(qǐng)求時(shí)服務(wù)器返回的 Last-Modified 值。如果服務(wù)器發(fā)現(xiàn)客戶端傳來(lái)的 ETag 或者 Last-Modified 與服務(wù)器上的資源版本相同，則返回 304 Not Modified 狀態(tài)碼，表示資源沒(méi)有修改，讓瀏覽器使用本地緩存。如果資源已經(jīng)被修改，則返回新的資源，并且在響應(yīng)頭中添加新的 ETag 和 Last-Modified 信息。

13、?說(shuō)下進(jìn)程、線程和協(xié)程

進(jìn)程 是一個(gè)具有一定獨(dú)立功能的程序在一個(gè)數(shù)據(jù)集上的一次動(dòng)態(tài)執(zhí)行的過(guò)程， 是操作系統(tǒng)進(jìn)行資源分配和調(diào)度的一個(gè)獨(dú)立單位，是應(yīng)用程序運(yùn)行的載體。進(jìn)程是一種抽象的概念，從來(lái)沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)定義。

線程 是程序執(zhí)行中一個(gè)單一的順序控制流程，是 程序執(zhí)行流的最小單元 ，是處理器調(diào)度和分派的基本單位。一個(gè)進(jìn)程可以有一個(gè)或多個(gè)線程，各個(gè)線程之間共享程序的內(nèi)存空間( 也就是所在進(jìn)程的內(nèi)存空間 ) 。一個(gè)標(biāo)準(zhǔn)的線程由線程 ID 、當(dāng)前指令指針(PC) 、寄存器和堆棧組成。而進(jìn)程由內(nèi)存空間 ( 代碼、數(shù)據(jù)、進(jìn)程空間、打開(kāi)的文件) 和一個(gè)或多個(gè)線程組成。

協(xié)程 ，英文 Coroutines ，是一種 基于線程之上，但又比線程更加輕量級(jí)的存在 ，這種由程序員自己寫(xiě)程序來(lái)管理的輕量級(jí)線程叫做『用戶空間線程』，具有對(duì)內(nèi)核來(lái)說(shuō)不可見(jiàn)的特性

?HTML && CSS

14、HTML5 新特性

HTML5 是一個(gè)用于結(jié)構(gòu)化和呈現(xiàn)萬(wàn)維網(wǎng)內(nèi)容的標(biāo)記語(yǔ)言，與 HTML 4 相比，HTML5 引入了很多新的特性。

一些 HTML5 的新特性：

1. 語(yǔ)義化標(biāo)簽：如 header、footer、nav、section、article 和 aside 等標(biāo)簽，用于更好地描述內(nèi)容。

2. 視頻和音頻：HTML5 引入了 video 和 audio 標(biāo)簽來(lái)支持視頻和音頻播放，從而無(wú)需使用 Flash 或其他插件。

3. Canvas 繪圖：Canvas API 可以在網(wǎng)頁(yè)上實(shí)時(shí)繪制圖形，這對(duì)于游戲和數(shù)據(jù)可視化非常有用。

4. Web 存儲(chǔ)：HTML5 引入了 Web 存儲(chǔ)技術(shù)，如 localStorage 和 sessionStorage，可以在客戶端存儲(chǔ)數(shù)據(jù)。

5. Web Workers：HTML5 中的 Web Workers 允許在主線程之外運(yùn)行 JavaScript 代碼，實(shí)現(xiàn)多線程并發(fā)處理。

6. 地理定位：通過(guò) HTML5 的 Geolocation API，網(wǎng)頁(yè)可以獲取用戶的地理位置信息。

以上只是 HTML5 的一些新特性，還有很多其他的新特性，如表單控件、Web 應(yīng)用程序和離線 Web 應(yīng)用等。

14.1、語(yǔ)義化的優(yōu)點(diǎn)

• ?在沒(méi) CSS 樣式的情況下，頁(yè)面整體也會(huì)呈現(xiàn)很好的結(jié)構(gòu)效果
• ?代碼結(jié)構(gòu)清晰，易于閱讀，
• ?利于開(kāi)發(fā)和維護(hù) 方便其他設(shè)備解析（如屏幕閱讀器）根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)。
• 有利于搜索引擎優(yōu)化（SEO），搜索引擎爬蟲(chóng)會(huì)根據(jù)不同的標(biāo)簽來(lái)賦予不同的權(quán)重

15、?CSS 選擇器及優(yōu)先級(jí)

選擇器

• id 選擇器(#myid)
• 類選擇器(.myclass)
• 屬性選擇器(a[rel="external"])
• 偽類選擇器(a:hover, li:nth-child)
• 標(biāo)簽選擇器(div, h1,p)
• 相鄰選擇器（h1 + p）
• 子選擇器(ul > li)
• 后代選擇器(li a)
• 通配符選擇器(*)

優(yōu)先級(jí)：

• !important
• 內(nèi)聯(lián)樣式（1000）
• ID 選擇器（100）
• 類選擇器/屬性選擇器/偽類選擇器（10）
• 元素選擇器/偽元素選擇器（1）
• 關(guān)系選擇器/通配符選擇器（0）
• 帶!important 標(biāo)記的樣式屬性優(yōu)先級(jí)最高；
• 樣式表的來(lái)源相同時(shí)：!important > 行內(nèi)樣式>ID 選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性

16、?position 屬性的值有哪些及其區(qū)別

• 固定定位 fixed： 元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)。
• Fixed 定 位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。Fixed定位的元素和其他元素重疊。
• 相對(duì)定位 relative：如果對(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ì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那 么它的位置相對(duì)于。absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。 absolute 定位的元素和其他元素重疊。
• 粘性定位 sticky：元素先按照普通文檔流定位，然后相對(duì)于該元素在流中的 flowroot（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 屬性的值。

?17、box-sizing 屬性

?box-sizing 規(guī)定兩個(gè)并排的帶邊框的框，語(yǔ)法為 box-sizing:content-box/border-box/inherit

• content-box：寬度和高度分別應(yīng)用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框?！緲?biāo)準(zhǔn)盒子模型】
• border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒?！綢E 盒子模型】
• inherit：繼承父元素的 box-sizing 值

?18、CSS 盒子模型

?CSS 盒子模型（Box Model）指的是一個(gè) HTML 元素的大小和邊距如何計(jì)算。在 CSS 中，所有的元素都可以看作是盒子，每個(gè)盒子由四個(gè)部分組成：content，padding，border 和 margin。

• 在標(biāo)準(zhǔn)的盒子模型中，width 指 content 部分的寬度。
• 在 IE 盒子模型中，width 表示 content+padding+border 這三個(gè)部分的寬度。

故在計(jì)算盒子的總寬度時(shí)存在差異：

標(biāo)準(zhǔn)盒模型： 一個(gè)塊的總寬度 = width+margin( 左右 )+padding( 左右 )+border( 左右)

怪異盒模型： 一個(gè)塊的總寬度 = width+margin （左右）（既 width 已經(jīng)包含了padding 和 border 值）

19、BFC?

1、BFC 的概念

BFC 是 Block Formatting Context 的縮寫(xiě)，即塊級(jí)格式化上下文。 BFC 是 CSS布局的一個(gè)概念，是一個(gè)獨(dú)立的渲染區(qū)域，規(guī)定了內(nèi)部 box 如何布局， 并且這個(gè)區(qū)域的子元素不會(huì)影響到外面的元素，其中比較重要的布局規(guī)則有內(nèi)部 box垂直放置，計(jì)算 BFC 的高度的時(shí)候，浮動(dòng)元素也參與計(jì)算。

2、BFC 的原理布局規(guī)則

• 內(nèi)部的 Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置
• Box 垂直方向的距離由 margin 決定。屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)
• 生重疊
• 每個(gè)元素的 margin box 的左邊， 與包含塊 border box 的左邊相接觸(對(duì)于從左往右的格式化，否則相反
• BFC 的區(qū)域不會(huì)與 float box 重疊
• BFC 是一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素
• 計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算高度
• 元素的類型和 display 屬性，決定了這個(gè) Box 的類型。不同類型的 Box 會(huì)參與不同的 Formatting Context。

3、如何創(chuàng)建 BFC ？

• 根元素，即 HTML 元素
• float 的值不為 none
• position 為 absolute 或 fixeddisplay 的值為 inline-block、table-cell、table-caption
• overflow 的值不為 visible

4、BFC 的使用場(chǎng)景

• 去除邊距重疊現(xiàn)象
• 清除浮動(dòng)（讓父元素的高度包含子浮動(dòng)元素）
• 避免某元素被浮動(dòng)元素覆蓋
• 避免多列布局由于寬度計(jì)算四舍五入而自動(dòng)換行

20、讓一個(gè)元素水平垂直居中?

1. 使用 display 和 table-cell 屬性，將父元素設(shè)置為 display: table;，子元素設(shè)置為 display: table-cell; vertical-align: middle; text-align: center;，這樣即可實(shí)現(xiàn)水平和垂直居中。
2. 使用絕對(duì)定位 position，將子元素的左上角分別調(diào)整至居中位置，此時(shí)需要將 margin 設(shè)置為負(fù)寬高的一半。我們可以這樣設(shè)置子元素的樣式：position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 即可實(shí)現(xiàn)水平和垂直居中。
3. 使用 flex 布局，將父元素設(shè)置為 display: flex;，并設(shè)置 justify-content: center; align-items:center;，這樣即可實(shí)現(xiàn)水平和垂直居中。
4. 使用 grid 布局，將父元素設(shè)置為 display: grid;，并使用 justify-content: center; align-items:center; 實(shí)現(xiàn)水平和垂直居中。

?21、隱藏頁(yè)面中某個(gè)元素的方法

1. opacity：0，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，并且，如果該元素已經(jīng)綁定 一些事件，如 click 事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件的
2. visibility：hidden，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，但是不會(huì)觸發(fā)該元素已 經(jīng)綁定的事件 ，隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來(lái)的空間（重繪）
3. display：none，把元素隱藏起來(lái)，并且會(huì)改變頁(yè)面布局，可以理解成在頁(yè)面中把該元素。 不顯示對(duì)應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

?22、用 CSS 實(shí)現(xiàn)三角符號(hào)

可以通過(guò)設(shè)置元素的 border 屬性來(lái)實(shí)現(xiàn)三角形的效果。

具體來(lái)說(shuō)，可以將一個(gè)元素的上下左右四個(gè)邊框設(shè)置為一個(gè)寬度為 0 的 border，然后再將其中三個(gè)邊框設(shè)置為非零寬度且透明的 border。這樣就可以在元素的某一側(cè)生成一個(gè)三角形了。

例如，要在一個(gè)元素的左側(cè)生成一個(gè)向右的三角形，可以按如下方式添加 CSS 樣式：

.triangle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent; /* 上邊框，透明 */
  border-bottom: 10px solid transparent; /* 下邊框，透明 */
  border-right: 10px solid red; /* 右邊框，紅色，寬度為 10 像素 */
}

這樣設(shè)置之后，就會(huì)在 .triangle 元素的左側(cè)生成一個(gè)寬度為 0、高度為 0、底部為直線、右側(cè)為斜線的三角形，因?yàn)樯?、下兩個(gè)邊框都是透明的，而右邊框是紅色且有寬度的。

類似地，可以通過(guò)修改上下左右四個(gè)邊框的設(shè)置來(lái)實(shí)現(xiàn)不同方向和不同大小的三角形。

頁(yè)面布局?

23、flex布局?

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。 Flex 是 Flexible Box 的縮寫(xiě)，意為 " 彈性布局 ", 用來(lái)為盒狀模型提供最大的靈活性。 指定容器 display: flex 即可。 簡(jiǎn)單的分為容器屬性和元素屬性。

• flex-direction：決定主軸的方向（即子 item 的排列方法）flex-direction: row |
• row-reverse | column | column-reverse;
• flex-wrap：決定換行規(guī)則 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow： .box { flex-flow: || ; }
• justify-content：對(duì)齊方式，水平主軸對(duì)齊方式
• align-items：對(duì)齊方式，豎直軸線方向
• align-content

?項(xiàng)目的屬性（元素的屬性）：

• order 屬性：定義項(xiàng)目的排列順序，順序越小，排列越靠前，默認(rèn)為 0
• flex-grow 屬性：定義項(xiàng)目的放大比例，即使存在空間，也不會(huì)放大flex-shrink 屬性：定義了項(xiàng)目的縮小比例，當(dāng)空間不足的情況下會(huì)等比例的縮小，如果 定義個(gè) item 的 flow-shrink 為 0，則為不縮小
• flex-basis 屬性：定義了在分配多余的空間，項(xiàng)目占據(jù)的空間。
• flex：是 flex-grow 和 flex-shrink、flex-basis 的簡(jiǎn)寫(xiě)，默認(rèn)值為 0 1 auto。
• align-self：允許單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，可以覆蓋
• align-items，默認(rèn)屬 性為 auto，表示繼承父元素的 align-items 比如說(shuō)，用 flex 實(shí)現(xiàn)圣杯布局

?24、Rem 布局

首先 Rem 相對(duì)于根 (html) 的 font-size 大小來(lái)計(jì)算。

可以快速適用移動(dòng)端布局，字體，圖片高度

① 目前 ie 不支持，對(duì) pc 頁(yè)面來(lái)講使用次數(shù)不多；

② 數(shù)據(jù)量大：所有的圖片，盒子都需要我們?nèi)ソo一個(gè)準(zhǔn)確的值；才能保證不同機(jī)型的適配；

③ 在響應(yīng)式布局中，必須通過(guò) js 來(lái)動(dòng)態(tài)控制根元素 font-size 的大小。也就是說(shuō) css 樣式和 js 代碼有一定的耦合性。且必須將改變 font-size 的代碼放在 css樣式之前。

25、?百分比布局

通過(guò)百分比單位 " % " 來(lái)實(shí)現(xiàn)響應(yīng)式的效果。通過(guò)百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。

直觀的理解，我們可能會(huì)認(rèn)為子元素的百分比完全相對(duì)于直接父元素，height 百分比相對(duì)于 height，width 百分比相對(duì)于 width。 padding、border、margin 等等不論是 垂直方向還是水平方向，都相對(duì)于直接父元素的 width。

除了 border-radius 外，還有比如 translate、background-size 等都是相對(duì)于自身的。

1. 計(jì)算困難
2. 各個(gè)屬性中如果使用百分比，相對(duì)父元素的屬性并不是唯一的。造成我們 使用百分比單位容易使布局問(wèn)題變得復(fù)雜。

26、浮動(dòng)布局

當(dāng)元素浮動(dòng)以后可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它的框或者另外一個(gè)浮動(dòng)元素的邊框?yàn)橹?。元素浮?dòng)以后會(huì)脫離正常的文檔流，所以文檔的普通流中的框就變的好像浮動(dòng)元素不存在一樣。

優(yōu)點(diǎn)

這樣做的優(yōu)點(diǎn)就是在圖文混排的時(shí)候可以很好的使文字環(huán)繞在圖片周圍。另外當(dāng)元素浮動(dòng)了起來(lái)之后，它有著塊級(jí)元素的一些性質(zhì)例如可以設(shè)置寬高等，但它與 inline-block 還是有一些區(qū)別的，第一個(gè)就是關(guān)于橫向排序的時(shí)候，float 可以設(shè)置方向而 inline-block 方向是固定的；還有一個(gè)就是 inline-block 在使用時(shí)有時(shí)會(huì)有空白間隙的問(wèn)題

缺點(diǎn)

最明顯的缺點(diǎn)就是浮動(dòng)元素一旦脫離了文檔流，就無(wú)法撐起父元素， 會(huì)造成父級(jí)元素高度塌陷

?27、如何使用 rem 或 viewport 進(jìn)行移動(dòng)端適配

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-430492.html

• 使用 rem 布局

rem（font size of the root element）是 CSS3 新增的一個(gè)相對(duì)單位，它以根元素的字體大小作為參考值，實(shí)現(xiàn)了在不同設(shè)備和不同分辨率下的網(wǎng)頁(yè)布局一致性。因此使用 rem 布局進(jìn)行移動(dòng)端適配時(shí)，需要將頁(yè)面的寬度設(shè)置為設(shè)置的視窗寬度后，再根據(jù)設(shè)計(jì)稿中的尺寸將像素值轉(zhuǎn)換成 rem 值。

例如，如果設(shè)計(jì)圖的寬度為 750px，要在 iPhone 6 上顯示，則網(wǎng)頁(yè)寬度應(yīng)為 375px（iPhone 6 的屏幕寬度），這時(shí)我們可以將根元素的字體大小設(shè)置為 37.5px，然后按照設(shè)計(jì)圖上的尺寸將像素值除以 37.5 得到轉(zhuǎn)換后的 rem 值。

html {
  font-size: 37.5px;
}

.box {
  width: 100px; /* 在設(shè)計(jì)稿上寬度為 100px */
  height: 100px;
  font-size: 16px; /* 設(shè)計(jì)稿中的字體大小 */
}

rem 適配的優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：沒(méi)有破壞完美視口
• 缺點(diǎn)：px 值轉(zhuǎn)換 rem 太過(guò)于復(fù)雜(下面我們使用 less來(lái)解決這個(gè)問(wèn)題)

• 使用 viewport

Viewport（視口）是指瀏覽器可視區(qū)域的大小，可以通過(guò) meta 標(biāo)簽來(lái)設(shè)置 viewport 的大小和縮放比例等。使用 viewport 進(jìn)行移動(dòng)端適配時(shí)，需要將頁(yè)面的寬度設(shè)置為 device-width，這樣就可以根據(jù)設(shè)備屏幕的寬度來(lái)自動(dòng)適配了。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

設(shè)置好 viewport 后，就可以使用百分比等相對(duì)單位進(jìn)行布局，從而實(shí)現(xiàn)移動(dòng)端適配。

viewport 適配的優(yōu)缺點(diǎn)：

• 在我們?cè)O(shè)計(jì)圖上所量取的大小即為我們可以設(shè)置的像素大小，即所量即所設(shè)
• 缺點(diǎn)破壞完美視口

總結(jié)：

rem 和 viewport 都可以用來(lái)進(jìn)行移動(dòng)端適配，其核心思路是讓頁(yè)面內(nèi)容充滿整個(gè)視窗。使用 rem 布局時(shí)需要將像素值轉(zhuǎn)換成 rem 值，而使用 viewport 時(shí)則直接使用相對(duì)單位進(jìn)行布局即可。

?28、清除浮動(dòng)的方式

• 在父元素中定義 overflow 屬性為 hidden 或 auto，開(kāi)啟bfc
• 設(shè)置高度
• 最后一子元素 寬100%，清除both

.clearfix:after{
? ?content:"";
? ?display:block;
? ?clear:both;
? ?visibility:hidden;
}
// visibility隱藏不會(huì)繼承 opacity可以被繼承 都占用原來(lái)的位置
//display:none 不占用原來(lái)的位置

• 4. 額外標(biāo)簽法：即在浮動(dòng)元素下添加一個(gè)空的塊級(jí)元素并設(shè)置 clear 屬性，從而達(dá)到清除浮動(dòng)的目的。例如：

<div class="parent">
? <div class="float-left">浮動(dòng)元素</div>
? <div style="clear: both;"></div>
</div>

?

?

到了這里，關(guān)于前端面試八股文的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！