- 博客(210)
- 收藏
- 关注
RSS订阅原创 全量加载、懒加载、延迟加载、虚拟列表、canvas、异步分片
这些渲染子任务队列如果一次性执行，会导致js单线程的卡顿，所以我们需要控制每一帧里执行的子任务的时间，比如每一帧为16ms，那么我们可以拿其中的10ms来执行子任务，剩下的6ms来响应用户的交互，这样就不会导致js单线程的卡顿。前端遇到大数据量的场景，为了提高用户的使用体验，我们需要做很多优化手段。直接抛弃真实dom的渲染，使用canvas来渲染，渲染性能非常强。初始化只渲染首屏的数据，当用户滚动时，渲染额外数据。首屏正常渲染，渲染完后，异步渲染其他部分。本文围绕渲染层的优化来讲解。
2025-04-01 12:22:16
319
原创 发布的React 19.1提供了什么新能力？
Server Components 是一种新型的 React 组件，可以在服务器端渲染和处理数据，从而提高性能和安全性。它们允许开发者在服务器上执行数据获取和渲染，减少客户端的负担，并提高 SEO 效果。Actions 是 React 19 中的一个新概念，简化了处理表单提交和与 React 并发功能集成的过程。在一个博客网站中，使用 Server Components 渲染文章列表和内容，可以减少客户端的负担，并提高页面加载速度。延迟搜索结果的渲染，以避免频繁的重新渲染。在一个多标签页的应用中，使用。
2025-04-01 12:18:10
522
原创 TypeScript 有哪些值得吐槽的设计/特性/不足？
从根源上看，这也是我对当前前端生态不满的原因之一——虽然一切看起来都很美好，但一切都显得不稳定。我认为我们需要更现代化的整合方案，并且优先优化性能，这也是我选择尽可能使用。在大型项目中，语言服务（Language Server）冷启动后的初始化时间常常会长达 15 秒甚至超过 1 分钟，这种体验在许多其他语言中是难以接受的（最大的问题在于性能，不过这里指的不是编译为 JavaScript 后的运行时性能，而是实际应用于前端或。说到这里，我可能给人一种爱抱怨的印象，确实，我对当前前端开发有不少意见。
2025-04-01 10:56:53
365
原创 解决前端异步请求中的数据竞争问题
通过使用函数，我们有效地解决了异步数据请求中的竞争问题。这种方法确保了用户界面始终显示最新请求的数据，避免了由于请求返回顺序不一致而导致的数据错误显示。这种解决方案不仅适用于本示例，也可以推广到其他需要处理异步请求的场景中。希望这篇文章对你有所帮助！
2025-03-27 17:59:31
411
原创 【CSS】- 表单控件的 placeholder 如何控制换行显示？
【代码】【CSS】- 表单控件的 placeholder 如何控制换行显示？
2025-03-27 17:57:32
1079
原创 面试官：不同刷新操作方式，对强制缓存和协商缓存的影响
强缓存（本地缓存）是指在资源的缓存有效期内，浏览器无需向服务器发送请求，直接使用本地缓存的数据，提高页面加载速度，减少网络请求。它主要依赖或Expires头信息来控制资源的有效期，当缓存未过期时，浏览器不会发起请求。协商缓存（条件请求）是在强缓存失效后，浏览器向服务器发送请求，并携带ETag或进行资源校验。服务器通过比对ETag或判断资源是否更新，若资源未变更，则返回，浏览器继续使用缓存，否则返回200 OK并提供新资源。两者结合使用可以优化网页加载性能，减少服务器压力，同时确保数据的时效性。
2025-03-13 15:24:39
1057
原创 typescript选择go重写性能提升10倍,为什么不是rust呢
官方回复语言选择总是一个热门话题！我们广泛评估了许多语言选项，包括最近和之前的调查。我们还考虑了混合方法，即某些组件可以用本地语言编写，而核心类型检查算法则保留在JavaScript中。我们编写了多个原型，尝试在不同语言中使用不同的数据表示，并深入研究了现有本地TypeScript解析器（如swc、oxc和esbuild）所使用的方法。需要明确的是，在从头重写的情况下，许多语言都是合适的。然而，Go在考虑特定于这种情况的多个标准时表现最佳，以下将解释其中几个关键方面。
2025-03-13 15:10:20
1228
1
原创 前端白屏检测SDK：从方案设计到原理实现的全方位讲解
前端白屏是指用户访问网页时，页面未能正常加载或渲染，导致浏览器显示空白。这通常由资源加载失败、代码执行错误或网络问题引起。白屏问题在单页面应用（SPA）中尤为复杂，可能导致用户无法看到任何有效内容。白屏检测可以通过多种方案实现。常见的方法包括监听根节点的事件、使用 MutationObserver 监听 DOM 变化、页面截图对比、前端错误监测以及页面元素对比。每种方案在准确性、开发难度和适用范围上有所不同。基于采样点的检测方案，通过选取页面上的多个采样点，检查是否有有效内容来判断页面是否为白屏。
2025-03-12 12:25:44
1199
原创 vue3中的Proxy为什么一定要用Reflect
是 ES6 引入的一个特性，用于创建一个对象的代理，可以拦截并自定义对象的基本操作（如属性读取、赋值、删除等）。的拦截器方法一一对应，可以确保在拦截器中执行默认行为。：确保拦截器中执行默认行为，避免手动实现错误。的拦截器方法返回值一致，确保行为的一致性。被广泛用于拦截对象的操作，并触发依赖更新。，Vue 3 实现了高效、灵活的响应式系统。参数指向代理对象或继承代理对象的对象。，可能需要手动实现默认行为，容易出错。在 Vue 3 的响应式系统中，在 Vue 3 的响应式系统中，参数，确保正确的上下文。
2025-03-04 12:20:24
333
原创 前端业务开发的那些事儿：从项目实战中总结的宝贵经验
每个业务模块必须有一个主文件，作为该模块的核心入口。主文件应包含完整的布局和主要业务流程逻辑，确保模块的独立性和完整性对于业务模块中需要弹窗展示的功能，单独拆分出一个独立的弹窗组件（如这种方式不仅提高了代码的复用性，还便于对弹窗逻辑进行集中管理项目中我已经基于el-dialog封装了函数式调用的dialog组件,使用函数式dialog让业务逻辑保持连贯性// 使用标签 el-dialog// 对于添加一个用户},// TODO// 使用函数式 el-dialog// 对于添加一个用户。
2025-03-04 12:15:34
990
原创 12 个提升 JavaScript 开发效率的实用技巧
下面列出了 12 个 JavaScript 小技巧，这些技巧可以帮助你编写更简洁、高效的代码。如果你已经在使用其中的一些技巧，那就巩固一下吧！需要注意的是为了兼容旧版浏览器，记得按需注入垫片（polyfill）。
2025-02-28 12:07:13
410
原创 JavaScript原型与原型链
在 JavaScript 中，几乎所有的对象都有一个隐藏的内部属性，它指向了另一个对象，称为该对象的原型。每个对象都能访问到它的原型对象上的属性和方法。原型链是 JavaScript 中对象继承的机制。当我们访问一个对象的属性或方法时，如果这个对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或者到达原型链的末端（即对象上的属性__proto__就相当于原型链上的一个链接点。
2025-02-26 11:37:42
657
原创 面试官最想听到的Vue和React区别
Vue和React的区别和从编译原理的角度来聊聊Vue的template和React的jsx。面试官问这些问题一般是想了解你对这两个框架的理解，所以这是一个开放性的问题，不同的同学对框架的理解程度不同、侧重点不同，回答出来的答案也不同。这篇文章将从Vue出发来聊聊Vue和React的区别，大家有补充的欢迎在评论区提出。先来说说相同点，这个简单，组件化、采用虚拟DOM、以及都在向函数式编程靠拢，具体的表现就是Vue推出了Composition（组合式） API，React推出了hooks。
2025-02-21 12:21:44
853
原创 什么是“跨域”及跨域解决方案
跨域是指从一个域名的网页去请求另一个域名的资源。比如，从www.a.com域名的网页去请求www.b.com域名的资源，只要协议、域名、端口有任何一个不同，都被当作是不同的域，跨域问题通常由浏览器的同源策略引起的。同源策略就是浏览器出于安全考虑而制定的，例如数据安全，服务器安全，减少 xss（跨站脚本攻击），CSRF（跨站请求伪造） 等攻击。所谓同源，就是协议，域名，端口号都相同才能请求数据。如果是非同源请求发送后，浏览器会拦截响应。
2025-02-21 12:16:13
1223
原创 探索 JavaScript 新特性：提升开发效率与代码简洁性
这些新特性使得 JavaScript 更加灵活和高效，特别是在处理大型数据、异步操作、内存管理等方面。掌握这些特性可以帮助开发者写出更加简洁、清晰且高效的代码。因此，持续关注 JavaScript 的更新，对于提升编程技能至关重要。
2025-02-20 14:40:34
267
原创 深入理解ES6：JavaScript的新标准与变量声明
ES6是ECMAScript 6的简称，也被称为ECMAScript 2015。它是JavaScript语言的第六个版本，于2015年正式发布。ES6引入了许多新特性，如let和const关键字、箭头函数、模板字符串、解构赋值、类和模块等，极大地提升了JavaScript的表达能力和开发效率。ES6的发布标志着JavaScript语言进入了一个新的时代，成为了现代前端开发的基石。如今，ES6已经成为JavaScript的当下标准，几乎所有现代浏览器和Node.js环境都支持ES6特性。let。
2025-02-20 12:23:38
714
原创 面试官：“请解释一下 ES6 的 Generator 是什么”
可以使用 Generator 函数创建自定义的迭代器，灵活控制迭代过程。yield a;// 0。
2025-02-19 12:13:15
920
原创 JavaScript 执行上下文深度解析
通过理解执行上下文、环境差异和作用域链机制，可以更清晰地掌握 JavaScript 的变量查找、闭包行为及作用域规则。
2025-02-19 12:10:53
428
原创 解锁ES6+：前端开发的魔法升级
ES6 + 特性为 JavaScript 带来了全方位的升级，从基础语法到异步编程，从数据结构到模块化和面向对象编程，每一个方面都得到了显著的改进和增强。这些特性不仅提升了代码的可读性、可维护性和开发效率，还使得 JavaScript 能够更好地应对复杂的前端开发需求。在 React 和 Vue 等主流前端框架开发中，ES6 + 特性更是发挥了关键作用，成为现代前端开发不可或缺的组成部分。
2025-02-18 14:22:38
587
原创 聊一聊vue如何实现角色权限的控制的
关于角色与权限控制，通常是分为两大类：一种是菜单权限；一种是操作权限。菜单权限是指，每个角色对应着可以看到哪些菜单，至于每个菜单里面的每个按钮，比如增删改查等等这类按钮控制不到这个粒度。简单来说就是控制看到的菜单多少。操作权限是指，每个角色对于所看到的数据具有哪些操作权限，就是增删改查这些具体的操作，简单来说就是读写权限。一套完整的角色访问控制：是应该包含这两种控制的。通常二者也是交叉在一起进行访问控制的。Vue.js 提供了灵活的方式来实现角色权限控制，本文将深入探讨如何通过 Vue 实现角色权限控制，特
2025-02-17 11:37:37
995
原创 前端如何优雅通知用户刷新页面？
利用 Service Worker 拦截请求，后台更新资源后提示用户刷新。：每次发版生成唯一版本号，和用户本地存储的版本号对比，不一致就提醒刷新。：通过 WebSocket 建立长连接，服务端主动推送更新消息。：定时轮询接口，检测资源是否更新，若更新则静默刷新。：金融系统、实时协作工具等强实时性应用。：电商活动页、运营位频繁更新的页面。：PWA 应用、离线优先的页面。：即时性强，适合高频更新场景。：精准控制，用户无感知更新。：用户无操作压力，减少打扰。：专业感拉满，用户体验丝滑。
2025-02-17 11:17:57
266
原创 JavaScript 严格模式：让你的代码更安全、更高效
严格模式是 JavaScript 的一种运行模式，它通过引入一些限制和规则，帮助开发者避免常见的错误和不良实践。启用严格模式后，JavaScript 引擎会在执行代码时进行更严格的检查，从而提高代码的安全性和性能。
2025-02-14 17:10:35
378
原创 vue3 组件粒度对组件渲染的影响
推荐细粒度场景：高频交互、独立数据更新的部分。推荐适当聚合场景：静态内容、低频更新或逻辑紧密耦合的部分。结合 Vue 3 特性：利用响应式优化、组合式 API 和编译优化，在性能与可维护性间取得平衡。通过合理划分组件粒度，可以显著提升 Vue 3 应用的渲染效率，同时保持代码的可维护性。
2025-02-14 17:08:15
925
1
原创 19道关于Vue3的面试题及其解析
答案：Vue 3是Vue.js框架的最新版本，它引入了许多改进和优化，包括性能提升、更好的类型支持、组合API等。答案：Composition API是Vue 3中新引入的API设计模式，它允许开发者更灵活地组织和管理组件逻辑。答案：Proxy用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等），它是ES6中新引入的特性。与Object.defineProperty相比，Proxy提供了更细粒度的变化跟踪。答案：Tree-shaking是一种在打包时自动移除未使用代码的技术。
2025-02-14 17:07:44
791
原创 Typescript知识点总结分享
最近学习使用了Typescript的一些语法，总结成本文，分享给大家。由于JavaScript是弱类型语言，在项目代码里越来越大时，特别是一个多人维护的项目中，其弱类型的特点，使得我们往往不直观清楚其他人写的函数是什么意思、需要传入什么参数、返回值是什么。JavaScript往往需要维护大量的代码注释或者接口文档来供其他人了解，导致大项目很难维护，但是使用TypeScript后，除了初期一些学习成本外，则可以很好的解决上面的问题。TypeScript是JavaScript的严格超集。Vue3.x。
2025-02-14 17:06:57
682
原创 Git子模块（Submodule）详解：前端项目管理的高效实践
Git子模块允许你将一个Git仓库作为另一个Git仓库的子目录。它能让你保持父子项目的独立版本控制，同时建立明确的依赖关系。Git子模块为前端项目的模块化管理提供了灵活方案，特别适合以下场景： ✅ 需要严格控制依赖版本 ✅ 跨项目共享私有组件库 ✅ 维护多项目间的关联关系建议搭配可视化工具（如SourceTree、GitKraken）使用，可以更直观地管理子模块状态。扩展学习Git官方Submodule文档进阶技巧：使用Git Hook自动化子模块更新。
2025-02-14 17:05:53
696
原创 Vue 3 vs React 18：设计理念与开发体验对比
Vue 3 更适合追求开发效率和简单性的团队，尤其是中小型项目。React 18 更适合需要高度灵活性和复杂状态管理的团队，尤其是大型项目。最终选择哪个框架，取决于你的项目需求和团队偏好。无论选择哪个，掌握它们的核心思想和最佳实践，都能让你在前端开发中游刃有余！
2025-02-05 17:29:12
771
原创 开发人员知道的 7 种神奇 JavaScript 数组方法
这是 ES2023 里为数组新增的“不变（immutable）”版本，功能对应老牌的 sort(), reverse(), splice()，但它们不会修改原数组，会返回一个新数组。比 indexOf() 更少被提及的是 lastIndexOf()，它能找到指定元素最后一次出现的位置，还可以指定搜索的起始点。findLast() 是 ES13（2022）中的新成员，和 find() 类似，但搜索方向相反，它会从数组的末尾开始查找。这样就不用先 map() 再 flat()，一次搞定，代码更简洁。
2025-01-16 16:30:39
626
原创 React 中的 `useRef`、`ref` 和 `forwardRef`：区别与使用场景
ref：主要用于类组件中，用于访问 DOM 元素或子组件实例。useRef：用于函数组件中，既可以访问 DOM 元素，也可以存储可变值。forwardRef：用于将ref从父组件转发到子组件，适用于需要跨组件访问 DOM 或实例的场景。
2025-01-16 16:30:12
1171
1
原创 一周面了十几个Web前端岗，发现他们水平很一般
开始的时候也没往深了问，问了几个很基础的场景题结果都答不上来，问了一下，全都准备八股文了，都没准备场景题。现在流行趋势都没搞明白就来面试，这样真的给不了offer，我把场景题整理了一下（），好好准备再来吧!
2025-01-16 16:27:10
456
原创 JS高频面试题合集（自用，持续更新...)
JS 的基本数据类型是没有属性和方法的，但是为了方便使用，在调用基本数据类型的属性和方法时，JS会对基本数据类型自动做一层包装。，实际项目中常见于前后端传参取值。不需要说很多，了解即可。
2025-01-14 17:17:18
990
原创 Vue3之ref 实现源码深度解读
函数允许用户创建一个自定义的引用，能够自由控制其依赖追踪和更新触发的逻辑。当内部值发生变化时，依赖它的计算或组件会 automatisch 重新渲染。的一个变体，它用于创建一个浅响应式引用。浅响应式引用不会深入观察内部对象的变化，只会监视对。函数用于创建一个响应式引用。它接收一个初始值，如果这个值是一个普通值（非。这通常用于在深层次操作后，强制更新依赖于这个引用的效果。它返回一个布尔值，表示传入的值是否为。是一种用于创建响应式引用的接口。属性的替换，而不是内部字段的变化。对象，内部包含这个值。
2025-01-14 17:12:59
562
原创 明显感觉到，Web前端面试方向发生了改变
近期面试过前端开发的估计都发现了，大部分面试一面问简单八股，二面深挖项目场景题，一不留神就“掉坑”了。这几天也是抽空给自己之前用的面试文档重点整合了一下，面试的朋友可以看看！
2025-01-14 16:22:02
346
原创 2025年跑了十几家前端面试，发现很少问八股！！
近期有在面试Web前端岗的宝子应该都发现了，现在面试很少问八股文了，都是考察项目场景题，我把100多道常见题型都整理出来了，，争取金三银四拿到心仪offer！
2025-01-13 16:49:48
738
原创 怎么把v-for的渲染频率降低到最低？提供五种方案！
最近在写聊天工具的会话列表部分，发现一个问题，当会话出现频繁更新的时候，会让列表渲染的非常频繁。虽然影响很小，但是做一流工具的态度还是要有的，所以研究研究怎么把v-for的渲染更新频率降低。在vue中，使用v-for指令进行渲染的时候，vue会尽可能重用现有的DOM元素，而不是每次全部重新渲染，这就是 就地更新。上述代码当 talkList 出现 push 新对象的时候，被循环的动态组件就会发生重新渲染，想要尽可能降低渲染次数的方法有几种。
2025-01-09 12:02:29
794
原创 Vue 从列表页面进入详情页面，再次返回原页面，不清空查询条件或滚动位置
keep-alive可以保证页面不刷新，不仅可以解决搜索框被清空的问题，还可以解决滚动了页面滚动条，进入其他页面后再返回，滚动条又回到了顶部的问题。上面就是我对这个问题的最佳实践了，希望能对你有所帮助。Vue80问面试真题，yyds。
2025-01-07 16:50:14
924
原创 深度解析 Git 的使用：版本控制的核心工具
版本控制系统（VersionControlSystem,VCS）是一种用于记录文件内容变更历史的工具。多人开发者可以在不同的时间编辑同一个文件，而不必担心覆盖或丢失他人的修改。Git作为一种分布式版本控制系统，允许开发者在本地操作代码的同时，确保所有更改都可以被追踪和协同。Git支持通过钩子（hooks）来自动执行某些操作。例如，你可以在每次提交前进行代码检查，或者在推送前运行测试。Git的钩子文件位于项目的.git/hooks目录中，可以根据需要进行编辑和启用。
2025-01-07 16:33:00
974
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人