一. 請求

• 一個網頁全部展示,需要向服務器發送很多的請求
  • 首先第一次請求的是HTML頁面,服務器把HTML源代碼返回給客戶端,客戶端瀏覽器進行渲染
  • 在頁面渲染過程中,如果遇到link,script,img,iframe,audio,video等這些標簽,則還需要重新在向服務器發送新的請求
  • 在谷歌瀏覽器控制臺的Networks選項中,可以查看到所有的請求記錄和請求信息
  • 如果想要提高頁面的加載性能(加快打開和加載的時間),我們要減少客戶端的請求信息(減少HTTP請求),至少在剛開始打開頁面的時候,請求次數越少,請求內容越小
    • 減少HTTP請求次數
    • 把css或者js進行合并壓縮(webpack/gulp自動化平臺),保證當前頁面最多只引入一個css和一個js(偶爾有公共類庫可以多引入一兩個),如果css和js代碼都不是很多的時候,直接采用內嵌式,這種技巧在移動端經常使用 2.對于靜態資源圖片(按鈕圖標或者背景圖等,固定的圖片)進行CSS Sprite技術;對于動態圖片,我們可以做圖片延遲加載;大圖在保證不失真的情況下,我們可以壓縮或者BASE64
    • 數據的分批異步加載
    • 減少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報文

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

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

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

客戶端都可以通過哪些方式把內容傳遞給服務器呢?

• 請求URL地址后面的問號傳參
• 通過設置請求頭信息,把內容傳遞給服務器(請求頭:客戶端設置/服務器端獲取)
• 通過請求主體把信息傳遞給服務器(請求主體:客戶端設置/服務器端獲取)

服務器端如何把內容返回給客戶端?

• 通過響應頭把信息返回給客戶端(響應頭:服務器端設置/客戶端獲取)
• 通過響應主體把信息返回給客戶端(響應頭:服務器端設置/客戶端獲取)

七. AJAX

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

• 異步JS:局部刷新,AJAX的作用就是實現局部刷新的(所謂的局部刷新和我們之前學習的同步異步沒有關系)
• XML:可擴展的標記語言(里面使用的標簽基本上都是自己定義的),用自己定義的標記來存儲數據結構(清晰明了)
  • 現在我們一般都使用JSON格式的數據來代替XML來存儲,JSON不僅結構清晰,操作也比較的方便,目前AJAX請求,服務器端返回給客戶端的數據一般也是JSON格式的(很早以前是XML格式的)

轉載于:https://www.cnblogs.com/Scar007/p/7717589.html

總結

以上是生活随笔為你收集整理的HTTP相关知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。