最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。 这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。 何为 content-visibility？ co

根据 Web 项目的编程方法，动态脚本和静态代码的处理方式可能大相径庭。目前有三种主要方法：服务器端渲染（SSR）、客户端渲染（CSR）和静态站点生成（SSG）。

本文从早期的前端页面开发方式切入，讲述了随着代码规模上升、协作人数增多，遇到的各种问题，引出了模块化、包管理、构建工具、代码规范、CICD五个方面的内容。前端工程化领域不断出现的新工具...

现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性

前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等方法。 一个页面性能差的话会大大影响用户体验。用户打开页面等待的…

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到的事件。最后一个阶段是冒泡阶段。 我们上文中的监听图片自身的 error 事件，实际上在事件流中是处于目标阶段。

直接进入正题，IntersectionObserver 翻译为 "交叉观察者"，它的任务就是监听目标元素跟指定父元素（用户可指定，默认为viewport）是否在发生交叉行为，简单理解就是监听目标元素是否进入或者离开了指定父元素的内部（理解这句就行了，管他交不交叉呢），我好像在开…

在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？ 如果你这时是头脑一片空白，或是像之前的我一样，靠死记硬背或是之前的经历，答一下压缩代码，打包代码，雪碧图，cdn，事件代理，这说明你…

几个月前，我在国外旅行，想给朋友看我个人（静态）网站上的一个链接。我试着浏览我的网站，但花费的时间比我预期的要长。网站绝对没有任何动态内容--只有动画和一些响应式设计，而且内容始终保持不变。 我对结果感到震惊，DOMContentLoaded 要 4 s，整个页面加载要 6.8…