Web前端

useSignal() 是Web框架的未来

Angular、Qwik的作者 MIŠKO HEVERY 在文章中盛赞了 useSignal() 这种数据流方案, 表示 useSignal() 是前端框架的未来,并考虑在Angular中实现它。我们在这里不评价文章的观点,我们来看看 useSignal 这个方案的前世今生。

了解更多

Web 字体加载对 DOM 位置的影响

由于公司的业务会用到自己设计师定制的 Web 字体,所以一般在组件开发过程中会利用 CSS 引用该字体(@font-face),前段时间发现一个线上问题:在部分 iOS 机型上,DOM 元素的位置发生了错位。

了解更多

前端工程化:对于构建工具链的简单思考

前端工程化是在做与业务开发完全不同的事情,旨在解决软件工程领域与开发者密切相关的问题,通常会将其与基建开发、DevOps 放在一起讨论。前端开发是复杂的,其结合了 HTML/CSS/JavaScript 3 种语言,甚至还有很多其超集,没有开箱即用的工具链,不像 Java Web 开发、Android 开发等等有官方或者商业领域非常成熟的工具可以利用,一切都源于开源社区的从 0 开始构建。正因如此,前端工程化领域百花齐放,开放与创新展现的淋漓尽致,这也是前端开发者了解学习软件工程的机会。

了解更多

解析基于 core-js 与 ESLint 的 Web 兼容方案

Web 网页为了保证在多个平台和低中高端设备上的体验稳定性和一致性,通常会做 Polyfill 以保证兼容性。

了解更多

Web 前端调试工具:SourceMap 文件

Web 前端项目出于加载性能优化和安全考虑,在生产环境部署的代码是经过混淆和压缩的,对于利用生产环境收集到的错误堆栈信息要进行调试是非常具有挑战性的。理想情况下,应该在生产环境收集错误堆栈信息,然后映射到源码进行调试。恰好,SourceMap 文件提供了这个机制,可以将编译(压缩)后的代码映射到源代码中。

了解更多

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

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

了解更多

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

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

了解更多

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

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

了解更多

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

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

了解更多

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

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

了解更多

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

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

了解更多

Web 前端架构设计

让 Web 前端开发可持续化、可扩展,关注四个核心代码流程测试文档

了解更多

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

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

了解更多

JavaScript 异步编程

JavaScript 作为一门在 Web 开发中的主流语言,常常涉及到交互事件方面的应用,这不可避免的用到了异步编程的方法,而它本身则是单线程运行的。在以往的开发中,异步编程正变得越来越难管理,新的 Promise 标准 API 将使得异步编程更加方便、安全。

了解更多

Web 前端性能优化:工具与技巧

Web 前端的性能优化是非常迫切的,客户端的资源非常有限,而且层次不齐,很容易造成一些性能问题从而影响到最终给用户所呈现的数据信息结构的不完整。为了增强用户体验,我们必须在各个方面进行优化,同时也可以节省服务器成本。

了解更多

Web 前端跨域访问

为了用户的安全,浏览器通常都会限制跨域(Cross-domain)访问,也就是默认不允许不同域名下页面之间进行资源的传递和信息交互,但很多时候我们又有跨域请求资源的需求。

了解更多

Web 本地存储

为了达到某些需求,我们通常需要在本地存储一些数据,方便我们进行用户个性化定制服务。

了解更多