浏览器事件循环

推荐文章：带你彻底弄懂Event Loop

宏队列和微队列

宏队列，macrotask，也叫tasks。 一些异步任务的回调会依次进入macro task queue，等待后续被调用，这些异步任务包括：

  • setTimeout
  • setInterval
  • setImmediate (Node独有)
  • requestAnimationFrame (浏览器独有)
  • I/O
  • UI rendering (浏览器独有)

微队列，microtask，也叫jobs。 另一些异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括：

  • process.nextTick (Node独有)
  • Promise
  • Object.observe
  • MutationObserver

（注：这里只针对浏览器和NodeJS）

浏览器事件循环图

这张图将浏览器的Event Loop完整的描述了出来，我来讲执行一个JavaScript代码的具体流程：

  1. 执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
  2. 全局Script代码执行完毕后，调用栈Stack会清空；
  3. 从微队列microtask queue中取出位于队首的回调任务，放入调用栈Stack中执行，执行完后microtask queue长度减1；
  4. 继续取出位于队首的任务，放入调用栈Stack中执行，以此类推，直到直到把microtask queue中的所有任务都执行完毕。注意，如果在执行microtask的过程中，又产生了microtask，那么会加入到队列的末尾，也会在这个周期被调用执行；
  5. microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空；
  6. 取出宏队列macrotask queue中位于队首的任务，放入Stack中执行；
  7. 执行完毕后，调用栈Stack为空；
  8. 重复第3-7个步骤；
  9. 重复第3-7个步骤；
  10. ......

跨域

推荐视频：https://www.bilibili.com/video/BV1wT4y1g788?from=search&seid=16454732617394031399

同源策略

  • 协议相同
  • 域名相同
  • 端口相同

http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下

  • 目的

    是为了保证用户信息的安全，防止恶意的网站窃取数据

    （例如：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，造成隐私泄露）

  • 跨域问题有哪些限制

    （1） Cookie、LocalStorage 和 IndexDB 无法读取。

    （2） DOM 无法获得。

    （3） AJAX 请求不能发送（同源政策规定，AJAX请求只能发给同源的网址，否则就报错。）

  • 造成问题

    服务器拆分无法互相访问

图片说明

解决方案

JSONP

方案原理：script / img / link / iframe 。。都不受跨域限制

  • 原理

    //src后面跟一个callback
src='http://127.0.0.1:4000/list?callback=func'
//服务端坚守callback参数后开始准备一个字符串,格式为func(JSON.stringify(data))的字符串

//客户端接收到之后自动执行全局函数func(data)

图片说明

  • 代码（基于express和JQuery）

    • 服务端

图片说明

  • 客户端

图片说明

  • 结果

图片说明 图片说明

  • JSONP缺点

    • 只能用于get请求
    • 安全性低，因为服务器即使返回的是木马，也会被执行

CORS跨域资源共享

原理：修改服务器端响应头，可以设置指定网站访问

  • 代码

    • 服务端

图片说明 

**配置信息**

图片说明 

注意访问源可以写*，表示任意网站访问，但不能携带cookies
  • 客户端axios配置


图片说明

  • CORS缺点

    • 设置多个访问源请求时不能携带cookie

http proxy

解决了CORS中访问源多个网址不能携带cookies的问题

配合webpack webpack-dev-serve

  • 在webpack配置文件中填写

图片说明

nginx反向代理

websocket

iframe

。。。

缓存

缓存作用：因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

  • 宏观分类
    • 私有缓存，私有缓存就是用户专享的，各级代理不能缓存的缓存。
    • 共享缓存，共享缓存就是那些能被各级代理缓存的缓存。
  • 微观分类
    • 浏览器缓存
    • 代理服务器缓存
    • CDN缓存
    • 数据库缓存
    • 应用层缓存

浏览器缓存

http缓存

本地储存

参考文章：https://segmentfault.com/a/1190000017185195

cookies / LocalStorage / SessionStorage / indexDB

一、 背景介绍

推荐视频：https://www.bilibili.com/video/BV1CA411E7en?from=search&seid=1195523652820645237

  • cookie

    他的意思是小甜饼，cookie 确实非常小，它的大小限制为4KB左右，主要用途是保存登录信息，比如你登录某个网站可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段识别用户身份的数据来实现的。

    Cookie主要是由服务器生成，且前端也可以设置，保存在客户端本地的一个文件，通过response响应头的set-Cookie字段进行设置(默认情况下cookie是与浏览器同生命周期，杀死浏览器进程，cookie消失，注意，关闭单个页面cookie不会消失），且Cookie的内容自动在请求的时候被传递给服务器。如下：

    [HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]

    Cookie包含的信息：
    它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。

    一个网站只能读取它自己放置的信息，不能读取其他网站的Cookie文件。因此，Cookie文件还保存了host属性，即网站的域名或ip。
    这些属性以名值对的方式进行保存，为了安全，它的内容大多进行了加密处理。Cookie文件的命名格式是：用户名@网站地址[数字].txt

    Cookie的优点：

    • 给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语
    • 弥补了HTTP无连接特性
    • 站点统计访问人数的一个依据

    Cookie的缺点：

    • 它无法解决多人共用一台电脑的问题，带来了不安全因素
    • Cookie文件容易被误删除
    • 一人使用多台电脑
    • Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie
    • 容量有限制，不能超过4kb
    • 在请求头上带着数据安全性差

  • localStorage，

    HTML5 标准中新技术，早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，当时考虑到浏览器的兼容性，更通用的方案是使用 Flash。而如今，localStorage 已经被大多数浏览器所支持

    优点：

    • localStorage拓展了cookie的4k限制
    • localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽
    • localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

    缺点：

    • 需要手动删除，否则长期存在
    • 浏览器大小不一，版本的支持也不一样
    • localStorage只支持string类型的存储，JSON对象需要转换
    • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

  • sessionStorage

    它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。我们都应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

  • indexDB

    随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

    现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

    通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

    关于indexDB的知识可以查看这篇文章http://www.ruanyifeng.com/blo...

二、 三者的区别

图片说明

三、 应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简！比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中加入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 则是非常适合做这个工作的。

如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。