Introduction

The performance of web is getting important due to the fact

that more and more services have been presented by web

interfaces recently. Our experiments demonstrated some

common used implementations, for example, we often

modify HTML contents by JavaScript, and their cost of

time.

Materials and methods

• HTTP requests optimization

Programmers can put inline JavaScript at the bottom of a

page so that browsers would send HTTP requests before

parsing and executing JavaScript. Also, we should always

write CSS styles and JavaScript codes in individual files

such that browsers would be able to cache them.

• Manipulating contents with JavaScript

The most common manipulation would be appending text

or HTML codes to nodes of pages. We experimented on

four methods including “direct appending”, “buffered

appending with ‘+’ operator of string”, “buffered

appending with push and join method of Array”, and

“buffered appending by JQuery selector”.

• Animation

At present, we may make objects animate by the transition

property of CSS3 or the animate method of JQuery.

Acknowledgments

Most data of this poster was extracted from James’s report

of meeting. Thanks for his previous contribution.

Results

We reinstalled all browsers and disabled add-ons before our

experiments. We had four methods of manipulating contents

with JavaScript executed on Google Chrome 37, Mozilla

Firefox 32, Microsoft IE 9, and Opera 24. The experimental

results were shown below:

Conclusions

Direct appending is trivially the worst method of modifying

HTML codes. Methods with buffered are always better;

however, to tell which one is better than the others is quite

difficult.

The longer contents the original node has, the much time

browsers take to append strings. Implementation using

JQuery shows that its performance does not depend on the

scale of text to append. This phenomenon allows front-end

programmers to estimate executing time of JavaScript codes.

Comparison of methods affecting front-end performance between browsers

James Wun, Danny LinDepartment of Computer Science and Information Engineering, National Chung Cheng University, Chiayi, Taiwan 141103

Referenceshttp://css3.bradshawenterprises.com/

http://sixrevisions.com/web-development/10-ways-to-

improve-your-web-page-performance/

http://blog.monitis.com/2011/05/15/30-tips-to-improve-

javascript-performance/

http://www.javascriptkit.com/javatutors/efficientjs.shtml

　 Scale: 500 Unit: ms 　　 Test 1 Test 2 Test 3

Chrome 548 2,064 4,945Firefox 603 1,884 2,909

IE 2,159 6,317 10,498Opera 495 1,421 2,377

1. Direct Appending

Chrome 37

Firefox 32

IE 9

Opera 24

0 2000 4000 6000 8000 10000 12000

Cache Variable 系列 (ms)

笨方法 3 笨方法 2 笨方法 1

2. Buffered Appending with ‘+’ Operator of String

3. Buffered Appending with Push and Join Method of Array

4. Buffered Appending by JQuery Selector

　 Scale: 500 Unit: ms 　　 ‘+’ opt 1 ‘+’ opt 2 ‘+’ opt 3

Chrome 37 3 12 20Firefox 32 4 13 20

IE 9 6 20 27Opera 24 4 13 25

　 Scale: 500 Unit: ms 　　 Push 1 Push 2 Push 3

Chrome 37 4 13 24Firefox 32 4 14 18

IE 9 6 21 29Opera 24 4 15 25

　 Scale: 20,000 　　 接字串 1 接字串 2 接字串 3

Chrome 37 125 126 127Firefox 32 283 279 296

IE 9 4357 4947 4532Opera 24 167 170 175

appended by JQuery

Chrome 37

Firefox 32

IE 9

Opera 24

0 5 10 15 20 25 30

接字串系列 (ms)

接字串 3 接字串 2 接字串 1

Chrome 37

Firefox 32

IE 9

Opera 24

0 5 10 15 20 25 30 35

Push 系列 (ms)

Push 3 Push 2 Push 1

Chrome 37

Firefox 32

IE 9

Opera 24

0 1000 2000 3000 4000 5000 6000

接字串 & Appended by Jquery (ms)

接字串 3 接字串 2 接字串 1

var content = document.getElementById(‘content’);

while(xxxxxx){content.innerHTML +=

“Something”+apple+”banana”+orange;}

var toAppend = “”;var content = document.getElementById(‘content’);while(xxxxxx){

toAppend += “Something”+apple+”banana”+orange;}content.innerHTML += toAppend;

var toAppend = new Array();var content = document.getElementById(‘content’);while(xxxxxx){

toAppend.push(“Something” );toAppend.push(apple);toAppend.push(”banana” );toAppend.push(orange);

}content.innerHTML += toAppend.join(“”);

var toAppend = “”;var content = document.getElementById(‘content’);while(xxxxxx){

toAppend += “Something”+apple+”banana”+orange;}$(“#content”).append(toAppend);