HTTP详解

一、在客户端打开一个网址所经历事情：

a、Request请求阶段

    1、根据客户端输入的域名 到DNS服务器进行反解析（通过域名找到对应服务器的外网IP）

    2、通过找到的外网IP 找到对应的服务器

    3、通过在地址栏输入的端口号（没有输入是因为不同协议有自己默认的端口号）找到服务器上发布的对应项目

b、Response响应阶段

    4、服务器获取到请求资源文件的地址  例如： /stu/index.html 把资源文件中的“原代码”找到

    5、服务器端把找到的原代码返回客户端（通过HTTP等传输协议返回）

c、浏览器自主阶段

    6、客户端接收原代码后交给浏览器的内核（渲染引擎）进行渲染

     7、浏览器绘制出相对应的页面

二、URL URI  URN

a 、所表示的意思

    URI:统一资源标识符

    URL:统一资源路径地址

    URN:统一资源名称

    URI = URL + URN

b 、一个完整的URL包含的部分 例如：http://www.html5train.com/stu/index.html?name=zf&age=9&teacher=zxt#good

    1、第一部分 传输协议

    1）传输协议是用来完成客户端和服务器端数据传输的 类似于快递小哥 负责把客户和单家的物品来回传送

        》客户端不仅可以向服务器端发送请求 也可以把一些内容传递给服务器

        》服务器端也可以把内容返回客户端

  2）客户端和服务器端传输的内容称为"HTTP报文" 这些报文信息都是基于传输协议完成传输  客户端传递给服务器端叫请求（Request ）  服务器端返回客户端叫响应（Response） Request Response两个阶段称为 “HTTP事务”

       》HTTP事务处理机制

       ~当客户端向服务器端发送请求 此时客户端和服务器端会建立一个传输通道（链接通道） 传输协议就是基于这个通道把信息进行传输的

       ~当服务器端接收请求信息 吧内容返回客户端后 传输通道就会自动销毁关闭

   3）传输协议分类

       》HTTP: 超文本传输协议（客户端和服务端传输的内容除了文本以外，还可以传输图片、音频等文件流【二进制编码/BASE64码】以及传输XML格式的数据等）是目前市场上应用最广泛的参数协议

        》HTTPS： HTTP SSL 比HTTP 安全，因为数据内容的参数通道是经过SSL加密（他需要在服务器端进行特殊处理）一般涉及资金类的都是https开头

        》 ftp: 资源文件传输协议 一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件 一般内容较大

  4）HTTP报文

包含

    a： 起始行

   》请求起始行  如： GET/ HTTP / 1.1

   》响应起始行

   b，首部

   》请求头： 内置请求头 自定义请求头=>Request headers

   》响应头： 内置响应头 自定义响应头 =>Response headers

   》通用头：  请求和响应都有的   => General

   c、主体

   》请求主体

   》响应主体   Response 里面的 是资源里面的原代码

请求****都是客户端设置的信息 服务器端获取

响应***都是服务器端设置的信息 客户端接收

三、如何提高页面响应速度

A、 减少HTTP请求次数或者大小

页面中每次发送HTTP请求 都需要完成请求+响应 这个完整的http事务 不仅消耗世界也可能会导致http链接通道的堵塞 为了提高页面加载速度和运行的性能 应该减少http请求次数和请求内容的大小

所采用的技巧如下：

1） 采用CSS雪碧图（css sprit/css图片精灵） 把一些小图合并在一张大图上面 使用的时候通过背景图片定位即可

2）压缩与合并CSS JS文件 如果页面铰小 css可以内嵌式开发 不需要外链  资源可以减少请求次数

    》通过webpack压缩 压缩为***.min.js

    》服务器开启资源文件的GZIP压缩  由服务器端完成

    》通过自动化工具压缩合并 或者LESS转CSS  ES6转ES5 这种模式称为“前端工程化开发”

3）在客户端好服务器端进行数据通信的时候 采用JSON的数据传输 优势在于

    》JSON的数据格式能够清晰明了的展示出数据结构 而且方便自己获取和操作

    》相对于早期的XML格式传输 JSON更加轻量级

    》客户端和服务器端都支持该格式 处理起来方便

    》真实项目中 并不是都基于JSON 但是尽量使用json   如果对于文件流 或者文档传输则不合适

4）采用图片懒加载技术 （页面加载时 不请求真实的图片地址 而是使用默认图片占位）

5）根据图片懒加载 扩充出数据懒加载 （首屏或者前2屏数据从服务器端请求  部分网站首屏数据是后台渲染好在整体呈现）

6） 图片延迟加载 /下拉刷新（数遍滚动到相应位置加载数据）

7）分页展示技术（数据分批请求）

8） 页面中存在AUDIO 或者AIDEO 设置preload = none; 表示页面加载时不进行音视频的加载 播放时在加载

9）对于不经常更新技术 采用浏览器304缓存做处理 由服务器端处理

第一次请求CSS JS 浏览器会把请求的数据缓存起来 如果做了304处理 再次请求是直接从缓存读取 减少请求次数

10）localhost本地存储技术 （第一次请求的数据或者不经常使用的数据 存储在本地 下一次页面加载从本地获取  设定期限或者辨识 在某个阶段在重新获取）

11）使用字体图标代替页面中的位图（PNG....） 做适配的时候方便 也轻量级 而且减少请求次数 类似雪碧图

B、编写代码的优化技巧

1） 规范化代码编写习惯

2）减少DOM操作 避免触发回流（DOM结构重新计算）和重绘（样式重新渲染） 典范 VUE 之类的框架

      》操作DOM弊端

      a、  DOM存在映射机制  一改则都改  这种映射机制是浏览器按W3C标准完成对JS语言的构建和DOM的构建 其实就是构建一个监听机制

 3）使用异步编程（同步编程导致上面任务完不成 后面任务做不了 可以把某个区域没有必然先后顺序的模块设置为异步编程 独立加载 使用的情况少 可能出现不可控情况）主要使用插件有fetch axios 这些插件基于promise设计模式对ajax封装模式

4）JS中避免使用eval

    》性能消耗大

    》代码压缩后 容易出现代码执行错乱问题

5）减少闭包的使用  闭包会形成一个不销毁内存 过多的栈内存累积会影响页面性能

    》闭包优势 保存和保护

6）DOM事件绑定的时候 避免一个个事件绑定 而是采用事件委托（事件代理）来实现

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

7）尽量使用CSS3动画代替JS动画  因为CSS3动画开启硬件加速比JS动画好

8）编写JS代码的时候使用设计模式 方便后期维护与可扩展性

9）css减少fifter、flash 使用

C、尽可能避免一次性循环过多数据（因为循环操作是同步编程）

D、CSS选择器优化

     1）减少标签选择器使用

     2）减少使用ID选择器使用 多使用样式类选择器（通用选择器）

     3）减少使用选择器时候前面的前缀 （less sass 深层镶套）如.headerBox .nav .left a { }   =》.header-nav-left (命名优化)   选择器的查找是从右向左查找 

E、避免使用CSS表达式

.box{

   background-color:expression((newDate()).getHours()%2?'red':'blue')

}

F、减少页面岑宇代码 提高方法重复使用率  “低耦合高内聚”也就是类封装目的

G、css放在HAED 中 JS放在尾部 先加载CSS 在加载JS （先呈现页面在提供操作）

H、SEO优化技巧

    1）避免出现404页面 如果出现错误页面需要引导到引导页面（服务器处理）

    2）避免浏览器中异常错误的抛出

       》避免代码出错

       》使用try catch做异常信息捕获

    3）增加页面关键词优化

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

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。