【JavaScript】高頻面試題-在地址欄輸入網址以後都幹了什麼?

時間 2020-05-14

標籤 JavaScript 高頻面試地址輸入網址以後幹了什麼欄目 JavaScript 简体版

原文原文鏈接

1. 客戶端、服務器端

客戶端：能夠向服務器發請求，並接收返回的內容進行處理
服務器端：可以接收客戶端請求，而且把相關資源信息返回給客戶端的

=> 當前電腦既能夠充當服務端又能夠充當客戶端。所以，如何區分是服務端仍是客戶端：不是針對於某一臺機器的，而是針對於功能、需求的javascript

2. 地址欄輸入網址以後都發生了哪些操做？

請求階段
- URL地址解析
- DNS域名解析
- 客戶端與服務端創建TCP鏈接（三次握手）
- 把客戶端信息傳遞給服務器端（發送HTTP請求）
- 服務器獲得並處理請求（HTTP響應內容）
響應階段
- 客戶端渲染服務器返回的內容
- 和服務端斷開TCP鏈接（四次揮手）

2.1 URL/URI地址解析

2.1.1 URL/URI/URN

URI（Uniform Resource Identifier）：統一資源標識符，URL和URN是URI的子集
URL（Uniform Resource Locator）：統一資源定位符，根據這個地址能找到對應的資源
URN（Uniform Resource Name）：統一資源名稱，通常指國際上通用的（標準的）名字（例如：國際統一發版的編號）不經常使用

2.2.2 一個完整的URL所包含的內容

❝
http://www.baidu.com/s?wd=index&name=ll#hashphp
❞

