随笔分类 - 前端性能优化
发表于 2025-02-12 21:41阅读:11评论:0推荐:0
摘要:URL.createObjectURL() 和 new FileReader()在读取预览文件时区别 URL.createObjectURL() MDN 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。 这个 URL 的生命周期和创建它的窗口中的 document
阅读全文 »
发表于 2025-01-25 21:44阅读:77评论:0推荐:0
摘要:Brotli 和 Gzip 都是用于数据压缩的算法,旨在减少文件大小以加快网络传输速度。然而,它们之间存在一些关键区别: 压缩效率 Brotli:由Google开发,提供了比Gzip更高的压缩率,尤其是在文本文件(如HTML、CSS和JavaScript)上表现尤为突出。Brotli通过使用一个预定
阅读全文 »
发表于 2024-12-29 21:09阅读:64评论:0推荐:1
摘要:Web Worker 和 WebAssembly (Wasm) 是两种不同的技术,它们在前端性能优化中扮演着不同的角色,并适用于不同类型的使用场景。下面我们将详细比较这两种技术的区别以及它们各自的适用场景。 Web Worker 性能优化特点 并发处理:Web Worker 允许你在后台线程中运行
阅读全文 »
发表于 2024-12-26 10:57阅读:94评论:0推荐:0
摘要:AssemblyScript 是一种 TypeScript 的严格子集,旨在编译为 WebAssembly (Wasm),从而在浏览器和服务器环境中提供接近原生代码的执行速度。它与原生的 TypeScript (TS) 和 JavaScript (JS) 相比具有一些独特的优势,尤其是在性能和内存管
阅读全文 »
发表于 2024-12-25 11:23阅读:55评论:0推荐:0
摘要:在 JavaScript 中,通过对象属性访问值(例如 obj.property)与调用函数返回一个值(例如 function getValue() { return value; } 或者箭头函数 const getValue = () => value;)这两种方式的性能差异通常是非常微小的,在
阅读全文 »
发表于 2024-12-20 23:37阅读:27评论:0推荐:0
摘要:offsetTop 是一个只读属性,它返回元素的顶部相对于其包含块(通常是最近的已定位祖先元素)的偏移量。当在一个页面中频繁或大量使用 offsetTop 来获取元素的位置时,可能会影响性能,主要原因如下: 1. 强制同步布局 (Layout Thrashing) 每当访问 offsetTop 或其
阅读全文 »
发表于 2024-07-04 20:15阅读:17评论:0推荐:0
摘要:JavaScript中的异步模式 JavaScript语言的执行环境是“单线程(singlethread)”,就是指一次只能完成一个任务。 如果有多个任务,就必须排队,等前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯, 坏处是只要有一个任务耗时很
阅读全文 »
发表于 2024-07-04 19:29阅读:218评论:0推荐:0
摘要:WebP 图片格式是由 Google 开发的一种现代图像格式,旨在提供更高效的图像压缩,相比于传统的 JPEG、PNG 和 GIF 格式,WebP 提供了显著的优势: 更高的压缩率:WebP 支持无损和有损压缩。在有损压缩模式下,WebP 可以提供比 JPEG 更高的压缩率,这意味着相同质量的图片,
阅读全文 »
发表于 2024-07-04 15:03阅读:267评论:0推荐:0
摘要:在现代Web开发中,浏览器对同时发起的网络请求确实存在一定的限制,这个限制通常与浏览器的安全性和性能优化有关。不同浏览器对最大并发连接数有不同的默认设置,例如,Chrome 和 Firefox 大致允许每个域名上同时有6到8个TCP连接,而IE可能更低。当超过这个限制时,额外的请求会被排队等待,直到
阅读全文 »
发表于 2024-04-03 09:57阅读:417评论:0推荐:0
摘要:window.getComputedStyle() 方法被用来获取指定元素在浏览器中计算后的最终样式,包括继承样式、浏览器默认样式、用户自定义样式表、行内样式以及动画和过渡效果等。虽然它是一个非常有用的工具,但正如任何 JavaScript 操作一样,频繁或不当使用确实可能引发性能问题。以下是可能导
阅读全文 »
发表于 2024-02-05 11:05阅读:119评论:0推荐:0
摘要:在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时,它会请求一些数据,再渲染子组件,然后重复这样的过程来请求子组件的数据。 如果网络不是很快,这将比并行请求所有数据要慢得多。 如何理解? 在React中,当我们在Effect(例如useEffect Hook)中直接请求数据时,
阅读全文 »
发表于 2024-02-04 10:52阅读:410评论:0推荐:1
摘要:编写一份前端页面性能分析报告,需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架: 一、前言 目的:简述报告的目的,比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。 范围:明确分析涉及的页面及其版本信息,以及使用的设备类型、浏览器版本和网络条
阅读全文 »