阅读 39

前端HTTP整理

cookie和session的区别

  • 1、存放位置不同,cookie存放在客户端,session存放在服务器端
  • 2、安全性不同,cookie没有session安全,其他人可以根据你的cookie对你进行cookie欺骗。
  • 3、使用性能不同,session保存在服务器上,当访问增大时,会比较占用性能。
  • 4、存储大小不同,cookie单个保存的数据不能超过4k,session无限制

cookie、localstorage、sessionStorage的区别

垃圾回收机制

  • 标记清理 当变量进入上下文的时候,会给变量添加一个进入标记,当变量离开上下文的时候,给变量加上离开的标记。当垃圾回收机制运行的时候,会标记从内存中的所有变量,然后再把上下文里面的变量的标记全部清除,剩下的没有被取消标记的代表没有再上下文里面,则被清除
  • 计数引用 给每一个数据都添加一个初始值0,当数据被引用了则加上1,如果被覆盖掉则减去1,当垃圾回收机制运行时,将所有数值为0的数据都回收。但是循环引用永远无法被垃圾回收,因为相互引用不可能数值为0。所以还是建议标记清理

loader与plugin的区别

1、loader是一个转换器,将A文件编译成B文件,因为webpack本身只支持js和json两种文件格式,对于其他的文件需要通过loader将其转换为commonjs规范的文件后,webpack才能解析到。 2、plugin是一个扩展器,它丰富了webpack本身,针对loader结束后,webpack打包的整个过程,他并不是直接去操作文件,而是基于事件机制工作,会监听webpack打包的某些节点,执行广泛的任务。

webpack是对静态资源进行打包,但实际上webpack本质上是一种事件流的机制,他的工作就是将各个插件进行串联,实现原理是Tapable,Taptable的实现原理是发布订阅模式,Taptable保证了事件的有序性,可以将各个插件串联起来,webpack广播事件的时候,插件只需要监听他关心的事件即可。

跨域问题的解决方案

首先,跨域是因为产生了同源策略,同源是“协议、域名、端口”三者都相同,即使两个域名指向同一个ip地址,也是非同源的。同源策略主要是为了防止XSS、crsf攻击。

1、jsonp

jsonp的跨域原理是通过在html中动态添加script标签,返回的数据包括函数调用,实现跨域,在script的src属性作为请求的url。

2、cors

在请求中,在head中添加字段,Access-Control-Allow-Origin,后面是被允许访问的请求地址,他是使用额外的HTTP告诉浏览器让它被准许访问来自不同源服务器上的指定的资源。

3、postMessage

主页面用iframe标签引入另一个页面x,然后用postMessage发送数据,x页面监听到数据后返回数据。

4、Document.domian

只适合主域名相同,但子域名不同的iframe跨域。 实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。

5、websokect

本身就支持跨域,websokect只需要建立一次连接,就能保证永久接通,只需要利用Socket.IO等软件包实现服务器端和客户端的互相监听。

6、nigix反向代理

监听本地localhost的对应的端口号,但凡是与监听一致的前缀,全部都跳转到真正的服务器端网址
比如
 server {
 	listen 8080; // 监听的端口号
    server_name localhost; // 域名是localhosthttp://www.hsy.com
    localhost ^~aip { // 但凡是localhost:8080/api这个样子的,全部都转发到真的服务器地址http://www.hsy.com
    		proxy_pass http://www.hsy.com
        }
	}
复制代码

GET 和PSOT的区别

1、POST比GET更安全
2、GET请求会一次性把请求头和数据全部发出,但是POST请求会先发送请求头,服务器响应之后再会发送数据。
3、GET请求传输的大小为2kb左右,而post一般不做限制
4、GET通过URL传递,POST放在Request body中
5、GET和POST的底层都是TCP/IP
6、GET是从服务器上获取数据,POST是向服务器传输数据
复制代码

浏览器缓存机制

浏览器缓存分为强缓存和协商缓存。强缓存优先于协商缓存

文章分类
前端
文章标签