浏览器层合成与页面渲染优化

作者:黄浩群

一个 CSS 属性引发的血案

Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现:

  • 页面加载时存在明显的延迟,但通过代理抓到的网络请求耗时并不比 Android 的高;

  • 页面滚动时会出现短暂的局部白屏,即丢帧。

【译】Web内容如何影响电池的使用

原文地址:https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
原文作者:Benjamin Poulain & Simon Fraser
译者:刘辉 校验:李刚松

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的内容。

是什么在耗电?

移动设备的电力消耗有以下几个因素:

  • CPU (核心处理器)
  • GPU (图形处理)
  • 网络 (wifi或者蜂窝移动网络)
  • 屏幕

屏幕功耗相对稳定,并且主要由用户控制(通过屏幕使用时间和亮度),但是对于其他组件,例如CPU,GPU,网络模块,功耗是动态变化的,而且变化范围很大。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×