听饿了么前端主管如何解析H5渲染性能

内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。

阅读字数:2488 | 7分钟阅读

摘要

前端性能按照类型来分主要分为加载性能和渲染性能。加载性能对于首屏的展示及其重要,而渲染性能对于页面加载完成后的交互体验极其重要。但目前绝大部分同学在提到前端性能的优化时都会默认等同于对加载性能的优化,而忽略了渲染性能。本次议题就从几个比较常见的角度聊聊开发中会无意识碰到的渲染性能问题。

获取嘉宾演讲视频及PPT,扫一扫下方二维码即可。

H5 VS Native

在将H5和native进行对比的时候,我们通常能想到的一点就是“快”,H5相对于native开发和上线都会快一些,一般的活动页面和非关键页面更多的倾向于H5来开发。

当然H5也有相应的缺点,它的加载和操作会慢一些,抽象来看就是性能问题。加载慢对应的是加载性能,操作慢对应的是渲染性能。加载性能可被定义为页面首次加载时候的性能,这方面的优化方案主要有静态资源压缩、懒加载、雪碧图、CDN、server push等。

渲染性能可被定义为页面进行操作/交互时候的性能,对于这方面的优化可能并不太容易想到。我在面试的时候也经常会问面试者关于性能优化的问题,不过大部分提到的优化方案都是关于加载性能,少部分会提到GPU加速,相对来说这部分同学的CSS技能会高一些。

渲染

一般一次渲染都会经过JavaScript > style > layout > paint > compoasite这样的过程。在做动画的时候可以进行优化,将layout和paint省略掉,这其实是将做动画的元素提升为一个单独的层。

渲染性能的优化可以针对渲染过程中的每一步来做,下面列出了google开发者论坛中提到的具体优化措施

  • 优化JS执行(JS)
  • 缩小样式计算的范围并降低其复杂性(style)
  • 避免大型、复杂的布局和布局抖动(layout、paint)
  • 使用输入处理程序去除抖动(layout、paint)
  • 坚持仅合成器的属性和管理层技术(composite)
  • 简化绘制的复制度、减小绘制区域(paint、composite)

层的优化

上面加粗的两个优化手段可以总结为层的优化,也就是开启GPU加速。这里我们先假设一个场景,在一个页面中存在两个水平排列的元素1、2,他们分别位于左右两端,我们要做的是将1移动到2的位置。对此最简单的方案是设置position并改变right或left的值。第二种方式是使用transform:translateX,并加上 will-change: transform/transform: translate(0)将它提升为单独的层,这种方案的好处在于启用了GPU加速。

这样看来只要应用GPU加速就能很好的解决动画优化问题,但是实际应用中的页面往往要比上面所描述的场景复杂的多。就拿饿了么的H5页面来说,它除了有轮播外还涉及到页面滚动、点击展开,返回顶部等。当开启layer borders查看时会发现滑动的过程中如果轮播图正在播放整个页面就会创建很多不必要的层。另外开启Paint flashing查看重绘情况时也会发现每次轮播图播放都会导致整个页面重绘。这种问题在低端手机上可能会造成闪屏,需要额外注意。解决方案其实前面也提到过就是要将做动画的元素提升为一个单独的层(合成层)

之前说过动画的问题有两种解决方案,如果这两个方案结合在一起又会怎么样呢,也就是将position和will-change写在同一个元素上,这在实际写代码的过程中是很容易碰到的。由此引出了新的问题,浮动元素(渲染层)和合成层的关系。对此我个人做了下总结:若合成层的z-index值小于下方兄弟元素,且他们有重叠,则下方兄弟元素也会被提升为合成层。

上图是饿了么页面的简化场景,区域1是可滑动动画区,使用flex布局实现,区域2是店铺列表,区域3是店铺信息,这两个区域都添加了position:relative。

这种实现方式没有指定浮动层的z-index值,因此在区域1进行滑动的时候,下方的每个店铺列表都会被提升为单独的层。在为区域1设置position:relative和z-index:1(高于下层)之后下方的层就不会再被提升了(此时下层z-index未设置)。

层爆炸

注意图中标记区域,当点击展开/收起活动的小三角的时候会有一个旋转180度的交互效果,相信大家对此都很熟悉。这种效果实现起来也很简单,设置transition过渡属性就能完成。

在实际操作的时候查看层级会发现,每个商店列表都被提升成单独的层且有很多嵌套。造成此问题的原因和前面的案例类似,主要还是没有给拥有过渡动画效果的小三角元素添加z-index值,解决方案同样是为动画元素设置z-inde。

这一系列的问题涉及到一个概念:层压缩,即如果多个渲染层同一个合成层重叠时候,这些渲染层会被压缩到一个GraphicsLayer中。

另外如果元素有动画/过渡效果,可未指定层级顺序高于下方浮动层,此时会假定下方的浮动层在动画期间会受影响,从而无法被压缩。

减少绘制区域

一般我们编写页面的时候都会为头部和底部设置固定浮动,这涉及到减少绘制区域的优化策略。在没有设置浮动的情况下,每次页面滚动头部和底部就会被重新渲染,解决方案是设置浮动后将这些浮动的头部和底部提升为单独的层。

以上为今天的分享内容,谢谢大家!

IT大咖说 | 关于版权

本文由“IT大咖说(ID:itdakashuo)”原创,转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信:ITDKS10(备注:投稿),茉莉小姐姐会及时与您联系!

感谢您对IT大咖说的热心支持!

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2018-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT派

10个免费好用功能强大的网页动画效果库

动效设计是2018年的热门趋势之一。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。今天...

46200
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 和iOS Simulator 那点事

React Native 和iOS Simulator 那点事 尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.o...

39040
来自专栏QQ会员技术团队的专栏

来看看机智的前端童鞋怎么防盗

很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。

543110
来自专栏互联网开发者交流社区

SEO-站内优化规范

13120
来自专栏较真的前端

React 学习路线图 2018版

这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时,原仓库已经有了中文版,...

15640
来自专栏企鹅号快讯

编写优秀 CSS 代码的 8 个策略

1qjnmmn gbhjnhbgfsjkgff 编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时...

19760
来自专栏葡萄城控件技术团队

纯前端表格控件SpreadJS V11.2新版本发布,全面支持React和Vue

SpreadJS 是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,在外观、功能和操作上都与 Excel 高度类似,在表格数据处理上比 Grid ...

21500
来自专栏lonelydawn的前端猿区

ReactJS的简单介绍和使用

一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一...

22480
来自专栏程序员互动联盟

【入门指导第十三讲】概念墙

存在问题: 最近有小伙伴问html/html5/xhtml/xml这四个有什么区别? 解决方案: 小编在这里为大家详细解释一下。 html 学名叫做超文本标记语...

363100
来自专栏Material Design组件

Human Interface Guidelines — Navigation

19130

扫码关注云+社区

领取腾讯云代金券