个人qwik项目优化
前言 最近把自己的 做了一轮比较彻底的性能与稳定性优化，核心目标不是“再堆几个小技巧”，而是把内容系统、文章详情链路和埋点链路重新梳顺，让它们更符合一句话： 能在构建阶段做完的事，就不要留到运行时反复做；能在服务端算好的数据，就不要再把原始材料丢给客户端自己算。 这一轮改造主要解决了 5 个问题： 1. 文章索引依然依赖运行时扫描 Markdown，重复做了构建阶段本可以完成的工作。 2. 文章详情页把原始 Markdown 一起带给前...
JS篇之性能优化
很多时候面试官，面试你的时候会问你：同学你在项目中做过哪些性能优化呢？ 可能你是这样回答的： 1. 无用代码的删除，减小代码打的体积 2. 使用cdn加速 3. 图片压缩 4. 分包 5. 骨架屏 ........ 其实性能优化是个很宽泛的东西，可以从多方面进行入手 性能优化不是视觉体验打分，网上部分评判如下 | 核心指标 | 定义 | 优化方向 | | | | | | LCP（最大内容绘制） | 首屏最大内容加载完成时间 | 图片压缩...
前端PerformanceObserver
是 Web Performance API 的一部分，它提供了一种异步、高效地收集浏览器性能指标的方式。与传统的 或 方法不同， 允许你订阅特定类型的性能事件，并在这些事件发生时获得通知，而不是在某个时间点一次性获取所有已发生的事件。这对于实时监控和报告性能数据非常有用，尤其是在单页应用 (SPA) 中，因为页面加载后的用户交互也会产生新的性能事件。 的作用 主要用于： 1. 监控页面加载性能： 获取导航时间、资源加载时间等。 2. 跟...
前端常见的性能指标采集
前言 作为前端，我们的任务便是给用户一个好的产品体验感，不管是从首次进入页面的加载时长，还是对于交互时页面的响应流畅度，都是我们应该关注的点。 RAIL模型是由谷歌提出的，一种以用户为中心的性能模型，RAIL分别代表Web应用生命周期的四个方面：响应、动画、空闲、加载。 一般不管是页面打开还是流程交互，又或者是网络反馈，这也操作我们应该尽量在1000ms内完成，用户的体验感才不会差，用户留存率也将得到提升。 下面看一下我们常见的一些性能...
前端性能报告
数据说明 本报告的大部分内容均基于 Chrome 用户体验报告 ( ) 中的真实用户数据。 Chrome 用户体验报告（CrUX）反映了真实世界中 用户在热门网站上的体验，是 项目的官方数据集，展示了所有用户中心的核心 指标。 数据基于全球真实浏览器用户收集，并通过多种 和第三方工具公开提供，用于 搜索的页面体验排名因素。并非所有原点或页面都在数据集中，需公开可发现且访客数量足够多以达统计显著性。 核心网页指标（Core Web Vit...
Performance的使用攻略
Performance是Chrome浏览器自带的性能监测工具。根据我的使用，简单理解就是我们可以通过它录制一段时间的浏览器活动，通过活动的数据去分析页面是否存在提升的空间。想要获取页面的活动数据，那我们的第一步便是录制浏览器的活动。 打开F12，进入Perfomance标签页，我们可以看到出现了提示。我们不想看这个文本在说什么，我们只想马上开始用（不是），由于我已经百度翻译过了（不是，看过了），所以文本提示是在说箭头所指的地方，实心圆代...
唠唠 Chrome DevTools 中最新的实用技巧
以下的内容基于 Chrome 浏览器 122.0.6261.112 版本撰写！ 随着 Chrome 浏览器版本的不断迭代，Chrome DevTools 引入了不少实用的功能，其中有些功能对日常工作效率提升是十分明显的，在此，我本来想具体写写自己的使用体验和理解。 不过，我所使用过的功能，结合自己看过的文章资讯，基本上能找到更详实、更完善的内容介绍，因此，这篇文章，我更多是基于使用到的技巧，然后罗列出对应功能的文章链接出处，帮助大家有更...
深入理解前端性能优化：图片懒加载实践
在当今的前端开发领域，网站性能优化是一个永恒的主题。性能优化不仅关乎用户体验，也直接影响到网站的搜索引擎排名。其中，图片加载优化是提升页面加载速度的重要手段之一。本文将深入探讨一种常用的图片优化技术——图片懒加载的原理和实现方法。 什么是图片懒加载？ 图片懒加载是一种常用的网页性能优化技术，其基本思想是延迟非可视区域图片的加载时间。换句话说，只有当用户滚动到页面的某个区域，位于该区域的图片才开始加载。这样不仅减少了无谓的网络资源请求，还...
内存泄漏排查
背景 (书接上回) ui妹子的无理要求，我通通满足了。但是不出意外的话，意外就出来了。 此功能在上线之后，我们的业务在客户app内使用刷脸的时候会因为内存过高导致app将webview杀死。 然后我们leader爆了，让我排查问题。可是可是，我哪里会排查内存泄漏呀。 我：我不会。你自己不会上吗？你tm天天端个茶，抽个烟，翘个二郎腿，色眯眯的看着ui妹妹。 领导：污蔑，你纯粹就是污蔑。我tm现在就可以让你滚蛋，你信吗？ 我：我怕你个鸟哦，...