什么是客戶端和服務(wù)端？ 客戶端：可以向服務(wù)器發(fā)請求，并接收返回的內(nèi)容進行處理 服務(wù)器端：能夠接收客戶端請求，并且把相關(guān)資源信息返回給客戶端的
當(dāng)用戶在地址欄中輸入網(wǎng)址，到最后看到頁面，中間都經(jīng)歷了什么？
后面會詳細(xì)解析每個步驟干的事
一、URL地址解析
A: URI / URL /URN
URI(Uniform Resource ldentifier/統(tǒng)一資源標(biāo)志符)
URL(Uniform Resource Locator /統(tǒng)一資源定位符 )
URN(Uniform Resource Name /統(tǒng)一資源名稱)
B:一個完整URL的組成部分和實際意義
例如：http://www.zhufengpeixun.cn:80/stu/index.html?from=wx&1x=1#zhenyu
- 協(xié)議(http://): 傳輸協(xié)議就是，能夠把客戶端和服務(wù)器端通信的信息，進行傳輸?shù)墓ぞ?類似于快遞小哥)
- http 超文本傳輸協(xié)議，除了傳遞文本，還可以傳遞媒體資源文件(或者流文件)及XML格式數(shù)據(jù)
- https 更加安全的http，一般涉及支付的網(wǎng)站都要采用
- https協(xié)議 (s:ssl 加密傳輸)
- ftp 文件傳輸協(xié)議 (一般應(yīng)用于把本地資源上傳到服務(wù)器端)
2.域名 (www.zhufengpeixun.cn)
3.端口號（:80） : 端口號的取值范圍0~65535，用端口號來區(qū)分同一臺服務(wù)器上的不同項目
- http默認(rèn)端口號: 80
- https默認(rèn)端口號: 443
- ftp默認(rèn)端口號: 21
- 如果項目采用的就是默認(rèn)端口號，我們在書寫地址的時候，不用加端口號，瀏覽器在發(fā)送請求的時候會幫我們默認(rèn)給加上
- 請求資源路徑名稱 (/stu/index.htm1)
- 默認(rèn)的路徑或者名稱 (xxx.com/stu/ 不指定資源名，服務(wù)器會找默認(rèn)的資源，一般默認(rèn)資源名是default.htm1、index.html…當(dāng)然這些可以在服務(wù)器端自己配置)
- 注意偽URL地址的處理 (URL重寫技術(shù)是為了增加SEO搜索引擎優(yōu)化的，動態(tài)的網(wǎng)址一般不能被搜索引擎收錄，所以我們要把動態(tài)網(wǎng)址靜態(tài)化，此時需要的是重寫URL)，例如：https://item.jd.hk/2688449.html => https://item.jd.hk/index.php?id=2688449
- 問號傳參信息 (?from=wx&1x=1)
- 客戶端想把信息傳遞給服務(wù)器，有很多的方式
- URL地址問號傳參
- 請求報文傳輸(請求頭和請求主體)也可以不同頁面之間的信息交互，例如:從列表到詳情
- HASH值 (#zhenyu)
- 也能充當(dāng)信息傳輸?shù)姆绞?/li>
- 錨點定位
- 基于HASH實現(xiàn)路由管控 (不同的HASH值，展示不同的組件和模塊)
C:特殊字符加密和解密
encodeURI / decodeURI
encodeURIComponent / decodeURIComponent
escape /unescape
/*
* 請求的地址中如果出現(xiàn)非有效UNICODE編碼內(nèi)容，現(xiàn)代版瀏覽器會默認(rèn)的進行編碼
* 1. 基于encodeURI編碼，我們可以基于decodeURI解碼，我們一般用encodeURI編碼的是整個URL，這樣整個URL中的特殊字符都會自動編譯
* 2. encodeURIComponent/decodeURIComponent它相對于encodeURI來說，不用于給整個URL編碼，而是給URL部分信息進行編碼（一般都是問號傳參的值編碼）
* 客戶端和服務(wù)器端進行信息傳輸?shù)臅r候，如果需要把請求的地址和信息編碼，我們則基于以上兩種方式處理，服務(wù)器端也存在這些方法，這樣就可以統(tǒng)一編碼解碼了
* 3.客戶端還存在一種方式，針對于中文的編碼方式 escape/unescape，這種方式一般只應(yīng)用于客戶端頁面之間自己的處理，例如：從列表跳轉(zhuǎn)到詳情，我們可以把傳遞的中文信息基于這個編碼，詳情頁獲取編碼后的信息再解碼，再比如我們在客戶端種的cookie信息，如果信息是中文，我們也基于這種辦法編碼...
*/
//=>基于JS實現(xiàn)頁面跳轉(zhuǎn)
link.onclick = function () {
//=>獲取當(dāng)前頁面的URL地址
let url = window.location.href;
//=>跳轉(zhuǎn)頁面
window.location.href = "http://www.zhufengpeixun.cn/stu/?from=" + encodeURIComponent(url);
// window.open("http://www.zhufengpeixun.cn/");
}
二、DNS域名解析
DNS服務(wù)器：域名解析服務(wù)器，在服務(wù)器上存儲著 域名<=>服務(wù)器外網(wǎng)IP 的相關(guān)記錄
- 而我們發(fā)送請求時候所謂的DNS解析，其實就是根據(jù)域名，在DNS服務(wù)器上查找到對應(yīng)服務(wù)器的外網(wǎng)IP
DNS優(yōu)化
- DNS緩存（一般瀏覽器會在第一次解析后，默認(rèn)建立緩存，時間很短，只有一分鐘左右）
- 減少DNS解析次數(shù)（一個網(wǎng)站中我們需要發(fā)送請求的域名和服務(wù)器盡可能少即可）
- DNS預(yù)獲取(dns-prefetch)：在頁面加載開始的時候，就把當(dāng)前頁面中需要訪問其他域名(服務(wù)器)的信息進行提前DNS解析，以后加載到具體內(nèi)容部分可以不用解析了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- DNS預(yù)獲取 -->
<!-- <meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >
<link rel="dns-prefetch" > -->
</head>
<body>
</body>
</html>
三、建立TCP連接（三次握手）
四、發(fā)起HTTP請求
- HTTP請求報文
請求報文：所有經(jīng)過傳輸協(xié)議，客戶端傳遞給服務(wù)器的內(nèi)容，都被成為請求報文
- 起始行
- 請求頭（請求首部）
- 請求主體
- 強緩存、協(xié)商緩存、數(shù)據(jù)緩存
緩存位置：
-
Memory Cache : 內(nèi)存緩存
-
Disk Cache：硬盤緩存
打開網(wǎng)頁：查找 disk cache 中是否有匹配，如有則使用，如沒有則發(fā)送網(wǎng)絡(luò)請求
普通刷新 (F5)：因TAB沒關(guān)閉，因此memory cache是可用的，會被優(yōu)先使用，其次才是disk cache
強制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache，服務(wù)器直接返回 200 和最新內(nèi)容
強緩存【 Expires / Cache-Control】
瀏覽器對于強緩存的處理：根據(jù)第一次請求資源時返回的響應(yīng)頭來確定的
Expires：緩存過期時間，用來指定資源到期的時間（HTTP/1.0）
Cache-Control：cache-control:
max-age=2592000第一次拿到資源后的2592000秒內(nèi)（30天），再次發(fā)送請求，讀取緩存中的信息（HTTP/1.1）兩者同時存在的話，Cache-Control優(yōu)先級高于Expires
協(xié)商緩存【 Last-Modified / ETag】
協(xié)商緩存就是強制緩存失效后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程
數(shù)據(jù)緩存
五、服務(wù)端處理請求并響應(yīng)
- 響應(yīng)報文和HTTP報文
響應(yīng)報文：所有經(jīng)過傳輸協(xié)議，服務(wù)器返回給客戶端的內(nèi)容，都被成為響應(yīng)報文
- HTTP狀態(tài)碼
- 響應(yīng)頭
- 響應(yīng)主體
HTTP報文：請求報文+響應(yīng)報文=>谷歌瀏覽器F12 =>Network（所有客戶端和服務(wù)器端的交互信息在這里都可以看到） =>點擊某一條信息，在右側(cè)可以看到所有的HTTP報文信息
- HTTP狀態(tài)碼
1~5開頭，三位數(shù)字
- 200 OK：成功
- 201 CREATED：一般應(yīng)用于告訴服務(wù)器創(chuàng)建一個新文件，最后服務(wù)器創(chuàng)建成功后返回的狀態(tài)碼
- 204 NO CONTENT：對于某些請求（例如：PUT或者DELETE），服務(wù)器不想處理，可以返回空內(nèi)容，并且用204狀態(tài)碼告知
- 301 Moved Permanently：永久重定向（永久轉(zhuǎn)移）
- 302 Moved Temporarily：臨時轉(zhuǎn)移，很早以前基本上用302來做，但是現(xiàn)在主要用307來處理這個事情，307的意思就是臨時重定向Temporary
Redirect =>主要用于：服務(wù)器的負(fù)載均衡等 - 304 Not Modified：設(shè)置HTTP的協(xié)商緩存
- 400 Bad Request：傳遞給服務(wù)器的參數(shù)錯誤
- 401 Unauthorized：無權(quán)限訪問
- 404 Not Found：請求地址錯誤
- 500 Internal Server Error：未知服務(wù)器錯誤
- 503 Service Unavailable：服務(wù)器超負(fù)荷
六、客戶端接收響應(yīng)，并進行渲染
一個需要注意的地方：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
let link = document.getElementById('link');
console.log(link);//null=>拿不到
</script>
<!-- 遇到link/img/audio/video等是異步去加載資源信息（瀏覽器分配一個新的線程去加載，主線程繼續(xù)向下渲染頁面）,如果遇到的是script或者@import，則讓主線程去加載資源信息（同步），加載完成信息后，再去繼續(xù)渲染頁面 -->
</head>
<body>
<button id="link">我是按鈕</button>
</body>
</html>
1.瀏覽器渲染頁面的步驟
2.DOM的重繪和回流
重繪（repaint）：元素樣式的改變（但寬高、大小、位置等不變）
- 如color、visibility、outline、background-color等
回流（reflow）：元素的大小或者位置發(fā)生了變化（當(dāng)頁面布局和幾何信息發(fā)生變化的時候），觸發(fā)了重新布局，導(dǎo)致渲染樹重新計算布局和渲染
【注意】：回流一定會觸發(fā)重繪，而重繪不一定會回流
3.前端性能優(yōu)化之：避免DOM的回流
1)放棄傳統(tǒng)操作DOM的時代，基于vue、react開始數(shù)據(jù)影響視圖模式
- mvvm / mvc / dom diff …
2)分離讀寫操作（現(xiàn)代的瀏覽器都有渲染隊列的機制）
- offsetTop、offsetWidth、clientTop、clientHeight、scrollTop、getComputedStyle、currentStyle …都會刷新渲染隊列
3)樣式集中改變
- div.style.cssText = ‘width:20px;height:20px;’
+div.className = ‘box’;
4)緩存布局信息
- div.style.left = div.offsetLeft + 1 + ‘px’;
div.style.top = div.offsetTop + 1 + ‘px’;
改為：
var curLeft = div.offsetLeft ;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + ‘px’;
div.style.top = curTop + 1 + ‘px’;
5)元素批量修改
- 文檔碎片：creatDocumentFragment
- 模板字符串拼接
6)動畫效果應(yīng)用到position屬性為absolute或fixed的元素上（脫離文檔流）
7)CSS3硬件加速（GPU加速）
- 比起考慮如何減少回流重繪，我們更期望的是，根本不要回流和重繪：transform、opacity、filters…這些屬性會觸發(fā)硬件加速，不會引發(fā)回流和重繪
- 可能引發(fā)的坑：過多使用會占用大量內(nèi)存，性能消耗嚴(yán)重，有時候會導(dǎo)致字體模糊等
8)犧牲平滑度換取速度
9)避免table布局和使用css的JavaScript表達式
減少DOM的回流：文章來源：http://www.zghlxwxcb.cn/news/detail-776629.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>減少DOM回流-珠峰培訓(xùn)</title>
<style>
.box {
margin: 20px auto;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
/* for (let i = 0; i < 10; i++) {
let span = document.createElement('span');
span.innerHTML = i;
box.appendChild(span);
} */
/* let str = ``;
for (let i = 0; i < 10; i++) {
str += `<span>${i}</span>`;
}
box.innerHTML = str; */
//=>文檔碎片：存儲文檔的容器
/* let frg = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
let span = document.createElement('span');
span.innerHTML = i;
frg.appendChild(span);
}
box.appendChild(frg);
frg = null; */
</script>
<script>
/* 批量設(shè)置樣式 */
// box.className = 'box';
// box.style.cssText = "margin: 20px auto;width: 100px;height: 100px;background: red;";
</script>
<script>
/* DOM操作的讀寫分離 */
//=>現(xiàn)代版瀏覽器都有“渲染隊列”機制：發(fā)現(xiàn)某一行要修改元素的樣式，不立即渲染，而是看看下一行，如果下一行也會改變樣式，則把修改樣式的操作放到“渲染隊列中”...一直到不在是修改樣式的操作后，整體渲染一次，引發(fā)一次回流
//=>offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeightscrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle....會刷新渲染隊列
// box.style.width = '100px';
// box.style.height = '100px';
// box.style.background = 'red';
// box.style.margin = '20px auto';
// box.style.width = '100px';
// box.style.height = '100px';
// box.style.background = 'red';
// box.style.margin = '20px auto';
// console.log(box.offsetWidth);
// console.log(box.offsetHeight);
</script>
</body>
</html>
七、和服務(wù)端斷開TPC連接(四次揮手)
文章來源地址http://www.zghlxwxcb.cn/news/detail-776629.html
到了這里，關(guān)于客戶端和服務(wù)端信息交互模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
