面试题系列均来自鱼皮的知识星球——编程导航

JS 会出现内存泄漏问题么？在哪些情况下可能会出现内存泄漏？

JavaScript 也会出现内存泄漏问题。内存泄漏是指一些被分配的内存空间，因为某些原因而无法被垃圾回收机制回收，导致占用内存空间无法被释放，最终会导致程序崩溃。

在 JavaScript 中，内存泄漏通常出现在以下情况：

  1. 意外的全局变量：如果一个变量没有被垃圾回收，那么它的作用域会被认为是全局的，这样就会造成意外的全局变量，导致内存泄漏。
  2. 定时器没有被清除：如果在页面关闭前，某个定时器没有被清除，它所引用的对象就不会被垃圾回收，从而导致内存泄漏。
  3. 闭包：如果一个闭包中引用了外部变量，而这个闭包被其他代码引用，那么它所引用的外部变量就不会被垃圾回收，从而导致内存泄漏。
  4. DOM 引用：如果在页面上有大量的 DOM 元素，而这些元素被 JavaScript 代码所引用，但是却没有被正确地释放，就会导致内存泄漏。
  5. 循环引用：如果两个或多个对象之间形成了循环引用，即相互引用对方，那么它们都不会被垃圾回收，从而导致内存泄漏。

为了避免 JavaScript 中的内存泄漏问题，可以采取以下措施：

  1. 避免意外的全局变量，可以使用 “use strict” 模式，或者在函数中使用 var、let 或 const 声明变量。
  2. 在使用定时器时，一定要记得及时清除定时器。
  3. 尽量避免使用闭包，如果必须使用闭包，要注意不要引用外部变量或者及时清除闭包。
  4. 在操作 DOM 元素时，要及时释放引用，避免 DOM 引用导致内存泄漏。
  5. 避免循环引用，可以在对象不再使用时，手动断开对象之间的引用关系。

HTTP 缓存有哪些实现方式？什么是协商缓存和强制缓存？

HTTP 缓存可以通过以下几种方式进行实现：

  1. 浏览器缓存：浏览器可以将最近请求过的资源保存到本地，下次请求时可以直接从本地读取，从而提高访问速度。
  2. 代理缓存：代理服务器可以缓存响应，减少对原始服务器的请求次数，从而加快响应速度。
  3. 网关缓存：网关可以缓存来自多个原始服务器的响应，然后将响应发送到客户端，从而提高性能。

HTTP 缓存可以分为协商缓存和强制缓存两种类型。

强制缓存是指浏览器在请求资源时，不会发送任何请求头，直接从本地缓存中读取资源，从而提高响应速度。常见的实现方式包括：

  1. Expires 头部：指定资源过期的时间，如果在过期时间之前再次请求该资源，浏览器将直接从缓存中读取资源。
  2. Cache-Control 头部：可以指定资源的缓存策略，包括 public、private、no-cache 等，控制浏览器的缓存行为。

协商缓存是指浏览器在请求资源时，会发送一些请求头到服务器，询问服务器资源是否已经发生改变。如果资源未发生改变，服务器将返回 304 状态码，告诉浏览器可以从缓存中读取资源，从而减少了网络带宽的使用。常见的实现方式包括：

  1. Last-Modified / If-Modified-Since 头部：浏览器在请求资源时，会将资源最后修改时间（Last-Modified）发送到服务器，服务器检查资源是否发生变化，如果没有发生变化，返回 304 状态码，否则返回新的资源。
  2. ETag / If-None-Match 头部：服务器可以给每个资源分配一个唯一的标识符（ETag），浏览器在请求资源时，将该标识符发送到服务器，服务器检查资源是否发生变化，如果没有发生变化，返回 304 状态码，否则返回新的资源。

需要注意的是，协商缓存虽然可以减少网络带宽的使用，但是需要服务器进行资源比较，因此会增加服务器的负载。

怎么进行站点内的图片性能优化？

站点内的图片性能优化可以从以下几个方面入手：

  1. 图片压缩：通过压缩图片的大小和质量，可以减少图片的加载时间。可以使用图片压缩工具（如 TinyPNG、JPEGmini 等）来压缩图片。
  2. 图片格式优化：选择正确的图片格式可以减少图片的大小。常见的图片格式有 JPEG、PNG 和 GIF，可以根据图片的特点和用途选择合适的格式。
  3. 延迟加载：对于页面中的长列表或懒加载场景，可以延迟加载图片，减少页面加载时间。可以使用工具（如 lazysizes、Lozad.js 等）来实现图片的延迟加载。
  4. 图片预加载：在用户访问页面之前，可以预加载一些重要的图片，从而提高用户体验。可以使用工具（如 PreloadJS、image-preload 等）来实现图片的预加载。
  5. 响应式图片：对于不同大小的屏幕，可以使用不同大小的图片来提高用户体验。可以使用 HTML 标签的 srcset 和 sizes 属性来实现响应式图片。
  6. CDN 加速：使用 CDN 可以加速图片的加载速度，缩短图片的响应时间。可以选择静态文件托管服务商（如七牛云、阿里云等）来实现 CDN 加速。
  7. 图片懒加载：对于网页中需要加载大量图片的场景，可以使用图片懒加载技术，即当页面滚动到某个区域时再加载该区域内的图片，从而减少页面加载时间和网络带宽的消耗。可以使用工具（如 lazyload、intersection-observer 等）来实现图片懒加载。

需要注意的是，以上优化策略都是针对特定场景和需求进行优化的，需要根据实际情况选择合适的优化策略。同时，在进行图片优化时，需要保证图片质量和用户体验，并注意不要过度压缩图片，影响用户体验。