前端高頻面試題1：HTML/CSS/瀏覽器/計算機網絡

1.為什么會出現margin塌陷？

2.如何解決margin塌陷？

3.HTML5有哪些新特性？

4.常見的語義化標簽有哪些？語義化標簽的好處？

5.使用css和js做動畫有何優劣

6.如何實現文本超出展示省略號

7.deep在css中存在嗎？

8.xhtml和html的區別

?9.script標簽中defer和async的區別

10.什么是強緩存、協商緩存？?

12.?輸入一個URL到頁面過程中發生了什么

13. DNS解析的過程?

1.為什么會出現margin塌陷？

設計初衷 CSS規范中設定Margin塌陷是為了簡化內容排版。例如，段落（<p>）默認有上下外邊距，若多個段落垂直排列，合并外邊距可使間距更自然（如兩個margin: 20px的段落間距仍為20px，而非40px）。

觸發條件

相鄰兄弟元素：垂直排列的兩個塊級元素，上下邊距相遇時合并。

父元素與子元素：父元素無邊框、內邊距或內容阻隔時，第一個/最后一個子元素的margin可能與父元素的margin合并。

空塊級元素：無內容、內邊距、邊框的元素，上下邊距會合并。

補充：Margin塌陷的規則

合并后的值：取兩個margin中的較大值。若一正一負，則取兩者之和；若均為負，取絕對值較大者。

僅限垂直方向：水平方向的外邊距不會合并。

僅塊級元素：行內元素、浮動元素、絕對定位元素不會觸發。

2.如何解決margin塌陷？

添加阻隔

給父元素設置border或padding（即使border: 1px solid transparent）。

在相鄰元素間添加內容或注釋（如<div style="content: ''"></div>）。

觸發BFC（塊級格式化上下文） BFC會阻止內部元素與外部元素的Margin合并。觸發方式：

設置父元素overflow: hidden/auto。

使用display: flow-root（推薦，無副作用）。

設置float: left/right或position: absolute/fixed。

避免空元素為空元素添加padding、height或最小高度min-height。

替代方案

使用padding代替margin。

使用Flex或Grid布局，避免傳統盒模型的Margin合并。

3.HTML5有哪些新特性？

語義化標簽

媒體標簽（<video>和<audio>）

圖形動畫（Canvas和svg）

表單增強

新輸入類型：email、url、number、date、range、search 等。

新屬性：

placeholder：輸入框提示文本。

required：必填字段驗證。

autocomplete：自動填充建議。

pattern：正則表達式驗證。

本地存儲

Web Storage：客戶端存儲數據，替代 Cookie。

localStorage：永久存儲，直到手動清除。

sessionStorage：會話期間存儲，關閉標簽頁后失效。

IndexedDB：瀏覽器端非關系型數據庫，支持大量數據存儲。

拖放 API

通信與實時交互

WebSocket：全雙工通信協議，支持實時數據傳輸（如聊天應用）。

WebRTC：瀏覽器間直接音視頻通信（如視頻會議）。

4.常見的語義化標簽有哪些？語義化標簽的好處？

語義化標簽：

<header>、<footer>：頁眉和頁腳。

<nav>：導航欄。

<article>：獨立內容塊（如博客文章）。

<section>：文檔中的邏輯分區。

<aside>：側邊欄或附加內容。

<main>：頁面主要內容區域。

<figure> 和 <figcaption>：媒體內容及其標題。

好處：

提升 SEO（搜索引擎優化）

增強可訪問性（Accessibility）

提高代碼可讀性與維護性

5.使用css和js做動畫有何優劣

實現原理

CSS Transform/Animation

瀏覽器優化機制：通過 CSS 的 transform 或 animation 實現的動畫，瀏覽器會在合成器線程（Compositor Thread）中處理，跳過主線程的布局（Layout）和繪制（Paint）階段。

硬件加速：transform 和 opacity 屬性的動畫會被瀏覽器自動優化，觸發 GPU 加速（通過 will-change 或 translateZ 進一步強化），生成獨立的合成層（Composite Layer），避免重排（Reflow）和重繪（Repaint）。

