1. CACHING TO IMPROVE PERFORMANCE http://www.flickr.com/photos/jamescridland/613445810

2. Overview of caching After you get a result, save it so you don't have to get it again Examples – Finding the maximum of many different numbers Or any other expensive mathematical computation – Generating a really nicely-formatted image Or any other expensive formatting computation

3. Key steps in caching 1.Define a variable for storing the result 2.If the variable does not yet have a value a)Do whatever is needed to compute the result b)Assign the result to your variable 3.Use the value of the variable

4. Pros and cons of caching Pros: – Caching eliminates the need to recompute Cons: – Caching requires some storage to store values (such as RAM, or some hard drive space) – Caching gives no benefit unless the value is reused

5. When and when not to cache Do cache when – A value is very expensive to compute or get, AND – And that value will be needed many times Do not cache when – The result is not expensive to get, OR – The result will only be needed once, OR – There isn't enough storage available to cache

6. Caching works at every level!!! Web page UI Your AJAX code Web server Database or files Cache in JS variable Cache in browser Cache in session Cache in DB/files

7. Examples of expensive JS computations Retrieving a piece of data from the server – Such as retrieving a JSON object or XML file – Network round-trips are probably the slowest computation you can do! Prompting the user for some input – E.g., if you have a site for browsing different schools' courses, ask the user once what school he or she wants to look at – From the user's standpoint, giving input is an "expensive" operation.

