How To Make You Web Site Faster : HTML , Javascript Tricks

educcess Analysis, Programming Animation in Javascript, Image formats performance, Javascript Best Practices, Javascript Performance, PNG decoding, Screen refresh rate 0 Comments

How To Make You Web Site Faster : HTML , Javascript Tricks

The performance of your web application is highly important factor to get more user visits, experts have given many advices to improve the performance of a web application and few are listed below.

1. Meta refresh – Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to “refresh” and a content parameter giving the time interval in seconds.

Avoid Meta refresh as much as possible. This will slow down your site.

2. @imports will synchronously load the style sheet, Avoiding @import will improve the performance of your site. Instead of @imports use LINK tag as follows

Use
<link rel=’stylesheet’ href=’knowledge-cess-style.css’>

Than   <style> @import url(‘knowledge-cess-style.css’); </style>

3. Avoid use of multiple framework – Some people use JQuery for some functionality and DOJO for some functionality . Loading of framework will take time and your app becomes heavy. Stick to one framework.

4. Placing scripts at the end

Most people will load all their scripts at the beginning of the page. Load scripts at the end, some times it is not possible, it gives an error if a function being used in the page. In that case make two js files and keep necessary stuff in one js and load it at the beginning.

5. Use ‘differ’ attribute to if some scripts must be loaded at the beginning.

<script src=“knowledge-cess.js” defer></script>

6. To construct dynamic pages it is better to use .innerHTML rather than always creating DOM elements dynamically.

7. Referencing more DOM elements using document.querySelectorAll()

var matches = document.querySelectorAll("div.note, div.alert"); Reference

8. Use Javascript timers carefully. Don't let timers run unnecessarily.
9. Javascript animation and Math

Time to play with Math now, animation is nothing but playing with frames, higher the frame rate smoother the animation and more frames means more processing. The time interval we set for an animation should depend on screen refresh rate.

Understand how Javascript Animation related to Screen refresh rate 

Most screens have refresh rate of 60Hz, so 60 frames per second (60fps) is best frame rate.
Javascript timer will be set in milliseconds. so considering 1000ms and 60FPS which will give
1000ms/60fps = 16.7ms. so it is best timer value, so set 16.7ms or 17ms for your javascript timer while playing with animations.

function setInterval(function(){
          animate();
 },17);

10. Performance factor for PNG and JPG – PNG will be of more size compared to jpg but jpg uses more complicated decoding algorithm compared to png.

Image format PnG vs JPG and performance
The reason png size will be more is because png format will use lossless compression algorithm and jpg will use lossy compression algorithm.
11. Using requestAnimationFrame : Mozilla team proposed requestAnimationFrame method to over come from performance issues in javascript animations. Have a look into this Link
There Many more performance tuning techniques.Now let us look into some best practices of javascript

Best Practices in Javascript

 1. Use Shortcut notations

var cities = ["Bangalore","Delhi","Mysore"]

than

var cities = new Array();
     cities[0]='Bangalore'; 
     cities[1]='Delhi';
     cities[2]='Mysore';

2. Keep related stuff together

Best Practice – 

var settings = function(){
     var userDefaults = {
         categories: {"defaultCategory" : "xyz", "lastCategory":"pqr"},
         modules : {}
        }

      function initUserDefaults(){ }


      function clearUserDefaults(){}
   } //End of settings

The above way is clean and better approach rather than separating all methods.

3. Do not use primitive types as objects

 var name = "Ram";  //Best practice
      var name = new String("Ram"); //Not recommended

4. Use === operator

   Always use === operator for comparison, It always converts (to matching types) before comparison.

   The === operator forces comparison of values and type:

 100 == "100" //true which causes problem most of the times
      100 === "100" //false Best Practice, strict type checking

5. Global Variables in Javascript

Global variables are not recommended, Avoiding global variables is best practice.

6. Using JSLint 

Identify most common problems in your javascript code using JSLint tool

Check : how Animation in javascript works and how CSS3 is better than jQuery – link