HTTP简述

0简述

0.1访问过程

在输入网站到出现页面经历了怎样的心路历程？
[Request请求阶段]
1.首先根据用户输入的域名，到DNS服务区上进行反解析（通过域名找到对应服务器的外网IP）
2.通过找到的外网IP，找到对应的服务器
3.通过在地址栏中的端口号（没输入是因为不同协议都有自己默认的端口号）找到服务器上发布的对应项目

[Response请求阶段]
4.服务器获取到请求资源文件的地址 例如：/stu/index.html把资源文件中的源代码找到
5.服务器端会把找到的源代码返给客户端（通过HTTP等协议返回的）

[浏览器渲染]
6.客户端接收到源代码后，会交给浏览器内核进行渲染，最后由浏览器绘制出对应的页面

0.2URI，URL，URN

1.[URI]
统一资源标识符

2.[URN]
统一资源路径地址

3.[URL]
统一资源名称

URI = URL + URN

0.3 传输协议

传输协议是用来完成客户端和服务器端的数据（内容）传输的，类似于快递小哥，负责吧客户和商家的物品来回传送

客户端不仅可以向服务器发送请求，而且还可以把一些内容传递给服务器
服务器端也可以吧内容返回给客户端

客户端和服务器端传输的内容总称为HTTP报文，这写报文信息都是基于传输协议完成传输的，客户端传递给服务器端的请求叫请求Request,服务器返给客户端叫响应Response，两个阶段总称为HTTP事务（一件完整的事情）

0.4 HTTP事务

当客户端像服务器端发送请求，此时客户端和服务器端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的
当服务器端接收到请求信息，把内容返回给客户端后，传输协议就回自动销毁关闭
0.5 传输协议分类
http:超文本传输协议（客户端和服务器端传输的内容除了文本以外，还可以传输图片，音频等文件流[二进制编码/BASE64码]，以及传输XML格式的数据等,）是目前市场是最广泛应用的传输协议
https:httpssl，它比http更加安全，因为数据内容的传输通道是经历过ssl加密的（他需要在服务器端进行特殊的处理），所以涉及到资金的网站一般都是https协议
ftp:资源文件传输协议，一般用于客户端吧资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（一般ftp传输的内容会比http这类协议传输的内容多）
0.6 HTTP报文
起始行

请求起始行
响应起始行
首部（头部）

请求头:内置请求头，自定义请求头

响应头:内置响应头，自定义响应头

通用头:请求和响应都有的

3.主题

请求主题

相应主题

请求XXXX都是客户端设置这些信息，服务端获取这些信息
响应XXXX都是服务器端设置的信息，客户端获取这些信息

0.7 总结

客户端传递给服务器的诗句

URL问号传递参数
设置请求头
设置请求主体
…

服务器端返回给客户端的内容

设置响应头（例如服务器时间）
设置响应主体
…

第二部分
设置域名其实就是给不好记得服务器外网IP设置了一个好记的名字
顶级域名（一级域名）：qq.com
二级域名：www.qq.com v.qq.com sport.qq.com
三级域名：kbs.sport.qq.com

第三部分
在服务器发布项目的时候，我们可以通过端口号区分当前服务器上不同的项目

一台服务器的端口号取值范围0-65535之间，如果电脑上安装了很多的程序，有一些端口号被占用了

HTTP：默认端口号80
HTTPS：默认端口号443
FTP：默认端口号21
关于上诉三个端口号其实是很重要的，如果被其他程序占用，我们则不能使用了，所以服务器上一般是禁止安装其他应用程序的

第四部分：请求资源文件的路径名称
/stu/index.html

在服务器中发布项目的时候，我们一般都会配置一些默认文档：用户即便不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是index/default。。。）

我们通常为了做SEO优化，会把一些动态页面的地址（XX.PHP,XXX.ASP,XXX.JSP。。。）进行伪URL重写（需要服务器处理）

http://item.jd.com/4325427.html
不可能有一个商品，自己就单独写一个详情页面，肯定是同一个详情页做的不同处理

1) 第一种方案：
由后台语言根据详情页模板动态生成具体的详情页面
2) 第二种方案
当前页面就是一个页面，例如：detail.html/detail.php…，我们做详情页面的时候，开发是按照detail.html?id=4325427来开发的；但是这方便做SEO优化。此时我们把真是的地址进行重写，重写为我们看到的4325427.html

