使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

techbrood 发表于 2016-05-19 14:51:25

标签: css3, center, performance, 渲染引擎

- +

要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和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


possitive(3) views16021 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • 常见面试题JS语言中四种函数调用方式实例讲解

    JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • 更多...