为什么说移动一个元素用Translate()比Pos:abs Top/Left好？

最新推荐文章于 2024-08-18 16:52:28 发布
最新推荐文章于 2024-08-18 16:52:28 发布
阅读量4.2k 收藏 2
点赞数 4
分类专栏： css 文章标签： css 优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010552788/article/details/52186108
版权
使用Translate()移动元素而非Pos:abs Top/Left在性能上有优势，特别是在动画场景下。Translate()允许元素在sub-pixels位置平滑过渡，而不会像绝对定位那样受限于像素。Chrome中，使用Translate的元素能在GPU图层中得到加速，提高FPS，减少绘制时间和提高动画流畅性。了解并利用CSS变换和图层来优化网页性能是关键。
摘要由CSDN通过智能技术生成

为什么说移动一个元素用Translate()比Pos:abs Top/Left好？

整理来自：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Distraction: Pixel snapping
1. Animating with Top/Left：
http://codepen.io/paulirish/pen/nkwKs
2. Animating with Translate
http://codepen.io/paulirish/pen/LsxyF
image

运行以上两个示例，你会发现Top/left中的macbook顶部边缘部分看起来比第二个示例中的更加清晰。这是因为绝对定位的macbook是忠于像素的定位，但是translate()可以填充在sub-pixels位置。（原文：So this is due to the absolute positioned macbook s

