H5 开发的各类小知识点

H5 的滚动容器和 Native 的有很大区别，溢出滚动、下拉刷新、嵌套滚动等.

例如如你实现了一个可以连贯内部滚动容器下拉关闭的的弹窗，在 PC 上开发的时候测试发现没问题，符合预期。但是到了真机上你就发现，这不对啊，好像特别卡。

这是因为移动端对滚动容器的 touchmove 事件的触发频率限制的原因，在当前实现中，如果监听到scrollTop <= 0的时候对外部容器修改translateY，就会因为 touchmove 触发频率不足而导致卡顿，而如果你在一个普通容器上操作则不会有这个问题。

因此建议您

对于全模拟滚动方案，SwipeJS提供了很好的实现该方法很实用，你可以实现一个下拉刷新来练习一下

onTimeUpdate 的触发频率并不能保证他能回调到视频的最后一帧，如果你需要写一个视频播放的进度条，他提供的回调事件可能是这样的： (假设视频是 5 秒)

因此想要一个丝滑的滚动条,你可以使用 css+transition 锚定当前时间点位置+1s 后的位置做过渡动画，同时要在最终结束的时候估算好剩余时间，手动多一次触发重置到 0 时间的调用，并重新启用 transition

考虑以下代码执行结果

javascript 复制代码

console.log(location.pathname); // 输出了 /home
history.pushState({}, "", "/testA");
history.pushState({}, "", "/testB");
history.back();

答案是/testA，这很正常，看下面一段的代码

javascript 复制代码

console.log(location.pathname); // 输出了 /home
history.pushState({}, "", "/testA");
history.back();
history.pushState({}, "", "/testB");

答案是/home，而不是/testA 查遍了 MDN 文档你也看不到 hisstory.back()和异步执行有任何关系，解决方法是最好自己封装路由相关的管理对象，对第二步推入操作异步化。

在 H5 开发中面临的问题往往不是平台限制，而是 H5 应用的侧重点不同，有的同学可能因此想要转战 RN/Flutter 跨端开发或者原生开发。

但实际上在 2025 年，如果你的应用涉及大量流媒体播放、不完整 Markdown 排版的情况下，H5+套壳的性能未必会比原生开发更差。没有相当底层性能调试能力的情况下，选择使用网页开发技术来开发手机应用并非歪门邪道。

本文纯手工打造，无任何 AI 成分