校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > 性能和加载优化
题目

如何优化渲染?

解答

具体方法如下。

(1)通过HTML设置 Viewport元标签, Viewport可以加速页面的渲染,如以下代码所示。

<meta name="viewport" content="width=device=width,initial-scale=1">

(2)减少DOM节点数量,DOM节点太多会影响页面的渲染,应尽量减少DOM节点数量。

(3)尽量使用CSS3动画,合理使用 requestAnimationFrame动画代替 setTimeout,适当使用 canvas动画(5个元素以内使用CSS动画,5个元素以上使用 canvas动画(iOS 8中可使用 webGL))。

(4)对于高频事件优化 Touchmove, Scroll事件可导致多次渲染。

使用 requestAnimationFrame监听帧变化,以便在正确的时间进行渲染,增加响应变化的时间间隔,减少重绘次数。

使用节流模式(基于操作节流,或者基于时间节流),减少触发次数。

(5)提升GPU的速度,用CSS中的属性(CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video)来触发GPU渲染。

C 0条回复 评论

帖子还没人回复快来抢沙发