- 博客(141)
- 收藏
- 关注
原创 Promise.race
对象的一个静态方法,用于将多个 Promise 实例包装成一个新的 Promise 实例。:返回一个新的 Promise 实例,其状态和结果由最先完成的 Promise 决定。:设置一个超时 Promise,如果某个操作在指定时间内未完成,则触发超时。的 Promise 完成时完成,并返回该 Promise 的结果或错误。是一个空数组,返回的 Promise 将永远处于 pending 状态。返回的 Promise 也会是 rejected 状态。用于从多个 Promise 中选择最先完成的一个。
2025-01-28 08:30:00
442
原创 什么是BFF?他有什么用?
它的核心思想是为不同的前端客户端(如 Web、移动端、桌面端等)提供专门的后端服务,而不是让所有客户端共享同一个通用的后端 API。:BFF 可以根据前端的需求,对后端返回的数据进行聚合、过滤或转换,减少不必要的数据传输。:BFF 可以为不同的前端客户端提供定制化的 API,满足其独特的需求。:BFF 可以将后端返回的数据转换为前端需要的格式,减少前端的处理逻辑。:BFF 可以根据前端的需求,只返回必要的数据,减少不必要的数据传输。:BFF 为特定的前端客户端提供定制化的 API,满足其独特的需求。
2025-01-27 13:15:00
1951
原创 常见的 React 代码异味
是指代码中潜在问题的信号,虽然它们不会直接导致程序崩溃,但暗示代码结构或逻辑可能存在缺陷。识别并解决这些代码异味是提升代码质量、可维护性和性能的关键。通过识别并解决这些代码异味,可以显著提升 React 应用的可读性、可维护性和性能。相似的组件逻辑在多个地方重复实现,导致代码冗余和维护困难。将重复的逻辑抽取到一个独立的函数或自定义钩子中。:将可复用的逻辑抽取到自定义组件或钩子中。中,或者将逻辑抽取到自定义钩子中。:将其拆分为更小、更专注的组件。在多个组件中重复相同的逻辑代码。,导致逻辑分散且难以维护。
2025-01-26 09:00:00
770
原创 浏览器沙箱
是浏览器提供的一种安全机制,用于隔离网页的执行环境,防止恶意代码对操作系统或其他网页造成破坏。浏览器沙箱通过限制网页的权限和访问范围,确保网页在受控的环境中运行。同源策略是浏览器沙箱的重要组成部分,它限制了网页脚本只能访问同源(协议、域名、端口相同)的资源,防止恶意脚本窃取其他网站的数据。CSP是一种安全机制,用于限制网页可以加载的资源(如脚本、样式、图片等),防止跨站脚本攻击(XSS)和数据注入攻击。是一种安全机制,用于隔离网页的执行环境,防止恶意代码对系统或其他网页造成破坏。
2025-01-25 16:15:00
648
原创 setTimeout 定时器不准咋办
是浏览器提供的用于动画的API,它会根据浏览器的刷新率(通常为60Hz,即每16.67ms一次)调用回调函数。JavaScript是单线程的,所有任务都在主线程上执行。是JavaScript中用于延迟执行代码的定时器函数,但由于JavaScript的单线程特性以及事件循环机制,如果页面处于后台(如用户切换到其他标签页),浏览器可能会降低定时器的执行频率以节省资源。如果系统负载较高(如CPU占用率过高),定时器的执行可能会被延迟。定时器不准时的问题,提升代码的准确性和性能。
2025-01-24 09:15:00
375
原创 为什么 setTimeout 不准时
的回调函数会被放入任务队列中,等待主线程上的同步任务执行完毕后才会执行。是JavaScript中用于延迟执行代码的定时器函数,但由于JavaScript的单线程特性、事件循环机制以及浏览器的一些限制,如果系统负载较高(如CPU占用率过高),定时器的执行可能会被延迟。如果页面处于后台(如用户切换到其他标签页),浏览器可能会降低定时器的执行频率以节省资源。如果页面处于后台,浏览器可能会降低定时器的执行频率。:浏览器可能会降低定时器的执行频率以节省资源。,实际执行时也会有至少4ms的延迟。
2025-01-23 07:15:00
441
原创 为什么忘记密码要重置而不是告诉你原密码
忘记密码后重置而不是告知原密码,是为了保障用户密码的安全性。哈希算法和加盐技术的使用,使得服务端无法获取用户的原始密码,只能通过验证流程让用户设置新密码。这种做法符合现代网络安全的最佳实践,能够有效防止密码泄露和滥用。“服务端无法获取你的原始密码,因为它是以加密形式存储的。为了安全,只能通过重置流程让你设置一个新密码。
2025-01-22 15:48:20
246
原创 前端如何判断图片是否是渐进式图片
在前端环境中,直接判断图片是否是渐进式图片(如渐进式 JPEG 或渐进式 WebP)是比较困难的,因为浏览器并没有提供直接的 API 来检测图片的渐进式属性。不过,可以通过一些间接的方法来判断图片是否是渐进式图片。可以通过监听图片的加载过程,观察其显示行为来判断是否是渐进式图片。可以通过读取图片的二进制数据,检查文件头信息来判断图片是否是渐进式。虽然前端没有直接的方法来判断图片是否是渐进式图片,但通过以上方法,可以间接实现这一功能。是一个 Node.js 的图像处理库,可以在服务器端检测图片的渐进式属性。
2025-01-22 06:45:00
372
原创 typeof 的那些迷惑行为
的行为虽然有些迷惑,但了解其背后的原理和历史背景后,可以更好地理解和使用它。是一个用于检测变量类型的操作符,但它的一些行为可能会让人感到迷惑,尤其是对于初学者。是 IEEE 754 浮点数标准中定义的一个特殊值,用于表示无效的数学运算结果(如。的设计目标之一是安全地检测变量类型,即使变量未声明也不会导致程序崩溃。虽然它表示“不是一个数字”,但从技术上讲,它仍然是数字类型。是 ES6 引入的一种新数据类型,表示唯一的标识符。是一个值,同时也是它的类型。虽然函数是对象的一种,但为了便于区分,
2025-01-21 23:15:00
1022
原创 常用的跨域方案有哪些?
在前端开发中,跨域(Cross-Origin)是一个常见问题,通常是由于浏览器的同源策略(Same-Origin Policy)限制导致的。CORS(Cross-Origin Resource Sharing)是浏览器支持的一种跨域解决方案,允许服务器声明哪些源可以访问资源。是 HTML5 提供的一种跨文档通信机制,可以在不同源的窗口之间传递消息。根据具体场景选择合适的跨域方案,可以有效解决浏览器的同源策略限制问题。前端请求同源的代理服务器,代理服务器将请求转发到目标服务器。浏览器原生支持,无需额外配置。
2025-01-21 17:18:29
784
原创 用户登录前如何确定它是谁?
在用户登录前,确定用户身份是一个复杂但关键的问题。通常,系统无法直接知道未登录用户的身份,但可以通过一些技术和策略来推断或识别用户。:在用户首次访问时,服务器生成一个唯一的匿名 ID 并存储在用户的浏览器 Cookie 中。用户清除 Cookie 或切换设备后,匿名标识会失效。设备指纹是一种通过收集用户设备信息来识别用户的技术。通过用户的 IP 地址推断其地理位置和身份。在用户登录前,系统可以为每个用户生成一个。无需用户登录即可跟踪用户行为。,用于跟踪用户的行为和偏好。)获取用户的地理位置。
2025-01-21 15:59:09
662
原创 渐进式图片的实现原理
渐进式图片(Progressive JPEG)的实现原理与传统的基线 JPEG(Baseline JPEG)不同。它通过改变图片的编码和加载方式,使得图片在加载时能够逐步显示从模糊到清晰的图像。每个扫描包含图片的一部分信息,浏览器会逐步加载这些扫描,并在每次加载后更新显示的图片。在传统的基线 JPEG 中,图片是按照从上到下的顺序逐行编码和加载的。:浏览器先加载低频信息(模糊的图片),然后逐步加载高频信息(清晰的细节)。:通过将图片分成多个扫描(低频到高频),逐步加载和显示图片。
2025-01-21 11:15:00
647
原创 为什么 new Image 预加载比 <img>直接加载好
预加载图片可以更好地控制加载过程,提升页面性能和用户体验,尤其是在需要加载大量图片或实现复杂逻辑的场景下,优势更加明显。:如果图片在页面上不可见(如隐藏的图片或未显示的轮播图),浏览器仍然会加载这些图片,浪费带宽和资源。:可以在页面加载时提前加载图片,当用户需要时(如点击按钮切换图片),图片已经加载完成,提升用户体验。:可以在任意时机(如页面加载完成后、用户交互时)触发图片加载,实现按需加载或延迟加载。:可以在加载图片前执行复杂的逻辑,例如根据设备分辨率加载不同尺寸的图片。如果需要预加载多张图片,使用。
2025-01-19 06:15:00
714
原创 React 项目中的内存泄漏
在 React 应用中,内存泄漏是一个常见但容易被忽视的问题。内存泄漏通常发生在组件卸载后,某些资源(如事件监听器、定时器、订阅等)未被正确清理,导致这些资源一直占用内存,最终影响应用性能。在组件中订阅了外部数据源(如 Redux、RxJS 等),但在组件卸载时未取消订阅。React 会在开发模式下检测到潜在的内存泄漏,并在控制台输出警告信息。在组件中绑定了事件监听器,但在组件卸载时未移除。标志来避免在已卸载的组件中更新状态。和避免在卸载的组件中更新状态。的清理函数中正确释放资源。,但在组件卸载时未清除。
2025-01-18 10:00:00
272
原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) 的结果是什么?
的结果是,因为parseInt的第二个参数(进制基数)被错误地传递为索引值。为了避免这个问题,可以使用Number或箭头函数来明确指定参数。这个问题很好地展示了 JavaScript 中函数参数传递的细节,以及如何避免常见的陷阱。
2025-01-17 10:21:52
283
原创 ES6中有哪些作用域
全局作用域:最外层作用域,变量在整个程序中可访问。函数作用域:函数内部的作用域,变量只在函数内可访问。块级作用域:由{}包围的代码块,let和const声明的变量只在块内可访问。模块作用域:模块内部的作用域,变量默认私有,不会污染全局。词法作用域:作用域在代码编写时确定,是 JavaScript 的默认行为。动态作用域:JavaScript 本身不支持,但可以通过this或eval模拟。这些作用域规则使得 JavaScript 的变量管理更加灵活和安全,尤其是在大型项目中,可以有效避免变量冲突和污染。
2025-01-17 09:35:29
474
原创 前端如何创建微任务
Promise:通过.then().catch()和.finally()方法。:监视 DOM 变化并触发微任务。:专门用于将回调添加到微任务队列的函数。:仅适用于 Node.js 环境。:通过等待 Promise 解析来创建微任务。这些方法允许你在不同的场景中灵活地控制异步操作的执行时机,确保某些代码能够在当前任务完成后尽快执行。如果你有更多具体的问题或需要进一步的帮助,请随时提问!
2025-01-14 17:30:44
486
原创 DNS 预解析和预连接
DNS 解析和预连接是 Web 性能优化中的两个重要概念,它们有助于减少页面加载时间和提高用户体验。下面我将分别解释这两个概念,并说明如何在实践中使用它们。
2024-12-12 11:12:14
741
1
原创 TypeScript基础语法总结
1. extends(1)在 JS 中,担当类的继承重担(2)在 TS 类型中,当泛型约束(3)在 TS 类型中,条件判断的关键词2. in遍历,用于取联合类型的值,主要用于数组和对象的构造。不要用于 interface,否则会出错。/***/
2024-11-28 16:14:32
700
原创 React 常见问题解答:设置、安装、用户事件和最佳实践
JSX 是 JavaScript 的语法扩展,允许您在 JavaScript 代码中编写类似 HTML 的代码。它使创建和管理组件的结构变得更加容易。在 JavaScript 代码中编写类似 HTML 的代码,括在括号中。使用大括号{}将 JavaScript 表达式嵌入到 JSX 代码中。React Hooks 是允许你在不编写 class 的情况下使用 state 和其他 React 功能的函数。在 React 16.8 中引入的 Hooks 已成为 React 开发的游戏规则改变者。
2024-11-23 05:30:00
560
1
原创 创建可重用React组件的实用指南
React 中设计良好的可重用组件表现出几个关键特征。首先,可重用性是核心属性。创建这些组件时,应确保在应用程序的不同部分甚至单独的项目中使用。为了实现这一点,它们必须高度参数化,允许开发人员通过 prop 自定义它们的外观和行为。这种多功能性是使组件真正可重用的一个基本方面。封装同样重要。可重用组件应封装其内部逻辑和渲染,从而将实现细节与应用程序的其余部分隔离开来。这种关注点分离可以产生更简洁、更模块化的代码,并简化集成。模块化是另一个关键属性。
2024-11-22 14:31:57
997
原创 TypeScript中 as const 的使用技巧
当定义配置对象时,你通常不希望这些配置在运行时被修改。使用as const可以确保这些配置项是不可变的。} as const;// appConfig 的类型是 { readonly apiUrl: "https://api.example.com";在 React 或 Vue 等 UI 框架中,有时你需要定义一些静态的数据,如按钮的文字、选项列表等,使用as const可以确保这些数据不会被修改,并且可以获取到更精确的类型信息。} as const;
2024-11-18 11:24:32
1055
原创 服务器端压缩技术
服务器端压缩算法和技术可以用来减少数据传输量,提高网页加载速度。最常见的压缩技术主要是 gzip 和brotli(通常简称为br),今天就简单介绍一下这两个压缩技术。
2024-11-11 11:02:55
818
原创 微信小程序海报
3、Skyline 渲染默认使用Flex布局,flex-direction 默认是 column;2、PC端的小程序开发者工具目前只支持 webview 渲染,不支持 Skyline 渲染;3、在 wxml 文件中使用 snapshot 组件包裹要生成海报的 view。记录一下微信小程序使用 Skyline 渲染引擎生成页面海报的流程。1、如果页面使用了第三方组件库会出现样式错乱问题;5、海报图片保存到本地。
2024-11-01 14:08:56
603
1
原创 浏览器任务调度API
是一个强大的工具,可以帮助开发者更高效地管理任务调度,提高 Web 应用的性能和响应性。通过合理使用postTask方法和任务优先级,你可以确保任务在合适的时机执行,从而提升用户体验。希望这些信息对你有所帮助!
2024-10-22 18:56:10
521
原创 tsconfig.json 内容解读
文件是 TypeScript 项目的主要配置文件,用于指定编译选项和项目设置。通过这个文件,你可以控制编译器的行为,例如输出文件的路径、模块解析方式、严格类型检查等。以下是一些常见的。
2024-10-19 09:30:00
450
原创 globalThis
globalThis是一个非常有用的特性,它为 JavaScript 开发者提供了一种标准化的方式来访问全局对象,无论代码运行在什么环境中。通过使用globalThis,你可以编写更加一致和可维护的代码。
2024-10-18 15:00:00
459
原创 performance.timing
是 Web 性能 API 的一部分,用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能,找出潜在的瓶颈。返回一个对象,该对象包含了多个属性,每个属性代表页面加载过程中的某个特定事件的时间戳。以下是一些常用的fetchStartconnectEnddomLoadingloadload。
2024-10-17 20:38:09
751
原创 TypeScript - 模板文字类型
模板文字类型建立在基础上,并且能够通过联合扩展为许多字符串。它们与具有相同的语法,但用于类型位置。当与具体文字类型一起使用时,模板文字通过连接内容产生新的字符串文字类型。我们通常建议人们对大型字符串联合使用提前生成,但这在较小的情况下很有用。当基于类型内部的信息定义一个新字符串时,模板字面量的威力就显现出来了。考虑函数()向传递的对象添加一个新函数on()的情况。。将添加到基对象的on函数需要两个参数,一个eventName字符串)和一个回调函数eventName的格式应该是;因此,
2024-10-16 09:45:00
801
原创 TypeScript - 映射类型
当你不想重复自己的时候,有时一个类型需要基于另一个类型。在TypeScript 4.1及以后版本中,你可以在映射类型中使用。有两个附加的修饰符可以在映射过程中应用:readonly和。映射类型与此类型操作部分中的其他功能配合良好,例如,这里是。删除或添加这些修饰符。如果不添加前缀,则假定。中获取所有属性,并将它们的值更改为布尔值。您可以映射任意的联合,而不仅仅是。映射类型是一种泛型类型,它使用。它们分别影响可变性和可选性。您可以通过添加前缀-或。取决于对象是否将属性。
2024-10-15 19:05:54
274
原创 VSCode中的TypeScript教程
是JavaScript的类型化超集,可编译为纯JavaScript。它提供了类、模块和接口来帮助您构建健壮的组件。安装 TypeScript 编译器Visual Studio Code 包括 TypeScript 语言支持,但不包括 TypeScript 编译器tsc。您需要在全局或工作区中安装TypeScript编译器,以将 TypeScript 源代码转换为 JavaScript(安装TypeScript最简单的方法是通过npm。
2024-10-15 10:33:19
1795
原创 在 React 中避免不必要的重新渲染
构建高性能 React 应用程序的关键之一是避免不必要的重新渲染。React 的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至关重要。在这篇文章中,我们将介绍常见错误以及如何避免它们。
2024-10-10 16:13:22
891
原创 在React中构建自己的自定义Hooks:获取数据的简单指南
这些内置的Hooks是创建自定义Hooks的构建块,它允许您在不同的组件之间重用逻辑。在使用React时,管理状态和副作用(如获取数据)可能会变得重复,特别是如果您在多个组件中具有类似的逻辑。React中的自定义Hooks可以帮助您管理状态和副作用,同时保持组件的清洁和可重用性。自定义Hooks,它将根据您提供的名称获取国家/地区的详细信息。将其视为一个容器,其中保存的信息可以随时间而更改,就像表单中的用户输入一样。如果逻辑是特定于一个组件的,并且不会被重用,则不需要创建自定义Hooks。
2024-10-08 18:40:03
1464
原创 你应该知道的50个系统设计术语
定义:一种消息传递模式,在这种模式中,发布者发布的消息非常抽象,以至于接收者可以访问其中任何一条消息,而发送者甚至不必知道目的地接收者(订阅者)的身份。定义:一种用于分布式计算的一致性模型,以实现高可用性的目标,指出对系统的更新最终将传播并由所有节点反映。定义:一种备用操作方式,在这种方式下,当系统的一个主要部件丢失时,系统部件的功能由其它系统部件接管。定义:一种数据库类型,旨在促进以关系数据库中使用的表格关系以外的方式建模的数据的存储和检索。定义:确保数据库事务可靠处理的一组属性。
2024-10-05 03:30:00
1048
原创 使用React掌握TypeScript
TypeScript将静态类型添加到JavaScript中,这有助于在运行之前捕获潜在的错误。在本文中,我们将介绍在React中使用TypeScript的基本概念。React钩子也可以在TypeScript中输入,以确保组件中状态和效果逻辑的类型安全。通过遵循这些最佳实践,您将能够在React应用程序中充分利用TypeScript的潜力,从而产生更强大、更可维护的代码。当你在React中定义一个组件时,你可以为它的props指定类型,以使组件的使用更加清晰和安全。,并将其作为组件props的类型注释传递。
2024-10-04 05:00:00
524
1
原创 useRef Hook
钩子是一个强大的功能,允许您创建对DOM元素或任何其他值的可变引用,这些引用在组件的整个生命周期中持续存在。提供了一种保存可变引用的方法,该方法在更新时不会触发重新渲染。这与state不同,在state中,更新状态变量将导致组件重新渲染。中保存的值不会在重新渲染时重置。存储任何可变值,这些值在更改时不需要重新呈现,例如计时器ID或先前值。时,它返回一个可变对象,带有一个你可以修改的。更新状态变量将触发组件的重新渲染,而更新。创建一个引用来保存对输入元素的引用。,而对于影响组件呈现的值使用。
2024-10-03 17:30:00
237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人