标签：性能优化
你有没有尝试过按下浏览器的返回按钮，然后注意到前一个页面加载速度有多快？这就是BFCache在起作用。 什么是BFCache？ BFCache代表着“后退/前进缓存”，是一种机制，允许浏览器在内存中保留一个完全渲染的页面快照。 这意味着，当向后或向前导航时，网页几乎立即被呈现，...
在 JavaScript 中，访问数组的最后一个元素并不像在其他语言中那样直接。例如，在 Python 中，您可以使用负索引来访问数组的最后一个元素。然而，在 JavaScript 中，使用带有方括号 [] 的负索引是行不通的。相反，您必须使用数组长度减一的索引来访问最后一个元素...
压缩CSS有助于提高网站性能。但是作为开发者，我们真的不再讨论压缩CSS了。 为什么？ 简而言之，现代技术栈已经改进了CSS的传输和优化，使其实际上不再是一个问题。HTTP/2和现代压缩算法在很大程度上解决了CSS的高效和性能传输问题，而现代前端框架则负责处理诸如代码分割和压缩...
五种 Cookie 同意管理器损害网站性能的方式（以及如何修复它们）
我最近花了很多时间观察欧洲网站的性能，发现同意管理平台（CMPs）在人们尝试使用合成监控来理解性能时，始终会创造一个虚假的现实。诚然，这不是一个新话题，但我觉得它足够重要，值得再次提醒大家。 在这篇文章中，我将涵盖一些与在CMPs存在的情况下测量性能相关的问题，并提供一些资源，...
我们长期以来一直在使用 Skew 编写我们移动渲染架构的核心部分，这是我们发明的自定义编程语言，目的是为我们的播放引擎挤出额外的性能。以下是我们如何在不中断一天开发的情况下自动将 Skew 迁移到 TypeScript 的方法。 Skew 在 Figma 早期作为一个边项...
我们（1password）如何使用esbuild将浏览器扩展构建时间减少90%
我们内部用于构建浏览器扩展代码的系统是在五年前搭建的。虽然我们能够逐步扩展它以满足我们的需求，但在这个过程中它变得越来越慢。让我们给它一个急需的升级！ 我在2020年初作为实习生加入了1Password。那是一个有着……一些有趣记忆的日期！其中一个记忆是我还记得构建我们的浏览器扩...
推送通知在主流浏览器中得到支持，并且它们在去年添加到 iOS 后，成为了网络的一个引人注目的集成功能。我们最近构建了一个名为 Robert’s App 的可安装网络应用程序，它具有推送通知功能（阅读 iOS 安装指南 来测试它）。 我们使用 remix.run 构建了应用程序，并...
如果你使用Lighthouse来衡量你网站的性能，你可能之前已经看到过避免过大的DOM尺寸的警告。它看起来像这样： Lighthouse警告我们关于大DOM尺寸的问题，因为它们会增加内存使用量，并可能产生昂贵的样式计算。结合你网站上发生的所有其他事情，这可能会对用户体验产生重大...
当您滚动网页或网页的部分内容发生变化时，浏览器引擎有时需要重新绘制页面的部分区域。将布局和样式信息转换为屏幕上的像素点的过程对每个浏览器引擎来说是特定的，但可能在性能方面代价很高，特别是当重新绘制的区域很大且频繁发生时。 如果您怀疑网页因频繁和大面积的重新绘制而变慢，请使用 De...
滚动链接动画目前在前端领域非常流行，这在很大程度上得益于原生 CSS 方法将动画链接到滚动进度的日益普及。我甚至在这个网站上使用了它们。屏幕左上角的进度指示器是使用大量尖端 CSS 特性构建的。 然而，滚动链接动画并不是什么新鲜事，真正新鲜的是日益增长的支持，可以在不编写一行 J...