Introduction The performance of web is getting important due to the fact that more and more services...
-
Upload
claud-francis -
Category
Documents
-
view
213 -
download
0
Transcript of Introduction The performance of web is getting important due to the fact that more and more services...
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);