「協議 (http://):」 傳輸協議就是，可以把客戶端和服務端通訊的信息，進行傳輸的工具（相似於快遞員）css

http：超文本傳輸協議，除了傳遞文本以外，還能夠傳遞媒體資源文件(或者流文件）及XML格式數據
https：更加安全的HTTP，通常涉及支付的網站都要採用https協議（支付寶、淘寶、天貓、GitHub、百度等網站），s是SSL，加密傳輸
ftp：文件上傳協議（大資源的東西），通常應用於把本地資源上傳或下載到服務器端
- filezilla：ftp上傳工具，經過這個工具基於ftp傳輸協議，能夠把本地的文件上傳到服務器上

「域名(www.baidu.com):」 一個讓用戶方便記憶的名字html

頂級域名 qq.com 買域名買的就是頂級域名-萬網
一級域名 www.qq.com
二級域名 sports.qq.com
三級域名 kbs.sports.qq.com
.com 國際域名
.cn 中文域名
.com.cn
.edu 教育
.gov 政府
.io 博客
.org 官方組織
.net 系統類

「端口號(80):」 端口號的取值範圍0~65535，使用端口號來區分同一臺服務器上的不一樣項目前端

http默認端口號是80
https默認端口號是443
ftp默認端口號是21
若是項目採用的就是默認端口號，咱們在書寫地址的時候，不用加端口號，瀏覽器在發送請求的時候會幫咱們默認給加上

「請求資源路徑名稱(/s)：」vue

默認的路徑名稱或者名稱(xxx.com/stu/ 不指定資源名，服務器會找默認的資源，通常默認資源名稱是default.html / index.html...固然這些能夠在服務器端本身配置，若是都不寫，找不到會顯示404)java
注意僞URL地址的處理：(URL重寫技術是爲了增長SEO搜索引擎優化的，動態的網址通常不能被搜索引擎收錄，因此咱們要把網址靜態化，此時須要的是重寫URL)react
```
舉例：https://item.jd.hk/23457607363.html=>它可能改寫的是這個網址 https://item.jd.hk/index.php?id=23457607363
複製代碼
```

「問號傳參信息( ?wd=index&name=ll)」web

客戶端想把信息傳遞給服務器，有不少的方式
URL地址的問號傳參
請求報文傳輸（請求頭和請求主體）
也能夠實現不一樣頁面之間的信息交互，例如：從列表到詳情

「HASH值(#hash)」後端

也能夠充當信息傳輸的方式
錨點定位
基於HASH實現路由管控(不一樣的HASH值，展現不一樣的組件和模塊)

2.2.3 URL的字符編碼

請求地址中若是出現非有效Unicode編碼內容，現代版瀏覽器會默認的進行編碼

基於encodeURI編碼，咱們能夠基於decodeURI解碼，咱們通常用encodeURI編碼的是整個URL，這樣整個URL中的特殊字符都會自動編譯
encodeURIComponent / decodeURIComponent它相對於encodeURI來講，不用於給整個URL編碼，而是給URL部分信息進行編碼（通常都是問號傳參的值編碼）

=> 客戶端和服務端進行信息傳輸的時候，若是須要把請求的地址和信息編碼，咱們則基於以上兩種方式處理，服務器端也存在這些方法，這樣就能夠統一編碼解碼了

客戶端還存在一種方式，針對於中文的編碼方式 escape / unescape，這種方式通常只應用於客戶端頁面之間本身的處理，例如：從列表跳轉到詳情，咱們能夠把傳遞的中文信息基於這個編碼，詳情頁獲取編碼後的信息再解碼，再好比咱們在客戶端種的cookie信息，若是信息是中文，咱們也基於這種辦法編碼...

2.2 DNS服務器域名解析

DNS服務器：域名解析服務器，在服務器上存儲着域名<=>服務器外網IP 的相關記錄而咱們發送請求時候所謂的DNS解析，其實就是根據域名在DNS服務器上查找到對應服務器的外網IP

2.2.1 DNS優化

DNS緩存：通常瀏覽器會在第一次解析後，默認創建緩存，時間很短，只有一分鐘左右
減小DNS解析次數：一個網站中咱們須要發送請求的域名和服務器儘量少便可
DNS預獲取(dns-prefetch)：在頁面加載開始的時候，就把當前頁面中須要訪問其餘域名（服務器）的信息進行提早DNS解析，之後加載到具體內容部分能夠不用解析了

<!DOCTYPE html>
<html> <head>  <meta charset="UTF-8">  <!-- DNS預獲取 -->  <!-- <meta http-equiv="x-dns-prefetch-control" content="on">  <link rel="dns-prefetch" href="//static.360buyimg.com">  <link rel="dns-prefetch" href="//misc.360buyimg.com">  <link rel="dns-prefetch" href="//img10.360buyimg.com">  <link rel="dns-prefetch" href="//img11.360buyimg.com">  <link rel="dns-prefetch" href="//img12.360buyimg.com"> -->  <title>AJAX</title>  <script>  // let link = document.getElementById('link');  // console.log(link);  </script> </head> 複製代碼

2.3 創建TCP鏈接（三次握手）

關於三次握手以及下面的四次揮手，能夠看掘金上這位博主的：三次握手

2.4 發送HTTP請求

http事務 / http請求：都是指的一次完整的http請求（請求+響應）

2.4.1 HTTP報文

谷歌瀏覽器中F12 => network(全部客戶端和服務器端的交互信息在這裏均可以看到) => 點擊某一條信息，在右側能夠看到全部的HTTP

請求報文：全部通過傳輸協議，客戶端傳遞給服務器的內容，都被稱爲請求報文
- 起始行
- 請求頭：前端設置的有些是默認設置，也能夠前端本身設置；
- 請求主體
響應報文：全部通過傳輸協議，服務器返回給客戶端的內容，都被稱爲響應報文
- HTTP狀態碼
- 響應頭：是後臺給的前端沒辦法修改
- 響應主體
HTTP報文：請求報文 + 響應報文

2.4.2 強緩存與協商緩存

「強緩存」 這種請求是到不了後臺的；直接是從本地緩存中獲取資源而後相應這個請求

Expires: 過時時間，在這個過時時間以內的請求，都會直接從本地緩存獲取資源；
cache-control: max-age=3600 ； max-age 緩存的有效時間；3600秒

「協商緩存」 協商緩存：若是沒有命中強緩存，纔會有可能走協商緩存，

確實是去後臺要東西了；可是後臺告訴前端，這個請求可使用緩存的內容；（304）
etag/if-none-match :etag是後端生成的一個字符串；那麼下一次請求的時候瀏覽器會在請求頭中添加一個if-none-match 的屬性
- 這個屬性對應的值就是後臺給的etag對應的值
last-modified/if-modified-since : last-modified 後端生成的一個時間，其實就是當前請求對應的內容最後一次更改的時間，下一次請求，請求頭中會帶上 if-modified-since這個屬性值是 last-modified 對應的值；

2.5 服務器獲得並處理請求（HTTP響應內容）

2.5.1 HTTP狀態碼

1~5開頭，三位數字，其中1開頭的出現頻率極低。

200 OK：成功
201 CREATED：通常應用於告訴服務器建立一個新文件，最後服務器建立成功後返回的狀態碼
204 NO CONTENT：對於某些請求（例如：PUT或者DELETE），服務器不想處理，能夠返回空內容，而且用204狀態碼告知
301 Moved Permanently：永久重定向（永久轉移）
302 Moved Temporarily：臨時轉移，很早之前基本上用302來作，可是如今主要用307來處理這個事情，307的意思就是臨時重定向Temporary Redirect =>主要用於：服務器的負載均衡等
304 Not Modified：設置HTTP的協商緩存
400 Bad Request：傳遞給服務器的參數錯誤
401 Unauthorized：無權限訪問
404 Not Found：請求地址錯誤
500 Internal Server Error：未知服務器錯誤
503 Service Unavailable：服務器超負荷

2.6 客戶端渲染服務器返回的內容

2.6.1 同步異步加載

遇到link/img/audio/video等是異步去加載資源信息（瀏覽器分配一個新的線程去加載，主線程繼續向下渲染頁面）,若是遇到的是script或者@import，則讓主線程去加載資源信息（同步），加載完成信息後，再去繼續渲染頁面

2.6.2 瀏覽器渲染頁面的步驟

處理 HTML 標記，構建 DOM 樹
處理 CSS 標記，構建 CSSOM 樹
將 DOM 樹和 CSSOM 樹融合成渲染樹
根據生成的渲染樹，計算它們在設備視口(viewport)內的確切位置和大小，這個計算的階段就是迴流 => 佈局（Layout）或重排（reflow）
根據渲染樹以及迴流獲得的幾何信息，獲得節點的絕對像素 => 繪製（painting）或柵格化（rasterizing）

2.6.3 DOM的重繪與迴流(重排)

重繪：元素樣式的改變（但寬高、大小、位置等不變）
迴流：元素的大小或者位置發生了改變（當頁面佈局和幾何信息發生變化的時候），觸發了從新佈局，致使渲染樹從新計算佈局和渲染
注意：迴流必定會觸發重繪，而重繪不必定會迴流

2.6.4 前端性能優化：避免DOM的迴流

放棄傳統操做DOM的時代，基於vue/react開始數據影響視圖模式
分離讀寫操做（現代瀏覽器都有渲染隊列的機制）
- 發現某一行要修改元素的樣式，不當即渲染，而是看看下一行，若是下一行也會改變樣式，則把修改樣式的操做放到「渲染隊列中」...一直到不在是修改樣式的操做後，總體渲染一次，引起一次迴流
- offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeightscrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle....會刷新渲染隊列
樣式集中改變
緩存佈局信息
元素批量修改
動畫效果應用到position屬性爲absolute或fixed的元素上（脫離文檔流）
CSS3硬件加速（GPU加速）
犧牲平滑度換取速度
避免table佈局和使用css的javascript表達式