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

╰+哭是因爲堅強的太久メ 2021-11-14 13:01 260阅读 0赞

近来公司有个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选项

![SouthEast][]

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

![SouthEast 1][]

![SouthEast 2][]

色块说明：

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

![SouthEast 3][]

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

[SouthEast]: /images/20211114/3415261e6cb0437baf9f6e07790163f3.png
[SouthEast 1]: /images/20211114/d67df81a86414e06b48e7e4931567aed.png
[SouthEast 2]: /images/20211114/6f2cf3dbd9dd42df9c2a7c170bf391fb.png
[SouthEast 3]: /images/20211114/67539ac7f90f42cfbc0d685b6ebf9e0b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在 Linux ubuntu 系统上搭建 Java web 程序的运行环境

在 Linux ubuntu 系统上搭建 Java web 程序的运行环境

素颜马尾好姑娘i/ 2024年05月06日 21:26/ 0 赞/ 80 阅读

相关如何在VSCode上运行LayUi项目

VSCode运行LayUI项目

ゞ浴缸里的玫瑰/ 2024年04月23日 20:03/ 0 赞/ 86 阅读

相关如何分析在 Linux 上运行的 C++ 代码？

问：如何找到在 Linux 上运行的 C++ 应用程序中运行缓慢的代码区域？答1: > huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

阳光穿透心脏的1/2处/ 2024年03月29日 15:14/ 0 赞/ 85 阅读

相关 CGI运行在Web服务器上的,如何在Tornado web服务器上运行CGI脚本？

我正在试用几个网络服务器。今天我来试试Tornado web server。在当我尝试一个新的web服务器时，首先要做的事情之一就是让web服务器运行我的测试CGI脚本。在

阳光穿透心脏的1/2处/ 2022年09月02日 04:12/ 0 赞/ 219 阅读

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

近来公司有个web app 项目运行在移动版android系统上，发现在电脑上跑的很流畅的web页面在移动版webkit上非常不流畅。根本无法和native app相媲美。HT

╰+哭是因爲堅強的太久メ/ 2021年11月14日 13:01/ 0 赞/ 261 阅读

相关如何在uni-app正确使用web-view

最近在开发个人的一个小项目的时候遇到一个问题，原因是有一个列表，在点击某一项的时候要跳转到详情，这个详情是一个外部链接，并不是内部的查了一下uni-app的文档，嗯，很好

r囧r小猫/ 2021年10月01日 09:00/ 0 赞/ 1177 阅读

相关 SpringBoot web应用部署在Docker上运行

SpringBoot web应用部署在Docker上运行环境信息： OS ：Win10专业版 Docker Desktop ：2.1.0.3 本文代码 -->

清疚/ 2021年09月11日 02:34/ 0 赞/ 568 阅读

相关 nw.js node-webkit系列（14）不同系统环境下如何启动node-webkit APP

本节将介绍node-webkit 应用分别在Windows、Linux和Mac OS环境下如何启动。 node-webkit可以通过两种方式启动： 1）通过文件夹，将启动路

待我称王封你为后i/ 2021年09月10日 20:32/ 0 赞/ 421 阅读

相关如何在 Linux 上运行 Windows 的应用？

不少朋友在用 Linux 系统，尤其是程序员群体。虽然 Linux 系统安全、稳定，但图像界面及其应用程序使用体验很差。相比而言，Windows 系统的用户图形界面交互体验

迷南。/ 2021年09月07日 06:05/ 0 赞/ 783 阅读

相关如何在iPhone上关闭Siri App建议

![fb0e01d1f292d3d7ae0062416bc15644.png][] iOS 10 includes a feature that gives you quic

浅浅的花香味﹌/ 2021年07月26日 14:02/ 0 赞/ 771 阅读