瀏覽器

宏任務和微任務

Javascript 引擎單線程運行，有宏任務隊列和微任務隊列控制程序執行順序。

Javascript 先按順序執行宏任務隊列，期間產生的新宏任務添加到新一個宏任務隊列，產生的微任務添加到微任務隊列。一個宏任務隊列執行完畢後，執行微任務隊列，期間產生的宏任務添加到新宏任務隊列，產生的微任務添加到當前微任務隊列尾。當前宏任務隊列和微任務隊列都執行結束後，執行下一個宏任務隊列。

宏任務：setTimout，script，IO，渲染微任務：promise，ajax

一個 URL 訪問的過程

DNS 解析
HTTP/HTTPS 請求
獲取數據（HTML 和資源）
渲染頁面和執行腳本

重繪與迴流

當元素的樣式發生變化時，瀏覽器需要觸發更新，重新繪製元素。這個過程中，有兩種類型的操作，即重繪與迴流。

重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時由於只需要 UI 層面的重新像素繪製，因此損耗較少
迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會重新渲染頁面，稱爲迴流。此時，瀏覽器需要重新經過計算，計算後還需要重新頁面佈局，因此是較重的操作。

會觸發迴流的操作:

頁面初次渲染
瀏覽器窗口大小改變
元素尺寸、位置、內容發生改變
元素字體大小變化
添加或者刪除可見的 dom 元素
激活 CSS 僞類（例如：:hover）
查詢某些屬性或調用某些方法：clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、getComputedStyle()、getBoundingClientRect()、scrollTo()

跨域

跨域指一個域名的網頁請求另一個域名的資源。但瀏覽器有同源策略，即一般情況下網頁只能獲取協議、域名、端口號相同域下的資源，在跨域時會有限制：

Cookie、LocalStorage、IndexedDB 等存儲性內容無法讀取
DOM 節點和 Js 對象無法獲得
AJAX 請求被瀏覽器攔截

跨域解決方法：

JSONP
CORS（Cross-origin resource sharing）
postMessge

網絡

HTTP

特點：

可靠傳輸：基於 TCP
無狀態：不保存發送方和接收方信息
靈活可擴展：只規定了基本格式，可以傳輸文本、圖片、音頻等任意數據

HTTP1.1：

持久連接：TCP 連接默認不關閉，可複用
新緩存機制：E-tag、If-Unmodified-Since,、If-Match,、If-None-Match
斷點續傳
新增方法：PUT、PATCH、OPTIONS、DELETE

HTTP2.0：

二進制分幀：徹底二進制傳輸
頭部壓縮
多路複用：同時雙向發送和接收多個請求
服務器推送：服務器主動發送可能需要的資源

狀態碼：

1xx：信息類。表示接受的請求正在處理
2xx：成功
3xx：重定向
4xx：客戶端錯誤
5xx：服務器錯誤

GET 和 POST 的區別：

從緩存角度看，GET 請求後瀏覽器會主動緩存，POST 默認情況下不能。
從參數角度來看，GET 請求一般放在 URL 中，因此不安全，POST 請求放在請求體中，相對而言較爲安全，但是在抓包的情況下都是一樣的。
從編碼角度看，GET 請求只能經行 URL 編碼，只能接受 ASCII 碼，而 POST 支持更多的編碼類型且不對數據類型限值。
GET 請求冪等，POST 請求不冪等，冪等指發送 M 和 N 次請求（兩者不相同且都大於 1），服務器上資源的狀態一致。
GET 請求會一次性發送請求報文，POST 請求通常分爲兩個 TCP 數據包，首先發 header 部分，如果服務器響應 100(continue)，然後發 body 部分。

作者：TianTianUp 鏈接：https://juejin.cn/post/6857287743966281736 來源：掘金著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

緩存

強制緩存：

Expires：絕對過期時間
Cache-Control：相對過期時間

協商緩存：

Last-Modified：上一次修改時間
ETag：資源指紋

統一資源定位符

Uniform Resource Locator(URL)，網絡上標準的資源地址。

格式：scheme://host[:port]/path/…/?query#anchor

含義：

scheme：協議
host：域名或 IP 地址
post：端口號
path：路徑
query：查詢字符串
anchor：錨點

HTTPS

HTTPS 協議由 HTTP 和 SSL/TLS 組合而成。

特點：

非對稱加密傳輸
需要數字證書

Javascript

變量類型

基礎變量類型：

boolean
number
string
undefined
null
symbol
bigint

複合變量類型：

Object
Function

類型判斷

