伪类和伪元素是什么什么是伪类
什么是伪类 (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。这五种基本数据类型是按值访问的，因为可以操作保存在变量中的实...
link与@import区别_link和import的区别
区别： 1. link属于html标签。@import在css中使用表示导入外部样式表； 2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 4. link方式的样式的权重 高于@import的权重； 5. link 支持使用javascript改变样式 （ ），后者不可 使用场景：
网络-navigator.sendBeacon前言
navigator.sendBeacon 是浏览器的 API，用于在浏览器后台发送异步请求,它不会等服务端响应。 它可以用于在页面卸载或关闭的时候，发送数据，以及在不阻塞页面卸载的情况下发送数据。 使用 方法发送的请求是异步的，不会阻塞页面的卸载或关闭过程。 这对于需要在用户离开页面之前发送数据的情况非常有用。 优点 不受页面卸载过程的影响，确保数据可靠发送。 普通的 请求如 和 在页面关闭或者刷新、前进、后退等操作时 , 这些请求有可...
前端项目中的Server-sent Events(SSE)项目实践及其与websocket的区别在前端开发中，实时数据更
前端项目中的 项目实践 前言 在前端开发中，实时数据更新是提升用户体验的重要因素之一。 是一种高效的技术，允许服务器通过单向连接将实时数据推送到客户端。下面将从 的基本改变，使用场景展开了解，并提供一个实际案例来更好的理解如何在前端项目中应用 。 的主要特点 1. 单项数据流：数据从服务器推送到客户端。 2. 自动重连：在链接丢失时，浏览器会自动尝试重新链接。 3. 简单易用：基于 协议，不需要额外的库或协议。 的使用场景 适用于需要从...
如何减少 options 请求
想要回答这个问题需要先明白什么是简单请求和非简单请求 浏览器请求方式可以划分为简单请求和非简单请求 简单请求 简单请求你可以理解为那些不会对服务器造成风险的请求。根据 CORS（跨源资源共享，Cross Origin Resource Sharing） 的定义，简单请求必须满足以下条件： 使用 、 或 方法。 仅包含少量特定的请求头部，如 、 、 、 （但只能是 、 或 ）。 不包含自定义的请求头部（即除了浏览器默认的上面那些）。 非简...
手写React-Lazyload
前言 平时网页中会有很多图片，图片有一个加载过程，很多情况，我们是不需要一开始直接加载的，当浏览器的视图滚动到图片时，开始加载可以节省网络资源，这就是我们常说的懒加载，当然CSR下的组件配合React.lazy的动态导入也是可以进行懒加载的。 思路 使用 IntersectionObserver API就可以实现懒加载的效果 我们可以用 IntersectionObserver 去监听需要懒加载的元素，当该元素滚动到视图区域时，请求该资...