HTML

1. script標簽中的async和defer的區別

當瀏覽器在解析html的時候一旦遇到了script標簽，那么就會停下來把script標簽內的內容給執行掉，如果script標簽引入的是外部文件，就需要等待下載和執行完才會回去繼續往下解析。如果外部文件剛好是在一個網絡情況較差的服務器上，那整個網站的加載都會帶來很大影響。這就是script標簽同步解析帶來的阻塞弊端，從而影響頁面加載性能。

📌async異步 和 defer推遲：兩者都是異步加載js。
不同點：async是js一加載完就會馬上執行，不管html是否解析完畢，可能出現阻塞；而defer要等到html解析完畢之后才執行，不會阻塞html解析。

2. H5新特性

html5是一種描述性的標記語言。

（1 標簽語義化

（2 表單功能增強

可以輸入類型type(如email、date、url、tel)
新屬性和功能：placeholder：輸入框提示文本、required：必填字段、
autofocus：自動聚焦、pattern：正則驗證等

（3 音頻和視頻標簽

添加<audio>和<vedio>標簽
屬性有：autoplay：自動播放（許多瀏覽器已限制）、loop：循環播放
muted：靜音、preload：預加載等

（4 canvas和svg繪畫

（5 地理位置獲取

（6 元素拖動API

• 設置元素 draggable="true"

• 監聽拖動事件：dragstart, drag, dragend

• 定義放置區域并監聽：dragenter, dragover, dragleave, drop

（7 Web Worker

Web Worker 允許在后臺線程中運行 JavaScript，不會阻塞 UI。

（8 Web Storage

• 提供了比 cookies 更強大的客戶端存儲機制。Web Storage 更適合存儲純客戶端的數據，而 Cookie 更適合需要在客戶端和服務器之間傳遞的小量數據（如身份驗證令牌）

• 兩種存儲方式：

  localStorage - 永久存儲，除非手動刪除

  sessionStorage - 會話期間有效，關閉標簽頁后刪除

cookie:

1. 容量小4kb左右，可設置過期時間
2. 是每次 HTTP 請求都會自動攜帶（通過請求頭 Cookie）
   服務器可以通過響應頭 Set-Cookie 設置客戶端的 Cookie
   3.適合使用 Cookie 的情況：
   (1) 需要與服務器交互的小量數據（如會話 ID）
   (2) 需要設置過期時間的場景
   (3) 需要跨子域共享數據的場景

（9 Web Socket

WebSocket 提供了全雙工、持久化的網絡通信協議，適合實時應用。
特點：單個 TCP 連接、低延遲通信、服務器可以主動推送數據

3. 瀏覽器渲染頁面

（1.）主要過程：
- DOM樹構建：渲染引擎解析HTML文檔，將各個元素轉換為DOM節點，從而生成DOM樹
- CSSOM樹構建：解析CSS，將其轉化為CSS對象，組裝構建成CSSOM樹
- 渲染樹構建：DOM樹和CSSOM樹構建完成后，瀏覽器會根據這兩棵樹構建除渲染樹
- 頁面布局：渲染樹完成后，元素的位置關系以及樣式確定，這時瀏覽器會計算出所以元素的大小和絕對位置
- 頁面繪制

4. 重繪和重排

渲染樹是動態構建的，DOM節點和CSS節點的改動都可能會造成渲染樹的重新構建。也就造成頁面的重排（回流）和重繪

• 重排
  當DOM樹中幾何尺寸的變化（如元素大小，位置，布局方式等），這時渲染樹里有改動的節點和受影響的節點都要重新計算。會導致要重新經歷頁面渲染的整個流程，所以開銷很大。

以下操作都會導致頁面重排：

頁面首次渲染； 瀏覽器窗口大小發生變化； 元素的內容發生變化； 元素的尺寸或者位置發生變化； 元素的字體大小發生變化； 激活CSS偽類；
查詢某些屬性或者調用某些方法； 添加或者刪除可見的DOM元素。

• 重繪
  當對DOM修改導致樣式的變化（如顏色，背景色），則無需重新計算，直接為該元素進行繪制。重繪就是對元素繪制屬性的修改。
  相較于重排，省去了布局和分層階段，所以執行效率相對會高。

下面這些屬性會導致重繪：

color、background 相關屬性：background-color、background-image 等； outline
相關屬性：outline-color、outline-width 、text-decoration；
border-radius、visibility、box-shadow。

注意：當觸發重排，一定會觸發重繪；但重繪不一定引發重排