使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解
要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。
你可能已经使用了这些方法,但很可能没有意识到性能上的差别,因为这涉及到浏览器渲染引擎的一些幕后的工作原理。
使用top/left和margin来居中
其中目前比较流行也比较容易理解的方法是使用绝对定位+外边距实现。也就是分两步来把元素居中:
1. 第一步通过top/left先把元素放在离视口左上角(坐标原点)50%视口宽和50%视口高的地方;
2. 第二步通过margin把元素反向偏移其自身宽高的50%。
html,body{background: #333;height:100%; width:100%;margin:0;padding:0;} h1 { margin-left: -200px; margin-top: -35px;/* h1元素边框的高度一半: (30px+20px*2)/2 */ color: white; width: 400px; height: 30px; text-align: center; position: absolute; left: 50%; top: 50%; padding: 20px 0; border: 1px solid #666; }
上述代码使用绝对定位,top: 50%, left: 50%完成第一步,margin-left和margin-top完成第二步。
注意标题元素宽度使用百分比,可在水平方向自适应屏幕宽度。最好设置下min-width,以免屏幕过小时,标题文本溢出。
这样的代码是可以工作的。但是吹毛求疵的话,代码的性能并不好。当然在这种简单用例下不太会被暴露出来。
但是如果你想给这个标题添加一些动画效果,比如上下晃动的话,那么就很有必要优化一下代码。
性能优化的版本
上面的第一步没有问题,第二步完成相对自身尺寸的偏移,可以使用CSS3变换中的translate(使用百分比取值时,以其边框border box尺寸为参照)来替代。
我们先给出代码,然后说明为什么要这样,有什么好处和坏处。
*{margin:0;padding:0;} html,body{background: #333;height:100%; width:100%;} h1 { -ms-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); color: white; width: 50%; text-align: center; position: absolute; left: 50%; top: 50%; }
要明白为什么这么优化,我们首先需要了解浏览器的渲染过程:
解析DOM Tree,创建一个或多个渲染层(layer)
将每个层独立地绘制进位图(bitmap)中(计算样式->布局->栅格化)
将层作为纹理(texture)上传至 GPU
复合(composite)多个层来生成最终的屏幕图像
每个层的样式出现调整后,要重新计算样式->重新布局(可能没有)->重新栅格化(可能没有)->重新组合
使用top/left只会创建一个层,而使用translate方法将促使浏览器(webkit)把h1元素提取出来放在GPU单独的渲染层中(RenderLayer),这样有3点好处:
1. 该元素任何合成属性(Composite Property)的变化将不会影响原有文档,不会导致原文档被重新布局(relayout或reflow),所谓重新布局就是重新计算位置和尺寸,这是前端性能的杀手。位置和角度就是典型的合成属性。
2. 该层将由GPU(Compositor Thread)负责渲染,从而节省CPU资源,不会阻塞主线程JS代码的执行。
3. 动画更为平滑,这是因为使用translate将可以以小于像素的单位(sub-pixel)来绘制,并在帧之间加入了blur(模糊)效果。
可能带来的负作用是额外的渲染层导致更多的线程间通信,如果过度使用,导致生成成百上千的渲染层,那反而会导致组合各层图像的成本迅速上升成为主要矛盾,且我们需要记住GPU也是有内存限制的。当然还有一个前提是translate方法得到了浏览器支持,这在移动端没有问题。
另外使用translate的3D版本和translate 2d版本的区别在于可以强迫在声明后就创建独立的渲染层,这样一旦动画开始,无需等待。
在线实例
这里有一个在线用例是居中标题区块的完整实现:
http://wow.techbrood.com/fiddle/6908
还有两个在线用例用来比较top/left和translate方法的性能(你需要学会使用Chrome DevTools):
http://wow.techbrood.com/fiddle/17737
http://wow.techbrood.com/fiddle/17739
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
HTTP/2背景和新特性简介
学习使用CSS制作进度条
进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Three.js入门教程2 - 着色器(上)
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
更多...