最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多…

为什么要了解浏览器的渲染原理？了解浏览器的渲染原理有什么好处？我们做前端开发为什么非要了解浏览器的原理？直接把网页做出来，什么需求，直接一把梭，撸完收工不好吗。 重排也叫回流（Reflow），重绘（Repaint），会影响到浏览器的性能，给用户的感觉就是网页访问慢，或者网页会卡…

由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。 在描述如何解决问题，我们现在先来申明，问题是什么？ 笔者的需求大概是在某个页面显示 1~1000张，200…

一、使用背景 业务开发中存在长列表显示需求，一些用户的聊天列表会出现几千条数据的情况，也就意味着要一次性渲染几千条数据，造成明显的卡顿，这时就有必要对聊天列表进行性能优化来提升用户体验。 对于这种需求

即当浏览器内核UI线程卡顿时间超过50ms则记一次卡顿异常。 留给这一次操作响应的时间就不到50ms了，所以应用必须在每 50 毫秒内将控制返回给主线程. 用户非常擅长跟踪运动，并且在动画不流畅时不喜欢它。 只要每秒渲染60帧（每帧16毫秒），他们就能感觉到动画的流畅性。而应用…

本文正在参与 “性能优化实战记录”话题征文活动，网页的卡顿性能优化，前端性能优化，javascript性能优化，首屏加载优化，css加载性能优化，前端服务端渲染性能优化。页面卡顿优化、网页卡顿优化

在做前端 UI 效果时，让元素根据滚动位置实现动画效果是一个非常流行的设计，通常我们会使用第三方插件或库来实现。在本教程中，我将教大家使用纯 JavaScript 和 CSS 来实现。

主要是体现思路及其实现，虽不是什么新方法，旨在分享。

相关网站 1. Vite中文官网：Vite中文官网 2. Vue3中文官网：Vue3中文官网 3. Element Plus官网：Element Plus官网 一、创建项目 安装Vite 新建Vue3