聲明式語法：通過 @keyframes 或 transition 定義動畫，瀏覽器自動插值計算中間幀。

JavaScript 動畫

逐幀控制：通常通過 requestAnimationFrame 或定時器（如 setInterval）逐幀修改元素的屬性（如 left、width 或 transform 值）。

主線程依賴：大多數屬性修改（如 width、margin）會觸發重排和重繪，這些操作在主線程執行，可能被其他任務阻塞，導致卡頓。

手動優化：開發者需要自行處理性能優化，例如批處理 DOM 操作、使用 transform 替代布局屬性等。

性能對比

特性??	??CSS Transform/Animation??	??JavaScript 動畫??
??線程執行??	合成器線程（獨立于主線程）	主線程（可能被阻塞）
??重排/重繪??	無（僅合成階段）	可能觸發（依賴修改的屬性）
??GPU 加速??	自動優化	需手動觸發（如使用 transform）
??幀率穩定性??	高（瀏覽器優化）	低（依賴代碼質量）

優缺點對比

CSS 動畫的優點：

高性能：瀏覽器自動優化，適合簡單動畫（如平移、旋轉、縮放）。

代碼簡潔：聲明式語法實現動畫更簡單（如 transition: transform 0.3s ease）。

流暢性：獨立于主線程運行，不受 JavaScript 任務阻塞。

CSS 動畫的缺點：

控制能力弱：難以實現復雜邏輯（如彈性動畫、路徑跟隨）。

調試困難：動態修改參數需要覆蓋 CSS 類或內聯樣式。

JavaScript 動畫的優點：

精細控制：適合復雜動畫（如物理效果、逐幀滾動、游戲動畫）。

靈活交互：動態調整動畫參數（如暫停、反轉、實時響應事件）。

JavaScript 動畫的缺點：

性能風險：不當使用易導致卡頓（如頻繁修改布局屬性）。

開發成本高：需手動優化性能（如節流、緩存變量）。

?6.如何實現文本超出展示省略號

// 多行文本
.text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 控制顯示的行數 */line-clamp: 2; /* 標準屬性，部分瀏覽器可能不支持 */
}// 單行文本
.single-line {overflow: hidden;      /* 隱藏溢出內容 */white-space: nowrap;   /* 禁止文本換行 */text-overflow: ellipsis; /* 溢出顯示省略號 */width: 200px;         /* 必須設置寬度（或父級有寬度限制） */
}

7.deep在css中存在嗎？

deep是一種vue語法糖，在原生css中不存在，具體寫法如下

語法	推薦程度	兼容性	使用場景
`/deep/`	不推薦	已廢棄	舊版 Vue
`>>>`	不推薦	已廢棄	早期 CSS Modules
`::v-deep`	推薦	Vue 2 和 Vue 3 兼容	Vue 2 或向后兼容
`:deep()`	強烈推薦	Vue 3 標準	Vue 3

8.xhtml和html的區別

XHTML和HTML的主要區別在于語法嚴格性、文件擴展名、標簽和屬性要求以及應用場景等方面。

首先，語法嚴格性是兩者最顯著的區別之一。XHTML要求所有標簽必須閉合，即使是空標簽也需要閉合（例如<br>應寫作<br/>），而HTML則相對寬松，某些情況下標簽可以不閉合。此外，XHTML區分大小寫，標簽和屬性名稱必須使用小寫，而HTML不區分大小寫。XHTML的屬性值必須用引號括起來，無論是單引號還是雙引號都可以使用，而HTML則不需要。

其次，文件擴展名也不同。HTML文件的擴展名可以是.html或.htm，而XHTML文件的擴展名則是.xhtml、.xht或.xml。

在標簽和屬性要求方面，XHTML要求所有標簽必須正確嵌套和閉合，標簽名必須小寫，屬性值必須用引號括起來。例如，正確的XHTML代碼是<img src="img.jpg" /> ，而錯誤的寫法是<img src=img.jpg>。

