HTTP和前后端分離-有解無憂

一、當用戶在瀏覽器地址欄中輸入網址，到看到頁面，經歷的步驟

tips：hexo自己搭一個博客
在這里插入圖片描述

1.決議輸入的URL地址

傳輸協議（把資訊在客戶端和服務器端進行傳遞，類似于快遞小哥）
- http 超文本傳輸協議（傳輸的內容除了文本，還有可能是其它型別：二進制編碼、BASE64碼、檔案流等等）
- https 比HTTP更加安全的傳輸協議（傳輸通道設定加密演算法SSL），一般支付類網站都是HTTPS協議
- ftp 資源上傳協議，一般應用于把本地檔案直接上傳到服務器端
域名 zhufengpeixun.cn
- 一級域名 www.zhufengpeixun.cn
- 二級域名 video.zhufengpeixun.cn
- 三級域名 webG.video.zhufengpeixun.cn
- 常用域名性質：.com國際 / .cn中國 / .gov政府 / .org官方 / .net系統 / .io博客 / .vip ...
埠號（根據埠號，找到當前服務器上指定的服務）
- 0~65535之間
- 不同協議有自己默認的埠號（也就是自己不用寫，瀏覽器會幫我們加上）
  - http => 80
  - https => 443
  - ftp => 21
  - 除這幾個在書寫的時候可以省略，其余的不能省
請求資源的路徑和名稱
- /stu/index.html
  - 一般情況下，如果我們訪問的是index.html等，可以省略不寫（因為服務端一般會設定index.html為默認檔案，當然可以自定義）
- 偽URL
  - SEO優化 https://item.jd.com/100006038463.html
  - 資料請求的介面地址 /user/list
問號傳參部分 ?xxx=xxx
- 客戶端基于GET系列請求，把資訊傳遞會服務器，一般都會基于問號傳參的模式
- 頁面之間跳轉，資訊的一些通信也可以基于問號傳參的方式（單頁面中組件和組件跳轉之間的資訊通信，也可能基于問號傳參）
- 關于傳遞的內容需要進行編碼處理（處理特殊字符和中文）
  - encodeURI / decodeURI
  - encodeURIComponent / decodeURIComponent
  - escape / unescape
  - ...
  - encodeURI / decodeURI：只能把空格和中文內容進行編碼和解碼，所以一般應用這種模式處理整個URL的編碼
  - encodeURIComponent / decodeURIComponent：匯報所有的特殊字符和漢字都進行編碼，一般不會整個URL編碼，只會給傳遞的每一個引數值單獨編碼
  - escape / unescape：這種方式不一定所有的后臺都有，所以一般只應用于客戶端自己內部編碼，例如：存盤cookie資訊，把存盤的中文進行編碼和解碼；特殊符號也會被編碼；
設定哈希HASH #xxx

2.DNS決議

網站中，每發送一個TCP請求，都要進行DNS決議（一但當前域名決議過一次，瀏覽器一般會快取決議記錄，快取時間一般在1分鐘左右，后期發送的請求如果還是這個域名，則跳過決議步驟 =>這是一個性能優化點）

真實專案中，一個大型網站，他要請求的資源是分散到不同的服務器上的（每一個服務器都有自己的一個域名決議）

WEB服務器（處理靜態資源檔案，例如：html/css/js等的請求）
資料服務器（處理資料請求）
圖片服務器（處理圖片請求）
音視頻服務器
......
這樣導致，我們需要決議的DNS會有很多次

優化技巧：DNS Prefetch 即 DNS 預獲取
讓頁面加載（尤其是后期資源的加載）更順暢更快一些

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href=https://www.cnblogs.com/smilestudio/p/"//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">

3.基于TCP的三次握手，夠建客戶端和服務器端的連接通道

只有建立好連接通道，才能基于HTTP等傳輸協議，實作客戶端和服務器端的資訊互動

在這里插入圖片描述

4.發送HTTP請求

基于HTTP等傳輸協議，客戶端把一些資訊傳遞給服務器

HTTP請求報文（所有客戶端傳遞給服務器的內容，統稱為請求報文）
- 谷歌控制臺NetWork中可以看到
- 請求起始行
- 請求首部（請求頭）
- 請求主體
強快取和協商快取（性能優化：減少HTTP請求的次數）
- 強快取 ( Cache-Control 和 Expires )
- 協商快取 ( Last-Modified 和 Etag )

5.服務器接受到請求，并進行處理，最后把資訊回傳給客戶端

HTTP回應報文（所有服務器回傳給客戶端的內容）
- 回應起始行
- 回應首部（回應頭）
  - date存盤的是服務器的時間
  - ...
