How to Speed up Web Application and Javascript‏ ??

How to Speed up Web Application and Javascript‏ ??

There is lots of reasons because of that our web appliacation getting more slower and slower. Site is getting slow and users are not visiting lesser and lesser.

Mostly users like site which is very fast and fullfill their all needs. So why we are not following some sort of techniques by which our application will be faster then before ? That is call optimized code. As i mentioned before in my previous article how to write optimized code. With server side coding we can follow some procedures in client side which will make our application faster. That is Javascript.

So the question is How to speed up Web Application and javascript ??  

So lets see how can we do it. Here i have provided some simple techniques to make application faster.

  • Put your script at the bottom of your file.

  • When loading a page, your browser completely stops when it encounters a <script>tag and executes the code within before continuing. You can't even load images from other hostnames until it's done.
    So if your JavaScript tags and files are in the     <head> part of your document, your browser will load all the content of those <script> tags before displaying the <body>part of your page.

                       This is why it's important to put your JavaScript files at the bottom of the document, right before the </body> tag. By doing this, your browser will load all of your important content(text, pics, etc) before loading the JavaScript.

  • Make your Javascript and CSS file external. So that if you have to make any changes in UI design you can easily do by changing external css. without touching ui design.

  • Optimize your Images in web page.

  • Try to compress your js file. So that browser can load faster.you can use gzip / Rhino to that. but Rhino actually analyzes your source code so it has a low chance of changing it as it compresses, and it is scriptable.

    Install Rhino (it requires Java), then run it from the command-line:

    
java -jar custom_rhino.jar -c myfile.js > myfile.js.packed 2>&1

    This compresses myfile.js and spits it out into myfile.js.packed. Rhino will remove spaces, comments and shorten variable names where appropriate. The “2>&1″ part means “redirect standard error to the same location as the output”, so you’ll see any error messages inside the packed file itself (cool, eh? Learn more here.).

    Using Rhino, I pack the original javascript and deploy the packed version to my website.

  • Reduce the number of http request by combining all script file together in one file and all css stylesheet in single file. Making this part of your release process improves response times.

  • CSS sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

  • Put your stylesheet top of the page. While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

  • Make javascript and css external. Remove duplicate scripts and unnecessary tags.

Redirect is making application more slow. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example: ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->

  • Keep cookie sizes as low as possible to minimize the impact on the user response time. Eliminate unnecessary cookies.

  • Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:

  • Cache references to accessed elements
  • Update nodes "offline" and then add them to the tree
  • Avoid fixing layout with JavaScript.

  • Image with empty string src attribute occurs more than one will expect. It appears in two form:

  • straight HTML
    <img src="">
  • JavaScript
    var img = new Image();
    img.src = "";

Load Javascript On-Demand

An AJAX pattern is to load javascript dynamically, or when the user runs a feature that requires your script. You can load an arbitrary javascript file from any domain using the following import function:


function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms;
  $import(src + seed);
}

The function $import('https://example.com/myfile.js') will add an element to the head of your document, just like including the file directly. The $importNoCache version adds a timestamp to the request to force your browser to get a new copy.

To test whether a file has fully loaded, you can do something like


if (myfunction){
  // loaded
}
else{ // not loaded yet
  $import('https://www.example.com/myfile.js');
}

There is an AJAX version as well but I prefer this one because it is simpler and works for files in any domain.

Cache Your Files

                Another approach is to explicitly set the browser’s cache expiration. In order to do this, you’ll need access to PHP or Apache’s .htaccess so you can send back certain cache headers. Rename myfile.js to myfile.js.php and add  the following lines  to the top:

<?php
    header("Content-type: text/javascript; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 * 24 * 3;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>
 

In this case, the cache will expire in (60 * 60 * 24 * 3) seconds or 3 days. Be careful with using this for your own files, especially if they are under development. I’d suggest caching library files that you won’t change often.

If you accidentally cache something for too long, you can use the $importNoCache trick to add a datestamp like “myfile.js?123456″ to your request (which is ignored). Because the filename is different, the browser will request a new version.

Setting the browser cache doesn’t speed up the initial download, but can help if your site references the same files on multiple pages, or for repeat visitors.

 

Hope this article will help you. I am  not master. Just an learner. So whatever i am getting & facing new sharing with you all. So that you people will come to know about lots of new things.

If you like my posts please leave a comment and share my site & articles  with your friends too. Its may helps others too.
Thanks

 

      

Tags:

| | |