Currently, I am focused on improving the speed of our website. To achieve this, the client is utilizing ajax to preload the expected next page of the application:
$.ajax({url: '/some/real/path', ...});
Upon receiving a response from the server with the header:
Cache-Control => 'max-age=20'
This indicates that the response is cacheable.
The clientside application then waits for confirmation before transitioning the browser to the predicted page. This transition includes adding additional information in the URL as a # fragment, which can only be obtained once the user has taken action:
location.href = '/some/real/path#additionalInfoInFragment';
Upon transitioning to the page, the additional info in the fragment is utilized by the page's javascript to produce a specific effect.
Most browsers successfully insert the initial ajax request response into their cache and retrieve it when transitioning using location.href. This process saves on server requests and speeds up the loading time.
However, Safari seems to encounter issues with caching due to the '#additionalInfoInFragment' part of the transition. The fragment is included in Safari's cache key, affecting its ability to retrieve cached content. Entries from Safari's cache.db file further highlight this issue:
* ajax request: INSERT INTO "cfurl_cache_response" VALUES(3260,0,-1982644086,0,'http://localhost:8080/TomcatScratchPad/EmptyPage','2012-05-14 07:01:10');
* location.href transition: INSERT INTO "cfurl_cache_response" VALUES(3276,0,-230554366,0,'http://localhost:8080/TomcatScratchPad/EmptyPage#wtf','2012-05-14 07:01:20');
It is worth noting that Chrome behaves correctly in this scenario, despite similarities in WebKit code with Safari.
Your input and ideas from the community would be greatly appreciated. Thank you!