- 回應主體
- 服務器回傳的時候是：先把回應頭資訊回傳，然后繼續回傳回應主體中的內容（需要的資訊大部分都是基于回應主體回傳的）

6.斷開TCP鏈接通道（四次揮手）

在這里插入圖片描述

當客戶端把請求資訊發送給服務器的時候，就揮第一次手：客戶端告訴服務器端，我已經把請求報文都給你了，你準備關閉吧
第二次揮手：由服務器發起，告訴瀏覽器，我接收完請求報文，我準備關閉，你也準備吧；
第三次揮手：由服務器發起，告訴瀏覽器，我回應報文發送完畢，你準備關閉吧；
第四次揮手：由瀏覽器發起，告訴服務器，我回應報文接收完畢，我準備關閉，你也準備吧；

Connection: Keep-Alive 保持TCP不中斷（性能優化點，減少每一次請求還需要重新建立鏈接通道的時間）

7.客戶端渲染服務器回傳的結果

二、前端性能優化點

1. 減少HTTP請求的次數和大小

合并壓縮 webpack（代碼比較少的情況下，盡可能使用內嵌式）
雪碧圖或者圖片BASE64
盡量使用字體圖示
對于動態獲取的圖片，采用圖片懶加載（資料也做異步分批加載：開始只請求加載第一屏的資料，滑動到第幾屏在加載這一屏的資料和圖片）
- 骨架屏技術（首屏內容由服務器渲染；再或者開始展示占位結構，客戶端在單獨獲取資料渲染；）
音視頻取消預加載（播放的時候再去加載音視頻檔案，對于自動播放采取延遲播放的處理）
服務器采用GZIP壓縮

2.建立快取機制

把一些請求回來的資訊進行本地存盤（快取存盤），在快取有效期內，再次請求資源，直接從快取中獲取資料，而不是服務器上從新拉取

DNS預獲取
資源檔案的強快取和協商快取（304）
資料也可以做快取（把從服務器獲取的資料存盤到本地：cookie/localStorage/redux/vuex等，設定期限，在期限內，直接從本地獲取資料即可）
離線存盤（一般很少用）manifest
CDN區域分布式服務器開發部署（費錢效果會非常的好）
....

3.代碼上的優化

減少DOM的重繪和回流
在JS中盡量減少閉包的使用（記憶體優化）
在JS中避免“嵌套回圈”和“死回圈”
盡可能使用事件委托
盡量減少CSS運算式的使用(expression)
CSS選擇器決議規則是從右向左決議（基于less/sass開發的時候盡可能減少層級嵌套，目的是讓選擇器的前綴短一點）【 a{} 和 .box a{}】
盡可能實作JS的封裝（低耦合高內聚），減少頁面中的冗余代碼
在CSS匯入的時候盡量減少使用@import匯入式
使用window.requestAnimationFrame（JS中的幀影片）代替傳統的定時器影片（能用CSS3影片的絕對不用JS影片）
減少遞回的使用，避免死遞回，避免由于遞回導致的堆疊記憶體嵌套
基于SCRIPT調取JS的時候，可已使用 defer或者async 來異步加載
……

4.安全優化

5.webpack上的優化

三、AJAX基礎知識

AJAX：async javascript and xml 異步的JS和XML

XML（最早的時候，基于AJAX從服務器獲取的資料一般都是XML格式資料，只不過現在基本上都是應用更小巧、更方便操作的JSON格式處理）
- HTML 超文本標記語言
- XHTML 嚴謹的HTML
- XML 可擴展的標記語言（基于標簽結構存盤資料）
異步的JS（基于AJAX實作區域重繪）
- 服務器渲染（一般都是同步：全域重繪）全靠服務器決議資料和界面，壓力大
- 客戶端渲染（一般都是異步：區域重繪）

發送AJAX請求有四步操作

1.創建一個XHR物件
- 不兼容XMLHttpRequest的瀏覽器使用ActiveXObject創建
2.打開請求連接（配置請求資訊）
- xhr.open([METHOD],[URL],[ASYNC],[USER-NAME],[USE-PASS])
- [METHOD]請求方式
- GET系列：從服務器獲取 POST系列：向服務器發送資訊
- [ASYNC]是否為異步請求，默認是true，也就是異步，設定為false代表當前請求任務為同步（專案中基本上都采用異步請求）
- [USER-NAME],[USE-PASS] 向服務器發送請求所攜帶的用戶名密碼，只有在服務器設定了安全來賓賬號的情況下需要（一般不用）
3.監聽請求狀態，在不同狀態中做不同的事情
4.發送AJAX請求（AJAX任務開始，直到回應主體資訊回傳[AJAX狀態為4]代表當前任務結束）

