Skip to main content

Posts

Showing posts with the label performance

jQuery Mobile Page Caching demo

In my previous post , I outlined how to prefetch links to make jQuery mobile app load your pages faster. The ui-loader spinning animation was not shown as you navigate from one page to another. Launch   - The previous example with prefetch But, as also mentioned, it has certain limitations, If there are more pages, more http requests are sent out and more bandwidth is required to prefetch If a page hasn't been fully prefetched, the ui-loader spinner animation comes up till the page is fully loaded. Try to click fast and you will see Once you visit a prefetched page, navigating away from the page will remove the page from DOM. So this is not same as caching the page. The next visit to the page will again need the page to be fetched. So the obvious solution seems to be to cache the frequently visited pages in the DOM. This way, every link doesn't have to be prefetched on every visit to the page. This is easily done in jQuery Mobile by adding the attribute data-dom-cach...
3 comments
Read more

jQuery Mobile Prefetching pages demo

Using a single-page template for your mobile app makes your app faster and lighter. But you have to fetch each page during navigation and you end up seeing the ui-loader spinning icon animation every time. It can get to your nerves.  Launch   - Example without prefetch The above example, from my previous post shows how the spinning icon comes up each time you navigate from the main page to page 2. I will not list the code here as its already listed in an earlier post . In a multi-page template whereas, the entire set of pages are already loaded into the DOM and the navigation is much faster. A similar behavior can be obtained in a single-page application by prefetching pages. This is done by just adding the attribute data-prefetch  to all the links that you want to prefetch. As soon as the page loads, it starts fetching these links and loads it into the DOM. You can observe this behavior with the code inspector open (CTRL+SHIFT+I) in your browser. Now navigating to...
Post a Comment
Read more

Node.js and reckless console.log() statements

I've seen code that over uses, nah rather abuses the logger. Many times teams use it in the wrong way or sometimes over use it and then struggle to improve performance. This simple test will show the effect. From the synopsis of Node.js doc, this is my server code: var http = require('http'); http.createServer(function (request, response) {     response.writeHead(200, {'Content-Type': 'text/plain'});     response.end('Hello World\n'); }).listen(8124); console.log('Server running at http://127.0.0.1:8124/'); Now I use JMeter to test the performance. I fire a 1000 HTTP requests within a time frame of 2s, with a wait of 1ms duration in between each new request. In my environment the median response time was 2ms for each request. Now I add a single console log statement for the callback function in the above server code. var http = require('http'); http.createServer(function (request, response) {     response.writeHead(200, {'Content...
3 comments
Read more

Compress your HTML files

Updated: 2012-02-24 This is probably what every web developer knows. A very basic performance improvement for your HTML pages. You should remove all the white spaces and line breaks before you publish your html page. You can view the effect directly in a DOM inspector and this post touches the same. Consider this example available from the HTML5 spec (pg 21): <!DOCTYPE html> <html>   <head>     <title>Sample page</title>   </head>   <body>     <h1>Sample page</h1>     <p>This is a <a href="demo.html">simple</a> sample.</p>     <!-- this is a comment -->   </body> </html> Save it in a .html file and open in your favorite browser. Next view the DOM created by this file. You can use the DOM inspector available in most of the browsers today (launch with CTRL + SHIFT + I). You will see the below DOM tree created: ...
4 comments
Read more