前端踩坑系列《五》

前言

Hello，大家好！

不知不觉这个系列已经更新到了第五篇，我尽量将每周遇到的问题和大家一起分享。这里谈到了分享，那就不仅仅是个人的事情，我觉得大家都可以一起参与进来。之所以想写这个系列，本身就是想提升自我解决问题的能力，慢慢地也培养一种记录问题的习惯，我也希望大家能够一起完成！

综上所述，本公众号会在后台收集大家平时遇到的问题以及解决方法，欢迎大家投稿！当然问题以及解决方法都是有一定的格式的，具体的要求如下：

• 使用 markdown 书写（必须），特别是英文，还有代码块
• 每个问题都应该包括“问题描述”和“问题解决”两个部分（必须）
• 其他的格式参考 掘金翻译计划 （非必须）

Top 3 横向滚动，硬件加速

问题描述

这周发现一个页面很卡顿，定位发现是一个楼层组件的问题

它是可以左右滑动的，具体的滑动实现是通过 overflow-x: scroll 实现的，如下所示

1. .m-prepay-product-20171106-2 .prepay-product-wrap-slide{
2. white-space: nowrap;
3. position: relative;
4. overflow-x: scroll;
5. overflow-scrolling: touch;
6. -webkit-overflow-scrolling: touch;
7. padding:0 0.3rem 0.3rem 0.1rem;
8. font-size: 0;
9. }

问题解决

有意思的是，我百度到的这类问题都是 IOS 上会出现，但我们反馈的是在 android 上的问题。百度提出的解决方法是：

1. -webkit-overflow-scrolling: touch;

这个其实原理其实就是开启硬件加速，我们知道的还有一种开启的方式就是

1. transform: translate3d(0, 0, 0);

加上这个就可以了，但是有得就有失，如果你选择了开启硬件加速，那么也要损耗更多的内存，所以也是一件要慎重的事情。

Top 2 清除setTimeout/setInterval/sroll事件

问题描述

我们在页面中经常会用到 setTimeout/setInterval/sroll 事件等，其实如果你如果是单纯的一个 html 页面的话，问题应该是不大的，因为在页面销毁的时候，其实这些也会自动的销毁，但是现在前端的单页面技术、还有更多的组件化之后，就会带来相应的问题，比如你在一个单页面中，实际上你离开了"当前的页面"，但是你在上一个页面中创建的 setTimeout 并没有销毁，然后它里面代码执行就会有一些意想不到的问题出现。另外就是现在组件化的概念，一个页面可能由很多个组件拼凑而成，当你在某个组件中使用了 scroll 事件，然后使用了在某个节点你这个组件从这个页面清除掉了，但是你并没有清除掉 scroll 事件，这也会导致一些问题。

问题解决

在页面/组件离开的时候，养成一个将上面提到的一些清除掉，比如在 Vue 中：

1. beforeDestroy () {
2. // 移除事件监听
3. window.removeEventListener('scroll', this.handleScroll)
4. }

Top 1 setTimeout和setInterval的程序休眠

问题描述

这是之前遇到的一个问题。

在我们使用到 setTimeoutout 或者 setInterval 的时候，我们将浏览器最小化，过了一段时间后再打开，发现 setTimeou/setInterval 会暂时进入休眠状态，但并不是不执行程序，它会把 setInterval/setTimeout 的回调函数放在队列中,等浏览器再次打开的时候，一瞬间全部执行。这样就会出现一系列的问题，比如我在做一个弹幕的组件，使用 setTimeout 控制弹幕的发射，但是浏览器缩小后，过了很久打开，就会发现一下子很多弹幕出来，造成弹幕重叠。

这个问题涉及到浏览器的事件循环机制！

解决方法

如果页面是不可见的时候，那么我们就清除定时器，如果页面可见的时候，那么我们重新开启定时器

在这之前，我们先了解一下3个方法：

• document.onvisibilitychange 只要页面中发生变化，不管是切换到其他页面还是把浏览器缩小，都会触发这个事件。
• document.hidden 这个是指前页面不是当前页面的时候，否则为false
• document.visibilityState

这个属性有四个值，分为是：visible， hidden， prerender， unloaded

visible 表示当前网页是可见或者是部分可见的。

hidden：当前网页是不可见的

prerender 网页内容被预渲染并且用户不可见

unloaded 如果文档被卸载，那么这个值将被返回

以上，实现就可以通过以下解决这个问题：

1. document.onvisibilitychange = function () {
2. if (document.visibilityState == "visible") {
3. timer = setInterval(slidemove, 1000);
4. }
5. else {
6. clearInterval(timer);
7. }
8. }

以上方法感觉还是有兼容性问题的，这个可以细细研究。

另外

如果你是在小程序中，那么可以利用好微信小程序的生命周期。

1. onShow() {
2. _this.timerCheck = setTimeout(function () {}, 1000);
3. },
4. onHide() {
5. clearTimeout(_this.timerCheck);
6. }