1. 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 Lin Department of Computer Science and Information Engineering, National Chung Cheng University, Chiayi, Taiwan 141103 References http://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 1Test 2Test 3 Chrome5482,0644,945 Firefox6031,8842,909 IE2,1596,31710,498 Opera4951,4212,377 1. Direct Appending 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 3731220 Firefox 3241320 IE 962027 Opera 2441325 Scale: 500 Unit: ms Push 1Push 2Push 3 Chrome 3741324 Firefox 3241418 IE 962129 Opera 2441525 Scale: 20,000 接字串 1 接字串 2 接字串 3 Chrome 37125126127 Firefox 32283279296 IE 9435749474532 Opera 24167170175 appended by JQuery 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);