Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

static、absolute、relative 三种定位方式的渲染效率

  研究这个问题,我们要创建100000个元素。创建完元素之后,我们滚动鼠标滚轮,看看每次触发的paint使用的时间。
  首先,是默认的静态定位(position:static) <div id="panel"></div>
<script>
var i=0,l=1E5,s="";
for(i=0;i<l;i++)s+="<div>"+i+"</div>";
document.getElementById("panel").innerHTML=s;
</script>


  接着是绝对定位(position:absolute) <style>
div {position:absolute;}
</style>
<div id="panel"></div>
<script>
var i=0,l=1E5,s="";
for(i=0;i<l;i++)
  s+="<div style=\"top:"+i*20+"px\">"+i+"</div>";
document.getElementById("panel").innerHTML=s;
</script>


  最后是相对定位(position:relative) <style>
div {position:relative;}
</style>
<div id="panel"></div>
<script>
var i=0,l=1E5,s="";
for(i=0;i<l;i++)s+="<div>"+i+"</div>";
document.getElementById("panel").innerHTML=s;
</script>

  以上这些数据是在Chrome上做的测试,显然静态定位也就是默认定位的渲染效率是最高的。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^