|
活动上半场内容 在分享的下半场，子舜带来了更有意思的分享内容： 长期以来我们一直都非常关注用户的网络情况，而且也在这方面做了非常多的实践。随着中国带宽的不断优化和提升，网络问题会得到越来越多的改善。 但优化工作是否就可以告一段落？反之，我们的前端优化将会迎来更多更深入的挑战。 例如，我们的业务，特别是社交业务，功能越来越复杂，用户对业务的要求也越来越高。同时也开始有很多业务开始终端化，硬件条件将会带来前所未有的挑战。 我们开始思考：是否要像客户端开发一样、做更加深入的性能优化思考？ QQ空间今年最大的一个突破就是开始用可观的数据开始反映业务性能问题。 QQ空间的用户平均停留在30分钟以上的用户接近35%。这些用户都是实实在在得长期挂在空间，并且他们也是一直在忍受着我们业务因为功能逻辑复杂，导致使用过程中页面渲染性能效率低下的背景下，非常艰难地使用我们的产品。 接下来，第一件事情就是解决用户CPU的问题。 浏览器没有获取CPU的接口，但是我们有办法模拟出CPU的曲线。 浏览器的setTimeout和setInterval，很多时候我们都用来做延迟处理，但由于浏览器的引擎单线程性，这两个接口都是一个非常不稳定的存在。如果在浏览器CPU资源消耗过高，并且js api处理时间过长，前端的定时器都是无法准确在我们期望的时间点上进行执行的，很多时候都是会延迟，而这个延迟可以被我们利用做成一个差值比例。通过这个比例，我们可以绘制出和当前CPU比较吻合的曲线。 在页面渲染的测量上，我们做了非常大胆的尝试，同时也给在前端的各种功能添加以及优化给出了更多有效的数据举证；给业务的按需加载有了更加具体的数值参考。前端一直以来的按需加载能力将会成为平衡CPU高峰的重要工具，相辅相成。 回到主题，那HTML5在我们的业务是否也会有CPU优化的更多方案思考？答案显而易见！HTML5在更加底层的方式做了更多的优化能力，而这里最具潜力的是，GPU加速。 在分享的最后环节，子舜给大家带来了页面渲染在GPU中的优化方案。 首先，在大家常用的chrome/webkit浏览器中，GPU是在另外一个线程上处理的，这也就和以前的浏览器渲染单线程带来了一个非常好的优化。 GPU处理渲染和合成，其实会让web页面渲染得到更加合理的分配，GPU在处理动画及图片上有非常强的优势，同时也可以减少遗忘在CPU中处理整个页面带来的内存消耗问题。 但我们可以把所有渲染都交给GPU么？答案是不能！GPU虽然在图像和动画处理上有先天的优势，但也有很多不足，比如文字处理和合成、页面树的合成，CPU还是会比GPU更加擅长。 为了可以在业务中更好得利用到GPU，我们需要知道浏览器到底会在什么时候使用到GPU合成技术。如下图所示： 很多很熟悉的字眼，其实大家在经常使用css3的时候已经潜移默化在使用到浏览器提供的GPU能力了（小Tips: 但是这些也需要非常小心，特别是重构的同学，不要在一些没有动画的dom上加太多css3的动画处理或者带有css集成的dom。因为会增加前期dom树在渲染上不必要的GPU负担) 那我们如何更好得利用这个资源，子舜也给大家提供了一些HTML5 GPU 加速的银弹。 GPU在合适的时间去使用，HTML5的这些动画能力是作为局部动画使用，会给网页动画带来惊人的效率和帧数的提升。 分享中，舜子带来了一个非常常见的拖拽案例，这个拖拽案例分别在普通的left和top计算，以及css3 transform的差别。 通过chrome的timeline曲线可以看到，前面的Left/Top位移，带来了非常多的rendering和 painting成本，这些工作都是在CPU的帮助下完成的工作，而这些工作如果换在终端上实现，大部分的终端CPU都无法顺利完成这一个任务。 而右边的曲线，可以看到render工作基本上就不存在了，同时浏览器页把paint的工作交给了GPU处理，从FPS线也可以看到移动速度是有很大的提升稳定在30~60之间。 可以看到GPU确实在发挥其优势，同时我们可以更好得开始去利用这些资源。但CSS3动画是否可以取代js动画？以前setTimeout不准的情况在我们进入HTML5领域需要做游戏的朋友是否会有障碍呢？ 这个问题已有专家提出过，CSS3无法取代JS动画，但目前JS动画都依赖setTimeout，其实是一个死胡同。因为setTimeout单线程的不准确性，如果setTimeout超过16ms又会给设备带来超过25%的能耗浪费，CPU也会因此带来更多的资源浪费。 所以为了解决这个问题，HTML5的专家也提出为JS动画，以及canvas游戏专门提供一个可以让浏览器知道开发需要进行动画处理的方式。requestAnimationFrame 继续刚才的拖拽实验, 如果在GPU和RAF的加速下，在曲线图上可以看到很多时候曲线是在60FPS之上的，而且这个曲线峰值也会出现更多超过60FPS的数值。
活动答疑总结
|
