移动Web应用: 为最佳性能而生的高级CSS技术

Posted 2021-04-30 奇舞周刊

编者按：本文由HappyAdu在众成翻译平台上翻译，英文原文： https://medium.com/outsystems-experts/mobile-web-applications-top-css-techniques-for-optimal-performance-b66e3111c733#.i9wyo77o6

创建一个性能高效的移动Web应用是十分困难的。 低帧的动画效果, 屏幕间的粗糙转换, 这些让我们意识到移动端Web的发展需要在html上做一些改善来达到好的结果。 Facebook CEO，Mark Zuckerberg曾声明说该公司的最大错误之一就是决定。这是否意味着我们应该放弃网络开发，并且为三个不同的原生平台聘请十几个开发人员呢？

不是的，从那时到现在已经发生了许多变化，移动浏览器有了更好的表现, 移动设备也在硬件方面得到了提高并且其配置的浏览器也已经支持新的CSS3和javascript特性。

使用已经发布的流行技术和利用HTML5和CSS3，现在的我们能轻松的完成许多Web开发。那么现在，就跟我一起去体验一下其中几个强大的功能吧。

Flexbox 布局

好了，现在你可以跟采用一系列措施来让元素分布在移动浏览器中的固定位置或者说使用JavaScript Hack技术来使元素分布在你想要它们显示的位置这类的麻烦事说拜拜了。

弹性布局背后的主要思想是根据设备显示尺寸来调整其内容布局的宽度/高度（和顺序），使其最好的填充可用的空间 (最大限度的适应各种显示设备和屏幕尺寸).一个使用了弹性布局的容器能够扩展项目使其填充可用空间，或者收缩它们来防止内容溢出。

CSS-Tricks网站对于CSS Flexbox的完全解读

弹性框布局机制也允许完全控制行、列和元素顺序、间距和其对齐方式。它可以用来定义屏幕布局和其他元素的结构。

在这个例子中, 我们创建了一个带3个DIV的基础布局， 中间的DIV是其它的三倍大:

.layout {    display: flex;    flex-direction: row;
}

.a, .c {    flex: 1;
}

.b {    flex: 3;
}

用一个简单的规则，就可以改变布局，以更好地适应手机屏幕:

.layout {        flex-direction: column;
}

利用GPU

动画不得不说是一个能给用户以良好体验的伟大方式，它常常通过一线描画的方法使得静态网页像那些丰富的应用一般多姿多彩。平滑的动画效果能给用户无障碍的体验，如此一来，想要达到效果就要尽可能的要求高帧率，比如60帧每秒就是一个理想的数值。

为了动画的平滑，我们需要移除主线程负载来避免回流和重绘。如透明度和转换这类性能运行在 (由GPU处理), 并且虽然动画元素不是在三维空间，我们也可以启用3D渲染来使得动画更加平滑流畅。甚至动画的其他特性应用 transform: translateZ(0); 也会引发现代浏览器甚至移动浏览器的GPU加速。

从当下的例子来看, iPhone 6的记录，就显示了真正影响创建一个简单的关闭画布菜单动画的不是使用left而是 translateX. 在低端设备上，区别甚至更明显。

CSS大展拳脚

这是CSS的伟大时代, 一些新的属性能够节省数百行javascript代码却能比之前表现更好。

例如, 移动设备的弹性滚动就需要大量的javascript代码来实现，但是现在，使用-webkit-overflow-scrolling: touch; 我们就能轻松实现相同的效果。

另一个好的示例是-webkit-position: sticky; ，sticky定位是一种混合固定定位和相对定位的定位方式。使用了sticky定位的元素一般被视为相对定位，直到其越过某一个特殊的界限，该元素才被视为固定定位。同样要做到这种效果需要使用大量的JavaScript代码做onScroll事件，但这对于移动设备来说负担过重，为此基于webkit内核的浏览器支持sticky。

---

目前为止，有许多的例子显示我们能够使用正确的工具和技术来通过HTML创建高性能的应用（APP）。甚至是一些!