广州web培训
达内广州五羊中心

18087159764

热门课程

Web前端工程师必会的渲染优化

  • 时间:2016-09-19
  • 发布:广州前端开发培训
  • 来源:解放号论坛

HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明。客户端浏览器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的java代码前,大部分的浏览器(ie6、ie7、ie8除外)都会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。

接下来和达内广州web培训一起看看渲染优化的要点:

1、HTML使用Viewport

Viewport可以加速页面的渲染。

2、减少Dom节点

Dom节点太多影响页面的渲染,应尽量减少Dom节点。

3、动画优化

(1)、尽量使用CSS3动画。

(2)、合理使用requestAnimationFrame动画代替setTimeout。

(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。

4、高频事件优化

Touchmove、Scroll事件可导致多次渲染。

(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。

(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速

CSS中以下属性(CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。(达内广州web培训注:过渡使用会引发手机过耗电增加。)

上一篇:Web前端工程师必会的加载优化
下一篇:Web性能优化还需要注意这些

达内广州web培训详解ES6循环:for-of

达内广州web培训详解ES5循环:forEach

达内广州web培训详解ES5简单for循环

达内广州web培训分享:CSS预处理器的缺点

选择城市和中心
贵州省

广西省

海南省