浏览器（必看）

[MJingv]

浏览器存储

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

cookie

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

Service Worker

1. Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能
2. 使用 Service Worker的话，传输协议必须为HTTPS
3. 实现步骤：
   • 先注册 Service Worker
   • 监听install设置缓存
   • 通过拦截请求的方式查询是否存在缓存

[MJingv]

浏览器缓存机制

1.缓存位置

从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache
5. 网络请求

Service Worker

• Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
• 当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。
• 但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

Memory Cache

• 内存中的缓存，读取内存中的数据肯定比磁盘快
• 缓存持续性很短，会随着进程的释放而释放

Disk Cache

• Disk Cache 覆盖面基本是最大的
• 它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。
• 即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据

Push Cache

• http2
• 缓存时间也很短暂，只在会话（Session）中存在，一旦会话结束就被释放

网络请求

• 如果所有缓存都没有命中的话，那么只能发起请求来获取资源了。

2.缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

1.强缓存

• 强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control

• 强缓存表示在缓存期间不需要请求，state code 为 200

1. Expires

   • Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

2. Cache-Control

   • 出现于 HTTP/1.1，优先级高于 Expires
   • 可以在请求头或者响应头中设置，并且可以组合使用多种指令

   指令	作用
   public	表示响应可以被客户端&&服务器端缓存
   private	只能被客户端缓存
   max-age=30	缓存30s后过期，需要重新请求
   s-maxage=30	覆盖max-age，作用同上，只在【代理服务器】生效
   no-store	不存
   no-cache	缓存并立即失效，下次验证是否过期
   max-stale=30	30s内即使失效也用
   min-fresh=30	希望在30s内获取最新的响应

2.协商缓存

• 如果缓存过期了，就需要发起请求验证资源是否有更新
• 协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
• 当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期

1. Last-Modified 和 If-Modified-Since

   • Last-Modified 表示本地文件最后修改日期
   • If-Modified-Since 会将 Last-Modified 的值发送给服务器,
   • Last-Modified 缺点：1.仅打开也会变 2.单位s 改进方案etag

2. ETag 和 If-None-Match

   • ETag 类似于文件指纹
   • If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来
   • ETag 优先级比 Last-Modified 高

没有设置缓存策略：浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间

3.实际场景应用缓存策略

1.频繁变动的资源

• Cache-Control: no-cache 使浏览器每次都请求服务器，
• 配合 ETag 或者 Last-Modified来验证资源是否有效

2.代码文件

• 除html（因为变化很多）
• 对文件名进行哈希处理

[MJingv]

浏览器渲染原理

1.浏览器接收html文件并转化为dom树

• 字节数据(0/1)=> 字符串(代码) => token(词法分析) => node => dom

2.将css文件转换为cssom树

• 字节数据(0/1)=> 字符串(代码) => token(词法分析) => node => cssom

• 尽可能的避免写过于具体的 CSS 选择器（少嵌套）

• 尽量少的添加无意义标签，保证层级扁平

3.生成渲染树

• 生成 DOM 树和 CSSOM 树以后，就需要将这两棵树组合为渲染树
• 渲染树只会包括需要显示的节点和这些节点的样式信息（不显示 display: none）

当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上

为什么操作 DOM 慢

当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

插入几万个 DOM，如何实现页面不卡顿？

• requestAnimationFrame
• 虚拟滚动(只渲染可视区域内的内容)
• react-virtualized

重绘（Repaint）和回流（Reflow）

• 重绘和回流其实也和 Eventloop

  1. 当 Eventloop 执行完 Microtasks 后，会判断 document 是否需要更新，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。
  2. 然后判断是否有 resize 或者 scroll 事件，有的话会去触发事件，所以 resize 和 scroll 事件也是至少 16ms 才会触发一次，并且自带节流功能。
  3. 判断是否触发了 media query
  4. 更新动画并且发送事件
  5. 判断是否有全屏操作事件
  6. 执行 requestAnimationFrame 回调
  7. 执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
  8. 更新界面
  9. 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback 回调。

• 减少重绘和回流

1. 使用 transform 替代 top
2. requestAnimationFrame
3. 使用 visibility 替换 display: none
4. 新图层：will-change、video、iframe

[MJingv]

垃圾回收机制

新生代算法

• 新生代中的对象一般存活时间较短，使用 Scavenge GC 算法
• 在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。
• 在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。
• 新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。
• 算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。
• 当复制完成后将 From 空间和 To 空间互换，这样 GC 就结束了

老生代算法

• 老生代中的对象一般存活时间较长且数量也多，使用了两个算法，分别是标记清除算法和标记压缩算法
• 什么情况下对象会出现在老生代空间中

  1. 新生代中的对象是否已经经历过一次 Scavenge 算法，如果经历过的话，会将对象从新生代空间移到老生代空间中。
  2. To 空间的对象占比大小超过 25 %。在这种情况下，为了不影响到内存分配，会将对象从新生代空间移到老生代空间中

• 标记清除算法: 标记存活的对象，未被标记的则被释放

  1. 增量标记: 小模块标记，在代码执行间隙执，GC 会影响性能
  2. 并发标记(最新技术): 不阻塞 js 执行

• 压缩算法: 将内存中清除后导致的碎片化对象往内存堆的一端移动，解决 内存的碎片化

[MJingv]

内存泄露

• 意外的全局变量: 无法被回收
• 定时器: 未被正确关闭，导致所引用的外部变量无法被释放
• 事件监听: 没有正确销毁 (低版本浏览器可能出现)
• 闭包: 会导致父级中的变量无法被释放
• dom 引用: dom 元素被删除时，内存中的引用未被正确清空

可用 chrome 中的 timeline 进行内存标记，可视化查看内存的变化情况，找出异常点。

[MJingv]

前端路由

from 浅谈前端路由

hash router （location.hash+hashchange事件）

https://segmentfault.com/a/1190000011956628#articleHeader2

• 这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。
• 另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化

h5 history （history.pushState()+popState事件）

• pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求

  pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录

• 用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。
• 因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面

[MJingv]

provisional headers are shown出现的情况有这么几种：

• 跨域，请求被浏览器拦截
• 请求被浏览器插件拦截
• 服务器出错或者超时，没有真正的返回
• 强缓存from disk cache或者from memory cache，此时也不会显示

[MJingv]

https://www.xiabingbao.com/post/fe/hash-history-router.html

前端路由实现