跳到主要内容

Web 前端性能优化:批量 DOM 操作 - FastDOM

· 阅读需 11 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-03-10 00:28:00

利用 JS 开发的原生应用与依赖于 React.js/Vue 开发的框架/库应用,性能孰高孰低?这两者最显著的区别在于原生应用需要手动操作 DOM 完成业务,而框架/库应用是基于数据变化响应式的应用,后者只需要关注数据如何变化,至于体现在 DOM 上的变化皆由框架/库内部自动完成。所以,要搞清楚两者的性能优劣,可能批量的 DOM 操作是一个不可忽略的核心因素。从代码执行的角度分析,框架/库也是基于原生 API 进行的封装抽象,因此代码执行时的路径更长、堆栈更深,由此可见原生 API 的操作性能应该是最高的。但是,现实情况是业务通常来说是复杂的,代码实现中 DOM 操作的逻辑分散在各处,那么多个 DOM 操作之间是否会产生影响从而不利于性能?这个时候就要关注宿主浏览器的渲染机制是如何理解批量的 DOM 操作的,这里引入的概念就是关键渲染路径(Critical rendering path)

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path > https://developers.google.com/web/fundamentals/performance/rendering

Web 前端性能优化:案例分析 1

· 阅读需 25 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-03-06 23:28:00

能在真实业务场景中落地 Web 性能优化方案的机会鲜有,大多数时候业务是较为简单而且要求不高的,前段时间恰好有一个比较核心的业务,对稳定性和性能有一定的要求,在这个过程中也算是做了很多尝试和实践,在此作为案例记录一下分析的过程和最终解决的方案。

黑客与画家

· 阅读需 21 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-08-24 01:26:00

这本书在 IT 圈子应该是为人熟知的,这也是我知道存在这本书的原因。不过,从我知道这本书到读完这本书中间还是隔了相当一段时间的,一方面是因为工作后读书的习惯保持的不太好,另一方面也是确实比较忙。幸运的是,最近终于有空来读一读了,当然从开始读这本书到读完也是断断续续好一段时间。

这本书的名字《黑客与画家》乍一听让很多人摸不着头脑,包括我在内刚开始也猜不到这本书的内容主题是什么。然而,作为 IT 从业者,“黑客”一词对我们绝对有足够的吸引力,至少会让很多人产生了解一下的想法。这本书本身是作者写的一系列较受欢迎的文章的集合,在读完这本书之后我相信对于 IT 从业者,至少是有一定工作经验的人来说是值得读的一本书,也许会对目前的认知有所改变和产生新的认识。

使用 Jest 和 Puppeteer 构建 Web 自动化测试平台

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-08-15 14:54:00

测试为软件的稳定和完善提供了必要的支持,Web 前端开发领域相比于做单元测试,端到端测试更有意义和价值。谷歌发布的 Puppeteer 工具和脸书发布的 Jest 测试工具为 Web 端到端测试提供了极大的便利,这里记录了如何使用它们构建一个 Web 自动化测试平台。

Web 前端性能优化:核心概念与指标

· 阅读需 15 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-04-15 11:03:00

说到 Web 的性能优化,可能很多时候我们采取了一些措施,看到了肉眼可见的改进,如果我们可以对其进行测量,确定我们改进的效率(百分比)是不是会更有意义?换句话说,如果我们了解性能瓶颈可能发生的位置,衡量用户体验好坏的指标,做到实时追踪性能变化,我们是不是可以更迅速的采取优化措施?在应用上线前,我们就可以做一些低成本而有高收益的优化工作,进一步提升用户体验。

所以,这里主要介绍一下 Web 性能相关的核心概念和相关指标。

谷歌作为力推 Web 技术的科技巨头,不仅提供了出色的 Chrome DevTools,更是贡献了高质量的开发文档,为业界引进了众多先进的理念,先来拜读一下下面这篇文章,搞明白为何我们需要对 Web 网站做极致的优化?

Why does speed matter?

对第一份工作生活的回顾

· 阅读需 19 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-07-04 15:29:00

最近结束了长达四年的第一份工作,选择了跳槽,进入新的团队适应的还不错。在经历了在线面试,办理离职,再到入职这个过程大概花了将近两个月的时间,入职后近一个月左右时间也没有预想的那么忙,所以这三四个月时间算是不用太考虑公司的事情了,毕竟换个环境所有的东西都得重新开始。换句话说,这也算是个契机,终于能有闲下来的时间了,不免就会想到从毕业到现在经历的很多事情,有了很多新的想法和认知。回顾一下过去这四年的工作生活记录下来,用现在比较流行的词来说就是“复盘”。

Fastify - 专注于性能和低内存消耗

· 阅读需 25 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-07-04 21:56:00

最近在做 Node.js 技术相关的调研,需要选定一个 Web 框架作为基础来构建业务。一般来说,首选开源方案,对于我来说,比较关注框架背后的开发团队情况、项目活跃度、是否有足够多的商业案例、文档是否完整可读、框架的设计理念、技术架构是否灵活可扩展、技术社区生态是否完整等方面。目前,我比较倾心的是 Fastify 这个新兴框架,根据官网介绍,其专注于高性能和低消耗,并且公开的基准测试表现相当不错,项目足够活跃,更重要的是属于 OpenJS 基金会的孵化项目。本文主要介绍 Fastify 的设计理念和探究其是如何提高性能和降低内存消耗的。

理解编程语言的设计与实现

· 阅读需 23 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-06-18 01:48:00

编程语言本质上是给开发者使用的工具,不同的业务领域使用不同的编程语言去实现具体的业务,是基于语言本身的设计理念与实现方式来做选择,那么作为开发者应该了解一下编程语言是如何被发明的,且其设计理念是什么。

Web 前端性能优化:解析函数节流与防抖的实现

· 阅读需 17 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2021-04-26 22:48:00

前端开发中,有一个使用较为普遍的性能优化技巧,即函数节流(Throttle)和防抖(Debounce),其主要作用是根据时间对函数调用做以限制。最常见的业务场景是监听页面的 scroll 事件,浏览器可以在 1s 内触发该事件数次(甚至达数十次),如果事件处理程序在这 1s 内多次执行,必然会造成一定的性能问题,影响用户体验。