CSS3高消耗资源

Question

我正在使用离子开发混合应用程序。我主要通过scss自定义离子主css，还添加了一些我自定义的CSS。目前，应用程序布局没有太多JS逻辑，并且在人行横道上运行。布局确实很好地显示，但是在低端智能手机上，它似乎没有顺利运行。

所以，我在这里问，什么CSS元素被认为是高资源消耗？影子消耗资源吗？开发高性能CSS布局的最佳实践是什么？

Answer 1

我是Ionic论坛版主（也是一名博客），所以让我给你一些提示和技巧。

无论您使用何种框架，低级Android智能手机都将成为问题。虽然几乎所有东西都可以修复。

导致性能问题的最常见CSS3功能是：

• 阴影（最糟糕的是 - 框和文字阴影）
• 不透明度
• 渐变（这三个中最不成问题的）

你应该总是使用CSS3硬件加速功能，将大部分处理转移到GPU，从而将CPU转移到其他任务。

我写了一篇关于这个主题的文章，找到它 here 。

还有一件事。低级智能手机上可能存在的两个最大问题是视图动画（过渡）和列表性能。

如果你有一个巨大的列表使用集合重复（离子功能），不幸的是，你可以使用本机JavaScript滚动。但是如果你有一个较小的列表，你可以使用经典的ng-repeat并打开原生滚动。它会改善外观和感觉。

另一方面，使用Cordova Native Transitions插件可以改善视图转换（达到近乎完美的状态）。这是一个包含视频差异的工作示例，请点击 here 。

或者看看这里：

经典CSS动画（性能不佳）：

https://www.youtube.com/embed/niHxogcq2F8

原生过渡动画：

https://www.youtube.com/embed/mJifdqoIJ_s

Answer 2

我建议您再次开始删除所有css文件并测试低端设备，以查看不良信息是否与css相关。

无论如何，开始编写efficient css selector避免bad css properties，并使用how to profile your web application学习remote debugging tools（safari / ios中有类似的工具）。另外，您可以在线查找许多作者的最新阅读dedicated blog posts。