随笔分类 -  前端性能优化

大数据量下数组的展开运算符会非常耗时导致卡死，是什么原因？
摘要：大数据量下展开运算符性能问题的原因与优化 在 JavaScript 中，当处理大数据量数组时使用展开运算符（...）会导致严重性能问题甚至卡死，这主要由以下原因造成： 根本原因分析 1. 内存分配机制 展开运算符创建的是全新的数组对象，处理大数组时需要： 在内存中分配连续空间（时间复杂度 O(n)） 阅读全文
posted @ 2025-07-26 16:18 龙陌 阅读(155) 评论(0) 推荐(0)
为何ep的虚拟滚动树在开启性能模式时，内存会增大很多？
摘要：虚拟滚动树在开启性能模式（perfMode: true）时，内存使用会显著增加的原因主要与其实现机制有关。以下是详细解释： ✅ 什么是性能模式？ 性能模式通过 预加载和缓存更多节点数据 来提升滚动的流畅性，适用于大数据量场景下的快速响应。 perfMode: { type: Boolean, def 阅读全文
posted @ 2025-05-17 21:22 龙陌 阅读(211) 评论(0) 推荐(0)
什么是 代理服务器缓存
摘要：代理服务器缓存（Proxy Server Cache）是指位于客户端与目标服务器之间的代理服务器用于存储响应数据的一种机制。当用户请求访问网络资源时，如果该资源之前已经被代理服务器缓存下来，则可以直接从缓存中提供服务，而不需要再次连接到原始服务器获取内容。这种机制可以显著减少网络流量、缩短响应时间， 阅读全文
posted @ 2025-04-26 20:01 龙陌 阅读(163) 评论(0) 推荐(0)
页面上dom节点过多，会导致浏览器卡死吗？
摘要：是的，页面上的 DOM 节点过多确实可能导致浏览器卡死或性能显著下降。当一个网页包含大量的 DOM 节点时，可能会在以下几个方面影响浏览器性能： 1. 渲染性能 重绘和重排（Reflow 和 Repaint）：每当页面上的某些元素发生变化（如尺寸、位置等），浏览器需要重新计算布局（reflow）并重 阅读全文
posted @ 2025-03-28 11:22 龙陌 阅读(444) 评论(0) 推荐(0)
URL.createObjectURL() 和 new FileReader()在读取预览文件时区别
摘要：URL.createObjectURL() 和 new FileReader()在读取预览文件时区别 URL.createObjectURL() MDN 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。 这个 URL 的生命周期和创建它的窗口中的 document 阅读全文
posted @ 2025-02-12 21:41 龙陌 阅读(184) 评论(0) 推荐(0)
brotli 压缩 和gzip压缩的区别
摘要：Brotli 和 Gzip 都是用于数据压缩的算法，旨在减少文件大小以加快网络传输速度。然而，它们之间存在一些关键区别： 压缩效率 Brotli：由Google开发，提供了比Gzip更高的压缩率，尤其是在文本文件（如HTML、CSS和JavaScript）上表现尤为突出。Brotli通过使用一个预定 阅读全文
posted @ 2025-01-25 21:44 龙陌 阅读(732) 评论(0) 推荐(0)
webworker 和wasm对前端性能优化，使用场景有何区别？
摘要：Web Worker 和 WebAssembly (Wasm) 是两种不同的技术，它们在前端性能优化中扮演着不同的角色，并适用于不同类型的使用场景。下面我们将详细比较这两种技术的区别以及它们各自的适用场景。 Web Worker 性能优化特点 并发处理：Web Worker 允许你在后台线程中运行 阅读全文
posted @ 2024-12-29 21:09 龙陌 阅读(574) 评论(0) 推荐(1)
AssemblyScript 对比原生的TS和JS有何优势？
摘要：AssemblyScript 是一种 TypeScript 的严格子集，旨在编译为 WebAssembly (Wasm)，从而在浏览器和服务器环境中提供接近原生代码的执行速度。它与原生的 TypeScript (TS) 和 JavaScript (JS) 相比具有一些独特的优势，尤其是在性能和内存管 阅读全文
posted @ 2024-12-26 10:57 龙陌 阅读(495) 评论(0) 推荐(0)
js中使用对象.属性获取值与使用函数直接返回一个值，性能上有差异吗？
摘要：在 JavaScript 中，通过对象属性访问值（例如 obj.property）与调用函数返回一个值（例如 function getValue() { return value; } 或者箭头函数 const getValue = () => value;）这两种方式的性能差异通常是非常微小的，在 阅读全文
posted @ 2024-12-25 11:23 龙陌 阅读(199) 评论(0) 推荐(0)
offsetTop为啥会影响性能?
摘要：offsetTop 是一个只读属性，它返回元素的顶部相对于其包含块（通常是最近的已定位祖先元素）的偏移量。当在一个页面中频繁或大量使用 offsetTop 来获取元素的位置时，可能会影响性能，主要原因如下： 1. 强制同步布局 (Layout Thrashing) 每当访问 offsetTop 或其 阅读全文
posted @ 2024-12-20 23:37 龙陌 阅读(156) 评论(0) 推荐(0)
JavaScript中的异步模式
摘要：JavaScript中的异步模式 JavaScript语言的执行环境是“单线程（singlethread）”，就是指一次只能完成一个任务。 如果有多个任务，就必须排队，等前面一个任务完成，再执行后面一个任务，以此类推。 这种模式的好处是实现起来比较简单，执行环境相对单纯， 坏处是只要有一个任务耗时很 阅读全文
posted @ 2024-07-04 20:15 龙陌 阅读(63) 评论(0) 推荐(0)
WebP 图片格式有哪些优点？
摘要：WebP 图片格式是由 Google 开发的一种现代图像格式，旨在提供更高效的图像压缩，相比于传统的 JPEG、PNG 和 GIF 格式，WebP 提供了显著的优势： 更高的压缩率：WebP 支持无损和有损压缩。在有损压缩模式下，WebP 可以提供比 JPEG 更高的压缩率，这意味着相同质量的图片， 阅读全文
posted @ 2024-07-04 19:29 龙陌 阅读(589) 评论(0) 推荐(0)
对于浏览器请求接口限制，是否有必要开发一套请求任务管理器组件，自主的去控制请求的并发，保证在浏览器允许的最大并发连接数限制之中，避免请求阻塞和资源抢占。
摘要：在现代Web开发中，浏览器对同时发起的网络请求确实存在一定的限制，这个限制通常与浏览器的安全性和性能优化有关。不同浏览器对最大并发连接数有不同的默认设置，例如，Chrome 和 Firefox 大致允许每个域名上同时有6到8个TCP连接，而IE可能更低。当超过这个限制时，额外的请求会被排队等待，直到 阅读全文
posted @ 2024-07-04 15:03 龙陌 阅读(524) 评论(0) 推荐(0)
window.getComputedStyle会有性能问题吗
摘要：window.getComputedStyle() 方法被用来获取指定元素在浏览器中计算后的最终样式，包括继承样式、浏览器默认样式、用户自定义样式表、行内样式以及动画和过渡效果等。虽然它是一个非常有用的工具，但正如任何 JavaScript 操作一样，频繁或不当使用确实可能引发性能问题。以下是可能导 阅读全文
posted @ 2024-04-03 09:57 龙陌 阅读(689) 评论(0) 推荐(0)
在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时，它会请求一些数据，再渲染子组件，然后重复这样的过程来请求子组件的数据。如果网络不是很快，这将比并行请求所有数据要慢得多。 如何理解？
摘要：在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时，它会请求一些数据，再渲染子组件，然后重复这样的过程来请求子组件的数据。 如果网络不是很快，这将比并行请求所有数据要慢得多。 如何理解？ 在React中，当我们在Effect（例如useEffect Hook）中直接请求数据时， 阅读全文
posted @ 2024-02-05 11:05 龙陌 阅读(247) 评论(0) 推荐(0)
如何出一份前端页面的性能分析报告？
摘要：编写一份前端页面性能分析报告，需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架： 一、前言 目的：简述报告的目的，比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。 范围：明确分析涉及的页面及其版本信息，以及使用的设备类型、浏览器版本和网络条 阅读全文
posted @ 2024-02-04 10:52 龙陌 阅读(655) 评论(0) 推荐(1)