zoukankan      html  css  js  c++  java
  • 浮动和绝对定位对页面渲染速度的影响

    (先说点题外话:在一般情况下,这两种布局方式的实际渲染性能差异是可以忽略的。毕竟在实际开发中,人力——或者说“开发效率”——才是真正的瓶颈,页面的“渲染效率”与之相比完全不值一提。所以不需要因为过多考虑此类问题而犹豫不决。)

    回到问题本身。由于绝对定位(以及相对定位和固定定位)会创建新的布局空间,并且通常会创建新的堆叠空间,我曾以为定位会比浮动更加耗资源。但实事上,由于定位的布局规则要远远比浮动简单(浮动可以说是 CSS 布局中最难的部分),浏览器在处理定位时理加轻松。

    一方面,浮动的种种复杂的布局规则注定了它是一种试探性局部 reflow 式的布局算法。浏览器需要花费很多精力来处理它。

    另一方面,浮动元素的布局牵涉到的因素更多。在同一布局空间中,所有浮动元素均存在于“静态层”之上的“浮动层”,不仅浮动层中的多个浮动元素会相互影响,浮动元素与静态层也有互动。而每个绝对定位元素均独占一个“定位层”,定位层凌驾于静态层和浮动层之上,并且与其它“层”没有互动,浏览器很容易管理它。

    因此,浏览器更容易计算绝对定位元素的布局,在渲染时也更容易优化。(这或许也可以解释为什么 IE6 的 CSS 布局 bug 大多与浮动相关。)

    注:我没有详细查阅规范,这个答案的部分内容可能不够严谨,部分概念也是基于我自己的理解和总结。所以大家包涵,大体上明白意思就行。

  • 相关阅读:
    asp.net的decimal保留两位小数
    由于管理员设置的策略,该磁盘处于脱机状态-Win 2008 R2
    论大公司的通病和缺点
    sql server删除数据后空间无变化处理方法
    sql server压缩数据库和日志文件
    SQL千万级数据设计和优化
    SQL Server索引怎么用
    在电脑上测试手机网站
    asp.net实现GZip压缩和GZip解压
    WebService教程和分析
  • 原文地址:https://www.cnblogs.com/hbyzs/p/4463505.html
Copyright © 2011-2022 走看看