浅谈-浏览器工作原理1
浏览器事件循环
推荐文章：带你彻底弄懂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代码的具体流程：
- 执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
- 全局Script代码执行完毕后，调用栈Stack会清空；
- 从微队列microtask queue中取出位于队首的回调任务，放入调用栈Stack中执行，执行完后microtask queue长度减1；
- 继续取出位于队首的任务，放入调用栈Stack中执行，以此类推，直到直到把microtask queue中的所有任务都执行完毕。注意，如果在执行microtask的过程中，又产生了microtask，那么会加入到队列的末尾，也会在这个周期被调用执行；
- microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空；
- 取出宏队列macrotask queue中位于队首的任务，放入Stack中执行；
- 执行完毕后，调用栈Stack为空；
- 重复第3-7个步骤；
- 重复第3-7个步骤；
- ......
跨域
推荐视频：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文件的命名格式是：用户名@网站地址[数字].txtCookie的优点：
- 给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语
- 弥补了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 的作用就发挥出来了。
查看35道真题和解析
