星哥の面试题Day27
面试题系列均来自鱼皮的知识星球——编程导航
JS 会出现内存泄漏问题么?在哪些情况下可能会出现内存泄漏?
JavaScript 也会出现内存泄漏问题。内存泄漏是指一些被分配的内存空间,因为某些原因而无法被垃圾回收机制回收,导致占用内存空间无法被释放,最终会导致程序崩溃。
在 JavaScript 中,内存泄漏通常出现在以下情况:
- 意外的全局变量:如果一个变量没有被垃圾回收,那么它的作用域会被认为是全局的,这样就会造成意外的全局变量,导致内存泄漏。
- 定时器没有被清除:如果在页面关闭前,某个定时器没有被清除,它所引用的对象就不会被垃圾回收,从而导致内存泄漏。
- 闭包:如果一个闭包中引用了外部变量,而这个闭包被其他代码引用,那么它所引用的外部变量就不会被垃圾回收,从而导致内存泄漏。
- DOM 引用:如果在页面上有大量的 DOM 元素,而这些元素被 JavaScript 代码所引用,但是却没有被正确地释放,就会导致内存泄漏。
- 循环引用:如果两个或多个对象之间形成了循环引用,即相互引用对方,那么它们都不会被垃圾回收,从而导致内存泄漏。
为了避免 JavaScript 中的内存泄漏问题,可以采取以下措施:
- 避免意外的全局变量,可以使用 “use strict” 模式,或者在函数中使用 var、let 或 const 声明变量。
- 在使用定时器时,一定要记得及时清除定时器。
- 尽量避免使用闭包,如果必须使用闭包,要注意不要引用外部变量或者及时清除闭包。
- 在操作 DOM 元素时,要及时释放引用,避免 DOM 引用导致内存泄漏。
- 避免循环引用,可以在对象不再使用时,手动断开对象之间的引用关系。
HTTP 缓存有哪些实现方式?什么是协商缓存和强制缓存?
HTTP 缓存可以通过以下几种方式进行实现:
- 浏览器缓存:浏览器可以将最近请求过的资源保存到本地,下次请求时可以直接从本地读取,从而提高访问速度。
- 代理缓存:代理服务器可以缓存响应,减少对原始服务器的请求次数,从而加快响应速度。
- 网关缓存:网关可以缓存来自多个原始服务器的响应,然后将响应发送到客户端,从而提高性能。
HTTP 缓存可以分为协商缓存和强制缓存两种类型。
强制缓存是指浏览器在请求资源时,不会发送任何请求头,直接从本地缓存中读取资源,从而提高响应速度。常见的实现方式包括:
- Expires 头部:指定资源过期的时间,如果在过期时间之前再次请求该资源,浏览器将直接从缓存中读取资源。
- Cache-Control 头部:可以指定资源的缓存策略,包括 public、private、no-cache 等,控制浏览器的缓存行为。
协商缓存是指浏览器在请求资源时,会发送一些请求头到服务器,询问服务器资源是否已经发生改变。如果资源未发生改变,服务器将返回 304 状态码,告诉浏览器可以从缓存中读取资源,从而减少了网络带宽的使用。常见的实现方式包括:
- Last-Modified / If-Modified-Since 头部:浏览器在请求资源时,会将资源最后修改时间(Last-Modified)发送到服务器,服务器检查资源是否发生变化,如果没有发生变化,返回 304 状态码,否则返回新的资源。
- ETag / If-None-Match 头部:服务器可以给每个资源分配一个唯一的标识符(ETag),浏览器在请求资源时,将该标识符发送到服务器,服务器检查资源是否发生变化,如果没有发生变化,返回 304 状态码,否则返回新的资源。
需要注意的是,协商缓存虽然可以减少网络带宽的使用,但是需要服务器进行资源比较,因此会增加服务器的负载。
怎么进行站点内的图片性能优化?
站点内的图片性能优化可以从以下几个方面入手:
- 图片压缩:通过压缩图片的大小和质量,可以减少图片的加载时间。可以使用图片压缩工具(如 TinyPNG、JPEGmini 等)来压缩图片。
- 图片格式优化:选择正确的图片格式可以减少图片的大小。常见的图片格式有 JPEG、PNG 和 GIF,可以根据图片的特点和用途选择合适的格式。
- 延迟加载:对于页面中的长列表或懒加载场景,可以延迟加载图片,减少页面加载时间。可以使用工具(如 lazysizes、Lozad.js 等)来实现图片的延迟加载。
- 图片预加载:在用户访问页面之前,可以预加载一些重要的图片,从而提高用户体验。可以使用工具(如 PreloadJS、image-preload 等)来实现图片的预加载。
- 响应式图片:对于不同大小的屏幕,可以使用不同大小的图片来提高用户体验。可以使用 HTML 标签的 srcset 和 sizes 属性来实现响应式图片。
- CDN 加速:使用 CDN 可以加速图片的加载速度,缩短图片的响应时间。可以选择静态文件托管服务商(如七牛云、阿里云等)来实现 CDN 加速。
- 图片懒加载:对于网页中需要加载大量图片的场景,可以使用图片懒加载技术,即当页面滚动到某个区域时再加载该区域内的图片,从而减少页面加载时间和网络带宽的消耗。可以使用工具(如 lazyload、intersection-observer 等)来实现图片懒加载。
需要注意的是,以上优化策略都是针对特定场景和需求进行优化的,需要根据实际情况选择合适的优化策略。同时,在进行图片优化时,需要保证图片质量和用户体验,并注意不要过度压缩图片,影响用户体验。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 星Blog!