爱程序网

如何优化运行在webkit上的web app

来源: 阅读:

  近来公司有个web app 项目运行在移动版android系统上,发现在电脑上跑的很流畅的web页面在移动版webkit上非常不流畅。根本无法和native app相媲美。HTML5的性能还真是让人纠结啊的egg pain...

  后来发现国外的 Netflix 网络电视服务提供商的web app,全是HTML5实现的,而且2年前就跑在了250多种移动设备上,在40多个国家上市,UI非常流畅。所以觉得HTML5还是勉强有救的。

公司找了Netflix的资料,决定对自身的web app项目进一步优化,到目前为止效果非常明显。不废话了,以下就是优化点:

1、使用设置内联样式取代改变class,即直接设置style来改变样式

 这一点,我一开始也无法理解,但经过测试至少在硬件性能较差的移动版webkit内核浏览器上就是这样的

2、有些css选择器写法会导到深度重绘,应避免这样的css选择器写法,比如:

.list-showing #browse { … }

 

3、当webkit-transition中的duration属性大于0时,在animation周期中会导致 重复多次重绘

 

4、reuse instead of allocate&destroy

重用代替重新申明创建和销毁,重用已有的dom而不是创建新的删除旧的,以减少dom树的更新

 

5、don’t do in software what can be handled by hardware

能用硬件加速就用硬件加速,硬件加速方式直接就是paint出来,而非硬件加速方式则需要计算,渲染,再paint

 

6、以下几个css属性要注意

-webkit-gradient

-webkit-box-shadow

background-position

background-repeat

border

适当的选择使用它们

 

7、静态图片渲染永远快于css渲染

css需要通过cpu来绘制,一旦图片下载完成,渲染速度永远快于css实现的方式,css绘制 效果需要在布局上重新计算,渲染,绘制

 

8、尽量少做动画,如果要,就使用transition

在各设备上支持的比较好;

对应的动画属性也较多;

渲染引擎会对此进行优化;

-webkit-transition-property: opacity, -webkit-transform; 这两个属性在硬件加速下不需要重绘

 

9、强制某些元素拥有硬件加速能力

-webkit-transform: translateZ(0);

而这个属性就像是以前zoom:1那样不会对效果产生任何引响,但确使对应的元素拥有了硬件回事能力

 

10、内存注意项

避免内存无限增长;

应最少的丢掉再创建元素(dom);

video设置为display:none可能会释放掉内存;

对象太多会导致频繁并且很慢的垃圾回收;

闭包什么的会导致内存持续上升;

 

11、层(我理解为div)

减少层的数量

层保持越小越好

尽量少的去更新层

合理组合层 

 

===============================  i am 分割线 ====================================

如何使用调试工具来帮助优化?

开启浏览器的调试功能safari (我的是在mac os上,windows上不知道有木有,好像safari6.0后windows上就木有了)

在safari中显示debug菜单项,需要在terminal程序中输入

defaults write com.apple.Safari \ IncludeInternalDebugMenu 1

然后就可以在safari菜单栏上看到多了一个debug选项

在debug菜单项内中找到show composition borders,然后你就可以看到你的网页各区域的状态了

色块说明:

1、红色compositing layer

代表的是 组合层,左上角的数字代表recalculations重新计算次数

渲染层会被扁平化(像素化)为单一的图片形式,有时会被映射到GPU纹理上

2、黄色container layer

代表内容层, 没有红色层 (no backing surface)-子元素为layer

3、青色overflow box

no backing surface-debugging tool.(不知道怎么翻译,不过这个不影响)

4、绿色 tiled layer

layer宽或高大于1024px

 

 

chrome中也有类似的调试功能,(mac os, windows都有)

在chrome浏览器地址栏中输入 about:flags

然后把 composited render layer borders 这个选项 Enable

 

注:转载请注明出处博客园:绿茶-续(偷饭猫)email: willian12345@126.com

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助