优化浏览器渲染主线程的 api 都有哪些？怎么用？
为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。主要有： setTimeout 延迟加载 （使用不当可能适得其反） web worker 多线程 （不能操作dom，主要计算密集型的任务） requestIdleCallback 帧空闲时运行 （react18带🔥的，低优先级任务） requestAnimationFrame 每帧都会运行 （主要做动画效果调优） setTimeout 延迟加载非常常见，但是它...
你知道生成器和迭代器是啥玩意吗
迭代器和生成器 迭代器和生成器是为了完成函数的中断效果而出现的。让原本只能一次性执行完的函数具备分段处理的功能。在本质上，这两者都属于函数的一种。 迭代器 官方介绍：在 JavaScript 中， 迭代器 是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 方法实现 的任何一个对象，该方法返回具有两个属性的对象： ，这是序列中的 next 值；和 ，如果已经迭代到序列中的最后一个值，则它为 。如果 和...
如何正确地使用encodeURI()对 URL 进行编码
如何正确地使用encodeURI()对 URL 进行编码 方法详解 在 Web 开发中，处理 URL 时经常需要对 URL 进行编码，以确保 URL 的有效性和安全性。JavaScript 提供了 方法来实现这一功能。本文将详细介绍 方法，包括其语法、使用场景以及代码示例。 方法概述 方法用于对整个 URI 进行编码。它会对 URI 中的特殊字符进行编码，以便在网络上传输时不产生歧义。与 方法不同的是， 不会对 URI 中的特殊字符（如...
面试官：console.log(++[[]][+[]] + [+[]])，我：你认真的？
让我们来仔细分析这道经典的 JavaScript 面试题： 说真的，要是在面试中遇到这种变态面试题，我只能说，面试官你过分了啊！这题目拐着弯、绕着圈、还顺便做了个花式回旋，这不就故意刁难人嘛！要是我，直接三下五除二做出来直接就溜了溜了 这段代码看起来非常复杂，但其实它考察了 JavaScript 中的一些核心概念，如 类型转换、操作符优先级、隐式转换 等。通过这道题目，我们可以更深入地了解 JavaScript 的底层机制和行为。本文将...
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
伪类和伪元素是什么什么是伪类
什么是伪类 (pseudo classes)？ 伪类可以让我们根据元素的状态变化使用 CSS。例如，当我们想要设置某元素在被指标指到时的样式，我们可以使用 伪类来改变样式。 介绍 4 个常见的伪类 (pseudo classes) 用法 当用户的鼠标或触控板等设备放在元素上时，我们可以使用 更改元素的样式。 、 这两个伪类都是用在含有 href 属性的 元素上。 可以调整使用者还未浏览过的链接样式，而 则可以改变使用者已浏览过的链接样式...
浏览器失去焦点时 `setTimeout` 暂停问题及解决方案
引言 在Web开发中， 和 是开发者用于定时任务的常见工具。然而，当用户切换标签页或将页面最小化时，你可能会发现这些定时器的行为并不如预期，它们可能被延迟执行，甚至完全暂停。这种现象背后有着复杂的浏览器机制与资源优化策略，理解并解决这个问题对于构建高性能和稳定的Web应用至关重要。 本文将深入分析浏览器失去焦点时 暂停的根本原因，并提供多种解决方案，以确保你的定时任务在任何情况下都能按预期执行。 一、浏览器的多进程架构 1\. 浏览器的...
六种动态运行js字符串的方案对比
先有问题再有答案 1. 2. 3. 4. 5. eval 函数(不建议) 运行环境：当前作用域， ，而不是创建一个新的作用域。所以，如果eval()函数在函数内部调用时可以访问函数的局部变量，而且还会污染全局对象。 代码来源：只接受字符串，由开发者预先定义 访问权限：可以访问或修改当前作用域中的任何对象 同步/异步：同步执行 安全性和性能：安全性差，可能被用于执行恶意代码；性能相较于其它方式较差，因为它需要运行时解析字符串 使用scri...
JavaScript 浅比较和深比较
基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。 基本类型值 指的是简单的数据段，而 引用类型的值 指那些可能由多个值构成的对象。 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。 ECMAScript 中有五种基本类型: Undefined、Null、Boolean、Number 和 String。这五种基本数据类型是按值访问的，因为可以操作保存在变量中的实...