html - iPhone 上的渲染速度非常慢，我应该将表格转换为 div 吗？

Question

我在我们的移动网站上运行了一些非常重的表格，事实上它们太重了，以至于我的 iphone7 在我可以开始上下滚动之前完全死机长达 20 秒(safari 浏览器，chrome 只有 10 秒)。

表格的样式相当繁重，该页面包含 8-12 个表格，每个表格有 5 到 50 行。

我的问题是，如果我重新编写页面以在所有地方使用 DIV 而不是表格，它会提高渲染性能吗？或者我只是在浪费时间？

非常欢迎经验丰富的开发人员提出任何建议。

来自其中一个表的代码(它们几乎都遵循相同的代码标准):

<!--Invoice Table-->
<table border="0" cellspacing="0" cellpadding="0" class="start-table start-invoice-table start-invoice-hover" ng-if="vm.invoice.length > 0">
<thead>
    <tr class="start-header start-bold start-invoice-bg">
        <th colspan="6" class="start-padding overflow start-left">
            Invoices to be paid by costumer
        </th>
    </tr>
    <tr class="start-header start-head start-invoice-bg">
        <th class="start-left nowrap" style="min-width:66px;">Property</th>
        <th class="start-left overflow" style="width:30%">Tenant/Agent</th>
        <th class="start-left overflow" style="width:25%">Text</th>
        <th class="start-right overflow" style="width:10%">Day</th>
        <th class="start-right overflow" style="width:10%">Paid</th>
        <th class="start-right overflow" style="width:15%">Amount</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="invoices in vm.invoice | orderBy:'days'" class="start-text" ui-sref="book({id: invoices.booking, property: 'INVOICE', checkin: invoices._id })">
        <td class="start-left start-border nowrap">
            <span class="chan chan-{{ invoices.source }}">{{ invoices.source }}</span>&nbsp;{{ invoices.property }}
        </td>
        <td class="start-left start-border overflow">
            <img ng-src="{{ vm.validateFlag(invoices.country) }}.png" class="start-flag">
            {{ invoices.name }}
            <span ng-if="invoices.agency && invoices.name.length < 15"> / {{invoices.agency}}</span>
        </td>
        <td class="start-left start-border overflow">{{ invoices.lineText }}</td>
        <td class="start-right start-border overflow start-bold">
            <span ng-class="(invoices.days) > -1 ? 'greennum' : 'rednum'"><b>{{invoices.days}}</b></span>
        </td>
        <td class="start-right start-border overflow">{{ invoices.receiptTotal | number }}</td>
        <td class="start-right start-border overflow"><b>{{ invoices.invoiceTotal | number }}</b></td>
    </tr>
</tbody>
</table>

Answer 1

有时，您可以通过将表格的 CSS 属性“table-layout”设置为“fixed”来加快表格的渲染速度。 然后浏览器将使用表格的第一行来计算其所有列的宽度。所以一定要在标题的 CSS 中指定第一行的列宽。

因为不需要重新计算，所以有时这会加快表格的呈现速度，因为浏览器可以逐步呈现每一行。

然而，这会破坏渲染的动态特性，并且在某些其他设备上可能看起来很难看。所以你可能需要为不同的设备使用不同的 CSS ...

我最初是从 Website for Internet Explorer 学到的