前端性能优化--享元模式
之前讲到性能优化，大多数介绍的都是耗时上的一些优化，比如页面打开更快、用户交互响应更快等。不过，在最开始的《前端性能优化–归纳篇》一文中有说过，前端性能优化可以从两个角度来衡量：时间和空间，今天介绍的享元模式则用于空间下内存占用的优化。 享元模式享元是一种设计模式，通过共享对象的
前端性能优化--卡顿链路追踪
我们在上一篇《前端性能优化–卡顿心跳检测》一文中介绍过基于requestAnimationFrame的卡顿的检测方案实现，这一篇文章我们将会介绍基于该心跳检测方案，要怎么实现链路追踪，来找到产生卡顿的地方。 卡顿监控实现上一篇我们提到的心跳检测，实现的功能很简单，就是卡顿和心跳事
前端性能优化--JavaScript 数组解构
之前在给大家介绍性能相关内容的时候，经常说要给大家讲一些更具体的案例，而不是大的解决方案。 这不，最近刚查到一个数组的性能问题，来给大家分享一下~ 数组解构的性能问题ES6 的出现，让前端开发小伙伴们着实高效工作了一番，我们常常会使用解构的方式拼接数组，比如： 1234// 浅拷
前端性能优化--任务管理和调度
对于一个前端应用，最理想的性能便是任何用户的交互都不会被阻塞、且能及时得到响应。 显然，当我们应用程序里需要处理一些大任务计算的时候，这个理想状态是难以达到的。不过，努力去接近也是我们可以尽量去做好的。 任务调度与性能任务调度的出现，基本上是为了更合理地使用和分配资源。在前端应用
前端性能优化--R 树的使用
听说程序员里存在一个鄙视链，而前端则在鄙视链的最底端。这是因为以前大多数的前端工作内容都相对简单（或许现在也是如此），在大多数人的眼中，前端只需要写写 HTML 和 CSS，编写页面样式便完成了。 如今尽管前端的能力越来越强了，涉及到代码构建、编译等，但依然有十分丰富且成熟的工具
前端性能优化--卡顿心跳检测
对于重前端计算的网页来说，性能问题天天都冒出来，而操作卡顿可能会直接劝退用户。
前端性能优化--用户卡顿检测
前面跟大家介绍过前端性能卡顿的检测和监控，其中提到了requestAnimationFrame心跳检测等方式来检测代码执行耗时，从而判断是否存在卡顿。 而实际上我们观察一些用户反馈，会发现这样检测的效果并不是很理想。 用户感觉的“卡”一般来说，我们会根据代码检测的任务耗时超过一定
让你的长任务在 50 毫秒内结束
虽然之前有跟大家分享过不少卡顿相关的内容，实际上网页里卡顿的产生基本上都是由于长任务导致的。当然，能阻塞用户操作的，我们说的便是主线程上的长任务。 浏览器中的长任务可能是 JavaScript 的编译、解析 HTML 和 CSS、渲染页面，或者是我们编写的 JavaScript
前端性能优化--数据指标体系
常常进行前端性能优化的小伙伴们会发现，实际开发中性能优化总是阶段性的：页面加载很慢/卡顿 -> 性能优化 -> 堆叠需求 -> 加载慢/卡顿 -> 性能优化。 这是因为我们的项目往往也是阶段性的：快速功能开发 -> 出现性能问题 -> 优化性能
有趣的 PerformanceObserver
之前在研究小伙伴遗留代码的时候，发现了PerformanceObserver这玩意，不看不知道，越看越有意思。 其实这个 API 出了挺久了，机缘巧合下一直没有接触到，直到最近开始深入研究前端性能情况。 PerformanceObserver其实单看PerformanceObse
前端性能优化--卡顿的监控和定位
卡顿大概是前端遇到的问题的最棘手的一个，尤其是卡顿产生的时候常常无法进行其他操作，甚至控制台也打开不了。
复杂渲染引擎架构与设计--8.元素与事件
前面提到了渲染引擎的几种渲染方式，如果我们要在与用户交互的过程中识别到具体的元素，又该如何处理呢？
复杂渲染引擎架构与设计--7.离屏渲染
前面我们介绍了增量渲染的解决方案，其中有提到复用 Canvas 进行性能优化的解决方案。 本文我们将结合 Canvas 的能力提出进一步的优化方案：离屏渲染。
复杂渲染引擎架构与设计--6.增量渲染
对于渲染引擎来说，如果每次都进行完整内容的计算和绘制，在低端机器或是负责页面的时候可能会出现卡顿。 因此，我们可以考虑设计一套增量渲染的能力，来实现改多少、重绘多少，减少每次渲染的耗时，提升用户的体验。
复杂渲染引擎架构与设计--5.分片计算
前面《渲染计算》一文中，我们提到了对于长耗时的渲染计算的优化方案，其中便包括了将大的计算任务拆分为小任务的方式。 本文我们以在线表格为例子，详细介绍下如何对长耗时的计算进行任务拆解。