[Webkit-unassigned] [Bug 43808] New: HTML page using <form> tags with multiple Select lists loads has slow load time

Tue Aug 10 14:18:31 PDT 2010

https://bugs.webkit.org/show_bug.cgi?id=43808

           Summary: HTML page using <form> tags with multiple Select lists
                    loads has slow load time
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows XP
            Status: UNCONFIRMED
          Severity: Critical
          Priority: P1
         Component: Page Loading
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: pjanoski at sicompos.com

Using <form></form> with multiple select lists in an HTML document (selects with 1500 items loaded via javascript) loads slower than without the <form> tags. There is a noticeable increase in page load time (about +10 seconds on a standard Windows PC running XP).

The following listing shows the code with and the <form> tags which cause the increased page load time.

Listing 1: (causes slow page loading)
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body bgcolor="#e5e5e5">
<form>
<select id="sel1"></select>
<select id="sel2"></select>
<select id="sel3"></select>
<select id="sel4"></select>
<select id="sel5"></select>
<select id="sel6"></select>
<select id="sel7"></select>
<select id="sel8"></select>
<select id="sel9"></select>
<select id="sel10"></select>
</form>
<script type="text/javascript">
var str='';
for (var i = 0; i < 1500; i++) {
        str += "<option value=" + i + ">" + "some text goes here " + i + "<\/option>";
}
for (var i = 1; i <= 10; i++) {
        var ele = document.getElementById('sel' + i);
        ele.innerHTML = str;
}
</script>
</body>
</html>

The following listing contains the same code without the <form> tags. This version runs much faster with no noticable degradation:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body bgcolor="#e5e5e5">
<select id="sel1"></select>
<select id="sel2"></select>
<select id="sel3"></select>
<select id="sel4"></select>
<select id="sel5"></select>
<select id="sel6"></select>
<select id="sel7"></select>
<select id="sel8"></select>
<select id="sel9"></select>
<select id="sel10"></select>
<script type="text/javascript">
var str='';
for (var i = 0; i < 1500; i++) {
        str += "<option value=" + i + ">" + "some text goes here " + i + "<\/option>";
}
for (var i = 1; i <= 10; i++) {
        var ele = document.getElementById('sel' + i);
        ele.innerHTML = str;
}
</script>
</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.