Metrics 系列

Measuring performance and user experience.

User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.

Web Vitals 系列

Essential metrics for a healthy site.

An initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

嗨，送你一张Web性能优化地图

我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么，通常我们并不清楚。

image.png

面试必问 —— 前端页面性能基本指标介绍

性能指标:

  • 首屏绘制（First Paint，FP）
  • 首屏内容绘制（First Contentful Paint，FCP）
  • 可交互时间（Time to Interactive，TTI）
  • 最大内容绘制（Largest Contentful Paint，LCP)
  • 首次有效绘制（First Meaning Paint, FMP）

image.png

浅谈React性能优化的方向

React 渲染性能优化的三个方向，其实也适用于其他软件开发领域，这三个方向分别是:

  1. 减少计算的量。 -> 对应到 React 中就是减少渲染的节点 或者 降低组件渲染的复杂度。
  2. 利用缓存。-> 对应到 React 中就是如何避免重新渲染，利用函数式编程的 memo 方式来避免组件重新渲染。
  3. 精确重新计算的范围。 对应到 React 中就是绑定组件和状态关系, 精确判断更新的’时机’和’范围’. 只重新渲染’脏’的组件，或者说降低渲染范围。

万字长文！总结 Vue 性能优化方式及原理

我们在使用 Vue 或其他框架的日常开发中，或多或少的都会遇到一些性能问题，尽管 Vue 内部已经帮助我们做了许多优化，但是还是有些问题是需要我们主动去避免的。我在我的日常开中，以及网上各种大佬的文章中总结了一些容易产生性能问题的场景以及针对这些问题优化的技巧，这篇文章就来探讨下，希望对你有所帮助。

前端优化之一：reflow与repaint

对于前端来说，对性能最大的挑战就是 DOM 的操作引起的浏览器的reflow与repaint，回流与重绘，引起reflow的原因除了 DOM 的结构的改变还有一些属性的获取，引起repaint的原因主要是一些颜色等的改变。

本文简单介绍浏览器的渲染，重点指出一些会引起dom性能变差的问题，其实一切慢的原因是引起浏览器回流的 DOM 操作。

你的程序中可能存在内存泄漏

想来很多同学看到内存泄漏，内心直接会跳出两个字：闭包！！！再让你说点其它的估计就噤声了。如果你对内存泄漏的了解仅限于闭包，那真的是应该仔细看此文了，闭包可能会造成内存泄漏，但是内存泄漏并不是只有闭包，它只是内存泄漏的引子之一罢了。

一些关于如何提升 CSS 性能的总结

  • CSS是如何工作的？
  • 注意CSS的大小
  • 优先考虑关键的CSS
  • 使用高效的CSS动画
  • 使用CSS优化字体加载
  • 不用担心CSS选择器的速度问题。