H5 开发总结（持续更新）

作为前端开发人员，业务上时常会涉及一些移动 H5 需求页面开发。但 Web 页面开发久了，转到 H5 页面形式开发难免会遇到一些问题。

笔者将自己所遇到的问题通过笔记形式，作为本文内容呈现给读者，希望能够一定程度给每一位读者带来帮助。

移动 H5 环境下 点击 或 长按 元素时（如：material-ui Button），元素的 :hover 伪类选择器的样式一直应用存在，导致影响了元素默认的样式。

原则上 H5 环境下的元素是不需要设置 :hover 样式交互的，但避免比较会有一个组件元素同时适应 Web 和 H5。

解决办法可以是：用元素自身的属性权重高于 :hover 内设定的属性权重。

当测试同学给你提了 Bug 说 H5 页面某一处元素点击后会有背景闪烁，这是由于你在此设置了 cursor: pointer，网上给到的一些解决方案是设置：-webkit-tap-highlight-color: transparent; 取消交互高亮。

从这个属性来看，它是存在兼容问题的。其实，原则上 H5 应用是不用设置 cursor 的，最好的解决办法是设置 cursor: default; 取消 pointer 交互行为。

在 iOS 端（如：Safari 浏览器），从 A 页面到 B 页面后，通过浏览器导航返回按钮，回到 A 页面后，会发现 A 页面没有重新加载，包括数据请求。

比如实现一个支付功能，在 B 页面支付完成了，回到 A 页面后期望重新请求数据来更新支付状态。安卓一切正常（部分安卓可能也有类似问题），但 iOS 并不会如期实现。

分析原因：这是因为 浏览器的“往返缓存(back-forward cache - bfcache)”特性 的一种缓存机制，用来加快用户在点击浏览器前进或者后退按钮时的速度。bfcache 将离开页面时的DOM和JS的状态全都保存了下来，也就是说将整个页面保存了下来放在了页面的缓存当中。

解决方案：onpageshow 事件会在每次加载页面时触发（不论页面是否来自 bfcache），结合 PageTransitionEvent 对象的 persisted 属性来判断页面是否从缓存中读取。

在 Android 手机浏览器上，从 A 页面到 B 页面后，通过浏览器导航返回按钮，回到 A 页面后，与 iOS 不同的是：页面是重新加载了，并且会执行 mount 时定义的接口请求。

但是接口下发的数据都是老的，并不是在 B 页面操作后最新的数据。

联系后台同学查看 API 接口日志后，发现 ajax 看似在前端浏览器内发起请求了，但实际却是未进入后台。

经过查询分析，发现 ajax 在一些浏览器下，为了减少重复请求，会将载入的数据进行缓存，在请求 url 没有发生变化时，会直接读取缓存中的数据，并不会真正请求到后台。

所以我们需要禁止这种缓存特征，提供两种方式来解决：

参考：www.cnblogs.com/ljq20204136…