GET系列 VS POST系列

let xhr = new XMLHttpRequest;
xhr.open('get', './data.json?lx=1&name=zhufeng');
xhr.send();

xhr = new XMLHttpRequest;
xhr.open('post', './data.json');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('lx=1&name=zhufeng&obj=' + encodeURIComponent(JSON.stringify({
	name: '哈哈'
})));


xhr = new XMLHttpRequest;
xhr.open('post', './data.json');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
let formData = https://www.cnblogs.com/smilestudio/p/new FormData();
formData.append('lx', 2);
formData.append('name', 'zhufeng');
formData.append('obj', {
	name: '哈哈'
});
xhr.send(formData);

傳遞給服務器的資料格式：
- application/x-www-form-urlencoded：xxx=xxx&xxx=xxx （最常用的方式）【字串】
- multipart/form-data （也很常用，例如：表單提交或者檔案上傳）【物件】
- raw （可以上傳text、json、xml、html等格式的文本，富文本編輯器中的內容可以基于這種格式傳遞）
- binary （上傳二進制資料或者編碼格式的資料）

GET系列 VS POST系列
- 不管是哪一種請求方式，客戶端都可以把資訊傳遞給服務器，服務器也可以把資訊回傳給客戶端，只不過GET偏向于拿（給的少拿的多），而POST偏向于給（給的多拿的少）
- [GET系列]：GET / HEAD（只獲取回應頭的資訊，不獲取回應主體內容）/
  - DELETE（洗掉，一般代指洗掉服務器上指定的檔案）
  - OPTIONS（試探性請求，在CROSS跨域請求中，所以正常請求發送前，先發送一個試探請求，驗證是否可以和服務器正常的建立連接）
- [POST系列]：POST / PUT（新增，一般代指向服務器中新增檔案）
基于GET向服務器發送請求，傳遞給服務器的方式：
- 基于請求頭傳遞給服務器（比如想把本地的Cookie資訊傳遞給服務器）
- 請求URL地址后面的問號傳參（主要方式） xhr.open('get', './data.json?id=2&lx=0')
基于POST向服務器發送請求，傳遞給服務器的方式：
- 基于請求頭傳遞給服務器
- 基于請求主體，把資訊傳遞給服務器（主要方式） xhr.open('post', './data.json'); xhr.send(data);

get和post的區別

GET請求傳遞給服務器的資訊有大小的限制（因為它是基于地址問號傳參方式傳遞資訊，而URL有長度的限制：IE瀏覽器只有2KB大小...）；而POST請求理論上是沒有大小限制的（實際操作中也都會給予限制）；
GET請求相對POST請求來說不太安全，也是因為傳參是基于地址欄問號傳參，會被別人基于URL劫持的方式把資訊獲取到...所以真實專案中，涉及到安全的資訊（例如：密碼等）都是基于POST方式傳遞的（互聯網面前人人都在裸奔，沒有絕對的安全，我們需要更多的處理安全性）
GET請求容易產生快取，原因還是因為GET是基于問號傳參傳遞資訊的，瀏覽器在每一次獲取資料后，一般會快取一下資料，下一次如果請求的地址和引數和上一次一樣，瀏覽器直接獲取快取中的資料，所以我們基于GET發送請求，需要清除快取的時候，一般都會在地址欄中添加一個亂數
xhr.open('get', './data.json?lx=1&name=zhufeng&_='+Math.random())
AJAX狀態碼

0 =>unset
1 =>opened
2 => headers_Received
3 => loading
4 => done

let xhr = new XMLHttpRequest();
xhr.open("get", "./data.json");
// xhr.timeout = 100; 設定超時時間
// xhr.withCredentials=true; 跨域資源共享中，允許攜帶資源憑證
// xhr.abort() 強制中斷AJAX請求
// xhr.setRequestHeader() 設定請求頭資訊（記住：屬性值不能是中文和特殊字符）
xhr.setRequestHeader("name", encodeURIComponent("hello"));
xhr.onreadystatechange = function () {
  let status = xhr.status,
    state = xhr.readyState,
    result = null;
  if (!/^(2|3)\d{2}$/.test(status)) {
    // 錯誤處理
    return;
  }
  // AJAX狀態碼為2的時候，回應頭資訊回來了
  if (state === 2) {
    // 獲取回應頭資訊
    console.log(xhr.getAllResponseHeaders());
    // console.log(xhr.getResponseHeader('date')); //=>獲取的服務器日期是格林尼治時間 GMT（比北京時間晚了八個小時 北京時間：GMT+0800）
    console.log(new Date(xhr.getResponseHeader("date"))); //=>轉換為北京時間
    return;
  }
  if (state === 4) {
    // 獲取回應主體資訊  responseText/responseType/responseXML
    result = xhr.response;
    console.log(result);
  }
};
xhr.send();
/* SEND后：首先回應頭資訊回來  最后回應主體資訊再回來 */

