月度归档:2018年03月

HTML表格的加载优化

在HTML设计数据展示的时候会经常使用到HTML表格来展示数据,但是如果数据量过大,就导致表格显示慢,因为在HTML中,表格的显示是需要等待内部所有数据都加载完毕才会显示整个表格,这样对用户体验很不好,比如下面这样:

<table border="10px" width="500px">
            <caption>test</caption>
            <tr>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
            </tr>
            <tr>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
            </tr>
            <tr>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
            </tr>
        </table>

在html中,有三种标记专门针对html表格进行优化结构化,而不虚要向上面的表格那样需要等待全部数据加载完毕后才能显示表格,而结构化的好处就是当表格加载完一部分就显示完一部分,这三个表示表格结构化的标签为:

继续阅读