1、浏览器缓存位置和优先级

1. Service Worker

2. Memory Cache（内存缓存）

3. Disk Cache（硬盘缓存）

4. Push Cache（推送缓存）

5. 以上缓存都没命中就会进行网络请

2、说说不同缓存间的差别

1. Service Worker
   是独立的线程，我们可以在这个线程中缓存文件，在主线程需要的时候读取这里的文件，Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则，并且缓存是持续性的

2. Memory Cache
   即内存缓存，内存缓存不是持续性的，缓存会随着进程释放而释放

3. Disk Cache
   即硬盘缓存，相较于内存缓存，硬盘缓存的持续性和容量更优，它会根据HTTP header的字段判断哪些资源需要缓存

4. Push Cache
   即推送缓存，是HTTP/2的内容，目前应用较少

3、介绍一下浏览器缓存策略

3.1、强缓存(不向服务器询问的缓存)

1). 设置Expires
即过期时间，表示缓存会在这个时间后失效。

2). 设置Cache-Control
HTTP/1.1新增字段，Cache-Control可以通过max-age字段来设置过期时间

3.2、协商缓存(需向服务器询问缓存是否已经过期)

1). Last-Modified
即最后修改时间，浏览器第一次请求资源时，服务器会在响应头上加上Last-Modified ，当浏览器再次请求该资源时，浏览器会在请求头中带上If-Modified-Since 字段，字段的值就是之前服务器返回的最后修改时间，服务器对比这两个时间，若相同则返回304，否则返回新资源，并更新Last-Modified

2). ETag
HTTP/1.1新增字段，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样：服务器发送 ETag 字段 -> 浏览器再次请求时发送 If-None-Match -> 如果ETag值不匹配，说明文件已经改变，返回新资源并更新ETag，若匹配则返回304

3). 对比

ETag 比 Last-Modified 更准确：如果我们打开文件但并没有修改，Last-Modified 也会改变，并且 Last-Modified 的单位时间为一秒，如果一秒内修改完了文件，那么还是会命中缓存

如果什么缓存策略都没有设置，那么浏览器会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间

4、简述浏览器的渲染过程是怎样的

1. HTML 和 CSS 经过各自解析，生成 DOM 树和 CSSOM 树
2. 合并成为渲染树
3. 根据渲染树进行布局
4. 最后调用 GPU 进行绘制，显示在屏幕上

GPU是专门为处理图形而设计，所以它在速度和能耗上更有效率

5、什么是回流(重排)，什么情况下会触发回流

• 什么是回流
  当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流。

• 触发回流的情况

  • 1、DOM 元素的几何属性(width/height/padding/margin/border)发生变化时会触发回流
  • 2、 DOM 元素移动或增加会触发回流
  • 3、读写 offset/scroll/client 等属性时会触发回流
  • 4、调用 window.getComputedStyle 会触发回流

• 如何减少回流

  • 1、使用 class 替代 style，减少 style 的使用
  • 2、使用resize(屏幕缩放）、scroll(屏幕滚动) 时进行防抖和节流处理，这两者会直接导致回流
  • 3、使用 visibility 替换 display: none，因为前者只会引起重绘，后者会引发回流
  • 4、批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流
  • 5、我们在获取 offsetWidth 这类属性的值时，可以使用变量将查询结果存起来，避免多次查询，每次对 offset/scroll/client 等属性进行查询时都会触发回流
  • 6、复杂的动画效果会频繁地触发回流重绘，我们可以将动画元素设置绝对定位从而脱离文档流避免反复回流重绘。

6、什么是重绘，什么情况下会触发重绘

• DOM 样式发生了变化，但没有影响到页面布局时，会触发重绘，而不会触发回流。

• 重绘由于 DOM 位置信息不需要更新，省去了布局过程，因而性能上优于回流

7、GPU加速的优点与缺点

优点：使用transform、opacity、filters等属性时，会直接在GPU中完成处理，这些属性的变化不会引起回流重绘

缺点：GPU渲染字体会导致字体模糊，过多的GPU处理会导致内存问题

参考链接：http://www.atguigu.com/mst/html/gp/17417.html