跳到主要内容

37 篇博文 含有标签「Web 前端」

查看所有标签

Web 应用:轻量级状态管理工具 zustand

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

最后更新于 2021-11-18 00:14:00

基于 React.js 的 Web 应用如何完成状态管理?社区主流方案是 react-redux,其本质上基于 React 的 Context 特性实现,如果应用足够简单,实际上用 Context 手写一个简单的状态管理工具倒也并不难。不过,考虑到工具的完善性、项目的健壮性,通常采用较好的、成熟的社区方案。在移动端场景下,react-redux 略显臃肿,轻量级状态管理工具 zustand 倒是一个不错的替代方案。

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

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

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

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

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

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

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

Why does speed matter?

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

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

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

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

精选资源:React.js 设计哲学

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

最后更新于 2024-04-21 14:31:00

精选资源

这是一个系列,收集不同领域相关的精选(高价值)内容,包括深入分析文章、视频、工具等。

探索一项新兴技术出现的背景、动机,尤其是其背后的设计哲学,更甚的是在不断的版本演进过程中遇到了什么问题,产生了什么思考,以及是如何决策并得到最优解。

React.js 发展至今已经成为 Web 前端领域一个重要的存在,这里主要是收集官方和非官方途径发布的一些非常有价值的资料,探索其背后的设计哲学,了解其团队决策时的思考和权衡。

Web 应用:单页面应用与路由

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

最后更新于 2017-10-25 21:56:00

现在,Web 技术不仅仅是局限于页面的开发技术,在应用的开发方面也是一种潮流,B/S 架构的技术是一种趋势。而像一般的管理型 Web 应用,不注重 SEO,非常适合单页面应用(SPA)的实现方式,而路由功能则是单页面应用的核心技术。