第五部分：问号传参
?name=zf&age=9…
把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过问号传递

[作用]

在AJAX请求中，我们可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据

// $.ajax(url,{});
// $.get(url,function(){};)对于AJAX请求的特殊写法，原理上还是局域AJAX方法实现的$.post/$.script...

$.ajax({
    url:'getPersonInfo?id=12'
})

消除AJAX轻轻中GET方式缓存

$.ajax({
    url:'xxx?=0.123456',
    method:'get'
});

我们会在请求URL的末尾加一个_=随机数，保证每一次请求的URL都是不一样的，以此来消除GET请求遗留的缓存问题

通过URL传递参数的方式，可以实现页面之间信息通信，例如：我们有两个页面A,B，A是列表页面B是详情页面，点击A中的某一条信息，进入到唯一的详情页面B，如何展示不同的信息，这种操作就是基于URL问号传递参数来实现的

在进入页面的时候，我们可以获取URL传递的参数值，根据传递参数值不一样，从服务器端获取不同的数据展示

在列表页面进行页面跳转的时候，我们需要记住的是跳转的同时传递不同的参数值

第六部分：HASH值
URL末尾传递的井号什么，就是HASH值
[作用]

页面中锚点定位
前端路由（SPA单页面开发）

1优化技巧

WEB前端开发常用的优化技巧
减少HTTP请求的次数
页面中每发送一次HTTP请求，都需要完成请求+响应这个完整的HTTP事务，会消耗一些时间，也可能会导致HTTP链接通道堵塞，为了提高页面加载速度和运行性能，我们应该减少HTTP的请求次数

采用CSS雪碧图（CSS Sprit/CSS 图片精灵）技术，把一些小图片合并在一张大图上，使用的时候通过背景图定位，定位到具体的某一张小图上
css:

.pubBg{
  background:url("../img/sprit.png") no-repeat;
  background-size:x y;/*和原图的大小保持一致*/
}
.box{
  background-position: x y;/*通过背景定位，定位到具体的位置，展示不同的图片*/
}

1	<div class="pubBg box"></div>

真实项目中，我们最好把CSS或者JS文件进行合并压缩；尤其是在移动端开发的时候，如果CSS或者JS内容不是特别多，我们可以采取内嵌模式，以此减少HTTP请求的次数，加快页面加载速度：
1) CSS合并成一个，JS最好也合并成一个
2) 首先通过一些工具（例如：webpack）把合并后的CSS或者JS压缩成XX.min.js，减少文件大小
3) 服务器端开启资源文件的GZIP压缩
…
通过一些自动化工具完成CSS以及JS的合并压缩，或者再完成LESS转CSS，ES6转ES5等操作，我们把这种自动化构建模式，称之为前端工程化开发

采用图片懒加载技术，在页面开始加载的时候，不请求真实的图片地址，而是用默认占图占位，当页面加载完成后，根据相关条件一次加载真实图片（减少页面首次加载HTTP请求的次数）
真实项目中，我们开始图片都不加载，页面首次记载完成，先把第一屏中可以看见的图片进行加载，随着页面滚动，把下面区域中能够有显现的图片进行加载。

对于不经常更新的数据，最好采用浏览器的304缓存做处理
例如：
第一次请求CSS和JS下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再起请求CSS和JS。直接从缓存中读取，不需要再去服务器获取了（减少了HTTP请求次数）

当用户刷新页面（CTRL+F5）或者当前缓存的CSS或者JS发生了变动，都会从新从服务器进行拉取

对于客户端来讲，我们还可以基于localStorage来做一些本地存储，例如：第一次请求的数据或者不经常更新的CSS和JS，我们都可以吧内容存储在本地，下次页面加载，我们从本地中获取即可，我们设定一定期限或者一些标识，可以控制在某个阶段重新从服务器获取

根据图片懒加载级啊，我们可以扩充出，数据懒加载。
懒加载
1）开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求（有些网站首屏数据是后台渲染好的，整体返给客户端显现的）
2) 当页面下拉，滚动到那个区域，在把这个区域所需要的数据进行轻轻（请求回来做数据绑定以及图片延迟加载等）
3) 分页展示技术采用的也是数据的懒加载技术实现的：如果我们请求获取的数据是很多的数据，我们最好分批请求，开始只请求第一页的数据，当用户点击第二页（微博的下拉到一定距离后，宰庆秋第二页数据。。。）的时候再请求第二页数据。。。

