Page performance - defer unwanted scripts executions
September 11th, 2009 Filed Under Javascript, browser, jQuery, optimization, page performance, snippet
In extension to my previous post regarding deferring images I would like to share my thoughts about deferring unwanted scripts executions.
The process hungry operations in DOM manipulation include insertion or deletion of elements and attaching events to them. And if all of such DOM manipulation occurs at the page load time it literally hangs other stuff piped in the download queue; And we blame the network latency to be the culprit.
So how do we solve this problem. It is simple to say, “Yeah! that’s right”. But what’s the right way of doing the right thing is not well known.
I have tried my way of solving this problem. In this regard I suggest two measures to be taken:
1) Use Event Bubbling
2) Defer unwanted event attachments
1) Use Event Bubbling: Event Bubbling is something that happens naturally on the DOM tree. In plain english every event on the page bubbles up to its parent until it reaches the document element. For example if we have an HTML document having body>div>a tag. Then when you click on the “a” element, the javascript engine looks for any onclick handler assigned to the “a” tag if it is assigned then it will trigger it. Then it traverses up to the parent element which is the div tag. Now if the div tag is having any onclick handler then that will also get triggered and so on.
What we generally do is we assign all the click events to the corresponding elements so that when they are clicked the handler executes and performs something. Attaching this kind of event handlers to several elements on the page penalizes on the page download performance.
So what we do is, instead of assigning so many click handlers we can assign only one click handler to the document, where the cue ultimately reaches.
Now how do we know on the document level which element was clicked?
For that you have an event object which carries the information about the element on which the event occured. Reading the event object we can determine what to do. So basically you write a list of if ..else in the document click function.
Code:
//CENTRALIZED CLICK EVENT HANDLER
$(document).bind("click",function(e){
if(!e.button){//ONLY WHEN LEFT CLICKED
var et = e.target;
var qet = $(et);
if(et.className=="closeBut"){
window.close();
}
if((et.tagName == "LI")&& qet.parents("del")[0]){
//code to handle click on LI which has a parent DEL
}
}
});
The above code is based on jquery way of assigning handlers. In the above code you can see that the event object has a property called target which points to the object where the event occured. Now using that object you can truthify the condition to perform some activity based on the properties of that object or the surrounding objects. For example here we are checking for the className in one if condition and className and parent both in the other condition.
2) Defer unwanted event attachments: This measure is another trick to unburden your load time script executions. What we do here is club all the hover and mouseover event attachments into one sub-routine and trigger it when the user moves his mouse for the first time.
Generally we see that a user’s pattern of opening links or a web page includes getting distracted to some other links or checking emails while the page opens. So a user open a web page and opens another web page or goes to check his emails or just waits for the page to load.
Here if the user doesn’t move his mouse, the heavy operation of assigning mouseover or hover events to list(s) or whatsoever on the page has an opportunity to get deferred to a later time when actually the user comes to the page and is ready to interact with the page.
Code:
//ON DOCUMENT MOUSEMOVE
$(document).bind("mousemove",function(e){
if(typeof initHovers=='undefined'){
if($$("#oc .menu")[0]){//MENU
mainmenu($$("#oc .menu"));
}
$$=$;//DISABLING THE CACHING AFTER PAGE LOAD
initHovers = 1;
}
});
The above code does exactly what I have declared above. Here it checks for an undefined variable existence called “initHovers”. If it does not exist only then we execute the sub-routine and define the variable with a global scope. As a result the sub-routine execute only once on the mousemove event on the document. And we save few seconds/milliseconds on the page load.
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Reverse Engineer Packer javascript
June 11th, 2009 Filed Under Good to know, Javascript, Tips & Tricks, browser, debuggers, firefox, gyan
Have you ever seen a code something like this:
eval(function(p,a,c,k,e,r){e=funct.... etc....
And you suffer reading the encoded code. No suffers now; because I am going to tell you a trick that will convert your packer code in a readable script.
And it is really simple …. just replace the eval word with alert and refresh your page. You can now copy the code from the alert box.
If you face the problem of copying it from the alert box then open firefox browser with firebug pre-installed.
Open the console using F12 key and paste the code in the editable window.
Now replace the first word “eval” with “console.log” and hit run.
Probably you would need Javascript Tidy to make it properly readable.
Enjoy Madi!!
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Firefox eats lot of memory?
April 2nd, 2009 Filed Under Good to know, Patch, Tips & Tricks, browser, firefox
Great!! that you came across the same road where I was chuckling for a while thinking and getting annoyed…
No doubt its a great browser; But the plugins eat a lots and tonnes of memory of your system and also by default it stores a lots of history for you…
So to lessload its history go to the Tools>Options>Privacy and reduce the history from 90(default) to 10 or less days.
But still, when you open multiple tabs you still find it hogging your system memory. To work with a different memory expensive application like Photoshop or Outlook or Eclipse.. you need a lot of memory…
So what to do?
No worries… open your firefox browser… type “about:config” (without quotes) in the address bar.
Hit enter. Now right click on the white space somewhere and choose New>Boolean…
An input box will appear..
Put “config.trim_on_minimize” (without quotes)…. Hit enter
Now choose “true” from the list and hit enter.Restart your browser… it will only hog the memory when you are using firefox… otherwise when you minimize it… the system memory hogged by firefox is released.
Check the status of your memory by using the Windows Task Manager. Enjoy the great browser and its plugins.
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Cheating HTML javascript load delay
October 17th, 2008 Filed Under Good to know, Javascript, Tips & Tricks, browser, gyan, vivek
When you write the following code in your HTML:
<script language="javascript" type="text/javascript" src="www.somewhere.com/somejs.js"></script>
Your page halts till the javascript is fully loaded. Just imagine the scenario where you have more than 10 different javascript files from 3 or 4 different domains/locations on your page.That means the javascript loading is synchronous in nature. Which means, untill all the javascript is loaded and interpreted the HTML control doesn’t move to the next tag after the current script tag. Hence, you see a 4-5 seconds delay which is really embarrasing for a visitor. To overcome this problem, what you can do is make javascript to load asynchronously. Now what does that mean?That means, you load your javascript dynamically. And that means, create your script tag using createElement function and insert it in the head tag via DOM manipulation.If you do so, you can see all the script tags load parallely and your load time reduces drammatically and you see lesser time as a white page.Enjoy!!
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment
Google Chrome Shortcuts
September 9th, 2008 Filed Under Good to know, browser, shortcuts
About Commands
about: ->show version info
about:version -> same to about:
about:cache -> show cache content
about:plugins -> show info of plugins installed
about:memory ->show memory usage
about:crash -> crash the tab
about:dns -> show dns info, like time
about:network -> network tools
about:stats -> shh! this page is secret!
about:internets -> the tubes are clogged!
about:histograms ->histograms resume
Window and tab shortcuts
Ctrl+N Open a new window
Ctrl+Shift+N Open a new window in incognito mode
Press Ctrl, and click a link Open link in a new tab
Press Shift, and click a link Open link in a new window
Alt+F4 Close current window
Ctrl+T Open a new tab
Ctrl+Shift+T Reopen last tab closed (remembers 10)
Drag link to tab Open link in specified tab
Drag link to space between tabs Open link in a new tab
Ctrl+1 through Ctrl+8 Switch to the tab at the specified position number. The number you press represents a position on the tab strip.
Ctrl+9 Switch to the last tab
Ctrl+Tab or Ctrl+PgDown Switch to the next tab
Ctrl+Shift+Tab or Ctrl+PgUp Switch to the previous tab
Ctrl+W or Ctrl+F4 Close current tab or pop-up
Alt+Home Open your homepage
Ctrl+O, then select file Open a file from your computer in Google Chrome
Address bar shortcuts
Do one of the following actions in the address bar:
Type a search term Perform a search using your default search engine
Type the part of the web address that’s between ‘www.’ and ‘.com’, then press Ctrl+Enter
Type a search engine keyword or URL, press Tab, then type a search term Perform a search using the search engine associated with the keyword or the URL. Google Chrome prompts you to press Tab if it recognizes the search engine you’re trying to use.
F6 or Ctrl+L or Alt+D Highlight content in the web address area
Type a web address, then press Alt+Enter Open your web address in a new tab
Shortcuts to open Google Chrome features
Ctrl+B Toggle bookmarks bar on and off
Ctrl+H View the History page
Ctrl+J View the Downloads page
Shift+Escape View the Task manager
Webpage shortcuts
Ctrl+P Print your current page
F5 Reload current page
Esc Stop page loading
Ctrl+F5 or Shift+F5 Reload current page, ignoring cached content
Press Alt, and click a link Download link
Ctrl+F Open find-in-page box
Ctrl+G or F3 Find next match for your input in the find-in-page box
Ctrl+Shift+G or Shift+F3 Find previous match for your input in the find-in-page box
Ctrl+U View source
Drag link to bookmarks bar Bookmark the link
Ctrl+D Bookmark your current webpage
Ctrl++ Make text larger
Ctrl+- Make text smaller
Ctrl+0 Return to normal text size
Other
Backspace, or press Alt and the left arrow together Go to the previous page in your browsing history for the tab
Shift+Backspace, or press Alt and the right arrow togetherGo to the next page in your browsing history for the tab
Ctrl+K or Ctrl+E Places a ‘?’ in the address bar. Type a search term after the ‘?’ to perform a search using your default search engine.
Place your cursor in the address bar, then press Ctrl and the left arrow together Jump to the previous word in the address bar
Place your cursor in the address bar, then press Ctrl and the right arrow together Jump to the next word in the address bar
Place your cursor in the address bar, then press Ctrl+Backspace Delete the previous word in the address bar
Space bar Scroll down the web page
Home Go to the top of the page
End Go to the bottom of the page
Post Linx
Permalink | Trackback |
|
Print This Article | Leave a Comment