HTML/CSS/JavaScript 1,a) 1 1 Web Web JPEG MP3 Web HTML CSS JavaScript Web Web JavaScript Web Web JavaScript 1. Web Web Web HTML CSS Ihm Pai [1] JavaScript Web 50% Web 20% Ajax HTML5 JavaScript png jpeg/gif mp4/flv/ogg mp3 Web Web Web Web Web *1 10 Web Google Facebook 1 Presently with Graduate School of System Infomatics, Kobe Yahoo Wikipedia Amazon University a) shinsuke@cs.kobe-u.ac.jp *1 http://www.alexa.com/topsites c 2015 Information Processing Society of Japan 170
[2][3] 2.1 Web 1 var s=0;for(var i=0;i<=10;i++){s+=i}alert(s) Web sum s Web 102 44 57% JavaScript [4] Web 1 var a = void 0; // var a = undefined; 2 var b =!1; // var b = false; 2. Web HTML CSS HTML XML 2.1 2.6 6 id class CSS [5] 2.1 CSS [2][3] Web 1 # container { 1 10 2 margin: 0px 0px 0px 0px; 3 color: #EEEEEE; JavaScript 4 font-style: italic; 1 // initialization 2 var sum = 0; 3 // summation 4 for (var i = 0; i <= 10; i++) { 5 6 7 } font-size: 1.2 em; font-family: Arial, sans-serif; 5 sum += i; 6 } 7 // output 8 alert(sum); 3 color: #EEE; 4 5 } font: italic 1.2em Arial, sans-serif; 1 var sum=0;for(var i=0;i<=10;i++){sum+=i;} alert(sum); 3 var c = {}; // var c = new Object(); 4 var d = []; // var d = new Array(); 1 # container { 2 margin: 0; 2.3 102 52 50% JavaScript HTML CSS 2.1 2.2 1 alert(55) c 2015 Information Processing Society of Japan 171
1 Web Table 1 Comparison of size optimization techniques for text-based web resources. HTML CSS JavaScript n/a n/a n/a * 1 n/a * 1 HTTP * 2 * 2 * 2 *1 HTML/CSS JavaScript HTML/CSS *2 HTTP for decode 5 55 a JS comprd a 6 eval() JS raw jquery JavaScript *.min.js CDN for if 2.4 LZW decode() [6] (1) JS raw JS comprd (2) decode() JS comprd JavaScript HTML HTML/CSS JavaScript JavaScript (3) HTTP JavaScript Web (4) decode(js comprd ) JS raw 2.1 2.5.js.css Web JavaScript HTTP 1 var decode = function(a) { 2 var d =...; // huffman decoding 3 return d; 4 } 5 var a= 1 B1b1e1f2J2Y1c3K3_1I1X1[1]3 V3a1Y2R2S 1 P1S1T3O3P1Q2[2 g1l1m3f3h1j3z3e1e1f3]3^1 C2h3 Y181;1 >3 1 <2 Z3X19242U163S142f3W ; 6 eval(decode(a)); 5 HTML CSS 4 JavaScript HTML 1 <script src="jquery.min.js"> 2 <script src="jquery-ui.min.js"> 3 <script src="jquery-mobile.min.js"> 4 <script src="application.js"> c 2015 Information Processing Society of Japan 172
unified.js 1 <script src="unified.js"> Web Web HTTP 2.6 HTTP HTTP/1.1 HTTP [7][8] HTTP Web HTTP gzip deflate HTTP Accept-Encoding HTTP 1 GET /index.html HTTP/1.1 2 Host: example.com 3 Acccept-Encoding: gzip gzip YUI Compressor[9] Web gzip jquery: ver. 2.1.1 prototype.js: ver. 1.7.2 gzip backbone.js: ver.1.1.2 2 1 HTTP/1.1 200 OK YUI HTTP 2 Content-Type: text/html; charset=utf-8 3 Content-Encoding: gzip HTTP gzip deflate Web Apache HTTP server IIS Nginx jquery Web YUI Compressor 47% HTTP HTTP 70% Web 85% HTTP Web *.min.js / CDN HTTP 2.7 6 2.1 2.6 1 3. 3 JavaScript 3 HTTP 4. HTTP c 2015 Information Processing Society of Japan 173
2 JavaScript Table 2 Effects of size optimization for popular JavaScript libraries lib YUI * 1 HTTP jquery 241.6 KB 128.2 KB 72.9 KB 37.0 KB (47%) (70%) (85%) prototype 193.1 KB 102.3 KB 45.3 KB 33.0 KB (47%) (77%) (83%) backbone.js 59.6 KB 19.7 KB 17.3 KB 6.9 KB (67%) (71%) (88%) *1 YUI Compressor deploy make client server developer 4.1 http:// / index.html Web redirect automatic & continuous YUI Compressor[9]: JavaScript optimization http:// / redirect 2.1 2.2 index.raw.html index.html (optimized) 1 Closure Compiler[10]: Google Fig. 1 Processing flow of size optimization plugin 2.1 2.3 index.html (non-optimized) 2.3 alert(55) 1: 2: Web 1 Web packer[6]: JavaScript.htaccess 2.4.optimization Base62 Base64 + Web 2 4.2 4.1 / URL Web index.html Web Web index.min.html Web 1 2 1 Web plugin.optimize (config file) c 2015 Information Processing Society of Japan 174
1 http://.../index.html Web 6 URI http://.../index.raw.html index.html 2 Web Web *.raw.html *.raw.js.optimization 5. 6. 5.1 Google Google [11] B 26280115 15H02701 B 26730155 Android Chrome 15K12020 Google Google 2 [1] Ihm, S. and Pai, V. S.: Towards Understanding Modern Web Traffic, Internet Measurement Conference, pp. 295 312 (2011). [2] Souders, S.: High Performance Web Sites -Essential Google Knowledge for Front-End Engineers-, O reilly (2007). Web [3] Frederick, G. and Lal, R.: Optimizing Mobile Markup, pp. 213 238, Apress (2009). [4] SitePoint: 19+ JavaScript Shorthand Coding Techniques, http://www.sitepoint.com/ SSL shorthand-javascript-techniques/ (last accessed at December 2014). [5] MDN: Shorthand properties, https://developer. mozilla.org/en-us/docs/web/css/shorthand_ properties (last accessed at December 2014). [6] Edwards, D.: A JavaScript Compressor. version 3.0, http://dean.edwards.name/packer/ (last accessed at 5.2 December 2014). JavaScript [7] Liu, Z., Saifullah, Y., Greis, M. and Sreemanthula, S.: HTTP Compression Techniques, Wireless Communications and Networking Conference, Vol. 4, pp. 2495 2500 (2005). JavaScript [8] Nielsen, H. F., Gettys, J., Baird-Smith, A., Prud hommeaux, E., Lie, H. W. and Lilley, C.: Network Performance Effects of HTTP/1.1, CSS1, and PNG, Conf. Applications, Technologies, Architectures, and Protocols for Computer Communication, pp. 155 166 (1997). [9] Lecomte, J.: YUI Compressor, http://yui.github.io/ yuicompressor/ (last accessed at December 2014). [10] Google Inc.: Closure Compiler, https://developers. google.com/closure/compiler/ (last accessed at December 2014). Web[11] Google Inc.: Data Compression Proxy, https://developer.chrome.com/multidevice/ Web data-compression (last accessed at December 2014). c 2015 Information Processing Society of Japan 175