Are you a webmaster or web developer? Want to create super-fast websites?
Of course, aside from these series of posts, there are many ways to improve your computing experience, for example, checking the performance of web page loads. Website administrators can use Monitis’ instant web page load test or use continous real browser full web page monitoring. Web load are affected by many factors, including network speed, hosting location, server performance, application performance, web page design and optimization.
Tip #1 – Evaluate Local Variables
Primarily, specific to IE, because local variables are found based on the most to the least specific scope and can pass through multiple levels of scope, the look-ups can result in generic queries. When defining the function scope, within a local variable without a preceding var declaration, it is important to precede each variable with var in order to define the current scope in order to prevent the look-up and to speed up the code.
Tip #2 – Create shortcut codes to speed up coding
For useful codes that are constantly being used, speeding up the coding process can be achieved by creating shortcuts for longer codes, for example, document.getElementById. By creating a shortcut, longer scripts will not take as long to code and will save time in the overall process.
Tip #3 –Manipulate element fragments before adding them to DOM
Tip #4 – Save bytes by using Minification
There are a number of minification tools that can assist in this process, and have the ability to reverse the minification. Minification is the process of removing all unnecessary characters from source code, without changing its functionality.
Tip #5 –Don’t use nested loops if not required
Tip #6 – Cache objects to increase performance
Many times, scripts will be repeatedly used to access a certain object. By storing a repeated access object inside a user defined variable, as well as using a variable in subsequent references to that object, performance improvement can be achieved immediately.
Tip #7 – Use a .js file to cache scripts
By using this technique, increased performance can be achieved because it allows the browser to load the script once and will only recall it from cache should the page be reloaded or revisited.
Placing the scripts as low as possible in the page will increase the rendering progress, and also increase download parallelization. The result is that the page will seem to load faster, and in some cases it can also save on the total amount of code needed.
Tip #9 – Use jQuery as a framework
Tip #10 – Compress your files with GZip
Tip #11- Don’t use “With” keyword
The “With” keyword is considered a black-sheep because it suffers from several flaws that can be very frustrating. Although it makes the process of working with local properties simpler, “With” can make looking up variables in other scopes more expensive.
Tip #12 – Minimize requests for HTTP
Tip #13 – Implement Event Delegation
With Event Delegation, it becomes easier to use a single event handler to manage a type of event for the entire page. Without using Event Delegation, large web applications can grind to a halt because of too many event handlers. Benefits of Event Delegation include; less functionality to manage, fewer ties between code and DOM, and less memory required to process.
Tip #14 – Don’t use the same script twice
Duplicate scripts will have a significant impact on performance. Duplicate scripts will create unnecessary requests on HTTP, especially in the IE browser. Using a SCRIPT tag, in an HTML page, will help to avoid accidentally duplicating scripts.
Tip #15 – Remove Double Dollar $$
Using “double dollar $$” function is not necessarily needed, when it comes to improving the speed of a website.
Tip #16 – Creating reference variables
When working with a specific node repeatedly, it is best to define a variable with that particular note, instead of switching to it repeatedly. This is not a significant enhancement but it can have a bigger impact on a large scale.
Tip #17 – Increase speed of Object Detection
A more efficient method to using Object Detection is to use a code created dynamically based off of object detection, rather than performing object detection inside of a function.
Tip #18 – Write effective Loops
Depending on the browser, the method used to write Loops can have a great effect on the performance of a site. Improper writing of loops can slow down pages with lots of queries and running a number of loops in parallel.
Tip #19 – Shorten Scope Chains
Tip #20 – Index directly to NodeLists
NodeLists are live and can take up a lot of memory, as they are updated when an underlying document changes. Its quicker to index directly into a list, as a browser will not need to create a node list object.
Tip #21 – Don’t use ‘eval’
Although the “eval” function is a good method to run arbitrary code, each string that is passed to the eval function has to be parsed and executed on-the-fly. This cost has to be paid every time the execution reaches an eval function call.
Tip #22 – Use Function Inlining
Tip #23 – Implement Common Sub-expression Elimination (CSE)
Common sub-expression elimination (CSE) is a performance-targeted compiler optimization technique that searches for instances of identical expressions and replaces them with a single variable holding the computed value. You can expect that using a single local variable for a common sub-expression will always be faster than leaving the code unchanged.
Tip #24 – Build DOM node and all its sub-nodes offline
When adding complex content such as tables to a site, performance is improved by adding complex sub-trees offline.
Tip #25 – Try not to use global variables
Because the scripting engine needs to look through the scope, when referencing global variables from within function or another scope, the variable will be destroyed when the local scope is lost. If variables in global scope cannot persist through the lifetime of the script, the performance will be improved.
Tip #26 – Use primitive functions operations vs. function calls
Improved speed can be achieved in performance critical loops and functions by using equivalent primitive functions instead of function calls.
Tip #27 – Don’t retain alive references of other documents
By not retaining alive references of other documents after the script has finished with them, faster performance will be achieved. This is because any references to those objects from that document are not to be kept in its entire DOM tree, and the scripting environment will not be kept alive in RAM. Thus the document itself is no longer loaded.
Tip #28 – Use XMLHttpRequest
XMLHttpRequest helps to reduce the amount of content coming from the server, and avoids the performance impact of destroying and recreating the scripting environment in between page loads. Its is important to ensure that XMLHttpRequest is supported, or otherwise it can lead to problems and confusion.
Tip #29 – Avoid using try-catch-finally
Whenever the catch clause is executed, where the caught exception object is assigned to a variable, “try-catch-finally” creates a new variable in the current scope at runtime. A number of browsers do not handle this process efficiently because the variable is created and destroyed at runtime. Avoid it!
Tip #30 – Don’t misuse for-in
Because the “for-in” loop requires the script engine to build a list of all the enumerable properties, coding inside for loop does not modify the array. It iterates pre-compute the length of the array into a variable len inside for loop scope.
Once again Monitis wants to point that you can diagnose your website user experience using either our single page load check or signup for a 15-day trial for Monitis and use either basic, external http or advanced real browser web page monitoring. The tool will provide you with a detailed overview of the components’ execution and will identify performance bottlenecks.
We will continue our performance management series…so please stay tuned!