一. 請(qǐng)求

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

二. BASE64

• 常規(guī)的img請(qǐng)求
  • 遇到img,首先根據(jù)SRC的地址向服務(wù)器發(fā)送請(qǐng)求
  • 服務(wù)器把需要的圖片準(zhǔn)備好,然后返回給客戶端的瀏覽器
  • 瀏覽器把接收到的圖片進(jìn)行BASE64解碼
  • 瀏覽器將解碼后的代碼進(jìn)行渲染
• 將圖片轉(zhuǎn)化為BASE64編碼,直接放在img的src中
  • 維護(hù)不便,但可以通過webpack進(jìn)行打包編譯,使維護(hù)和編譯分離

三. URL模塊解讀

URL這個(gè)內(nèi)置模塊主要作用就是用來解析一個(gè)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:默認(rèn)是false,設(shè)置true在解析的時(shí)候,會(huì)自動(dòng)把問號(hào)傳遞的參數(shù)值以對(duì)象鍵值對(duì)的方式存儲(chǔ)在Query屬性中,方便后期使用
• obj:一個(gè)對(duì)象,包含了解析url字符串后的信息
• es6結(jié)構(gòu)賦值,只取pathname和query屬性

四. FS文件讀寫模塊

• fs.readFileSync讀取出來的內(nèi)容格式是有所區(qū)別的,如果是HTML/CSS/JS等文本代碼,讀取出來的就是字符串;如果是圖片音視頻等文件,讀取出來的是Buffer格式數(shù)據(jù)(對(duì)于圖片,讀取的時(shí)候不應(yīng)該使用"UTF-8")

let fs=require("fs"); fs.readFile("./TEMP.html","UTF-8",function(error,result){});//異步讀取文件中的內(nèi)容 let result=fs.readFileSync("./TEMP.html","UTF-8",function(error,result){});//同步讀取文件中的內(nèi)容 fs.readdirSync("./");//同步讀取某一個(gè)目錄下所有的文件,返回一個(gè)數(shù)組 fs.writeFileSync("./TEMP.html",result+"VERY GOOD","UTF-8"); //同步向一個(gè)文件寫入內(nèi)容,如果文件不存在,還會(huì)幫著默認(rèn)創(chuàng)建這個(gè)文件,寫入為覆蓋式寫入; //如果想追加寫入,先獲取原有的,然后再和新增加的拼接,最后統(tǒng)一一起寫入到文件

五. http

• 創(chuàng)建http服務(wù) let server=http.createServer(function (req,res) {});
  • 客戶端向當(dāng)前服務(wù)發(fā)送一次請(qǐng)求,回調(diào)函數(shù)就是執(zhí)行一次
    • [req]:request
      • 它是一個(gè)對(duì)象,里面存儲(chǔ)了客戶端的請(qǐng)求信息(包含客戶端傳遞給服務(wù)器的 內(nèi)容)
    • [res]:response
      • 它也是一個(gè)對(duì)象,里面存儲(chǔ)很多的方法,可以讓服務(wù)器端把客戶端需要的內(nèi)容返回給客戶端
      • res.end():將end中的內(nèi)容返回給客戶端
    • req.url:存儲(chǔ)的是客戶端本次請(qǐng)求的URL地址(請(qǐng)求資源文件的路徑名稱+問號(hào)傳遞給服務(wù)器的參數(shù)值)
    • 但客戶端請(qǐng)求文件不存在時(shí),需使用try catch來避免服務(wù)器奔潰
• 客戶端向服務(wù)器端發(fā)送請(qǐng)求,不僅僅是資源文件的請(qǐng)求,很多時(shí)候是數(shù)據(jù)接口的請(qǐng)求,兩種請(qǐng)求處理的核心原理和方法時(shí)不一樣的,而我們下面的代碼只適用于資源文件的請(qǐng)求(HTML/CSS/JS/PNG/GIF...
  • 如果請(qǐng)求的路徑中包含文件的后綴名,那么請(qǐng)求的就是資源文件
  let suffixReg=/\.[0-9a-zA-Z]+$/i; if(suffixReg.test(pathname)){資源文件代碼}
• 我們獲取的內(nèi)容大部分都是字符串格式的數(shù)據(jù),返回給客戶端的數(shù)據(jù)也基本上都是字符串格式的(部分IE瀏覽器中,我們返回給客戶端的內(nèi)容由于都是字符串,導(dǎo)致部分IE瀏覽器無法識(shí)別是HTML還是CSS或者JS代碼,只有IE存在這個(gè)問題,其余的瀏覽器不存在這個(gè)問題,會(huì)自動(dòng)識(shí)別)
  • 所以服務(wù)器端在返回?cái)?shù)據(jù)的時(shí)候,需要告訴客戶端返回內(nèi)容的類型(MIME類型)"重寫響應(yīng)頭"
  res.writeHead(200,{"content-type":"text/css;charset:utf-8"})

六. http報(bào)文

客戶端傳遞給服務(wù)器端的內(nèi)容以及服務(wù)器返回給客戶端的內(nèi)容統(tǒng)稱為報(bào)文

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

客戶端 <===========> 服務(wù)器端

客戶端都可以通過哪些方式把內(nèi)容傳遞給服務(wù)器呢?

• 請(qǐng)求URL地址后面的問號(hào)傳參
• 通過設(shè)置請(qǐng)求頭信息,把內(nèi)容傳遞給服務(wù)器(請(qǐng)求頭:客戶端設(shè)置/服務(wù)器端獲取)
• 通過請(qǐng)求主體把信息傳遞給服務(wù)器(請(qǐng)求主體:客戶端設(shè)置/服務(wù)器端獲取)

服務(wù)器端如何把內(nèi)容返回給客戶端?

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

七. AJAX

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

• 異步JS:局部刷新,AJAX的作用就是實(shí)現(xiàn)局部刷新的(所謂的局部刷新和我們之前學(xué)習(xí)的同步異步?jīng)]有關(guān)系)
• XML:可擴(kuò)展的標(biāo)記語言(里面使用的標(biāo)簽基本上都是自己定義的),用自己定義的標(biāo)記來存儲(chǔ)數(shù)據(jù)結(jié)構(gòu)(清晰明了)
  • 現(xiàn)在我們一般都使用JSON格式的數(shù)據(jù)來代替XML來存儲(chǔ),JSON不僅結(jié)構(gòu)清晰,操作也比較的方便,目前AJAX請(qǐng)求,服務(wù)器端返回給客戶端的數(shù)據(jù)一般也是JSON格式的(很早以前是XML格式的)

轉(zhuǎn)載于:https://www.cnblogs.com/Scar007/p/7717589.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。