最后，應用場景方面，XHTML更適合用于需要嚴格結構的應用，如XML處理工具，因為它符合XML規范。而HTML則適用于傳統的Web瀏覽器解析，語法相對寬松，更適合快速開發和部署。

?9.script標簽中defer和async的區別

默認情況：<script>標簽會按照在HTML中的順序執行，下載后同步加載腳本，阻塞頁面加載和渲染

async屬性：腳本會異步下載并執行，不會阻塞頁面加載和渲染，腳本下載完后立即執行，不管其在文檔中的位置。

defer屬性：腳本也會異步下載，但不會立即執行，將在文檔解析完成時，按照在文檔中的順序加載。

10.什么是強緩存、協商緩存？?

強緩存：當瀏覽器請求資源時，首先檢查本地緩存是否命中。如果命中，則直接從緩存中讀取資源，無需向服務器發送任何請求。（返回200）

協商緩存：當強緩存未命中時，瀏覽器會向服務器發送請求，詢問服務器資源是否發生變化。如果服務器告知資源未改變，則瀏覽器從緩存中讀取資源；如果服務器告知資源已改變，則瀏覽器會下載新資源并更新緩存。（返回304）

Cookie:

存儲位置：Cookie存儲在客戶端的瀏覽器中。

生命周期：Cookie可以設置過期時間（Expires或Max-Age），到期后自動刪除；若未設置過期時間，則為會話級（瀏覽器關閉后清除）。

容量限制：一般大小限制為4KB左右。

使用場景：主要用于用戶身份認證（如記住登錄狀態）、保存用戶偏好設置和跟蹤用戶行為（如廣告點擊記錄）。

安全性：容易被劫持（如XSS攻擊），可以通過設置HttpOnly和Secure屬性提高安全性。

登錄狀態：可以在用戶未登錄時使用。

跨頁面：可以跨多個頁面和不同子域共享。

傳輸數據：每次請求都會攜帶 Cookie 數據。

Session:

??高安全性場景：適用于需要保護敏感數據的場景，如在線銀行、支付系統等。

存儲位置：Session存儲在服務端，服務器為每一個用戶創建唯一的會話（Session）。

生命周期：Session存在于用戶活動的會話期間，當用戶退出或者關閉瀏覽器，會話數據就會被刪除。

容量限制：取決于服務器配置。

使用場景：用戶會話管理：用于存儲用戶的會話信息，如購物車數據、用戶權限等。

安全性：相對安全，通過加密的 Session ID 進行識別和驗證，且客戶端不可見。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：通常只能在單個會話期間。

傳輸數據：僅在初始會話時傳輸 Session ID，后續請求不再攜帶全部會話數據。

LocalStorage:

??前端緩存：用于緩存大量數據，提高應用性能和用戶體驗。

存儲位置：存儲在客戶端，瀏覽器內。

生命周期：持久性存儲，除非手動刪除，否則永久有效。

容量限制：一般為 5-10MB，各瀏覽器可能不同。

使用場景：長期數據存儲：適用于存儲長期有效的數據，如用戶偏好設置、瀏覽歷史等。

安全性：易受 XSS 攻擊，數據存儲在客戶端。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：可以在同一域下的所有頁面中共享數據。

傳輸數據：不隨請求發送，僅在客戶端存儲和訪問。

SessionStorage:

??多標簽頁數據隔離：在同一域名下的不同標簽頁之間實現數據隔離，防止數據污染。

存儲位置：存儲在客戶端，瀏覽器內。

生命周期：會話級別，瀏覽器關閉或標簽頁關閉后失效。

容量限制：一般為 5-10MB，各瀏覽器可能不同。

使用場景：臨時數據存儲：適用于存儲會話級別的數據，如表單數據、頁面狀態等。

安全性：易受 XSS 攻擊，數據存儲在客戶端。

登錄狀態：需要用戶登錄后才能創建和訪問會話數據。

