StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>We are developing really large DHTML/AJAX web application with about 2+ MB of JavaScript code and they still load quickly with some optimizations:</p> <ul> <li><p>try to reduce the <em>number</em> of Script URLs included. We use a simple PHP script that loads a bunch of .js files and sends them in one go to the browser (all concatenated). This will load your page a <strong>lot</strong> faster when you have a lot of .js files as we do since the overhead of setting up a HTTP connection is usually much higher that the actually transferring the content itself. Note that the browser needs to download JS files synchroneously.</p></li> <li><p>be cache friendly. Our HTML page is also generated via PHP and the URL to the scripts contains a hash that's dependent on the file modification times. The PHP script above that combines the .js files then checks the HTTP cache headers and sets a long expiration time so that the browser does not even have to load any external scripts the second time the user visits the page.</p></li> <li><p>GZIP compress the scripts. This will reduce your code by about 90%. We don't even have to minify the code (which makes debugging easier).</p></li> </ul> <p>So, yes, using PHP to send the CSS/JS files can improve the loading time of your page a lot - especially for large pages.</p> <p>EDIT: You may use this code to combine your files:</p> <pre><code>function combine_files($list, $mime) { if (!is_array($list)) throw new Exception("Invalid list parameter"); ob_start(); $lastmod = filemtime(__FILE__); foreach ($list as $fname) { $fm = @filemtime($fname); if ($fm === false) { $msg = $_SERVER["SCRIPT_NAME"].": Failed to load file '$fname'"; if ($mime == "application/x-javascript") { echo 'alert("'.addcslashes($msg, "\0..\37\"\\").'");'; exit(1); } else { die("*** ERROR: $msg"); } } if ($fm > $lastmod) $lastmod = $fm; } //-- $if_modified_since = preg_replace('/;.*$/', '', $_SERVER["HTTP_IF_MODIFIED_SINCE"]); $gmdate_mod = gmdate('D, d M Y H:i:s', $lastmod) . ' GMT'; $etag = '"'.md5($gmdate_mod).'"'; if (headers_sent()) die("ABORTING - headers already sent"); if (($if_modified_since == $gmdate_mod) or ($etag == $_SERVER["HTTP_IF_NONE_MATCH"])) { if (php_sapi_name()=='CGI') { Header("Status: 304 Not Modified"); } else { Header("HTTP/1.0 304 Not Modified"); } exit(); } header("Last-Modified: $gmdate_mod"); header("ETag: $etag"); fc_enable_gzip(); // Cache-Control $maxage = 30*24*60*60; // 30 Tage (Versions-Unterstützung im HTML Code!) $expire = gmdate('D, d M Y H:i:s', time() + $maxage) . ' GMT'; header("Expires: $expire"); header("Cache-Control: max-age=$maxage, must-revalidate"); header("Content-Type: $mime"); echo "/* ".date("r")." */\n"; foreach ($list as $fname) { echo "\n\n/***** $fname *****/\n\n"; readfile($fname); } } function files_hash($list, $basedir="") { $temp = array(); $incomplete = false; if (!is_array($list)) $list = array($list); if ($basedir!="") $basedir="$basedir/"; foreach ($list as $fname) { $t = @filemtime($basedir.$fname); if ($t===false) $incomplete = true; else $temp[] = $t; } if (!count($temp)) return "ERROR"; return md5(implode(",",$temp)) . ($incomplete ? "-INCOMPLETE" : ""); } function fc_compress_output_gzip($output) { $compressed = gzencode($output); $olen = strlen($output); $clen = strlen($compressed); if ($olen) header("X-Compression-Info: original $olen bytes, gzipped $clen bytes ". '('.round(100/$olen*$clen).'%)'); return $compressed; } function fc_compress_output_deflate($output) { $compressed = gzdeflate($output, 9); $olen = strlen($output); $clen = strlen($compressed); if ($olen) header("X-Compression-Info: original $olen bytes, deflated $clen bytes ". '('.round(100/$olen*$clen).'%)'); return $compressed; } function fc_enable_gzip() { if(isset($_SERVER['HTTP_ACCEPT_ENCODING'])) $AE = $_SERVER['HTTP_ACCEPT_ENCODING']; else $AE = $_SERVER['HTTP_TE']; $support_gzip = !(strpos($AE, 'gzip')===FALSE); $support_deflate = !(strpos($AE, 'deflate')===FALSE); if($support_gzip && $support_deflate) { $support_deflate = $PREFER_DEFLATE; } if ($support_deflate) { header("Content-Encoding: deflate"); ob_start("fc_compress_output_deflate"); } else{ if($support_gzip){ header("Content-Encoding: gzip"); ob_start("fc_compress_output_gzip"); } else{ ob_start(); } } } </code></pre> <p>Use files_hash() to generate a unique hash string that changes whenever your source files change and combine_files() to send the combined files to the browser. So, use files_hash() when generating the HTML code for the tag and combine_files() in the PHP script that is loaded via that tag. Just place the hash in the query string of the URL.</p> <pre><code><script language="JavaScript" src="get_the_code.php?hash=<?=files_hash($list_of_js_files)?>"></script> </code></pre> <p>Make sure you specify the same $list in both cases.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload