居中为什么用transform,而不是margin top/left
首先。我们了解下transform是干嘛的。
在MDN中的官方解释:CSStransform
属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。简言之,transform可以操作一些动画、位移效果。
margin top/left,我们应该很熟悉,用得比较多。
那为什么说,居中显示,CSS3标准的transform更胜一筹呢?我们主要还是从浏览器渲染的性能方面考虑。
1. 浏览器渲染过程
我们知道,浏览器中有JS引擎和渲染引擎,对于HTML页面的渲染就靠渲染引擎来完成。下面是chrome浏览器页面渲染的整体过程图:
(www.w3cplus.com/animation/a… © w3cplus.com)
从上面的流程图中不难看出,Chrome渲染主要包括Parse Html、Recalculate Style、Layout、Paint、Image Decode、Image Resize和Composite Layers等。相对应的中文表述就是:html解析、查找并计算样式、排布、绘制、图片解码、图片大小设置、合并图层并输出页面到屏幕。浏览器最终渲染出来的页面,跟Photoshop有点类似,是由多个图层合并而来。
2. transform的原理:
transform是通过创建一个RenderLayers合成层,拥有独立的GraphicsLayers。每一个GraphicsLayers都有一个Graphics Context,其对应的RenderLayers会paint进Graphics Context中。合成器(Compositor)最终会负责将由Graphics Context输出的位图合并成最终屏幕展示的图案。
满足如下条件的RenderLayers,会被认为是一个独立的合成层:
- 有3D或者perspective transform的CSS属性的层
- video元素的层
- canvas元素的层
- flash
- 对opacity和transform应用了CSS动画的层
- 使用了CSS滤镜(filters)的层
- 有合成层后代的层
- 同合成层重叠,且在该合成层上面(z-index)渲染的层
如果RenderLayer是一个合成层,那么它有属于它自己的单独的GraphicsLayer,否则它和它的最近的拥有GraphicsLayer的父layer共用一个GraphicsLayer。
由此可见,transform发生在Composite Layer这一步,它所引起的paint也只是发生在单独的GraphicsLayer中,并不会引起整个页面的回流重绘。
3. GPU
我们经常会听到GPU会加速渲染,那GPU在这里又扮演什么角色呢?
前面说到,合成器会负责将层合成绘制为最终的屏幕画面。在硬件加速体系结构,合成由GPU负责。在chrome浏览器多进程模型中,有一个专门的进程来负责传递Render进程的命令,即GPU进程。Render进程和GPU进程是通过共享内存传递的。
Render进程可以快速 的将命令发给命令缓冲区,并且返回到CPU密集的render活动中,留给GPU进程去处理这些命令。我们可以充分利用多内核机器上的GPU进程和CPU进程。这也是为什么GPU会加速渲染,使transform渲染速度更快的又一原因。
4. margin top/left
marign:外边距,定义元素周围的空间;简言之,可以改变元素的位移。在浏览器页面渲染的时候,margin可以控制元素的位置,也就是说,改变margin,就会改变render tree的结构,必定会引起页面layout回流和repaint重绘。
因此,从浏览器性能考虑,transform会比margin更省时间。
但是,transform真的处处适用吗?
5. transform的局限性
上面提到,transform实际上也是用到了GPU加速,也就是说占用了内存。由此可见创建GraphicsLayer,虽然洁身了layout,paint阶段,但Layer创建的越多,占用内存就会越大,而过多的渲染开销会超过性能的改善。
因此,当且仅当需要的时候,才会为元素创建渲染层。
居中为什么用transform,而不是margin top/left相关推荐
- 在才开始进入前端这个坑的时候 在布局中会遇到很多问题 我才入这个坑的时候 在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素 没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素 解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
- html div居中属性,让div水平居中设置margin属性
css怎样让div水准居中呢?div居中前提是甚么?怎样才让div居中呢? 要让div程度居中设置装备摆设margin属性即可. 1.居中枢纽CSS代码:margin:0 auto margin:0 ...
- 面试资料积累css-居中为什么使用transform ,而不使用marginLeft
因为transfrom是独立的层,而margin会导致重绘和回流 transform:是通过创建一个renderLayers(渲染)合成层,拥有独立的graphicsLayers(绘图层).每一个绘图 ...
- 左右margin top问题百分比值
不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...
- 8 种实现垂直和水平居中元素的方法汇总
英文 | https://blog.bitsrc.io/8-ways-to-center-elements-vertically-and-horizontally-3dc8cce047d8 在前端网络 ...
- D3js(v3)使用
D3使用 文章目录 D3使用 一 使用 d3.v3.min.js 二 操作 2.1 操作元素, 操作svg 2.2 数据绑定bind data 2.3 插入&删除元素 2.4 绘制静态直方图 ...
- 居中为什么要使⽤transform(为什么不使⽤marginLeft/Top)
// transform transform 属于合成属性(composite property),对合成属性进行// transition/animation 动画将会创建一个合成层(composi ...
- 关于 top、left 结合 translate 实现居中的原理探讨
关于 top.left 结合 translate 实现居中的原理探讨 前情提要 在居中对齐的方法中常用的一种方法之一,就是使用绝对定位结合 translate.top.left实现居中,探讨原理之前先 ...
- 为什么html运行之后不滚动,为什么很多移动端的HTML UI,在滚动时都用transform属性而不是用传统的滚动条?...
關鍵不在硬件加速,而在於是否 reflow. A reflow is a more significant change. This will happen whenever the DOM tree ...
- 如何只用CSS做到完全居中
本文由 伯乐在线 - 埃姆杰 翻译自 codepen.io.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. [感谢@埃姆杰 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试提交到伯乐在线.] ...
最新文章
- GPIO及中断API函数
- Java线程之Synchronized用法
- MyBatis关键配置-接口注入使用
- Android设计模式之——模板方法模式
- 设计代码说明什么是多态性?如何实现多态?(代码中要写注释解释)_狗屎一样的代码!快,重构我...
- 湖南工业大学c语言在线作业答案,湖南工业大学C语言期末考试复习题(机房题库)...
- 华为机试HJ20:密码验证合格程序
- jenkins docker 自动部署 构建_Docker_Jenkins自动部署项目
- linux下音乐转换软件下载,Ubuntu 下把Ape格式音乐转为Mp3格式
- Model based RL概述
- POJ - 1679 The Unique MST (次小生成树) 板子
- android6自定义锁屏,Android
- 第二天 熟悉ue4工具 及快捷键
- 一键清空朋友圈软件_微信清理朋友圈app下载-微信清理朋友圈下载v1.8.0 安卓版-西西软件下载...
- Qt模仿Boss直聘的竞争力分析器
- 听“元戎”首席架构师讲述华为云Serverless进化的故事
- element中组件el-autocomplete远程搜索之精确匹配和模糊匹配
- 客户订购登记管理系统(数据库)
- ChatGPT 与 MindShow 一分钟搞定一个PPT
- Xilinx Inc.(XLNX)2021年第二季度收益电话抄本