浏览器原理

hash路由和history路由的区别？原理是什么？

浏览器缓存

:::info

  1. 先判断资源是否命中强缓存，命中则直接从disk里拿到资源；
  2. 如果没有命中强缓存，判断是否命中协商缓存，命中则走协商缓存；
  3. 如果命中了协商缓存，会发起请求，服务端根据Request Header里的If-None-Match（对应Etag）和If-Modified-Since（对应Last-Modified）判断资源是否过期，没过期则返回304状态码，浏览器依旧用disk里的资源。如果资源过期，则服务端会返回新的资源；
  4. 如果也没有命中协商缓存，则这个请求不走缓存策略，发起真实的请求，从服务端拿资源 :::

启发式缓存

刷新页面对缓存的影响

刷新页面，html会在Request Header带上cache-control: max-age=0字段。
html不会读强缓存了，但是对jss和css资源的强缓存没影响。
除非把浏览器的disable-cache勾选上，就会把资源的缓存失效掉。因为请求的时候，加个了cache-control: max-age=0

请求头的Cache-Control和响应头的Cache-Control的区别

  1. 请求头里的Cache-Control影响的是当前这一次请求
  2. 响应头里的Cache-Control是告诉浏览器这样存储，下次依照这样来。影响的是下一次请求。
  3. 默认是按照上次给的规则来，但浏览器在真正的发起这次请求时，可以有自己的行为，比如硬性重新加载，不走缓存。


    Cache-Control的max-age=0和no-cache的区别？

controlno-c

重排与重绘

  • 初级：说清楚什么是重排，什么是重绘，在什么情况下会发生会触发哪一种？两者的性能差异
  • 中级：重排跟流式布局的关系，如何规避or避免重排？30FPS怎么衡量，怎么优化？
  • 高阶：浏览器的渲染流程是什么样的？

怎么展开加速的，3D加速有什么缺点？

image.png
image.png