巧用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以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度：

使用 col 或 colGroup 对象的宽度( width )属性信息。
使用表格第一行内的单元格的宽度( width )信息。
依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。

假如单元格的内容超过了列宽度，内容将会被换行。假如无法换行，则内容会被裁切。假如此属性被设置为 fixed ，则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了，那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。

示例：

table { table-layout: fixed; }

应用于：

IE5.0+

currentStyleruntimeStylestyleTABLE

固定布局的算法比默认的自动算法要快很多。

巧用CSS提升表格呈现性能相关推荐

HTML+CSS提升小实战
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...
如何让你的Nginx 提升10倍性能？
来源:www.zcfy.cc/article/10-tips-for-10x-application-performance-nginx-22.html 原文:https://www.nginx.co ...
如何提升深度学习性能？数据、算法、模型一个都不能少
https://www.toutiao.com/i6635808175893250564/ 2018-12-17 12:04:48 该文来自DataCastle数据城堡(DataCastle2016) ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
提升HTML5的性能体验系列之一避免切页白屏
提升HTML5的性能体验系列之一避免切页白屏白屏切换页面性能转场提升HTML5的性能体验系列文章目录导航: - [提升HTML5的性能体验系列之一避免切页白屏] - 提升HTML5的性能 ...
易拓大咖说｜巧妙使用样式设置，提高 SAP 分析云表格的性能
表格样式能够帮助表格更系统.清晰得呈现数据之间的关系,还能令版式更加美观,不再呆板.那么,SAP 分析云表格样式是否会影响表格性能呢?今天,就通过这一篇文章,和大家分享一些表格样式的使用技巧. 技巧 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
html中设置表格单实线,css实现表格实线的方法
css实现表格实线的方法发布时间:2020-08-21 14:46:18 来源:亿速云阅读:147 作者:小新这篇文章主要介绍了css实现表格实线的方法,具有一定借鉴价值,需要的朋友可以参考下. ...

巧用CSS提升表格呈现性能

巧用CSS提升表格呈现性能相关推荐

最新文章

热门文章