- 博客(14)
- 收藏
- 关注
RSS订阅原创 前端常用的正则表达式
正则表达式：/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?正则表达式：/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/\.\d+|\d+(\.\d+)?
2024-10-11 17:46:37
507
原创 优化图片上传导致浏览器卡顿问题
在图片上传过程中，采用异步处理可以避免页面刷新，让用户在不中断当前操作的情况下继续浏览或进行其他操作，同时提高图片上传的速度和效率。这种方式可以提高上传速度，同时支持断点续传，即使上传过程中发生中断，也可以从上次中断的地方继续上传，而不是重新开始。在后端接收图片文件后，可以使用高效的图片处理库（如ImageMagick、Pillow等）对图片进行进一步的处理，如格式转换、压缩等。通过前端代码设置图片上传的大小限制，避免用户上传过大的图片，这不仅可以减少上传时间，还可以减轻服务器的负担。
2024-09-21 01:15:33
926
原创 ts定义类型
TypeScript提供了一些基本类型，如string, number, boolean, void, null, undefined, symbol, bigint，以及any。TypeScript还支持一些高级类型，如Partial, Required, Readonly, Pick, Record等，这些类型主要通过类型操作符和内置工具类型来构建，用于处理更复杂的类型逻辑。交叉类型（Intersection Types）将多个类型合并为一个类型，新的类型将具有所有成员类型的特征。
2024-09-19 15:29:02
580
原创 webworker和ajax的区别
虽然AJAX操作是异步的，但它主要关注于客户端与服务器之间的数据交换，而不是多线程之间的通信。AJAX：在主线程中运行，但它是异步的，允许在不刷新整个页面的情况下与服务器交换数据并更新页面内容。AJAX：主要用于实现前后端的数据交互，无需刷新整个页面即可更新页面内容，如动态加载数据、表单验证和提交、实时搜索等。Web Worker：由于运行在独立的线程中，不能直接访问DOM（文档对象模型），也不能执行与界面相关的操作。AJAX：可以访问和操作DOM，因为它在主线程中运行，可以直接更新页面内容。
2024-09-18 15:06:48
337
原创 事件循环。
执行栈是一个后进先出（LIFO）的栈结构，用于存储在代码执行过程中创建的所有执行环境（也称为执行上下文）。JavaScript的事件循环（Event Loop）是JavaScript运行时的一个重要机制，它负责处理异步事件和回调函数，使得JavaScript能够执行非阻塞的I/O操作。事件循环在处理任务时，会先执行完所有的微任务，然后再执行一个宏任务。处理事件队列：如果执行栈为空，事件循环会从事件队列中取出一个事件，并将其对应的回调函数放入执行栈中执行。如果执行栈不为空，则继续执行栈中的代码。
2024-09-12 00:39:06
415
原创 针对页面中返回大量图片和数据渲染导致渲染进程过慢
图片格式选择：根据图片的实际用途选择合适的图片格式，如WebP、JPEG XR等，这些格式在保持图片质量的同时，具有更小的体积。图片懒加载：实现图片的懒加载，即只有当图片进入可视区域时才进行加载，这样可以显著减少初始加载时的数据量，提升页面渲染速度。分页加载：对于大量数据的渲染，可以采用分页加载的方式，每次只渲染用户当前需要查看的数据，减少单次请求和渲染的数据量。图片压缩：使用专业的图片压缩工具对图片进行压缩，减少图片的体积，从而加快图片的加载速度。二、优化数据处理和渲染。四、优化代码和资源压缩。
2024-09-10 23:19:40
682
原创 前端监控与埋点
埋点，即数据埋点，是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。综上所述，前端监控埋点是一种重要的数据采集技术，通过合理的实现方式和上报机制，可以帮助企业更好地了解用户需求和行为习惯，优化产品和服务策略。改进决策：通过对埋点数据的分析，企业可以了解用户的真实需求和行为习惯，从而做出更符合市场和用户需求的决策。预测趋势：通过对数据的分析，企业可以预测市场和用户的未来趋势，提前做好准备，把握市场机遇。
2024-07-26 10:17:18
995
原创 前端监控与埋点
"埋点"是一种在应用程序或网站中插入代码的技术，用于收集用户行为数据或特定事件的信息。通过在特定位置插入代码或调用特定的API，开发人员可以捕获有关用户如何与应用程序或网站交互的数据。埋点的目的是为了收集关键的指标和数据，以便帮助了解用户行为、改进用户体验、优化应用性能、进行A/B测试和支持业务决策。自动埋点:使用自动化工具或框架，自动收集某些标准事件或用户行为数据。用户行为数据:例如页面浏览量、点击事件、表单提交、购买行为等。用户属性数据:例如用户ID、地理位置、用户角色等。
2024-07-26 10:13:26
691
原创 Vue 3 带来了哪些新的特性和性能方面的提升
从 defineProperty 升级到 ES2015 原生的 Proxy，不需要初始化遍历所有属性，就可以监听新增和删除的属性。更强的 Tree Shaking，可以过滤不使用的模块，没有使用到的组件，比如过渡（transition）组件，则打包时不会包含它。可以将组件的内容渲染到指定 DOM 节点的新特性。可以直接在 template 中使用多个根级别的元素，而不需要额外的包装元素。这样更方便地组织组件的结构。移除了一些非必要的特性，如 filter，一些新增的模块也将会被按需引入，减小了打包体积。
2024-07-18 22:46:06
567
原创 requestAnimationFrame、setInterval、setTimeout 对比
在前端开发中，requestAnimationFrame、setInterval、setTimeout 是三个常用的定时器函数，它们各自具有不同的功能和适用场景。功能：requestAnimationFrame 是浏览器用于定时循环操作的一个接口，主要用于按帧对网页进行重绘，以支持各种网页动画效果（如DOM动画、Canvas动画、SVG动画、WebGL动画）。工作原理：setTimeout 将函数推入异步任务队列，等待当前执行栈清空后，根据设定的时间间隔（可能会有延迟）执行该函数。
2024-07-18 13:49:50
631
原创 VUE虚拟列表
list: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`), // 模拟大量数据。请注意，这个示例假设列表项的高度是固定的。如果列表项的高度是可变的，那么你需要一个额外的步骤来动态计算或跟踪每个列表项的高度，并在计算可见项时考虑这些变化。itemHeight: 50, // 假设每个列表项的高度是固定的。首先，你需要知道视口（即用户可见的列表区域）的高度和每个列表项的高度。根据滚动位置、视口高度和列表项高度，计算并渲染当前可见的列表项。
2024-06-19 16:24:20
734
原创 事件循环，回流，重绘
事件循环、回流（Reflow）和重绘（Repaint）在前端开发中扮演着重要的角色，它们与浏览器的渲染性能密切相关。定义：回流也称为重计算布局（Recompute Layout），是指当页面的部分或全部的几何属性发生改变时，浏览器需要重新计算元素的位置和大小的过程。事件循环与重绘：同样地，在事件循环中执行某些操作（如改变元素的背景色）时，可能会触发重绘。定义：重绘也称为重绘渲染树（Redraw Tree），是指当元素的外观发生改变时，浏览器需要重新绘制元素的过程。元素的内容改变导致的大小改变。
2024-06-14 12:03:06
899
原创 js垃圾回收机制
总结来说，垃圾回收机制是一种重要的内存管理机制，它通过自动回收不再使用的内存空间，优化了内存使用并提高了程序的稳定性和可靠性。对程序性能的影响：垃圾回收会占用一定的系统资源，包括CPU时间和内存带宽，从而可能影响程序的性能。优化策略：为了减少垃圾回收对程序性能的影响，可以采取一些优化措施，如尽量减少对象的创建和销毁、优化垃圾回收器的配置、使用对象池和缓存机制、采用分代回收策略等。定义：垃圾回收机制是一种自动管理动态分配的内存空间的机制，它自动回收不再使用的内存，以优化内存使用和保持系统稳定。
2024-06-14 11:55:17
346
原创 内存泄露和内存溢出
内存泄漏（Memory Leak）和内存溢出（Out Of Memory，简称OOM）是内存管理相关的两个重要概念，它们在表现、原因以及后果上存在明显的不同。内存溢出：是指应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。内存泄漏：是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费。使用完内存后未调用相应的内存释放函数（如C语言中的free，C++中的delete等）。程序需要的内存超过了可用的内存限制。循环引用导致的内存泄漏。
2024-06-14 11:52:08
379
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人