• 巧用CSS提升表格呈现性能


    虽然现在div+css很流行,也是标准,但该用table的地方还是要用table,非要用div代替而花费的那个时间很不值,也不符合W3C的标准了.
    使用表格布局不符合W3C的标准其中之一就是table不能被方便的随意布局,table的职责用来呈现数据是最理想的,但浏览器对table的解释方式也会成为table在呈现时一个性能上的要点。
    默认浏览器(IE)会在整个表格都被下载后才开始全部呈现表格,以前用“猫”上网的朋友都有这种体验,网速慢的时候页面是一半一半显示的。有没有办法让table一行一行的显示呢?CSS里有一个属性也许可以满足你的要求,使表格一行一行的显示。下面就介绍一下这个属性:

    table-layout
    版本:CSS2  兼容性:IE5+ 继承性:无

    语法:
    table-layout : auto | fixed

    取值:
    auto :  默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
    fixed :  固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100%

    说明:
    设置或检索表格的布局算法。
    你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度:
    1. 使用 col colGroup 对象的宽度( width )属性信息。
    2. 使用表格第一行内的单元格的宽度( width )信息。
    3. 依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
    假如单元格的内容超过了列宽度,内容将会被换行。假如无法换行,则内容会被裁切。假如此属性被设置为 fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
    设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
    设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
    此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
    对应的脚本特性为 tableLayout
     
    示例:
    table { table-layout: fixed; }

    应用于:
    IE5.0+ currentStyleruntimeStylestyleTABLE


    固定布局的算法比默认的自动算法要快很多。
  • 相关阅读:
    删库不跑路!我含泪写下了 MySQL 数据恢复大法…
    构建 Maven 项目卡爆?优化后:1 秒完成…
    面试官:为什么要尽量避免使用 IN 和 NOT IN?大部分人都会答错!
    Kafka 怎么顺序消费?面试必备。。。
    还在 for 循环中 remove 元素?必须劝退……
    好好写简历吧!这简历一看就是包装的。。
    被 P8 大佬面试的 2 小时,面试全过程记录..
    留在一线,逃离一线?我从上海举家回成都的生活经历告诉你。。。
    (原)通过clash在ubuntu下做旁路由
    字符串切割
  • 原文地址:https://www.cnblogs.com/trendline/p/1220974.html
Copyright © 2020-2023  润新知