最低0.47元/天 解锁文章
Kou_Hi
关注
专栏目录
Qt/QML编程之路：基于QWidget编程及各种2D/3D/PIC绘制的示例(45)
码农17年的博客
03-11 253
关于使用GWidget，这里有一个示例，看了之后很多图形绘制，控件使用，及最基本的QWidget编程都比较清楚了。工程中有非常丰富的关于各种图形的绘制，比如上图中circle，还有image。
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端兼容H5网站、支付宝/微信小程序、安卓App、苹果App、nvue
王佳斌
11-08 5192
uniapp，H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue，裁剪，官方图片上传裁剪并上传到后端组件，uni-app实现简单易用的头像裁剪上传组件，uniapp头像美化图片组件，uniapp如何实现图片上传后裁剪功能，裁剪图片，裁剪头像，uniapp头像裁剪带上传功能的组件，头像上传裁切剪切组件，uni-app实现图片的上传和裁剪，uni-app使用图片裁剪插件，uniApp实现选择图片裁剪设置用户头像，vue uni-app 裁剪图片(裁剪头像)插件，uni-app实现上传图片裁剪效果
前端动画性能比较（js动画{ translate vs left/top } vs css动画）
iamlujingtao的博客
10-10 1585
前言 js动画{ translate vs left/top } js动画vs css动画
Qt动画的简单使用（QPropertyAnimation，含源码和注释）
lw的博客
03-23 1万+
一、Qt动画示例图（移动、缩放、不透明度） 下图为使用不同属性实现的效果（源码在本文第四节） 二、什么是Qt动画 QPropertyAnimation是Qt自带的动画类，该类可以实现简单的控件动画效果，比如对控件的移动、缩放、不透明度这些来做动画效果（使用某效果之前需要使用setPropertyName函数指定需要的动画属性名，以下三个是Qt已经定义好的）。 移动（pos）：主要实现移动效果，如从某个点移动到另一个点，所使用的变量类型为QPoint等。 缩放（geometry）：可实现缩放和移动效果，该
计算机毕业设计推荐-基于Java的在线考试系统
最新发布
weixin_72790115的博客
08-18 871
随着信息技术的飞速发展，教育领域也在经历着一场深刻的变革。传统的面对面教学模式正逐渐向线上教学转变，以适应现代社会对教育资源高效利用的需求。在线考试系统作为教育信息化的重要组成部分，能够为学生提供便捷的在线学习和测试平台，极大地提高了教学效率和质量。然而，现有的在线考试系统多存在功能单一、用户体验不佳等问题，无法满足日益增长的个性化和智能化教学需求。
关于left,top和translate2d以及translate3d性能问题的详讲
南宫的CG世界
05-30 1390
left和top的性能高还是translate2d的性能高？听说translate3d的性能最高？
关于left,translationX,X
村口老张头的专栏
08-27 2444
关于left,translationX,X
浅谈translate属性与相对定位、绝对定位的区别
筱葭的博客
05-08 1万+
水平垂直居中的实现方式有多种，请见：http://blog.csdn.net/zhouziyu2011/article/details/53514416 在支持 CSS3 属性的现代浏览器当中，可以利用CSS3的translate属性实现水平垂直居中。 尤其是当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-heig
transformer详解：transformer/ universal transformer/ transformer-XL
彼得.攀的blog
10-08 1908
首发自彼得攀的小站 特别鸣谢刘陆琛@Mayouji在本文写作过程中的帮助 Attention机制在NLP领域的应用最早可以追朔到2014年，Bengio团队将Attention引入NMT(神经机器翻译)任务 [1]。之后更是在深度学习的各个领域得到了广泛应用：如CV中用于捕捉图像上的感受野；NLP中定位关键token/feature. 作为某种程度上可以称为当下NLP领域最强的特征抽取器的tran...
hive读书笔记
胡家伟的博客
12-27 1117
文章目录hive clihive执行日志的位置指定主动使用本地模式指定数据仓库目录hive查看和使用自定义及系统属性数据类型默认字段分隔符sqldatabasetable指定分隔符分区表修改表数据操作装载数据静态分区和动态分区从查询结果创建表导出数据数据查询查询是用正则表达式rlike排序order,sort的区别cast 强制转换数据抽样,分桶视图区别索引调优explainjoin优化本地模式并...
用 top left 定位和 transform 的区别
pky@
07-24 4260
链接：https://www.zhihu.com/question/334077465/answer/759985633 来源：知乎 最首要的区别是元素位置： 使用 top left 定位是直接改变元素真实位置的，简单来说你 top: 5px 那就真的是离父容器上端 5px 或者偏离顶部定位 5px（这里我们不讨论 position 各种定位的破事） 但是你用 transform: transla...
用 transform: translateX()； 来替换 left的好处
weixin_45352819的博客
11-03 6013
用 transform: translateX(); 来替换 left 来实现位移有什么好处？ 不会使页面造成重绘或者回流，当动画修改一个元素的 left 和 top会改变它的形状，而且可能引起页面上其它元素的移动和形状改变，会引起页面的重绘和回流 什么是重绘和回流？ 重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
translate和left
ywb201314的专栏
11-01 1601
1. translate 产生的位移始终是相对于元素最初位置，而left是相对于元素当前位置。 因为translate和left产生的位移可以叠加，而两次translate产生的位移只会以最后一次为准，两次left产生的位移也只会以最后一次为准。 2.translate和left产生的位移互不影响，不会因为translate的位移设置为0，而影响left的位移，反之亦然。 3
使用合适的CSS优化界面：translate和top/left的比较
michael8512的博客
07-21 3557
Guidelines for translate top/left花了大量的时间去绘制每一帧。所有的css包括好性的box-shdow，都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅
菜菜菜菜鸟の成长记
03-13 1万+
前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使用canvas标签做图片滤镜效果，chrome浏览器居然显示不了滤镜效果，然而其他浏览器均能正常显示，大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么.
利用translate()进行水平垂直居中
热门推荐
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
深入理解为什么应该使用transform来替代top
花神的博客
05-19 8087
在进行页面性能优化的时候，经常被告诫要使用transform替代top来实现动画，这样性能会更好，作为一名有追求的前端，不仅需要知其然还要知其所以然，今天就通过chrome的performance工具来直观展示其中的原因。 源码: &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;zh&amp;amp;quot;&amp;amp;amp
=FILTERXML(WEBSERVICE(“http://fanyi.youdao.com//translate?&i=”&A1&"&doctype=xml&version"),"//translation") 帮我解释一下这个代码
06-08
这是一个Excel公式，用于从有道翻译API获取翻译结果。解释如下： - WEBSERVICE：Excel函数，用于从指定URL获取数据。 - “http://fanyi.youdao.com//translate?&i=”&A1&"&doctype=xml&version"：有道翻译API的请求URL，其中A1是当前单元格的值，表示要翻译的文本。 - FILTERXML：Excel函数，用于从XML格式的数据中提取指定的节点或属性值。 - "//translation"：XPath语法，表示要提取XML数据中的所有名为translation的节点。 综上，这个公式的作用是从有道翻译API获取翻译结果，然后提取所有翻译结果节点的内容，返回一个包含所有翻译结果的数组。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值