跳到主要内容

· 阅读需 5 分钟
熊滔

防抖与节流是两个出于性能考虑提出的概念,如果在短时间内多次触发同一函数,可能会产生页面的卡顿,以及性能的降低,针对这种情况,提出了防抖与节流两个解决方案。

防抖与节流的概念

为了解释如上的两个概念,我们以一个例子开始。有一个搜索框,当用户输入搜索内容时,会同时向后端发起请求,给出相近的词条以给用户提示

如果当每次用户输入一个字符都向都端发起一个请求,那么发起请求的次数就太频繁了,这时有两种策略:

  1. 当用户停止输入一段时间后,例如 500ms,我们向后端发起一个请求
  2. 每隔固定的时间向后端发起一个请求

第一种策略我们叫做防抖,第二种策略我们称为节流。

有一个形象的比喻,以公交车发车为例,有两种发车方案:

  1. 当乘客上车后,如果经过一段时间没有乘客上车了,就发车
  2. 发车时间固定,每隔一段时间发一次车

我们将发车比喻为向后端发起一个请求,那么这两种发车的策略就分别对应为防抖和节流。

· 阅读需 13 分钟
熊滔

同源策略

什么是同源策略:同 domain(或IP),同端口,同协议视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源,这种安全限制称为同源策略。我们看几个例子判断两个链接是否是同源

url1url2是否同源原因
http://example.com:8080http://example.com:80端口不同
http://example.com:8080https://example.com:8080协议不同
http://www.baidu.comhttp://www.taobao.com域名不同
http://127.0.0.1:8080http://localhost:8080域名与域名对应的IP地址不同源
http://example.com:8000/a.jshttp://example.com:8000/b.js协议,域名,端口相同,子域名不同