博客首页前端开发分类

前端性能优化之JavaScript

发布时间:2016-08-16 16:44:50编辑:Mr.Co阅读(495)

上图描述的四个场景都是有可能对响应用户输入或者动画造成影响的。函数的输入事件处理、不合时机的 JS 、长时间的 JS 运行以及垃圾回收。

函数的输入事件处理

首先,我们要知道的一个事实就是浏览器是由多个处理进程的:Compositor、Tile Worker、Main。当用户进行输入操作(滚动、点击等),如滚动时,Compositor 进程会接收到这个事件(实际它可以接受任何用户输入事件),如果可以的话,它将不会通知主进程,直接说:滚吧,牛宝宝。于是,页面就滚动了。当然,这其中包含更新层定位以及让 GPU 绘制帧,而主线程处于空闲状态。但是,事情往往并非如此。如果输入事件上绑定了 JS 处理事件的话,Compositor 进程就没办法主动跳过主进程了。

如上图,当 JS 处理事件过长时,输入事件的响应会一直处于阻塞状态,直到 JS 处理完成。当响应超过 100ms 时,用户就会感受到延时。所以当处理用户事件时,我们应该做到:

1.避免长时间的 JS 执行。

2.避免在处理中改变样式。因为样式改变会引起后面布局、绘制、合成等操作。

3.对用户输入进行消抖。

优化处理

其他优化:

1.使用 requestAnimationFrame,将 setTimeout 换成 requestAnimationFrame,因为 setTimeout 时间控制可能造成在一帧的中间,目前各浏览器对 requestAnimationFrame 的支持已经比较好了。

2.使用 Web Workers,将复杂计算的 JS 采用 Web Workers 进行处理。

3.减少垃圾回收,垃圾回收是一个容易被忽略的问题,因为垃圾回收的时间是不受控制的,它可能在一个动画的中途,阻塞动画的执行,更理想的情况是在循环中复用对象。


转载请注明出自:http://www.mrco.cn/article/57b2d282cf6935bd6dd1c0ac.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码