浏览器失去焦点时 `setTimeout` 暂停问题及解决方案
引言 在Web开发中， 和 是开发者用于定时任务的常见工具。然而，当用户切换标签页或将页面最小化时，你可能会发现这些定时器的行为并不如预期，它们可能被延迟执行，甚至完全暂停。这种现象背后有着复杂的浏览器机制与资源优化策略，理解并解决这个问题对于构建高性能和稳定的Web应用至关重要。 本文将深入分析浏览器失去焦点时 暂停的根本原因，并提供多种解决方案，以确保你的定时任务在任何情况下都能按预期执行。 一、浏览器的多进程架构 1\. 浏览器的...
纯前端实现语音文字互转
在现代互联网的发展中，语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能，为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。 什么是 Web Speech API？ Web Speech API 是一组浏览器 API，允许开发者在 Web 应用程序中集成语音识别和语音合成功...
2024 JavaScript 调试参考文档
使用断点暂停代码，设置断点，以便您可以在代码执行过程中暂停代码。 暂停时检查值 执行暂停时，调试程序会评估当前函数中的所有变量、常量和对象，直到达到某个断点。调试程序会在相应声明旁边显示内嵌的当前值。 您可以使用控制台查询已求值的变量、常量和对象。 要点：执行暂停时，您还可以重启当前函数，甚至对其进行实时修改。 悬停时预览类/函数属性 执行暂停时，将鼠标悬停在类或函数名称上可预览其属性。 单步调试代码 代码暂停后，请一次一个表达式地单步...
六种动态运行js字符串的方案对比
先有问题再有答案 1. 2. 3. 4. 5. eval 函数(不建议) 运行环境：当前作用域， ，而不是创建一个新的作用域。所以，如果eval()函数在函数内部调用时可以访问函数的局部变量，而且还会污染全局对象。 代码来源：只接受字符串，由开发者预先定义 访问权限：可以访问或修改当前作用域中的任何对象 同步/异步：同步执行 安全性和性能：安全性差，可能被用于执行恶意代码；性能相较于其它方式较差，因为它需要运行时解析字符串 使用scri...
根据文本是否溢出来控制popover的显示
前言：之前遇到一个需求：单行文本溢出隐藏hover展示全部，当时写过一篇文章，是创建一个临时变量，然后设置样式，通过比较文本正常的宽度和布局宽度来判断是否溢出；现在遇到另一个需求，多行文本溢出隐藏hover展示全部信息；回想起当初的写法，只能说是年轻时“不懂事”啊，现在这两种场景重新进行梳理总结 查看年轻时写的代码 效果图如下： 1. 单行文本溢出隐藏hover展示全部 2. 多行文本溢出隐藏hover展示全部 我们就以title属性来...
JavaScript 浅比较和深比较
基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。 基本类型值 指的是简单的数据段，而 引用类型的值 指那些可能由多个值构成的对象。 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。 ECMAScript 中有五种基本类型: Undefined、Null、Boolean、Number 和 String。这五种基本数据类型是按值访问的，因为可以操作保存在变量中的实...
link与@import区别_link和import的区别
区别： 1. link属于html标签。@import在css中使用表示导入外部样式表； 2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 4. link方式的样式的权重 高于@import的权重； 5. link 支持使用javascript改变样式 （ ），后者不可 使用场景：
教你用Axios实现无感知双Token刷新
在现代系统中，Token认证已成为保障用户安全的标准做法。然而，尽管许多系统采用了这种认证方式，却在处理Token刷新方面存在不足，导致用户体验不佳。随着Token有效期的缩短，频繁的重新登录成为常见现象，许多系统未能提供一种无缝的、用户无感知的Token刷新机制。通过结合Vue3和Axios这两大前端技术栈，我们可以借助Promise机制，开发出一种更加完善的自动化Token刷新方案，显著提升系统的稳定性和用户体验。本文将深入探讨这一...
用Zustand实现组件级状态管理的最佳实践
在前文中，我们介绍了Zustand这个简单、易用、轻量的状态管理框架。 通常情况下，状态管理通常都是全局的，可以在应用的任意地方访问。然而，这样的做法是否真的符合最佳实践呢？如果从马克思的角度来看，任何片面的观点都是不全面的。事实上，有些时候我们只想创建页面级别或者组件级别的状态，而不是把所有状态都挂在全局。 全局状态的弊端 无效渲染 全局状态管理的一个明显弊端是它可能导致无效的渲染。全局状态通常是在React组件生命周期之外创建的，这...