前端踩坑系列《五》

Hello ，大家好！

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

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

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

Top 3 横向滚动，硬件加速

问题描述

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

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

.m-prepay-product-20171106-2 .prepay-product-wrap-slide{
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    padding:0 0.3rem 0.3rem 0.1rem;
    font-size: 0;
}
复制代码

问题解决

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

-webkit-overflow-scrolling: touch;
复制代码

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

transform: translate3d(0, 0, 0);
复制代码

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

Top 2 清除 setTimeout/setInterval/sroll事件等

问题描述

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

问题解决

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

beforeDestroy () {
    // 移除事件监听
    window.removeEventListener('scroll', this.handleScroll)
  }
复制代码

Top 1 setTimeout和setInterval的程序休眠

问题描述

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

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

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

解决方法

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

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

document.onvisibilitychange
document.hidden
document.visibilityState

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

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

hidden ：当前网页是不可见的

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

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

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

document.onvisibilitychange = function () {
    if (document.visibilityState == "visible") { 
        timer = setInterval(slidemove, 1000); 
    }
    else {
        clearInterval(timer);
    }
}
复制代码

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

另外

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

onShow() {
    _this.timerCheck = setTimeout(function () {}, 1000);
},
onHide() {
    clearTimeout(_this.timerCheck);
}
复制代码