使用字体图标代替一些页面中的位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求的次数（类似雪碧图）

如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置他们的preload=none：页面加载的时候，音频和视频不进行加载，播放的时候再开始加载（减少页面瘦子加载HTTP请求的次数）
preload=auto：页面首次加载的时候就把音频和视频资源进行加载了
preload=metadata：页面首次加载的时候只把音频视频资源的头部信息进行加载（比如时长）

7.在客户端和服务器端进行通信数据的时候，我们尽量采用JSON格式进行数据传输
[优势]
1) JSON格式的数据，能够清晰明了的展示出数据结构，而且也方便我们获取的操作
2) 相对于很早以前的XML格式传输，JSON格式的数据更加轻量级
3) 客户端和服务器端都支持JSON格式数据的处理，处理起来非常方便

真实项目中，并不是所有的数据都是JSON，我们尽量可能这样做，但是对于某些特殊需求（例如：文件流的传输或者文档传输），使用JSON就不合适了

采用CDN加速
CDN地域式（地域分布式）

关于编写代码时候的一些优化技巧
除了减少HTTP请求次数和大小可以优化性能，我们在编写代码的时候，也可以进行一些优化，让页面的性能有所提升（有些不好的代码编写习惯会导致页面性能消耗太大，例如：内存泄露）

在编写JS代码的时候剑灵减少对DOM的操作
在JS中操作DOM是一个非常消耗性能的事情，但是我们有不可避免的操作DOM，我们只能尽量减少对于它的操作

[操作DOM弊端]
1) DOM存在映射机制（JS中的DOM元素对象和页面中的DOM结构是存在映射机制的，一改则都改）这种映射机制，是浏览器按照W3C标准完成对JS语言的构建和DOM的构建（其实就是构建了一个监听机制），操作DOM是同时要修改两个地方，相对于一些其他的JS变成来说是消耗性能的。
2) 页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很消耗性能）和重绘（把一个元素的样式重新渲染）

编写代码的时候，更多的使用异步编程
同步变成会导致：上面东西不完成，下面任务也做不了，我们开发的时候，可以吧某一区域模块都设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响（用的不多）

尤其是AJAX数据请求，我们一般都需要使用异步编程，最好是基于promise设计模式进行管理（项目中经常使用fetch，axios等插件来进行AJAX请求处理，因为这些插件中就是基于promise设计模式对ajax进行的封装处理）

在真实项目中，我们尽量避免一次性循环过多数据（因为循环操作是同步编程），尤其是要避免while导致的死循环操作

CSS选择器优化
1) 尽量减少标签选择器的使用
2) 尽可能少使用ID选择器，多使用样式雷选择器（通用性强）
3) 减少选择器前面的前缀，例如：
1
.headerBOX .nav .left a{}

(选择器是从右往左查找的)

避免使用CSS表达式

1
2
3

.box{
background-color: expression((new Data()).getHours()%2?'red':'blue');
}

减少页面中的用于代码，尽可能提高方法的重复使用率：“低耦合高内聚”

最好CSS放在HEAD中，JS放在BODY尾部，让页面加载的时候，先加载CSS，在加载JS（先呈现页面，在给用户提供操作）

JS中避免使用eval
1) 性能消耗大
2) 大妈压缩后，容易出现代码执行错乱问题

JS中尽量减少闭包的使用
1) 闭包会形成一个不销毁的栈内存，过多的栈内存积累会影响页面的性能
2) 还会容易导致内存的泄露

闭包自己的优势：保存和保护，我们只能尽量减少，但是无可避免

在做DOM事件绑定的时候，尽量避免一个个的事件绑定，而是采用性能更高的事件委托来实现

事件委托（事件代理）
把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制导致），通过事件源是谁，我们做不同的操作即可

尽量使用CSS3动画代替JS动画，因为CSS3的动画或者变形都开启了硬件加速，性能比JS动画好

编写JS代码的时候尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性

关于页面的SEO优化技巧

页面中杜绝出现死链接（404页面）而对于用户用户输入一个错误页面我们要引导到404提示页面中（服务器处理的）

避免浏览器中异常错误的抛出
尽可能避免代码出错
使用TYE CATCH做异常信息捕获

最后更新： 2018年11月25日 17:24

原始链接： http://linjiad.github.io/2018/11/15/HTTP简述/

赏

云销雨霁彩彻区明

林花谢了春红太匆匆