HTTP相關知識

一. 請求

• 一個網頁所有展現,須要向服務器發送不少的請求
  • 首先第一次請求的是HTML頁面,服務器把HTML源代碼返回給客戶端,客戶端瀏覽器進行渲染
  • 在頁面渲染過程當中,若是遇到link,script,img,iframe,audio,video等這些標籤,則還須要從新在向服務器發送新的請求
  • 在谷歌瀏覽器控制檯的Networks選項中,能夠查看到全部的請求記錄和請求信息
  • 若是想要提升頁面的加載性能(加快打開和加載的時間),咱們要減小客戶端的請求信息(減小HTTP請求),至少在剛開始打開頁面的時候,請求次數越少,請求內容越小
    • 減小HTTP請求次數
      1. 把css或者js進行合併壓縮(webpack/gulp自動化平臺),保證當前頁面最多隻引入一個css和一個js(偶爾有公共類庫能夠多引入一兩個),若是css和js代碼都不是不少的時候,直接採用內嵌式,這種技巧在移動端常用 2.對於靜態資源圖片(按鈕圖標或者背景圖等,固定的圖片)進行CSS Sprite技術;對於動態圖片,咱們能夠作圖片延遲加載;大圖在保證不失真的狀況下,咱們能夠壓縮或者BASE64
      2. 數據的分批異步加載
    • 減小HTTP請求大小
      • 代碼的優化:HTML/CSS/JS這些代碼均可以優化
      • 安全優化

二. BASE64

• 常規的img請求
  • 遇到img,首先根據SRC的地址向服務器發送請求
  • 服務器把須要的圖片準備好,而後返回給客戶端的瀏覽器
  • 瀏覽器把接收到的圖片進行BASE64解碼
  • 瀏覽器將解碼後的代碼進行渲染
• 將圖片轉化爲BASE64編碼,直接放在img的src中
  • 維護不便,但能夠經過webpack進行打包編譯,使維護和編譯分離

三. URL模塊解讀

URL這個內置模塊主要做用就是用來解析一個URI地址中的每一部分信息的:URL,PARSE

let url=require("url");
let str="http://finance.sina.com.cn/chanjing/gsnews/2017-06-02/doc-ifyfuvpm7126441.shtml"
let obj=url.parse(str,boolean);
let {pathname,query}=url.parse(str.true);

• str:url路徑字符串
• boolean:默認是false,設置true在解析的時候,會自動把問號傳遞的參數值以對象鍵值對的方式存儲在Query屬性中,方便後期使用
• obj:一個對象,包含了解析url字符串後的信息
• es6結構賦值,只取pathname和query屬性

四. FS文件讀寫模塊

• fs.readFileSync讀取出來的內容格式是有所區別的,若是是HTML/CSS/JS等文本代碼,讀取出來的就是字符串;若是是圖片音視頻等文件,讀取出來的是Buffer格式數據(對於圖片,讀取的時候不該該使用"UTF-8")

let fs=require("fs"); fs.readFile("./TEMP.html","UTF-8",function(error,result){});//異步讀取文件中的內容 let result=fs.readFileSync("./TEMP.html","UTF-8",function(error,result){});//同步讀取文件中的內容 fs.readdirSync("./");//同步讀取某一個目錄下全部的文件,返回一個數組 fs.writeFileSync("./TEMP.html",result+"VERY GOOD","UTF-8"); //同步向一個文件寫入內容,若是文件不存在,還會幫着默認建立這個文件,寫入爲覆蓋式寫入; //若是想追加寫入,先獲取原有的,而後再和新增長的拼接,最後統一一塊兒寫入到文件

五. http

• 建立http服務

  let server=http.createServer(function (req,res) { });

  • 客戶端向當前服務發送一次請求,回調函數就是執行一次
    • [req]:request
      • 它是一個對象,裏面存儲了客戶端的請求信息(包含客戶端傳遞給服務器的 內容)
    • [res]:response
      • 它也是一個對象,裏面存儲不少的方法,可讓服務器端把客戶端須要的內容返回給客戶端
      • res.end():將end中的內容返回給客戶端
    • req.url:存儲的是客戶端本次請求的URL地址(請求資源文件的路徑名稱+問號傳遞給服務器的參數值)
    • 但客戶端請求文件不存在時,需使用try catch來避免服務器奔潰
• 客戶端向服務器端發送請求,不只僅是資源文件的請求,不少時候是數據接口的請求,兩種請求處理的核心原理和方法時不同的,而咱們下面的代碼只適用於資源文件的請求(HTML/CSS/JS/PNG/GIF...
  • 若是請求的路徑中包含文件的後綴名,那麼請求的就是資源文件

  let suffixReg=/\.[0-9a-zA-Z]+$/i; if(suffixReg.test(pathname)){資源文件代碼}

• 咱們獲取的內容大部分都是字符串格式的數據,返回給客戶端的數據也基本上都是字符串格式的(部分IE瀏覽器中,咱們返回給客戶端的內容因爲都是字符串,致使部分IE瀏覽器沒法識別是HTML仍是CSS或者JS代碼,只有IE存在這個問題,其他的瀏覽器不存在這個問題,會自動識別)
  • 因此服務器端在返回數據的時候,須要告訴客戶端返回內容的類型(MIME類型)"重寫響應頭"

  res.writeHead(200,{"content-type":"text/css;charset:utf-8"})

六. http報文

客戶端傳遞給服務器端的內容以及服務器返回給客戶端的內容統稱爲報文

• 起始行:請求起始行,響應起始行
• 首部(頭):通用頭,請求,響應頭,自定義(請求/響應)頭
• 主體:請求主體,響應主體

客戶端 <===========> 服務器端

1. 客戶端均可以經過哪些方式把內容傳遞給服務器呢?
   • 請求URL地址後面的問號傳參
   • 經過設置請求頭信息,把內容傳遞給服務器(請求頭:客戶端設置/服務器端獲取)
   • 經過請求主體把信息傳遞給服務器(請求主體:客戶端設置/服務器端獲取)
2. 服務器端如何把內容返回給客戶端?
   • 經過響應頭把信息返回給客戶端(響應頭:服務器端設置/客戶端獲取)
   • 經過響應主體把信息返回給客戶端(響應頭:服務器端設置/客戶端獲取)

七. AJAX

異步的JS和XML(Asynchronous Javascript and xml)

• 異步JS:局部刷新,AJAX的做用就是實現局部刷新的(所謂的局部刷新和咱們以前學習的同步異步沒有關係)
• XML:可擴展的標記語言(裏面使用的標籤基本上都是本身定義的),用本身定義的標記來存儲數據結構(清晰明瞭)
  • 如今咱們通常都使用JSON格式的數據來代替XML來存儲,JSON不只結構清晰,操做也比較的方便,目前AJAX請求,服務器端返回給客戶端的數據通常也是JSON格式的(很早之前是XML格式的)