typeof：注意`typeof null === 'object'
instanceof：可以判斷類
Object.prototype.toString

類型轉換

轉 boolean 的規則：

undefined、null、false、NaN、''、0、-0 轉爲false；其他所有值轉爲true。

轉數字的規則：

true轉爲 1，false轉爲 0，null轉爲 0，undefined轉爲NaN，symbol報錯，字符串看內容，如果是數字或者進制值就正常轉，否則就NaN。

對於對象，將其轉換爲數字和字符串時，爲按順序檢查它的 3 個方法：

[Symbol.toPrimitive]
valueOf
toString

如果有那麼調用並將返回值進一步處理（繼續檢查或返回數字或字符串），否則報錯。

運算符：

+：操作數至少有一個是字符串，那麼得到字符串，否則的數字。
-*/：操作數至少有一個數字，那麼得數字。

原型-構造函數-實例

原型：一個對象，爲派生對象提供屬性。構造函數：基於原型新建新對象的函數。實例：由構造函數創建的對象。

new 構造函數() === 實例
構造函數.prototype === 原型
原型.constructor === 構造函數
Object.getPrototypeOf(實例) === 原型

原型是對象，那麼原型也有原型，組成了原型鏈。

基於同一個原型鏈的對象共享相同的原型屬性。查找對象的屬性時，如果對象自身找不到該屬性，則沿着原型鏈向上需找，直至頂級原型對象。修改對象的屬性時，如果對象自身沒有這個屬性，則添加該屬性，不會直接修改原型鏈上的屬性。

new 運算符的執行過程

創建對象
鏈接原型
綁定 this
返回對象

instanceof 原理

能在實例的原型對象鏈中找到該構造函數的 prototype 屬性所指向的原型對象就返回true，否則返回false。

執行上下文

Execution Context（EC）。代碼執行的作用返回和環境。

組成：變量對象，作用域鏈，this指針。分類：全局執行上下文，函數執行上下文，eval執行上下文。

閉包

閉包屬於一種特殊的作用域，稱爲靜態作用域。它的定義可以理解爲: 父函數被銷燬的情況下，返回出的子函數的[[scope]]中仍然保留着父級的單變量對象和作用域鏈，因此可以繼續訪問到父級的變量對象，這樣的函數稱爲閉包。

this 指向

對象調用方法，this 指向對象。
箭頭函數中，this 爲詞法作用域中的 this 指向。
call、apply、bind 處理過的函數，this 指向參數指定的對象。

內存泄漏

原因：

全局變量無法被釋放
定時器未被正確取消，導致所引用的外部變量無法被釋放
事件監聽沒有正確取消 (低版本瀏覽器可能出現)
閉包中父作用域的變量無法被釋放
dom 元素被刪除時，引用未被刪除

DOM 和 BOM

寬高和位置屬性

clientWidth/clientHeight：可視內容寬高，不含邊框和滾動條
offsetWidth/offsetHeight：元素寬高，包含邊框和滾動條
scrollWidth/scrollWidth：內容寬高，不包含邊框和滾動條
offsetLeft/offsetTop：元素與父元素內容區域左/上邊的距離
clientLeft/clientTop：元素與自身邊框外邊沿左/上邊的距離
scrollLeft/scrollLeft：可滾動元素的內容左/上邊沿與元素左/上邊沿的距離

URL 轉義函數

encodeURI 用於轉義整個 URL，不會對下列字符轉義：數字、字母、~ ! @ ## $ & _ ( ) = : / , ; ? + '。 encodeURIComponent 用於轉義查詢字符串，不會對數字、字母、~ ! _ ( ) - _ ' .。

CSS

塊級格式化上下文

Block formatting context（BFC）。表示一個獨立的渲染區域的一個 DOM 元素，使得元素內容和元素外部相互隔離，包括定位、層級等不會相互影響。

比較明顯的特點是：父元素高度包含 float 元素高度。

觸發條件：

根元素
position 爲 absolute 或 fixed
display 爲 inline-block、inline-flex、inline-table、table
float
ovevflow 不爲 visible

層疊上下文

元素有層疊等級，決定了元素在 Z 軸上的排列順序。在一定條件下，元素稱爲層疊上下文元素，其子元素的層疊等級受限於上下文的層疊等級。而層疊上下文於其它層疊上下文元素之間也有層疊等級關係。

層疊等級有一定的規則，從上到下爲：

z-index>0
z-index: auto / z-index: 0
inline/inline-block 水平盒子
float 盒子
block 盒子
z-index < 0
層疊上下文 background/border

創建層疊上下文的方法：

根元素
普通元素設置 position 屬性爲非 static 值並設置 z-index 屬性爲具體數值
CSS3 中的一些新屬性

優先級

從高到低爲：

!important
行內樣式
選擇器優先級
後寫覆蓋先寫

不同的選擇器有不同的權值，一個樣式的選擇器優先級由所有選擇器的權值想加得出。

Web前端常識概覽 - 其實就是面試題知識啦:)

瀏覽器