HTTP狀態碼

狀態碼：AJAX狀態碼 \ 服務器回傳的HTTP網路狀態碼（代表了服務器回傳資訊的狀態）

[2開頭的基本都是代表成功]
＋200 OK 正常回傳資料

[3開頭的一般也是成功了，只不過中間做了一些額外處理]
- 301 Moved Permanently 永久性轉移/重定向一般應用于網站域名更換，訪問老域名，永久都跳轉到新的域名上
- 302 Move Temporarily 臨時轉移
- 307 Temporary Redirect 臨時重定向一般應用于服務器的負載均衡
- 304 Not Modified 讀取的是快取中的資料這個是客戶端和服務器端共建的協商快取（把不經常更新，請求過的資源檔案做快取，后期在訪問這些資源直接走快取資料，除非服務器端更新了此資源，或者客戶端強制清快取重繪等）
[4開頭的都是失敗：失敗的原因一般都是客戶端的問題]
- 400 Bad Request 請求引數錯誤
- 401 Unauthorized 無權限訪問
- 404 Not Found 地址錯誤
- 405 Method Not Allowed 當前請求的方式服務器不支持
[5開頭的都是失敗：失敗的原因一般都是服務器問題]
- 500 Internal Server Error 未知服務器錯誤
- 503 Service Unavailable 服務器超負荷

常用的AJAX庫（呼叫起來更方便、操作起來更簡單）：

以JQ/ZEPTO為主的AJAX庫（把AJAX四步操作進行封裝、提供了JSONP跨域處理、對于一些常用操作[例如：GET/POST/表單序列化/引數處理等]進行封裝處理）
以AXIOS為主的AJAX庫（不僅對AJAX進行封裝，而且是基于PROMISE進行管理） [最常用的]
ES6中新增的內置類Fetch來完成HTTP資料請求（記住：FETCH不是AJAX，他是新的通訊方案；而且默認基于PROMISE進行管理） [很多公司已經開始嘗試使用]
跨域請求方案...

AXIOS

axios.request({
          // 請求的地址  baseURL：統一基本地址，一般是設定地址的前綴
          url: "./data.json",
          // 請求的方式
          method: "GET",
          // 設定請求頭資訊
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          // GET請求下，問號傳參的資訊
          params: {},
          // POST請求下，請求主體傳參的資訊
          data: {},
        })
        .then((result) => {
          // 從服務器獲取的結果
          /*
           * config:你自己的配置資訊
           * headers:回應頭資訊
           * request:原生的XHR AJAX物件
           * status:網路狀態碼
           * statusText
           * data:存盤的是回應主體資訊
           */
          console.log(result);
        });

快捷請求的方法 axios.get/delete/head/post/put... 或者 axios.all
.get([URL],[OPTIONS])

 axios.get("./data.json", {
        params: {
          lx: 0,
        },
        /* transformResponse: [function (data) {
				// 把從服務器獲取的請求主體資訊進行處理，處理完在執行THEN操作
			}] */
      });
	  // .get([URL],[DATA],[OPTIONS])  [DATA]是基于請求主體傳遞的內容

 // axios基于請求主體傳遞給服務器的默認是JSON格式，如果想變為x-www-form-urlencoded格式還需要自己處理
       axios.post('./data.json', {
			lx: 0,
			name: 'zhufeng'
		}, {
			// 針對于POST系列請求，把傳遞給服務器請求主體內容進行處理（函式中回傳的結果就是最后基于請求主體傳遞給服務器的內容）
			transformRequest: [function (data) {
				// xxx=xxx&xxx=xxx
				let str = ``;
				for (let key in data) {
					if (!data.hasOwnProperty(key)) break;
					str += `&${key}=${data[key]}`;
				}
				str = str.substring(1);
				return str;
			}],
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79812.html

標籤：JavaScript

上一篇：解決git pull拉取更新代碼失敗，unable to resolve reference ‘refs/remotes/origin/xxx分支名’: reference broken問題

下一篇：簡述vue的雙向系結原理

HTTP和前后端分離