8. Detailed example of JS caching var teamCache = {}; function getPlayers() { var team = $("#team").val(); if (teamCache[team]) fillin(teamCache[team]); else $.ajax({ url:"team"+$("#team").val()+".json", dataType:"json", error:function() {alert("Cannot retrieve.");}, success:function(result) { if (result && result.players) { teamCache[team] = result.players; fillin(result.players); } else { alert("No data provided."); } }); } function fillin(playerlist) { $("#players").text(playerlist+""); } --Choose-- Team Alpha Team Beta You need a JS variable. If you might be storing multiple values, then use an associative array. Index your array with a key. Check if your value is already saved. If so, just use it. Otherwise, just do your expensive computation Remember to save your result for reuse later on!

9. Caching in the browser Your AJAX code doesn't need to hit the server every single time. $.ajax({}) accepts a cache option – Tells AJAX to automatically cache every GET request in the browser's cache – By default cache == true for most versions of Internet Explorer cache == false for most other versions of browsers

10. Example of AJAX request to cache function getPlayers() { $.ajax({ url:“team"+$("#team").val()+”.json”, dataType:"json", cache:true, error:function() {alert("Cannot retrieve.");}, success:function(result) { if (result && result.players) { fillin(result.players); } else { alert("No data provided."); } }); } function fillin(playerlist) { $("#players").text(playerlist+""); } --Choose-- Team Alpha Team Beta Wow, just one line of code.

11. More control over browser caching Your server exerts some control over caching Server can specify that a certain page – Should NOT be cached at all – Should INDEED be cached if possible – Should INDEED be cached if possible, but only for a certain amount of time – Should cache in even more complex ways (that you probably don't need to know, for now) All of these OVERRIDE your AJAX cache param All these apply also to the web page

12. When your PHP generates some HTML, the PHP can send a cache control header – So that the browser caches the page (or not) ALSO works very nicely for JS and CSS – Put your JS and CSS in another PHP file – At the top of your PHP file, send headers – Link with your main page with and

13. Server telling browser NOT to cache <?php header("Expires: Tue, 1 May 2012 10:00:00 GMT"); // in the past header("Cache-Control: no-cache"); echo '{"players":["Chet","Emelia","Rob","Tami"]}'; ?> <?php header("Expires: Tue, 1 May 2012 10:00:00 GMT"); // in the past header("Cache-Control: no-cache"); ?> test JSON (server-side) HTML (server-side)

14. Server telling browser INDEED to cache <?php $nsecs = 7*24*60*60; // 7 days in the future header('Expires: '. gmdate('D, d M Y H:i:s \G\M\T', time()+ $nsecs),true); header("Cache-Control: public, max-age=$nsecs",true); ?><?php echo '{"players":["Chet","Emelia","Rob","Tami"]}'; ?> <?php $nsecs = 7*24*60*60; // 7 days in the future header('Expires: '. gmdate('D, d M Y H:i:s \G\M\T', time()+ $nsecs),true); header("Cache-Control: public, max-age=$nsecs",true); ?> test JSON (server-side) HTML (server-side)

15. Caching in proxy servers Remember that there might also be proxy servers between the browser and the server – The http headers shown in the preceding slides will also control caching by proxies This will affect all users behind those proxies – There are also http headers you can use to control just browsers or just proxies Under some circumstances, http cache headers are ignored – E.g., if user clears the cache, or runs out of space, or if the request is an http POST

16. Summary so far You can store results in JS variables – Takes some code, but you have lots of control http-based caching – Can be specified with 1 line of JS in AJAX code – Can be specified with 2 lines of PHP on server – Can be used to control browser or proxy caching – Might be disregarded

17. Moving to the server… Examples of expensive computations Retrieving data from the database – Such as retrieving a list of records – Especially if you need to join multiple tables or do an aggregate query Formatting data as HTML – E.g., if you have a site for browsing different schools' courses, generate the HTML once and cache it

18. Where should results be cached? If the results are only needed by one user – If the results are only needed in the client Then cache in JS or browser (http headers) – Else Cache in the PHP session Else – Cache in the database or a file on the server

19. Example of caching in the session <?php session_start(); $teamdflt = (isset($_SESSION['team'])) ? $_SESSION['team'] : ""; ?> function getPlayers() { $.ajax({ url:"mydata.php?team="+$("#team").val(), dataType:"json", cache:true, error:function() {alert("Cannot retrieve.");}, success:function(result) { if (result && result.players) { fillin(result.players); } else { alert("No data provided."); } }); } function fillin(playerlist) { $("#players").text(playerlist+""); } $(document).ready(getPlayers); --Choose-- Team Alpha Team Beta $(document).ready(function() {$("#team").val( );}); <?php session_start(); $_SESSION["team"] = $_REQUEST['team']; echo '{"players":["Team'. $_SESSION["team"]. '","Chet","Emelia","Rob","Tami"]}'; /* what is wrong with the code above? hint: security */ ?> mydata.php

20. Example of caching in files <?php ini_set('display_errors', 'On'); $mysql_handle = mysql_connect('oniddb.cws.oregonstate.edu', 'scaffidc-db', 'tzBs5Bf8uDAAvqiK') or die("Error connecting to database server"); mysql_select_db('scaffidc-db', $mysql_handle) or die("Error selecting database: $dbname"); mysql_query("drop table player"); mysql_query("create table player(pid integer, tid integer, pname varchar(20), primary key(pid))"); mysql_query("insert into player(pid, tid, pname) values(1,1,'Jim')"); mysql_query("insert into player(pid, tid, pname) values(2,1,'Carrie')"); mysql_query("insert into player(pid, tid, pname) values(3,1,'Karen')"); mysql_query("insert into player(pid, tid, pname) values(4,1,'Chris')"); mysql_query("insert into player(pid, tid, pname) values(5,2,'Kecia')"); mysql_query("insert into player(pid, tid, pname) values(6,2,'Pablo')"); mysql_query("insert into player(pid, tid, pname) values(7,2,'Monty')"); mysql_query("insert into player(pid, tid, pname) values(8,2,'Becca')"); $team = isset($_REQUEST["team"]) ? $_REQUEST["team"] : ""; if (!preg_match('/^[0-9]+$/', $team)) echo '{"players":["none '.$team.'"]}'; else { $filename = "team".$team.".txt"; // note, this should be a.txt; do NOT use.php; we will discuss in the security lecture if (file_exists($filename)) { echo file_get_contents($filename); } else { $rs = mysql_query("select * from player where tid = ". $team); $nrows=mysql_numrows($rs); $rv = '{"players":['; for ($i = 0; $i < $nrows; $i++) { if ($i > 0) $rv.= ','; $rv.= '"'. htmlspecialchars(mysql_result($rs,$i,"pname")). '"'; } $rv.= ']}'; echo $rv; // FYI, see also file_put_contents $file = fopen($filename,"w"); fwrite($file, $rv); fclose($file); } mysql_close(); ?> Check if file exists; Read & return if so. Otherwise, perform the expensive computation. Then put the result in the cache.

21. Caching in the database You could also define a blob and store the JSON string in the database This is left as an exercise for you, if you like.