在Vue.js中创建一个高性能的虚拟滚动列表

单独渲染DOM上的项目会给用户带来明显的性能滞后,特别是当他们滚动浏览大型列表时。为了使滚动更有效,我们应该使用虚拟滚动列表,这样可以提高页面的加载速度,防止网络应用的卡顿。 虚拟滚动列表类似于标准的滚动列表,然而,在任何时候都只有用户当前视图中的数据被呈现出来。当用户向下滚动页面时,新的项目会随着旧的项目被删除而被呈现出来。 在这篇文章中,我们将探讨vue-virtual-scroll-lis

- 阅读全文 -

2021年CSS变量性能基准

自定义属性自Chrome 49(2016年3月3日)起可用。虽然Internet Explorer 11不支持它们,但也许现在是时候跳上这一行列了?性能如何呢? 我决定创建一个简单的基准来检查5000个变量是否会减慢页面的渲染速度。如果你想审查或重用我的代码,你可以在这里找到它。 测试条件 生成5000种颜色。 创建10000个HTML节点(可重复使用系数=1)。 输出一个带有标准CSS类的H

- 阅读全文 -

使用HTML、CSS和JavaScript的可访问模式对话框

在这篇文章中,我想分享我用HTML、CSS和JavaScript实现的一个模态对话框,它满足了W3C WCAG工作组设定的测试。 检查role=dialog是否是作为自定义对话框的容器(如div)的一个属性。 检查该容器是否在用户交互或其他事件之后通过JavaScript插入(或使其可见)。 3.当对话框被激活时,检查焦点是否被设置到容器中的一个元素。 4.当对话框处于激活状态时,检查焦点是否

- 阅读全文 -

如何使用Promise.any()

Promise.any(promises)是一个辅助函数,它可以并行地运行promises并解析到promises列表中第一个成功解析的promises的值。 让我们看看Promise.any()如何工作。 1. Promise.any() Promise.any()对于以并行和竞赛的方式执行独立的异步操作非常有用,可以获得任何第一个被履行的承诺的值。 该函数接受一个数组(或一般是一个可迭代的)

- 阅读全文 -

5大CSS网格布局生成器

现代网络应用是响应式的。尽管许多CSS库和框架支持网格系统,但使用纯CSS网格也成为一种趋势。因此,如果你知道正确的工具,你可以使从头开始生成网格布局变得容易得多。 因此,在这篇文章中,我将介绍5个最好的CSS布局生成器,并进行功能比较,以帮助你直观地生成CSS网格。 1. Griddy Griddy是设计师和开发人员中最常用的CSS网格生成器之一。 使用Griddy,你只需配置行、列、间隙

- 阅读全文 -