caching to improve performance
Download
Skip this Video
Download Presentation
Caching to improve performance

Loading in 2 Seconds...

play fullscreen
1 / 21

Caching to improve performance - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

Caching to improve performance. http://www.flickr.com/photos/jamescridland/613445810. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Caching to improve performance' - obert


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
caching to improve performance
Caching toimprove performance

http://www.flickr.com/photos/jamescridland/613445810

overview of caching
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
key steps in caching
Key steps in caching
  • Define a variable for storing the result
  • If the variable does not yet have a value
    • Do whatever is needed to compute the result
    • Assign the result to your variable
  • Use the value of the variable
pros and cons of caching
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
when and when not to cache
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
caching works at every level
Caching works at every level!!!

Web server

Database or files

Web page UI

Your AJAX code

Cache in JS variable

Cache in browser

Cache in session

Cache in DB/files

examples of expensive js computations
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.
detailed example of js caching
Detailed example of JS caching

<script src="jquery-1.8.2.min.js"></script>

<script>

varteamCache = {};

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+"");

}

</script>

<select id="team" onchange="getPlayers()"><option value="">--Choose--</option>

<option value="1">Team Alpha</option><option value="2">Team Beta</option></select>

<div id="players"></div>

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!

caching in the browser
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
example of ajax request to cache
Example of AJAX request to cache

<script src="jquery-1.8.2.min.js"></script>

<script>

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+"");

}

</script>

<select id="team" onchange="getPlayers()"><option value="">--Choose--</option>

<option value="1">Team Alpha</option><option value="2">Team Beta</option></select>

<div id="players"></div>

Wow, just one line of code.

more control over browser caching
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
all these apply also to the web page
All these apply also to the web page
  • 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 <script> and <link>
server telling browser not to cache
Server telling browser NOT to cache

JSON (server-side)

<?phpheader("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");

?>

<html><body><?php echo time()."" ?>

<a href="mydata.php">test</a></body></html>

HTML (server-side)

server telling browser indeed to cache
Server telling browser INDEED to cache

JSON (server-side)

<?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); 

?>

<html><body><?php echo time()."" ?>

<a href="mydata.php">test</a></body></html>

HTML (server-side)

caching in proxy servers
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
summary so far
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
moving to the server examples of expensive computations
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
where should results be cached
Where should results be cached?
  • If the results are only needed by one user
    • If the results are 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
example of caching in the session
Example of caching in the session

<?php

session_start();

$teamdflt = (isset($_SESSION[\'team\'])) ? $_SESSION[\'team\'] : "";

?>

<script src="jquery-1.8.2.min.js"></script>

<script>

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);

</script>

<select id="team" onchange="getPlayers()"><option value="">--Choose--</option>

<option value="1">Team Alpha</option><option value="2">Team Beta</option></select>

<div id="players"></div>

<script>$(document).ready(function() {$("#team").val(<?php echo $teamdflt ?>);});</script>

<?php

session_start();

$_SESSION["team"] = $_REQUEST[\'team\'];

echo \'{"players":["Team\' . $_SESSION["team"] . \'","Chet","Emelia","Rob","Tami"]}\';

?>

mydata.php

example of caching in files
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, pnamevarchar(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, performthe expensive computation.

Then put theresult in the cache.

caching in the database
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.
ad