HTTP相关知识

Posted 2020-10-11 Scar007

一. 请求

• 一个网页全部展示,需要向服务器发送很多的请求
  • 首先第一次请求的是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格式的)