[2][3] 2.1 Web 1 var s=0;for(var i=0;i<=10;i++){s+=i}alert(s) Web sum s Web % JavaScript [4] Web 1 var a = void 0; // var a = undefined; 2 va

Size: px

Start display at page:

Download "[2][3] 2.1 Web 1 var s=0;for(var i=0;i<=10;i++){s+=i}alert(s) Web sum s Web % JavaScript [4] Web 1 var a = void 0; // var a = undefined; 2 va"

かずまさがうん
7 years ago
Views:

1 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) [email protected] *1 c 2015 Information Processing Society of Japan 170

2 [2][3] 2.1 Web 1 var s=0;for(var i=0;i<=10;i++){s+=i}alert(s) Web sum s Web % JavaScript [4] Web 1 var a = void 0; // var a = undefined; 2 var b =!1; // var b = false; 2. Web HTML CSS HTML XML id class CSS [5] 2.1 CSS [2][3] Web 1 # container { 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++) { } 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; % JavaScript HTML CSS alert(55) c 2015 Information Processing Society of Japan 171

3 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 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

4 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 prototype.js: ver gzip backbone.js: ver HTTP/ 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 JavaScript 3 HTTP 4. HTTP c 2015 Information Processing Society of Japan 173

5 2 JavaScript Table 2 Effects of size optimization for popular JavaScript libraries lib YUI * 1 HTTP jquery KB KB 72.9 KB 37.0 KB (47%) (70%) (85%) prototype KB 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 / index.html Web redirect automatic & continuous YUI Compressor[9]: JavaScript optimization / redirect index.raw.html index.html (optimized) 1 Closure Compiler[10]: Google Fig. 1 Processing flow of size optimization plugin index.html (non-optimized) 2.3 alert(55) 1: 2: Web 1 Web packer[6]: JavaScript.htaccess 2.4.optimization Base62 Base64 + Web / URL Web index.html Web Web index.min.html Web Web plugin.optimize (config file) c 2015 Information Processing Society of Japan 174

6 1 Web 6 URI index.html 2 Web Web *.raw.html *.raw.js.optimization Google Google [11] B H02701 B Android Chrome 15K12020 Google Google 2 [1] Ihm, S. and Pai, V. S.: Towards Understanding Modern Web Traffic, Internet Measurement Conference, pp (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 , Apress (2009). [4] SitePoint: 19+ JavaScript Shorthand Coding Techniques, SSL shorthand-javascript-techniques/ (last accessed at December 2014). [5] MDN: Shorthand properties, mozilla.org/en-us/docs/web/css/shorthand_ properties (last accessed at December 2014). [6] Edwards, D.: A JavaScript Compressor. version 3.0, (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 (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 (1997). [9] Lecomte, J.: YUI Compressor, yuicompressor/ (last accessed at December 2014). [10] Google Inc.: Closure Compiler, google.com/closure/compiler/ (last accessed at December 2014). Web[11] Google Inc.: Data Compression Proxy, Web data-compression (last accessed at December 2014). c 2015 Information Processing Society of Japan 175

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................