前端踩坑系列《五》
前言
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
这个是指前页面不是当前页面的时候,否则为false 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);
-
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何用redis正确实现分布式锁?
- SQL Server 事务隔离级别
- Django+Vue开发生鲜电商平台之8.商品详情页功能实现
- Django+Vue开发生鲜电商平台之7.用户登录和注册功能
- centos7下nginx使用tmp目录问题
- TeaWeb – 可视化的Web代理服务
- Slf4j适配日志原理
- vim编辑器
- 深度学习常用Linux命令
- Vlan 和 和 Trunk 实验
- koa框架生成微信公众号二维码
- KVM 实现虚拟机在线热迁移
- 机器重启后 docker 容器启动报错 error creating overlay mount t
- 微信小程序开发实战(14):音频组件(audio)
- dotnet OpenXML 文本 BodyProperties 的属性作用