The performance problem of Easyui:datagrid under IE

Phenomenon: Easyui the DataGrid component in IE poor performance, such as loading 1000 data will take 10 seconds, loading 10,000 data can cause the browser to crash, the reason is that the DataGrid mainly use the jquery HTML () method to render, And this method has some performance flaws, the following on the advantages and disadvantages of HTML () and innerHTML do a bit of analysis:

Advantages of the innerHTML property

• innerHTML is the industry standard developed by the world, almost all browsers have done support;
• As a native support, the implementation efficiency of innerHTML in the mainstream browser is very high;

Disadvantages of the innerHTML property

Although each browser has implemented the innerHTML, but the behavior of the innerHTML under each browser is different, the more alternative when the Ie,ie version of the performance is not the same, which led to innerHTML under IE, with a lot of inconvenient place:

IE6-IE8 handling HTML5 Label and attribute issues

The HTML5 property and label are ignored when the Ie6,ie7,ie8 browser sets the innerHTML property . IE6-IE8 not do not support HTML5? What is the point of setting the HTML5 tag in these versions of IE? The answer is simple, even if you do not support some of the effects of HTML5, at least let the overall layout of the Web page display properly. Solution Online has a lot of information, there are ready-made script plug-ins to solve this problem, the main idea is to use the Document.createelement method to create a HTML5 in the label, createelement interface can accept any label.

ie6-ie7 handling href and src attribute issues

In standard mode, the Href,src attribute is automatically converted to absolute pathwhen the innerHTML property is set , and almost all IE versions are ie6,ie7 to absolute path in the odd mode of IE (Quirks).

Advantages of the HTML () function

Look at the shortcomings of the innerHTML property, we know the advantages of the HTML () function in jquery, it is compatible with all browsing, there is no problem that the HTML5 tag does not support, there is no problem that the HREF,SRC attribute is converted, there is no problem that some tags cannot set HTML strings. In short, it is a sentence, with it basically everything without worry, at least the implementation of the function is so.

Disadvantages of the HTML () function

It seems that jquery's HTML () function seems perfectly limitless, but it doesn't, it's perfect only for its functionality, it's compatible with all browsers, including IE. But it is also ie, although compatible, performance is not optimistic, if you use the HTML () function to set the large amount of data HTML string, it will be a disaster.

Under IE, how low is the performance of the HTML () function? The computer is configured as "i5 four core, 8G memory, IE9", testing the table with the HTML () function to set 2000 rows 4 columns, which takes up to 27 seconds on average! Specifically what causes the HTML () in IE so slow, the personal glance at the source code, think that the use of Try mode is one of the main reasons.

Solution: Take EasyUI-1.4.3 as an example, in line 10302, put

$ (_77c). HTML (this.rendertable (_77b,0,rows,_77d));

$ (_77c) [0].innerhtml = This.rendertable (_77b,0,rows,_77d);

The performance problem of Easyui:datagrid under IE