如何编码HTML以在IE中快速呈现 [英] How to code HTML for fast rendering in IE

问题描述

如果HTML足够复杂，则布局和呈现HTML内容可能会花费一些时间.我找不到如何编码HTML的最佳实践，以帮助布局引擎(特别是在IE中)，从而使页面重绘更快.是否存在这样的一组最佳实践?

Layout and rendering of HTML content can take some time if the HTML is complex enough. I couldn't find a set best practices for how to code HTML in order to help the layout engine (specially in IE) so that page redraws are faster. Does such a set of best practices exist?

我当前的特定问题是我的表格数据(在表格元素中)导致绘制页面的速度太慢，并使DOM更新(悬停效果)和动画非常缓慢.我确定这不是JavaScript的性能.我已经使用dynaTrace AJAX检查了页面.当我将鼠标悬停在元素上时，CPU变得太忙，但是没有JS在运行.悬停是通过向TR元素添加/删除类来实现的.我也在Firefox中尝试过YSlow，它没有显示任何特定问题.它也不与网络有关. (Firefox布局页面更快，但这不是因为它的JS引擎更快)

My current specific problem is that my tabular data (in a table element) that causes drawing the page too slow, and making DOM updates (hover effects) and animations very sluggish. I'm sure it's not JavaScript performance. I've checked the page using dynaTrace AJAX. The CPU becomes too busy when I hover my mouse over elements, but there's no JS running. And the hover is realized by adding/removing a class to TR elements. I've also tried YSlow in Firefox, it doesn't show any particular issue. It's not network-related either. (Firefox lays out the page faster, but it's not because of its JS engine being faster)

在IE中是否有用于配置文件绘图和布局的工具，这样我就可以找出问题出在哪里?是什么导致绘制如此缓慢，以至于我可以在HTML代码中避免它们出现?

Is there a tool to profile drawing and layout in IE, so that I can find out where the problem is coming from? And what can cause the drawing to be so slow, so that I can avoid them in HTML code?

推荐答案

众所周知，Internet Explorer渲染大型HTML表的速度很慢.

Internet Explorer is known to be slow with rendering large HTML tables.

请参阅MSDN上的这篇不错的文章:构建高级性能HTML页面，尤其是关于表格的部分:

Refer to this nice article on MSDN: Building High Performance HTML Pages and specifically to the section about tables:

• 将表格布局CSS属性设置为固定在表格上.
• 为每列明确定义col对象.
• 在每个列上设置WIDTH属性.

• Set the table-layout CSS attribute to fixed on the table.
• Explicitly define col objects for each column.
• Set the WIDTH attribute on each col.

然后在ieblog上还有一个关于表渲染的不错的博客文章:表格渲染.

Then there is also a nice blog post on the ieblog about table rendering: Table Rendering.

可以归结为:尝试使表格中的内容不太复杂，即设置固定宽度，并且不要进行过多的动态渲染操作. IE首先加载内容，然后必须为内容==慢速计算正确的宽度.

It comes down to this: Try to make the content within the tables less complex, i.e. set fixed width and don't have too much dynamic rendering action going on. IE first loads the content and then has to calculate the correct width for the contents == slow.

这篇关于如何编码HTML以在IE中快速呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！