h5端IOS滑动不流畅问题怎么解决

Devil_Xiaos

于 2024-11-06 11:28:16 发布

阅读量1.1k

点赞数 20

文章标签： ios 前端

本文链接：https://blog.csdn.net/Devil_Xiaos/article/details/143566107

版权

1. CSS 动画和过渡

避免重排：频繁修改 DOM 结构、样式或使用会引发重排的属性（如 width、height、top 等）会导致性能下降。尽量使用 transform 和 opacity 进行动画处理。

css.smooth {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

Note: transition是一种css样式元素，tansform代表对元素进行二维和三维的变换，包括位置、旋转、缩放等，不会改变元素子啊文档流汇总的位置，而poacity代表对元素进行透明化管理，取值范围0-1

常见的 `transform` 值：

translate(): 用于移动元素。可以指定 x 和 y 轴的偏移量，甚至使用 translate3d() 来实现三维变换。
```
css.element {
    transform: translate(50px, 100px);  /* 水平移动 50px，垂直移动 100px */
}
```

rotate(): 用于旋转元素，角度单位可以是 deg 或 rad。

css.element {
    transform: rotate(45deg);  /* 旋转 45 度 */
}

scale(): 用于缩放元素，支持 x 和 y 方向的缩放，scale3d() 也支持三维缩放。
```
css.element {
    transform: scale(1.5);  /* 放大 1.5 倍 */
}
```

skew(): 用于倾斜元素。

css.element {
    transform: skew(20deg, 10deg);  /* 水平倾斜 20 度，垂直倾斜 10 度 */
}

matrix(): 更复杂的变换，可以将多个变换组合在一起。

2. 使用 `will-change`

提示浏览器优化：使用 will-change 属性告知浏览器可能会改变的元素，从而让浏览器提前做好优化。

css.scrollable {
    will-change: transform;
}

Note： will-change 是一个CSS属性，用于通知浏览器在哪些属性上进行动画或变化，以便于浏览器可以提前进行性能优化，

3. 触摸事件处理

避免 JavaScript 阻塞：在滚动或触摸事件中避免长时间的 JavaScript 执行。可以使用 requestAnimationFrame 来优化性能。

javascriptlet lastScrollY = window.scrollY;
window.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
        // 处理滚动逻辑
    });
});

4. 使用 `overflow: hidden`

防止滚动回流：在容器中使用 overflow: hidden 可能会有助于防止意外的滚动回流。

5. 适当的图片和资源优化

优化图片和资源：确保图片和其他资源的大小已优化，尽量使用现代格式（如 WebP）和适当的分辨率，以减少加载时间。

6. 监听 `touchstart` 和 `touchmove`

防止默认行为：在某些情况下，需要在 touchstart 或 touchmove 事件中调用 preventDefault() 来防止默认的滚动行为，从而改善用户体验。

javascriptdocument.addEventListener('touchmove', (e) => {
    e.preventDefault();
}, { passive: false });

touchstart 和 touchmove 是 Web 开发中用于处理触摸屏事件的两种常见事件。它们通常用于移动设备上的交互体验，比如滑动、拖动等手势。

1. `touchstart`

touchstart 事件在用户接触屏幕时触发。当用户在触摸屏幕上放置手指时，事件会被触发。这对于检测触摸的开始非常有用。

2. `touchmove`

touchmove 事件在用户手指在屏幕上移动时触发。当手指在触摸屏上滑动时，每当手指的位置变化时，都会触发该事件。你可以通过这个事件来实现一些像拖动、滑动等的交互。

基本的用法

你可以使用 JavaScript 为元素添加 touchstart 和 touchmove 事件监听器。

7. 检查第三方库

避免过多库和插件：一些第三方库可能导致性能问题，尤其是滑动和滚动功能的实现。确保使用性能较好的库，或考虑使用原生解决方案。

8. 使用虚拟滚动

实现虚拟滚动：对于长列表，考虑使用虚拟滚动技术（如 React Virtualized、Vue Virtual Scroller 等），减少 DOM 元素的数量，从而提高性能。

React Virtualized

React Virtualized 是一个专门为 React 开发的虚拟滚动库，它帮助开发者处理大数据量的列表或表格渲染。在常规的列表渲染中，当列表项过多时，会一次性渲染所有项，这会导致性能问题，尤其是在移动端或低性能设备上

核心特点：

虚拟化列表：仅渲染可见部分的 DOM 元素，极大减少了 DOM 节点的数量。
高性能：能够处理成千上万的数据项，在大型数据列表中非常高效。
多种组件支持：支持虚拟化的组件有 List、Table、Grid 等。
可定制性：支持自定义的滚动行为、窗口大小和元素高度。

主要组件：
- List：用于渲染垂直列表。
- Table：用于渲染表格。
- Grid：用于渲染网格布局（可以处理多行多列的布局）。
- Collection：用于自定义滚动视图和项的组合。
使用场景：
- 渲染非常长的列表（几千或更多项）。
- 数据集动态变化（新增/删除行）时保持性能。

Vue Virtual Scroller

Vue Virtual Scroller 是一个用于 Vue.js 的虚拟滚动库，它的工作原理和 React Virtualized 类似，主要目标是通过虚拟滚动减少 DOM 节点的数量，从而提高渲染性能。

核心特点：

高性能：通过虚拟滚动，只渲染当前视窗内可见的元素，提高渲染效率。
灵活性：支持动态调整列表的长度、可自定义的 item 大小和高度。
轻量级：比传统的方案更小巧，减少了不必要的依赖。
支持 Vue3：可以与 Vue 3 无缝兼容。

主要特点：

<virtual-scroller> 组件：核心组件，用于包裹需要虚拟滚动的列表。
性能优化：通过只渲染可见的部分来减少渲染开销。
支持动态高度：可以根据不同项的高度进行渲染。
简单易用：通过插槽 (slot) 提供灵活的布局能力。

使用场景：

在 Vue 应用中渲染长列表时，优化性能。
数据量过大时（例如电商网站商品列表、消息流等）。

对比总结：

特性	React Virtualized	Vue Virtual Scroller
框架支持	React	Vue 2.x, Vue 3.x
安装方式	npm install react-virtualized	npm install vue-virtual-scroller
核心组件	List, Table, Grid, Collection	VirtualScroller, LazyList
动态高度支持	支持	支持
渲染性能	高效，只渲染可见区域	高效，只渲染可见区域
额外功能	支持表格、网格布局等复杂场景	支持懒加载和自定义 item 渲染