Home >Web Front-end >JS Tutorial >Tips on improving code performance—taking creating a thousand-row table as an example_javascript tips

Tips on improving code performance—taking creating a thousand-row table as an example_javascript tips

WBOYOriginal: 2016-05-16 19:28:36996browse

微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。经过多年发展，业界对于如何优化Win32程序性能已经有非常多的了解。

现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢。当然，有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能，希望它们能帮助你改善自己的页面性能。

这里我使用了一个建立Table的程序例子。其中用document.createElement()和element.insertBefore()方法创建了1000行(Row)的表(Table)。每行有一列(Cell)。Cell中包含的内容称为"Text"。这段代码能有多糟呢？这么小的程序又能有多大调整余地呢？请看介绍。

一开始我写了一段自认为会很快的程序，我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScript和Javascript。程序如下：

在PII233/64MB内存/NT4.0/IE5.0的机器上运行这段程序。页面从本机上装载。从开始装载页面到页面完全安静下来（所有的事件均已经运行，屏幕显示完成）的时间为2328毫秒，这也是本次测试的基线（我称之为Test1）。

这个页面中，一个很耗时的操作是频繁引用全局对象，如“document”、“body”、“window”等。引用所有这些类似的全局变量远比引用一个本地变量代价高昂。

因此我作了第一次改进尝试：缓存（Cache）document.body 到本地变量“theBody”中：

增加了如下代码:

var theBody = document.body;
然后修改这一行:

document.body.insertBefore(tbl, null);
将之改为:

theBody.insertBefore(tbl, null);
View the second sample.

这次修改并没有太大影响到整体时间，它只缩短了3 ms。但它已经表明，如果在循环中也有document.body对象而对其引用做出修改，带来的好处将是可观的。

随后，我缓存了document对象----在我们这个测试中，document对象共被引用了3002次。修改后代码如下：

此次运行时间只有2100ms，节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。

一个常用的优化性能的方法是：当脚本不需要立即运行时，在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后，IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说，这也表明立即脚本最好放在function块中，并在document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮，或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行，使用defer属性得到的好处就不太大。 下面是使用了defer属性修改后的代码版本: <html> <body onload="init()"> <script defer> function init() { var tbl, tbody, tr, td, text, i, max; max = 1000; var theDoc = document; var theBody = theDoc.body; tbl = theDoc.createElement("TABLE"); tbl.border = "1"; tbody = theDoc.createElement("TBODY"); tbl.insertBefore(tbody, null) ; theBody.insertBefore(tbl, null); for (i=0; i<max; i ) { tr = theDoc.createElement("TR"); td = theDoc. createElement("TD"); text = theDoc.createTextNode("Text"); td.insertBefore(text, null); tr.insertBefore(td, null); tbody. insertBefore(tr, null); } } </script>

View the fourth sample.

The time of this test is 2043 ms. This is an increase of 12% relative to the baseline test and 2.5% higher than the previous test.

An improvement method we talk about below is very useful, but of course it is a little more troublesome. When you need to create an element and then insert it into a tree-like structure, it is more efficient to insert it directly into the trunk--rather than first inserting it into a large subtree and then inserting the large subtree into the trunk. For example, if you create a table with one column per row and some text in the column, you can do this:

1. Create

2. Create

3. Create TextNode node

4. Insert TextNode into

5. Insert into

6. Insert into TBODY

When it is slower than the following method:

1. Create

2. Create

3. Create TextNode

4. Insert into TBODY

5. Insert into

6. Insert TextNode into

The four tests above all used the former method. We used the latter method for the fifth test. The code is as follows:

View the fifth sample.

Test5 only takes 1649ms. This is a 25% improvement over the last test and almost 30% faster than the baseline.

Subsequent modifications were made using pre-made stylesheets. The column width of a table using a pre-made style sheet or set through the tag. Without the tag, the width of each column is evenly distributed. Because there is no need to recalculate the size for each column, etc., using a style sheet actually improves performance, especially when the number of columns in the table is large.

The code to add a style sheet (CSS) is very simple, as follows:

tbl.style.tableLayout = "fixed";
View the sixth sample.

Because the table in our test only had one column, this change only improved page performance by 1.6%. If there are more columns, the performance increase will be even greater.

The last two tests changed the way text is inserted into tables. In the previous tests, we first created a TextNode and then inserted it into the TD. In Test7, instead, we specify the included text via innerText. The modified code is:

td.innerText = "Text";
View the seventh sample.

Surprisingly, the difference made by this modification is huge - a 9% performance improvement over the last time, and a total of 36% performance improvement over the original. The time ranges from the first 2323ms to the last 1473ms.

Now, almost everyone knows that using element.innerHTML is very slow. To see how slow it is, I did one last test: use innerHTML instead of innerText to insert text. This greatly reduces performance. The time reached 3375ms, which was 80% slower than the last test and 45% slower than the baseline test. Obviously, innerHTML is very time consuming.

Tuning HTML page performance is similar to tuning Win32 application performance; you need to know what is slow and what is fast. I hope these methods can help you improve page performance.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A dialog pops up on the page and I want to get the value of the child page from the parent page. What should I do?Next article：A dialog pops up on the page and I want to get the value of the child page from the parent page. What should I do?

See more

Tips on improving code performance—taking creating a thousand-row table as an example_javascript tips

Related articles