zoukankan      html  css  js  c++  java
  • 巧用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


    固定布局的算法比默认的自动算法要快很多。
  • 相关阅读:
    vue中添加favicon.ico
    SEO 小技巧汇总
    vue中echarts随窗体变化
    vue加载Element ui地址省市区插件-- element-china-area-data
    Echarts 修改折线的颜色和折线的点的大小方法
    vue中添加swiper轮播插件
    Cannot find module 'object-keys' 的解决办法
    适用于所有页面的基础样式base.css
    git clone时的各种报错汇总
    css mix-blend-mode 颜色滤镜混合模式
  • 原文地址:https://www.cnblogs.com/trendline/p/1220974.html
Copyright © 2011-2022 走看看