http--通信

note_byte
208 阅读3分钟

//IE浏览器最高，有chorme，整chrome 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

//双核浏览器,优先用webkit

<meta name="renderer" content="webkit">

//dns预解析

<meta http-equiv="x-dns-prefetch-control" content="off">


1、什么是http?特点

客户端跟服务器的数据传输格式规范。超文本传输协议。

简单快速 、无连接、无状态。

http是建立在传输层tcp上的一种应用，响应完毕后断开。无状态。

2、无状态协议？处理？

对事物处理没有记忆。无状态，不连接

处理：1cookie2session

3、http报文组成

请求报文

  1. 请求头
  2. 请求行
  3. 请求实体

响应报文

  1. 状态行
  2. 响应头
  3. 响应内容

4、http处理方式

get、put、delete、post、

5、http1.0跟1.1的区别

1.1默认是keep-Alive持久性链接                 无状态，不连接


管线化：打包处理，不一波。


6、get和post区别

get数据量少，用？和&拼装，get浏览器回退有害，get浏览器自动缓存

post用对象Request body装请求参数，安全，暴露少

7、http和https

多了一层SSL安全通信路线，被窃取风险低

8、状态码

  1. 接受
  2. 成功
  3. 重定
  4. 请求资源错误
  5. 服务器崩

9、tcp三握手四挥手

三握手--连接进入establish状态

  • 客户端先发sync，等待
  • 服务端收sync，变sync+1，和确认ack。回复 sync+ack
  • 客户端接受sync+ack，后发给服务端ack

四挥手--断开

  • 客户端发，要关啦
  • 服务端收到，先回复信息收到了，关闭完成了，再回复，关好了
  • 客户端回复，知道你关了

10七层模型和四层模型



-----------------------------------------------------------------------------

同源策略和限制

限制从一个源加载的文档或者脚本，与另一个源的资源交互。


通信

  • Ajax              同源
  • WebSocket   不限制同源
  • CORS            支持跨域和同源


Ajax

var xhr= XMLHttpRestuest ? new XMLHttpRequest() 
            :new window.ActiveXObject('Microsoft.XMLHTTP');
xhr.open('get',url,true);
xhr.onreadystatechange = function(){
    //开始异步执行
    if(xhr.readyState ===4){       //4响应内容解析完成，可以再服务端调用了
        if(xhr.status ==200){      //执行成功
            alert(xhr.responseText)//返回的内容
        }
    }
}xhr.send()

跨域通信

JSONP                  <script>标签，创建包含函数名的，返回
WebSocket
hash                 //url    #后面的，改变不刷新页面
postMessage          //h5新增      A发：window.postMessage()B收：addEventMessage('message')
CORS                 //可以说是支持跨域的ajax      fetch实现了CORS调用


安全

  • CSRF 跨站请求伪造cookie。                         措施：token验证
  • XSS   跨域脚本攻击，页面注入脚本                措施：


渲染机制

<!DOCTYPE html> h5


(HTML --->HTML tree) +  (CSS --->CSS tree)

--> (render )


重排 reflow         修改dom

重绘 repaint        颜色字体啥的


JS运行机制

js是单线程



页面性能

  • 资源压缩和平，减少http请求
  • 使用cdn
  • 非核心代码的加载-->异步加载的方式--->1动态脚本加载2defer3async-->
  • 利用浏览器缓存    -->缓存分类---->1expire   2last-modified
  • 预解析dns


1缓存分类

强缓存

  1. Expires Expires:Thu, 21 Jan 2017 23:39:02 GMT
  2. Cache-Control:Cache-Control:max-age=3600     (优先级高)

协商缓存

Last-Modified 

Etag服务器给你            If-None-Match


错误监控

即时运行捕获错误

  • try.catch      
  • window.onerror()

资源加载错误

  • object.onerror
  • performance.getEntries()           
  • Error

用Ajax上报错误


avatar
文章
阅读
粉丝