- 博客(141)
- 收藏
- 关注
RSS订阅原创 usemeno和usecallback区别及使用场景
useMemo是为了优化计算，避免不必要的重复计算。是为了优化函数，避免不必要的函数重新创建，减少子组件的重新渲染。
2024-09-20 20:01:40
331
原创 js闭包作用及使用场景
闭包可以帮助隐藏函数内部的变量，防止它们被外部代码直接访问，从而实现数据的私有化。比如，在 JavaScript 中并没有类似于其他编程语言的私有变量，但可以通过闭包来实现这一功能。：闭包可以保持函数执行时的环境，使得该函数可以在之后的执行中继续访问当时的环境变量。这意味着闭包可以让函数记住状态，即使这个函数已经执行完毕，也不会丢失这些状态。
2024-09-17 21:23:38
246
原创 Vue.nextTick 的工作机制
缓存的内容是一个回调函数队列。这些回调函数会在下一次 DOM 更新循环之后执行。Vue 使用微任务（如）或宏任务（如setTimeout）来确保这些回调函数的执行时机。这个机制确保了在进行 DOM 操作时，所有数据的变化都已经反映到 DOM 上，从而避免了可。
2024-09-15 17:05:29
1283
原创 Vue 2和Vue 3区别以及实现原理
Vue 2 选择是因为它在当时具有更好的浏览器兼容性，并且对于Vue 2的设计目标足够有效。然而，它有局限性，特别是在处理数组和动态属性时。Vue 3 选择Proxy是因为它提供了更强大的功能和更好的性能，尽管牺牲了一些兼容性，但它解决了Vue 2的一些固有问题，如无法监听动态属性和数组变化等。
2024-09-12 21:18:06
553
原创 Vue、React 生命周期有哪些？页面数据获取放在哪个生命周期做比较好？
是获取数据的最佳时机，因为此时组件已经被挂载，可以安全地进行 DOM 操作和异步请求。是获取数据的最佳时机，因为此时组件已经挂载，可以安全地进行 DOM 操作和异步请求。
2024-09-11 21:02:15
738
原创 js事件冒泡和事件委托
事件冒泡是事件传播机制的一部分，描述了事件从目标元素向上传播的过程。事件委托是一种编程技巧，利用事件冒泡机制，通过在父元素上绑定事件处理程序来处理子元素的事件。
2024-09-08 15:18:12
792
原创 JavaScript 作用链
作用链：描述了变量查找路径，从当前作用域到父级作用域再到全局作用域。作用域：包括全局作用域、函数作用域和块级作用域。闭包：函数可以记住并访问其词法作用域，即使函数在其词法作用域之外执行。理解作用链和闭包对于编写复杂的 JavaScript 代码和避免常见的作用域问题非常重要。
2024-09-01 10:42:38
1449
原创 useeffect和uselayout区别
useEffect：在渲染之后异步执行，不阻塞浏览器绘制。适用于大多数副作用操作。：在渲染之后同步执行，阻塞浏览器绘制。适用于需要立即操作 DOM 的场景。
2024-08-29 21:45:27
616
原创 数组算法排序实现
javascript复制代码Array.prototype.myFilter = function(callback, thisArg) {javascript复制代码function mergeSortedArrays(arr1, arr2) {javascript复制代码function parseQueryString(queryString) {javascript复制代码function numberWithCommas(num) {
2024-08-25 10:32:30
383
原创 Cookie 和本地存储，浏览器缓存
Cookie适合存储少量、需要与服务器交互的会话数据。本地存储适合持久化存储较大数据，且仅在客户端使用，不与服务器频繁交互。浏览器缓存用于提高资源加载效率，通过缓存静态资源减少网络请求。
2024-08-16 21:08:17
361
原创 CSS 垂直居中显示的方法
* 使容器高度为视口高度 */align-items: center;/* 垂直居中 */justify-content: center;/* 水平居中 */place-items: center;/* 水平和垂直居中 */vertical-align: middle;/* 垂直居中 */line-height: 100px;/* 与容器高度相同 */text-align: center;/* 水平居中 */text-align: center;/* 水平居中 *//* 设定固定高度 */
2024-08-13 21:57:16
530
原创 CSS 实现两边固定宽，中间自适应
* 两边固定宽度，中间自适应 */html复制代码<div class="container">html复制代码<div class="container">width: 200px;/* 两边固定宽度 *//* 中间自适应 */css复制代码.container {css复制代码.container {
2024-08-08 19:58:31
487
原创 React 常用 Hooks 和使用的易错点
typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);typescript复制代码const memoizedCallback = useCallback(() => {中没有正确地清理副作用，导致内存泄漏。中忘记依赖数组，导致没有性能优化效果。中忘记依赖数组，导致无限循环。：性能优化，记住计算结果。：性能优化，记住函数定义。函数中返回新的状态对象。中返回一个清理函数。
2024-08-05 19:04:44
421
原创 TypeScript 及算法准备
typescript复制代码function mergeSortedArrays(arr1: number[], arr2: number[]): number[] {typescript复制代码function flattenArray(arr: any[]): any[] {typescript复制代码function flattenArray(arr: any[]): any[] {typescript复制代码function flattenArray(arr: any[]): any[] {
2024-08-02 23:27:55
959
原创 开发中可能会面临的真实问题及处理流程
接口返回的数据结构或字段名称与前端预期不符，导致页面展示错误。：确保前后端约定的接口文档是最新的，并且描述一致。：与后端开发人员沟通，确认是否有接口变更或数据异常。：使用工具（如Postman、浏览器开发者工具）调试接口请求，查看实际返回的数据。：如果后端接口无法立即修复，考虑在前端进行适配处理。：页面加载速度慢，影响用户体验。：使用浏览器开发者工具分析页面加载性能，找出瓶颈（如大文件加载、阻塞脚本等）。：压缩和合并CSS、JS文件，使用CDN加速资源加载。：对于图片和列表项等非关键资源，使用懒加载技术。
2024-08-01 19:56:02
456
原创 前端安全：CSRF 和 XSS 攻击介绍 以及 如何解决
跨站请求伪造（CSRF）是一种攻击方式，攻击者诱导用户在已认证的应用中执行未授权的操作。通常，攻击者会通过伪造的请求在受害者不知情的情况下执行这些操作。
2024-07-29 11:30:18
946
原创 列表很多怎么解决，lazyload解决，以及用过哪个插件
当列表中的项很多时，直接加载所有项会导致页面性能下降，特别是对于移动设备。Lazyload（懒加载）是一种解决方案，可以仅在需要时（通常是当用户滚动到页面的特定部分时）加载项。
2024-07-27 21:22:52
868
原创 deepEqual对比两个对象是否相等
是一种深度比较两个对象是否相等的函数。它不仅比较对象的值是否相同，还比较对象内部嵌套对象的值是否相同。// 引用相同或值相同。// 不是对象或其中一个是null。// 键不同或值不同。
2024-07-26 20:13:54
255
原创 electron通信与持久化存储
脚本运行在一个具有有限访问权限的独立上下文中，负责暴露安全的 API 给渲染进程。：简单的键值对存储，主要用于小型数据和简单配置。：支持事务、索引、查询，适用于大型数据存储。：强大的查询能力、事务支持、单文件存储。：轻量级、无依赖、简单的查询和数据存储。：不适用于复杂的数据结构和大规模数据。：需要简单的 NoSQL 数据库特性。：数据持久化和备份，适合复杂应用。：需要关系型数据库的功能和性能。：简单的配置文件、用户数据。：功能有限，不适合复杂查询。：实现简单、无需额外依赖。：API 简单、易于使用。
2024-07-05 18:38:58
628
原创 import和require的区别
前者采用的是实时绑定方式，即导入和导出的值都指向同一个内存地址，所以导入的值会随着导出值变化；而后者在导出时是指拷贝，就算导出的值变化了，导入的值也不会变化，如果想要更新导入的值，就要重新导入。import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案。前者是编译时加载，必须放在模块顶部，在性能上比后者好一些；后者是运行时加载，理论来说放在哪里都可以。，前者目前不支持，但是已有提案。后者支持动态引入，也就是。前者是关键词，后者不是。
2024-07-03 20:49:01
195
原创 Generator 是怎么样使用的以及各个阶段的变化如何
Generators 是 JavaScript 中一种特殊类型的函数，可以在执行过程中暂停，并且在需要时恢复执行。Generator 函数被调用后，会返回一个指向内部状态的迭代器对象，但并不执行函数体内的代码，这个过程称为初始化阶段。Generator 函数返回的是一个迭代器对象，通过调用该迭代器对象的。方法时，Generator 函数会从函数体开始执行，直到遇到第一个。方法时，Generator 函数会执行到下一个。的对象，表示 Generator 函数执行结束。关键字后面表达式的值，并暂停函数的执行。
2024-07-01 21:57:56
475
原创 什么是requestAnimationFrame
是一个由浏览器提供的 JavaScript API，用于在下一次页面重绘之前执行指定的回调函数。它主要用于执行动画和其他需要高性能的操作，因为它可以让浏览器在执行动画之前做好准备，以获得更流畅的动画效果。
2024-06-30 21:16:14
209
原创 Node.js 事件循环的工作流程二
具体来说，事件循环会按照顺序依次检查各个阶段的回调队列，如果队列中有待处理的事件，则会处理这些事件。在每个阶段，事件循环都会检查是否有待处理的回调，如果有，则执行这些回调，并继续到下一个阶段。在这个阶段，事件循环会检查是否有新的 I/O 事件需要处理。在这个阶段，事件循环会处理新的 I/O 事件，并且会处理轮询队列中的回调。如果 poll 阶段没有 I/O 回调，并且没有到期的计时器，事件循环可能会阻塞在这里等待新的 I/O 事件。需要执行，则事件循环可能会阻塞在这个阶段，等待新的 I/O 事件。
2024-06-29 20:36:08
855
原创 Node.js 事件循环的工作流程
Node.js 的事件循环由六个主要阶段组成，每个阶段都有一个或多个回调队列。事件循环依次遍历这些阶段，并在每个阶段执行相应的回调函数。检索新的 I/O 事件，执行 I/O 回调（几乎所有的 I/O 都在这里进行），在适当的时候回阻塞在这里。这里的计时器并不保证会在精确的时间执行，只会在接近的时间执行。一般不涉及开发者的代码。这包括一些操作系统层面的回调，如网络通信的回调。执行几乎所有的回调（除了关闭的回调函数、计时器的回调函数和。执行一些关闭回调函数，如。处理轮询队列中的事件。计算轮询的超时时间。
2024-06-24 21:26:26
368
原创 前端10万条数据优化方案
使用虚拟化技术可以只渲染可见区域的数据，而不是将所有数据一次性渲染到 DOM 中。将数据分页加载，每次只加载并展示一页数据，而不是一次性加载所有数据。如果数据允许，可以使用索引或者键值对来加快数据查找的速度。在合适的情况下，可以使用缓存来存储已经获取的数据，避免重复的网络请求，提升数据加载的效率和页面响应速度。确保每个数据项的渲染过程尽可能简单和高效，避免在渲染过程中进行大量复杂的计算或者操作。：在客户端对数据进行搜索和过滤，只展示符合条件的数据。：检查组件渲染的性能和频率，优化不必要的重复渲染。
2024-06-20 17:51:33
498
原创 什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
FOUC（Flash of Unstyled Content，无样式内容闪烁）是指在网页加载过程中，用户可能会短暂地看到未应用样式的原始 HTML 内容，随后样式表加载完成后，页面才会以正确的样式重新渲染。这种现象会影响用户体验，显得页面加载不连贯和不专业。
2024-06-18 21:46:41
597
原创 解释一下 Flux
Flux 是 Facebook 提出的应用架构模式，用于管理 React 应用中的数据流和状态。它强调单向数据流，以解决复杂应用中数据和视图不一致的问题。动作是描述应用中发生事件的普通 JavaScript 对象。每个动作都有一个类型（type）属性，以及携带的数据（payload）。动作用于将数据从视图传递到存储。javascript复制代码const action = {调度器是一个中心集线器，用于将动作分发到存储。它注册所有存储，并将收到的每个动作传递给所有存储。
2024-06-15 17:53:26
1063
5
原创 什么是 prop drilling，如何避免？
是在 React 应用中常见的问题，指的是为了将数据从一个顶层组件传递到一个深层嵌套的子组件，不得不经过多个中间组件层层传递 props。虽然这种方法是可行的，但它会导致代码变得冗长、难以维护，并且增加了中间组件的复杂性，因为它们需要传递与自身无关的 props。
2024-06-10 18:52:46
1137
原创 说说new操作符具体干了什么？
如果构造函数显式返回一个对象，则返回该对象；否则，返回步骤 1 创建的新对象。调用构造函数，并将参数传递给它，使其可以初始化新对象的属性。这一步实现了新对象继承自构造函数的原型。绑定到新创建的对象。这样，构造函数内部的。创建一个新的空对象，并将其。
2024-06-07 21:07:56
293
原创 js垃圾回收机制
不同代的对象采用不同的回收策略，提高回收效率。在标记阶段结束后，垃圾回收器遍历内存中所有的对象，对于没有被标记的对象，认为它们是不再使用的对象。每个对象维护一个引用计数，当一个新的引用指向该对象时，计数加1，当引用被删除时，计数减1。垃圾回收器首先遍历所有的根对象，这些根对象一般是全局对象、局部变量和函数调用链。对所有能直接或间接从根对象访问到的对象进行标记，表示这些对象还在使用中。如果一个对象可以通过引用链从根对象到达，则认为该对象是可达的。当引用计数变为0时，对象被认为是不可达的，可以被回收。
2024-06-05 21:08:03
417
原创 React Navite环境搭建
在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中。
2024-06-03 20:49:56
800
原创 redux实现原理
为了描述状态如何随时间变化，你会定义 reducers，它们是纯函数，接收先前的状态和一个 action，并返回一个新的状态。在 reducer 中，你不应该做任何改变原始状态的操作，而是返回一个新的状态对象。：Redux 应用程序的所有状态都存储在一个单一的 JavaScript 对象中，称为“状态树”或“状态存储”。这种模式使得应用程序中的组件可以订阅状态的变化，并在状态发生变化时更新自己。：在 Redux 中，状态是只读的，不能直接修改。要更改状态，必须发起一个 action，描述发生的事件。
2024-05-03 20:31:27
246
原创 cookie数据始终在同源的http请求中是否会携带（即使不需要）
与SessionStorage和LocalStorage不同，Cookie数据在每次浏览器与服务器进行同源通信时都会自动包含在HTTP请求中，无论服务器是否需要这些数据。：Cookie中可能包含敏感的用户信息，如果没有正确设置安全措施（如HttpOnly、Secure标志），可能会暴露于某些类型的攻击，如跨站脚本攻击（XSS）。：由于Cookie数据总是随请求发送，如果Cookie的大小很大，可能会增加网络传输的负载，从而对性能产生一定的影响。
2024-04-27 10:02:55
405
原创 Cookie是在所有同源窗口中共享的，是否共享
当浏览器与服务器进行交互时，满足同源策略（SameSite）的Cookie会被自动附加到请求中，这意味着同一个域名下的多个页面可以共享这些Cookie数据。：Cookie可以设置为会话Cookie（浏览器关闭后失效）或持久性Cookie（设置了有效时间，即使浏览器关闭也会保留在硬盘上）。这意味着如果两个窗口或标签页属于同一源（相同的协议、主机和端口），它们将能够访问和共享相同的Cookie。如果一个页面产生的Cookie被限定在特定路径下，那么只有同一目录下或子目录下的页面才能访问这个Cookie。
2024-04-23 16:07:46
400
原创 sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面，是否会共享
一旦用户关闭了窗口或标签页，存储在 sessionStorage 中的数据就会被清除。需要注意的是，即使在相同的浏览器和相同的页面下，如果页面是在新的窗口或标签页中打开的，那么它们之间的 sessionStorage 也是不共享的。这是因为 sessionStorage 的设计初衷是为了在单个页面会话期间保持数据的独立性，而不是为了在不同页面或窗口之间共享数据。总结来说，sessionStorage 提供了一种在单个页面会话期间存储数据的临时解决方案，但它并不适用于需要在不同窗口或会话之间共享数据的场景。
2024-04-22 16:57:28
518
原创 js所有的引用类型（数组，对象，函数）都具有对象的特性
指的是Boolean、Number和String，虽然它们本质上是基本数据类型，但它们也具有对象的特性，如可以调用方法等。：函数是一段可执行的代码块，可以作为对象的方法，也可以独立存在。：这是最基础的对象类型，可以包含属性和方法，属性的键可以是字符串或者符号，属性值可以是任意类型的数据。：如Math、JSON等，这些都是预定义的对象，具有一系列内置的属性和方法，可用于执行特定的任务。：日期对象用来处理和操作日期和时间，提供了一系列方法和属性来进行日期计算和格式化输出。
2024-04-15 19:25:28
189
原创 经典面试题数组常用方法都有哪些
可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入 4 和 6。可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）
2024-04-08 18:42:57
943
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人