跨頁面：手動新建標簽頁無法共享數據，通過鏈接打開新頁面會復制一套原有數據，但與原數據是獨立的。

傳輸數據：不隨請求發送，僅在客戶端存儲和訪問。

12.?輸入一個URL到頁面過程中發生了什么

通過 DNS 解析域名的實際 IP 地址

檢查瀏覽器是否有緩存，命中則直接取本地磁盤的 html，如果沒有命中強緩存，則會向服務器發起請求（先進行下一步的 TCP 連接）

若強緩存和協商緩存都沒有命中，則返回請求結果

然后與 WEB 服務器通過三次握手建立 TCP 連接。期間會判斷一下，若協議是 https 則會做加密，如果不是，則會跳過這一步

加密完成之后，瀏覽器發送請求獲取頁面 html，服務器響應 html，這里的服務器可能是 server、也可能是 cdn

接下來是瀏覽器解析 HTML，開始渲染頁面

構建DOM樹：詞法分析然后解析成DOM樹（dom tree），是由dom元素及屬性節點組成，樹的根是document對象

構建CSS規則樹：生成CSS規則樹（CSS Rule Tree）

構建render樹：Web瀏覽器將DOM和CSSOM結合，并構建出渲染樹（render tree）

布局（Layout）：計算出每個節點在屏幕中的位置

繪制（Painting）：即遍歷render樹，并使用UI后端層繪制每個節點。

13. DNS解析的過程?

瀏覽器緩存：瀏覽器首先檢查自身緩存是否有該域名的IP記錄，若有則直接使用。

系統緩存與Hosts文件：若瀏覽器無緩存，操作系統檢查本地緩存（如Windows的DNS緩存）及Hosts文件，存在記錄則返回。

本地DNS服務器查詢：

用戶配置的本地DNS服務器（如ISP提供的或公共DNS）接收遞歸查詢請求。

若本地DNS有緩存且未過期，直接返回IP；否則開始迭代查詢。

根域名服務器指引：本地DNS向根服務器查詢，根服務器返回管理該頂級域（如.com）的頂級域名服務器地址。

頂級域名服務器指引：本地DNS詢問頂級服務器（如.com服務器），獲取管理目標域（如example.com）的權威服務器地址。

權威域名服務器解析：本地DNS向權威服務器查詢，獲得域名對應的IP（如www.example.com的A記錄），并緩存結果。

結果返回與緩存：本地DNS將IP返回給用戶，瀏覽器緩存該記錄，后續請求可快速響應。?

1.名稱和值（Name and Value）

每個Cookie都有一個名稱和值，名稱和值由服務器設置，并在發送給客戶端時存儲在瀏覽器中。
document.cookie = "username=JohnDoe";
2.域（Domain）

指定Cookie所屬的域。默認情況下，Cookie屬于創建它的域。
document.cookie = "username=JohnDoe; domain=example.com";
3.路徑（Path）

指定Cookie的有效路徑。只有在該路徑下的頁面才能訪問Cookie。
document.cookie = "username=JohnDoe; path=/account";
4.有效期（Expires）

指定Cookie的過期時間。可以設置為特定的日期和時間，超過這個時間后，Cookie將被刪除。
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";
5.最大年齡（Max-Age）

指定Cookie從創建開始的有效時間，以秒為單位。這個屬性比expires屬性更精確。
document.cookie = "username=JohnDoe; max-age=3600";
6.安全性（Secure）

指定Cookie只能通過HTTPS協議發送，確保數據傳輸的安全性。
document.cookie = "username=JohnDoe; secure";
7.HttpOnly

指定Cookie只能通過HTTP協議訪問，客戶端JavaScript無法訪問，增加安全性，防止跨站腳本攻擊（XSS）。
document.cookie = "username=JohnDoe; HttpOnly";
8.SameSite

指定Cookie的SameSite屬性，防止跨站請求偽造（CSRF）攻擊。取值可以是Strict、Lax或None。
document.cookie = "username=JohnDoe; SameSite=Strict";