柚子快報邀請碼778899分享：前端面試知識點整理——網(wǎng)絡(luò)

http://yzkb.51969.com/

- [十二、websocket](#websocket_222)

- [十三、前中后序遍歷應(yīng)用](#_234)

- [十四、TCP和UDP的區(qū)別](#TCPUDP_239)

- [十五、http如何保持狀態(tài)](#http_249)

- [十六、http1.0 和 http1.1 的區(qū)別](#http10__http11__256)

- [十七、http1.1 和 http2.0 的區(qū)別](#http11__http20__263)

- [十八、http常見狀態(tài)碼](#http_268)

一、 進程（process）和線程（thread）

進程是 CPU 資源分配的最小單位（是能擁有資源和獨立運行的最小單位）。

線程是 CPU 調(diào)度的最小單位（是建立在進程基礎(chǔ)上的一次程序運行單位）。

現(xiàn)代操作系統(tǒng)都是可以同時運行多個任務(wù)的,比如:用瀏覽器上網(wǎng)的同時還可以聽音樂。 對于操作系統(tǒng)來說,一個任務(wù)就是一個進程,比如打開一個瀏覽器就是啟動了一個瀏覽器進程,打開一個 Word 就啟動了一個 Word 進程。 有些進程同時不止做一件事,比如 Word,它同時可以進行打字、拼寫檢查、打印等事情。在一個進程內(nèi)部,要同時做多件事,就需要同時運行多個“子任務(wù)”,我們把進程內(nèi)的這些“子任務(wù)”稱為線程。 由于每個進程至少要做一件事,所以一個進程至少有一個線程。系統(tǒng)會給每個進程分配獨立的內(nèi)存,因此進程有它獨立的資源。同一進程內(nèi)的各個線程之間共享該進程的內(nèi)存空間（包括代碼段,數(shù)據(jù)集,堆等）。

二、 瀏覽器屬于一種多進程的架構(gòu)

例如，我們默認打開一個tab頁面，就會新建一個進程，不同的tab頁面是不同的進程，因此單個tab頁面的崩潰是不會影響到整個瀏覽器的。 可以充分利用現(xiàn)代CPU多核的優(yōu)勢，但是相應(yīng)的，內(nèi)存和CPU的資源消耗會更大。

瀏覽器的主要進程和職責(zé)：

主進程：負責(zé)瀏覽器界面的顯示與交互。各個頁面的管理,創(chuàng)建和銷毀其他進程。網(wǎng)絡(luò)的資源管理、下載等。 第三方插件進程：每種類型的插件對應(yīng)一個進程，僅當(dāng)使用該插件時才創(chuàng)建。 GPU進程：最多只有一個，用于3D繪制 渲染進程（瀏覽器內(nèi)核）：內(nèi)部是多線程的。主要負責(zé)頁面渲染，腳本執(zhí)行，事件處理等。

GUI渲染線程：負責(zé)渲染界面，解析html、css，構(gòu)建dom樹和render樹，布局和繪制。重繪和回流時，該線程會執(zhí)行JS引擎線程：解析js代碼 注意：GUI渲染線程和JS引擎線程是互斥的。 問：為什么js是單線程的？ 答：如果是多線程就會出現(xiàn)UI操作的沖突，例如，假設(shè)存在兩個線程同時處理一個dom，一個負責(zé)修改一個負責(zé)刪除，那么這時候就需要瀏覽器來裁決如何生效哪個線程執(zhí)行的結(jié)果。這其實可以使用鎖來解決，但是為了避免因為引入鎖帶來更大的復(fù)雜性，js在最初就選擇了單線程。事件觸發(fā)線程、定時器觸發(fā)線程、異步http請求線程：我的理解是他們都是在事件準備好的時候把事件放入任務(wù)隊列當(dāng)中，等待js引擎來執(zhí)行，可以說是用來輔助js引擎工作的

瀏覽器渲染流程：

解析 HTML 文件,構(gòu)建 DOM 樹,同時瀏覽器主進程負責(zé)下載 CSS 文件CSS 文件下載完成,解析 CSS 文件成樹形的數(shù)據(jù)結(jié)構(gòu),然后結(jié)合 DOM 樹合并成 RenderObject 樹布局 RenderObject 樹 （Layout/reflow）,負責(zé) RenderObject 樹中的元素的尺寸,位置等計算繪制 RenderObject 樹 （paint）,繪制頁面的像素信息瀏覽器主進程將默認的圖層和復(fù)合圖層交給 GPU 進程,GPU 進程再將各個圖層合成（composite）,最后顯示出頁面

js是可操作dom和css樣式的，因此不能同時修改元素屬性和渲染界面，因為可能會出現(xiàn)渲染前后數(shù)據(jù)不一致的情況。因此瀏覽器把GUI渲染線程與JS引擎線程互斥，因此在執(zhí)行js時，渲染被阻塞，同樣的，css也會阻塞后面js的執(zhí)行 dom樹和cssom樹是并行構(gòu)建的，因此，css不會阻塞dom的解析 但是render樹的構(gòu)建必須依賴于dom樹和cssom樹，因此，css會阻塞dom的渲染

總結(jié)：css加載會阻塞dom的渲染和后面js的執(zhí)行，js會阻塞dom解析

三、CRP，關(guān)鍵渲染路徑（critical rendering path）

關(guān)鍵渲染路徑是瀏覽器將 HTML CSS JavaScript 轉(zhuǎn)換為在屏幕上呈現(xiàn)的像素內(nèi)容所經(jīng)歷的一系列步驟。也就是我們上面說的瀏覽器渲染流程。 為盡快完成首次渲染,我們需要最大限度減小以下三種可變因素:

關(guān)鍵資源的數(shù)量: 可能阻止網(wǎng)頁首次渲染的資源。 關(guān)鍵路徑長度: 獲取所有關(guān)鍵資源所需的往返次數(shù)或總時間。 關(guān)鍵字節(jié): 實現(xiàn)網(wǎng)頁首次渲染所需的總字節(jié)數(shù),等同于所有關(guān)鍵資源傳送文件大小的總和。

優(yōu)化方案： dom：刪除不必要的代碼和注釋、gzip壓縮文件、http緩存文件 cssom：同上、減少關(guān)鍵css元素數(shù)量、關(guān)注媒體查詢的類型 js：async、defer、動態(tài)創(chuàng)建dom方式、使用setTimeout延遲、讓js最后加載、jquery的getscript（）方法（注意他們的區(qū)別） 總結(jié)：dom和cssom的優(yōu)化都是為了減少渲染的時間，而js延遲是為了防止它阻塞渲染，導(dǎo)致瀏覽器顯示頁面時出現(xiàn)延遲。

四、回流（reflow）與重繪（repaint）

當(dāng) Render Tree 中部分或全部元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時,瀏覽器重新渲染部分或全部文檔的過程稱為回流。 當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility 等）,瀏覽器會將新樣式賦予給元素并重新繪制它,這個過程稱為重繪。

導(dǎo)致回流的操作：頁面首次渲染、瀏覽器窗口大小改變、元素尺寸改變、字體大小改變、刪除添加可見dom元素等等 防止： css：避免使用table布局、在dom樹的最末端改變class、避免設(shè)置多層內(nèi)聯(lián)樣式、將動畫效果應(yīng)用到絕對定位或固定定位的元素上、避免使用calc（） js：避免頻繁操作樣式，一次性更改為宜、可以先把元素設(shè)置為display:none，改完之后再顯示出來、避免頻繁讀取會引發(fā)回流/重繪的屬性，如果需要多次使用，就用一個變量緩存起來、對具有復(fù)雜動畫的元素使用絕對定位,使它脫離文檔流,否則會引起父元素及后續(xù)元素頻繁回流

五、前端性能優(yōu)化

緩存：強緩存、協(xié)商緩存渲染機制方面 原理 js會阻塞dom解析 css會阻塞dom渲染和之后的js執(zhí)行 優(yōu)化方案： dom：刪除不必要的代碼和注釋、gzip壓縮文件、http緩存文件 cssom：同上、減少關(guān)鍵css元素數(shù)量、關(guān)注媒體查詢的類型 js：async、defer、動態(tài)創(chuàng)建dom方式、使用setTimeout延遲、讓js最后加載、jquery的getscript（）方法（注意他們的區(qū)別） 總結(jié)：dom和cssom的優(yōu)化都是為了減少渲染的時間，而js延遲是為了防止它阻塞渲染，導(dǎo)致瀏覽器顯示頁面時出現(xiàn)延遲。回流與重繪方面防抖與節(jié)流方面事件委托圖片懶加載 當(dāng)向下滾動時圖片資源才被請求到，延遲加載，優(yōu)先加載可視區(qū)里面的內(nèi)容 通過滿足offsetTop - scrollTop < clientHeight后再來加載圖片 注意代碼實現(xiàn) 精靈圖

五、圖片格式

JPG/JPEG：兼容性高、傳輸速度快、內(nèi)存小、有損壓縮，存在失真的情況PNG：壓縮不失真、透明背景、漸變圖像GIF： 靜態(tài)的GIF和JPG無異，而動態(tài)的GIF圖片則是由多幅圖片保存為一個圖片形成動畫效果而制成的，圖片質(zhì)量較差BMP：Windows電腦系統(tǒng)的標(biāo)準圖片格式，內(nèi)存較大、未經(jīng)壓縮、保存了每個像素的信息TIF：可以保證圖片在不失真的情況下壓縮，且保留圖片的分層或是透明信息PSD：Photoshop專屬圖片格式SVG：矢量圖，文本文件，體積小，壓縮性更強，圖片可無限放大且不失真，兼容性好WebP：是谷歌開發(fā)的一種新圖片格式，同時支持無損和有損壓縮，具有更小的文件體積 -在無損壓縮的情況下，相同質(zhì)量的WebP圖片，文件大小要比PNG小26%； -在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%； -WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。

六、http與https

https主要是在http的基礎(chǔ)上，利用了SSL/TLS來建立安全信道進行數(shù)據(jù)包的傳輸。https在這個過程中主要使用了對稱加密（有DES、AES等）、非對稱加密（RSA）、哈希算法（MD5）和數(shù)字證書（CA頒發(fā)）等技術(shù)，通過這些技術(shù)保證了數(shù)據(jù)傳輸?shù)耐暾浴C密性和確保了身份認證（防止中間人攻擊）。

SSL握手的過程：

客戶端向服務(wù)器發(fā)送支持的協(xié)議版本號、支持的加密算法和一個隨機數(shù)1服務(wù)端發(fā)送確認要使用的加密算法、隨機數(shù)2，以及自己的數(shù)字證書客戶端驗證這個數(shù)字證書若證書有效，使用證書里面的公鑰來對隨機數(shù)3（預(yù)主密鑰）加密，發(fā)送給服務(wù)端服務(wù)端使用自己的私鑰來解密這個隨機數(shù)3這時候其實客戶端和服務(wù)器端都可以使用約定好的加密算法，來對這三個隨機數(shù)進行加密，生成一個密鑰k，這個k就是之后使用對稱加密進行對話的密鑰值

CA簽發(fā)證書的過程（申請SSL證書）： 我的理解：其實這個數(shù)字證書的目的就是保證了申請人的公鑰的權(quán)威性，避免中間人攻擊

申請者向CA發(fā)送簽名請求，就是想要獲得一個證書認證CA會對這個申請者做一些驗證。通過之后，CA會利用自己的私鑰來對證書生成數(shù)字簽名。 證書中有這樣一些信息：證書頒發(fā)機構(gòu)、證書序列號、有效期、證書簽名算法、申請者的公鑰 、數(shù)字簽名等等

客戶端驗證數(shù)字證書的過程：

客戶端首先會對證書的頒發(fā)機構(gòu)、有效期進行檢查，通過查找操作系統(tǒng)內(nèi)置的受信任的證書發(fā)布機構(gòu)，來確定證書的可信任性。找不到對應(yīng)的機構(gòu)瀏覽器報錯，說明證書不可信任。如果可信任，那么瀏覽器會從操作系統(tǒng)取出CA的公鑰，使用公鑰對數(shù)字簽名進行解密，并與服務(wù)端發(fā)來的報文摘要相比較，如果相同，則證書合法，取出里面的公鑰，用于后序的加密。

七、cdn

八、get、post、put

1、GET方法：對這個資源的查操作。

2、DELETE方法：對這個資源的刪操作。但要注意：客戶端無法保證刪除操作一定會被執(zhí)行，因為HTTP規(guī)范允許服務(wù)器在不通知客

戶端的情況下撤銷請求。

3、HEAD方法：與GET方法的行為很類似，但服務(wù)器在響應(yīng)中只返回實體的主體部分。這就允許客戶端在未獲取實際資源的情

況下，對資源的首部進行檢查，使用HEAD，我們可以更高效的完成以下工作：

在不獲取資源的情況下，了解資源的一些信息，比如資源類型；

通過查看響應(yīng)中的狀態(tài)碼，可以確定資源是否存在；

通過查看首部，測試資源是否被修改；

4、TRACE方法：會在目的服務(wù)器端發(fā)起一個“回環(huán)”診斷，我們都知道，客戶端在發(fā)起一個請求時，這個請求可能要穿過防火墻、代理、網(wǎng)關(guān)、或者其它的一些應(yīng)用程序。這中間的每個節(jié)點都可能會修改原始的HTTP請求，TRACE方法允許客戶端在最終將請求發(fā)送服務(wù)器時，它變成了什么樣子。由于有一個“回環(huán)”診斷，在請求最終到達服務(wù)器時，服務(wù)器會彈回一條TRACE響應(yīng)，并在響應(yīng)主體中攜帶它收到的原始請求報文的最終模樣。這樣客戶端就可以查看HTTP請求報文在發(fā)送的途中，是否被修改過了。

5、OPTIONS方法：用于獲取當(dāng)前URL所支持的方法。若請求成功，則它會在HTTP頭中包含一個名為“Allow”的頭，值是所支持的方法，如“GET, POST”。

區(qū)別：

1、PUT和POST

PUT和POST都有更改指定URI的語義.但PUT被定義為idempotent（冪等的）的方法，POST則不是.idempotent的方法:如果一個方法重復(fù)執(zhí)行多次，產(chǎn)生的效果是一樣的，那就是idempotent的。也就是說：

PUT請求：如果兩個請求相同，后一個請求會把第一個請求覆蓋掉。（所以PUT用來改資源）

Post請求：后一個請求不會把第一個請求覆蓋掉。（所以Post用來增資源）

2、get和post

1、GET參數(shù)通過URL傳遞，POST放在Request body中。

2、GET請求會被瀏覽器主動cache，而POST不會，除非手動設(shè)置。

3、GET請求參數(shù)會被完整保留在瀏覽器歷史記錄里，而POST中的參數(shù)不會被保留。

4、Get 請求中有非 ASCII 字符，會在請求之前進行轉(zhuǎn)碼，POST不用，因為POST在Request body中，通過 MIME，也就可以傳輸非 ASCII 字符。

5、 一般我們在瀏覽器輸入一個網(wǎng)址訪問網(wǎng)站都是GET請求

6、HTTP的底層是TCP/IP。HTTP只是個行為準則，而TCP才是GET和POST怎么實現(xiàn)的基本。GET/POST都是TCP鏈接。GET和POST能做的事情是一樣一樣的。但是請求的數(shù)據(jù)量太大對瀏覽器和服務(wù)器都是很大負擔(dān)。所以業(yè)界有了不成文規(guī)定，（大多數(shù)）瀏覽器通常都會限制url長度在2K個字節(jié)，而（大多數(shù)）服務(wù)器最多處理64K大小的url。

7、GET產(chǎn)生一個TCP數(shù)據(jù)包；POST產(chǎn)生兩個TCP數(shù)據(jù)包。對于GET方式的請求，瀏覽器會把http header和data一并發(fā)送出去，服務(wù)器響應(yīng)200（返回數(shù)據(jù)）；而對于POST，瀏覽器先發(fā)送header，服務(wù)器響應(yīng)100 continue，瀏覽器再發(fā)送data，服務(wù)器響應(yīng)200 ok（返回數(shù)據(jù)）。

8、在網(wǎng)絡(luò)環(huán)境好的情況下，發(fā)一次包的時間和發(fā)兩次包的時間差別基本可以無視。而在網(wǎng)絡(luò)環(huán)境差的情況下，兩次包的TCP在驗證數(shù)據(jù)包完整性上，有非常大的優(yōu)點。但并不是所有瀏覽器都會在POST中發(fā)送兩次包，F(xiàn)irefox就只發(fā)送一次。 ————————————————

九、TCP三次握手和四次揮手

三次握手： 1.建立TCP連接時，客戶端向服務(wù)器端發(fā)送一段TCP報文，標(biāo)志位為SYN，序號為seq = x，并進入SYN_SENT階段 2.服務(wù)器收到TCP報文后，結(jié)束LISTEN階段，并返回一段TCP報文，標(biāo)志位為SYN和ACK，序號為seq = y，確認號為ack = x + 1，進入SYN_RCVD階段。這表明服務(wù)器端確認收到客戶端的連接請求，并同意建立連接。 3.客戶端收到服務(wù)器端的確認報文之后，明確了從客戶端到服務(wù)器端的數(shù)據(jù)傳輸是正常的，結(jié)束SYN-SENT階段，并返回最后一段TCP報文，標(biāo)志位為ACK，序號為seq = x + 1 ，確認號為ack = y + 1，之后客戶端和服務(wù)器端進入ESTABLISHED階段。

四次揮手：

最后

前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔

開源分享：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實項目實戰(zhàn)+最新講解視頻】

器端進入ESTABLISHED階段。

四次揮手：

最后

前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔

開源分享：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實項目實戰(zhàn)+最新講解視頻】

[外鏈圖片轉(zhuǎn)存中…(img-geVab8Ui-1714184213201)]

[外鏈圖片轉(zhuǎn)存中…(img-Fa6rj7fg-1714184213203)]

柚子快報邀請碼778899分享：前端面試知識點整理——網(wǎng)絡(luò)

http://yzkb.51969.com/

文章鏈接