JavaScript高频-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51384850/article/details/142954891

垃圾回收机制

标记清除：标记阶段即为所有活动对象做上标记，清除阶段则把没有标记（也就是非活动对象）销毁。
- 内存碎片化，空闲内存块是不连续的，容易出现很多空闲内存块，还可能会出现分配所需内存过大的对象时找不到合适的块。
- 分配速度慢，因为即便是使用 First-fit 策略，其操作仍是一个 O(n) 的操作，最坏情况是每次都要遍历到最后，同时因为碎片化，大对象的分配效率会更慢。
引用计数：它把对象是否不再需要简化定义为对象有没有其他对象引用到它。如果没有引用指向该对象（引用计数为 0），对象将被垃圾回收机制回收
- 需要一个计数器，所占内存空间大，因为也不知道被引用数量的上限。
- 解决不了循环引用导致的无法回收问题

内存泄露的场景（Vue为例）

被全局变量、函数引用，组件销毁时未清除
被全局事件、定时器引用，组件销毁时未清除
被自定义事件引用，组件销毁时未清除
async 封装 Promise
await 处理 Promise 成功
try...catch 处理 Promise 失败
await 是同步写法，但本质还是异步调用。

// 同步代码执行完毕（event loop - call stack被清空）
// 执行微任务
// 尝试DOM渲染
// 触发event loop执行宏任务

for in以及forEach都是常规的同步遍历
for of用于异步遍历

事件机制和eventLoop

同步代码一行行放到Call Stack执行，执行完就出栈
遇到异步优先记录下，等待时机（定时、网络请求）
时机到了就移动到Call Queue(宏任务队列)
- 如果遇到微任务（如promise.then）放到微任务队列
- 宏任务队列和微任务队列是分开存放的
  - 因为微任务是ES6语法规定的
  - 宏任务(setTimeout)是浏览器规定的 DOM 渲染后再触发
  - 微任务比宏任务执行的更早 DOM 渲染前会触发
- 宏任务：setTimeout 、setInterval 、DOM事件、Ajax
- 微任务：Promise.then、async/await
- ```
console.log(100)
setTimeout(() => {
  console.log(200)
})
Promise.resolve().then(() => {
  console.log(300)
})
console.log(400)
// 100 400 300 200
```
如果Call Stack为空，即同步代码执行完，Event Loop
开始工作
- Call Stack为空，尝试先DOM渲染，在触发下一次Event Loop
轮询查找Event Loop，如有则移动到Call Stack
然后继续重复以上过程（类似永动机）

储存

特性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	`4KB`	`5M`	`5M`	无限
与服务端通信	每次都会携带在 `header` 中，对于请求性能影响	不参与	不参与	不参与

cookie 需要注意安全性

属性	作用
`value`	如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识
`http-only`	不能通过 `JS` 访问 `Cookie`，减少 `XSS` 攻击
`secure`	只能在协议为 `HTTPS` 的请求中携带
`same-site`	规定浏览器不能在跨域请求中携带 `Cookie`，减少 `CSRF` 攻击

浏览器缓存机制

缓存位置
- Service Worker
  - 可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
  - Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全
  - Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。
  - 不管是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示是从 Service Worker 中获取的内容。
```
// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    })
  )
})
```
- Memory Cache
  - Memory Cache 是内存中的缓存。读取高效，可是缓存持续性很短，会随着进程的释放而释放。
  - 访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存。
- Disk Cache
  - 存储在硬盘中的缓存，读取速度慢，容量大和存储时效性长
  - 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据
- Push Cache
  - 缓存时间短暂，只在会话（Session）中存在，一旦会话结束就被释放。
缓存策略
- 强缓存
  
  强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200
  - Expires: Wed, 22 Oct 2018 08:41:00 GMT 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
  - Cache-control: max-age=30优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。可以在请求头或者响应头中设置，并且可以组合使用多种指令
  - 协商缓存
    
    协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
    - Last-Modified: 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源。因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源
    - ETag: If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。
实际场景应用缓存策略
- 频繁变动的资源
  
  对于频繁变动的资源，首先需要使用 Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。
- 代码文件
  
  对文件名进行哈希处理，只有当代码修改后才会生成新的文件名。给代码文件设置缓存有效期一年 Cache-Control: max-age=31536000，这样只有当 HTML 文件中引入的文件名发生了改变才会去下载最新的代码文件，否则就一直使用缓存