浏览器渲染机制面试_9. 浏览器缓存与渲染机制

9.1. 介绍一下浏览器缓存位置和优先级

1. Service Worker

2. Memory Cache(内存缓存)

3. Disk Cache(硬盘缓存)

4. Push Cache(推送缓存)

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

9.2. 说说不同缓存间的差别

1. Service Worker

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

2. Memory Cache

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

3. Disk Cache

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

4. Push Cache

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

9.3. 介绍一下浏览器缓存策略

1. 强缓存(不要向服务器询问的缓存)

1). 设置Expires

即过期时间，例如「Expires: Thu, 26 Dec 2019 10:30:42 GMT」表示缓存会在这个时间后失效，这个过期日期是绝对日期，如果修改了本地日期，或者本地日期与服务器日期不一致，那么将导致缓存过期时间错误。

2). 设置Cache-Control

HTTP/1.1新增字段，Cache-Control可以通过max-age字段来设置过期时间，例如「Cache-Control:max-age=3600」除此之外Cache-Control还能设置private/no-cache等多种字段

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% 作为缓存时间

9.4. 简述浏览器的渲染过程是怎样的

1. HTML 和 CSS 经过各自解析，生成 DOM 树和 CSSOM 树

2. 合并成为渲染树

3. 根据渲染树进行布局

4. 最后调用 GPU 进行绘制，显示在屏幕上

9.5. 如何根据浏览器渲染机制加快首屏速度

1. 优化文件大小

HTML 和 CSS 的加载和解析都会阻塞渲染树的生成，从而影响首屏展示速度，因此我们可以通过优化文件大小、减少 CSS 文件层级的方法来加快首屏速度

2. 避免资源下载阻塞文档解析

浏览器解析到

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

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

2. DOM 元素的几何属性(width/height/padding/margin/border)发生变化时会触发回流

3. DOM 元素移动或增加会触发回流

4. 读写 offset/scroll/client 等属性时会触发回流

5. 调用 window.getComputedStyle 会触发回流

9.7. 什么是重绘，什么情况下会触发重绘

DOM 样式发生了变化，但没有影响 DOM 的几何属性时，会触发重绘，而不会触发回流。重绘由于 DOM 位置信息不需要更新，省去了布局过程，因而性能上优于回流

9.8. GPU加速的优点与缺点

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

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

9.9. 如何减少回流

1. 使用 class 替代 style，减少 style 的使用

2. 使用 resize、scroll 时进行防抖和节流处理，这两者会直接导致回流

3. 使用 visibility 替换 display: none，因为前者只会引起重绘，后者会引发回流

4. 批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流

5. 避免触发同步布局事件，我们在获取 offsetWidth 这类属性的值时，可以使用变量将查询结果存起来，避免多次查询，每次对 offset/scroll/client 等属性进行查询时都会触发回流

6. 对于复杂动画效果,使用绝对定位让其脱离文档流，复杂的动画效果会频繁地触发回流重绘，我们可以将动画元素设置绝对定位从而脱离文档流避免反复回流重绘。

上一篇: 8. AJAX

下一篇: 10. jQuery最核心的3个问题