一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
金三银四，一转眼就到银四了。经历一番社会毒打后，来总结整理一番，希望在大环境不大好的情况下，我们依然能眼里有光，保持学习的热情，浇灌焦虑的内心。
2022常问基础，整理版
如有解释不当，希望可以留言指正我哦
https
相关提问：了解https吗，为什么https比较安全，https的加密过程
因为http是明文传输，容易被中间商劫持，所以就有了https,https是http+TCL\SSL的加密传输。它是用非对称加密的方式传输通信的key，再用对称加密的方式传输通信的内容。
如果会继续追问https详细加密过程，可以简单这么说
- 浏览器和操作系统中，会预先保存认证过的ca证书机构
- 浏览器会先用http方式请求（加密过程都是用http）服务器，带上支持的加密算法列表
- 服务器会返回使用加密算法，以及一个带有公钥的证书（服务器自身有公钥和私钥）
- 浏览器收到后，校验证书（ca证书机构）合法性，然后用公钥加密（非对称）一个随机字符串A（新秘钥），发给服务器
- 服务器用私钥解密，得到 字符串A，然后后续服务器传输内容，用此 字符串A作为加密key，使用对称加密传送内容给浏览器
CDN缓存和回源
CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。当客户端向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向源站发出回源请求，从源站拉取最新数据，更新本地缓存，并将最新数据返回给客户端。所以，如果我们修改了内容，最好加个版本号，来容CDN重新获取资源，从而减少不必要的麻烦
- 好处
1、CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
2、大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载，解决网站高流量、大并发的问题。
- 限制
1、CDN 对于不经常访问的资源是无效的。通常只有在 CDN缓存过期前有至少两次访问的资源才算有效。
2、CDN 对于不断变化的资源不适用。
3、CDN 对于不想公开资源可能是一个糟糕的选择。
缓存
强缓存
1、cache-controls:max-age 资源有效期
2、expires 多久之后过期
3、状态码是200
协商缓存
1、last-modifined: 服务器返回 last-modifined 后浏览器存在 if-modifined-since. 再次请求时把 if-modifined-since 发到服务器，服务器会跟last-modifined做对比，一致的话就返回304告诉浏览器读缓存。
2、ETag: 是文件的哈希值，if-none-match
3、状态码是304
网络安全
- xss漏洞（cross-site-scripting:跨站脚本攻击）：两种表现形式
1、持久型：发帖子时输入执行代码，每次点击的时候都会执行
2、输入型：一些搜索接口实现方式是url后带参数，可能就会被带上执行代码
防范：标签过滤，html转义
- csrf攻击（cross-site-request-forgery:跨站请求伪造）是因为浏览器对cookie的管理机制造成的
防护策略：阻止不明外域的访问。提交时要求附加本域才能获取的信息。
事件循环
js是单线程语言，同步和异步任务分别进入不同的执行环境，同步的进入主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是 Event Loop (事件循环),每个宏任务结束后, 都要清空所有的微任务。
宏任务有
- script(整体代码)
- setTimeout/setInterval
- setImmediate
- requestAniamationFrame
- I/O(文件的读写)
- UI render(界面渲染)
- Promise
- 网络请求 微任务有
- process.nextTick（NodeJS）
- Promise中的then
- Async/Await(实际就是promise)
- MutationObserver(html5新特性) -- 监听DOM的变化，包括新增、删除、更新、属性变化等
cookie、localStorage的区别
- cookie -- 只能存储一些ID之类简单的数据
可设置失效时间，没设置的话，默认是关闭浏览器后失效
大小：4KB
场景：登陆
- local storage 永久性本地存储
除非被清除，否则永久保存
大小：5M
- session storage 会话级别本地存储
当前页面会话下有效，页面关闭，数据清空
大小：5M
跨域
- Jsonp
原理：用script标签请求接口地址，接口返回callback函数，页面事先也定义的此函数
优点：兼容性好
缺点：ie789不支持http的返回头，所以jsonp只能用get方式
- cors跨域(cross-orgin-resource sharing 跨域资源共享)
原理：浏览器请求头 origin ，接口返回头 Access-Control-Allow-Credentials 一致的话技能进行通信
优点：可以发送任何请求
缺点：当前请求如果是复杂请求的时候得先以option方法发送一个预请求做个预检，再发真实的请求。发送两次请求可能会有性能上的损耗。
只有满足以下全部条件，才不会发起预检：
1、get,post,head 类型请求
2、没有添加自定义请求头
3、content-type 需要是默认的三个（表单提交）： application/x-www-form-urlencoded、multipart/form-data、text/plain
还有设置了 content-type: application/json 这种也会 Access-Control-Max-Age: 86400，这个服务器返回的跨域头，可以设置多久时间内，不再预检
