FREE MS POINTS AND GOLD MONTHS
Relatd javascript Articles
"IE8 Beta 1 is focused on the developer community". That is from an email on the private beta of IE 8 that some folk have been getting. This is meant to ramp up for a public beta, and something will be seen at MIX in a few weeks. The unveiling is coming.
Greetings from the Internet Explorer Team! We are nearing the launch of Windows Internet Explorer 8 Beta 1 and we will be making it available for the general public to download and test. IE8 Beta 1 is focused on the developer community, with the goal of gaining valuable feedback to improve Internet Explorer 8 during the development process. We have identified you as a qualified beta tester and we would like to offer an opportunity to join our limited technical beta program for Windows Internet Explorer 8 Beta 1. Participation in the Technical Beta will enable you to evaluate a common release of Windows Internet Explorer 8, the ability to submit feedback, post bug reports, download software answer surveys on product quality as well as vote on top bugs filed by others from the technical beta program. This is a very exclusive program, by invitation only. The only way to submit feedback is to enroll in the Windows Internet Explorer 8 Technical Beta program. As such, we would be happy to have your participation. To accept this invitation and to apply to become a member of this program, follow this link: http://connect.microsoft.com/InvitationUse.aspx?ProgramID=2038 (If this link does not work for you, copy the full link and paste it into the Web browser address bar.) Follow the steps shown to you by that program to apply to become an active participant. You may be asked to take a survey, or submit other preliminary information. To report a problem or to ask a question, visit the Contact Us page (found at the bottom of every page). We hope to see you in the technical beta!
Best regards. The Internet Explorer Team
This evening I was playing around with the idea of profiling jQuery applications - trying to find a convenient way to completely analyze all the code that is being executed in your application.
I've come up with a pluginthat you can inject into a jQuery site that you own and see how the performance breaks down method-by-method.
Here's how you can try this plugin on your own site:
Step 1: Copy site HTML, add base href, add plugin.
For example, Github.comuses jQuery for a few basic effects and pieces of interaction (they use considerably more on pages beyond the homepage).
I took a copy of their page, added a <base href> to the top and injected the profiling plugingiving a resulting test page.
Before:
After:
Step 2: Use the site normally.
Use the site as you normally would. Load it up, click around - perform normal interactions. In the case of the Github.com page I let it load, scrolled down, and clicked on one of the demo images - which caused an overlay to appear. I then closed the X on the overlay and let it hide.
Step 3: View data.
In your console type jQuery.displayProfile();and scroll down to the bottom of the page. You should see something like the following:
and here's a sample data dump:
| % | (ms) | Method | in | out |
|---|---|---|---|---|
| 0.0% | 0 | jQuery(#document) | 1 | |
| 0.0% | 0 | .bind("ready", function()) | 1 | 1 |
| 3.6% | 6 | jQuery("a[hotkey]") | ||
| 0.0% | 0 | .each(function()) | ||
| 0.0% | 0 | jQuery(#document) | 1 | |
| 0.0% | 0 | .bind("keydown.hotkey", function()) | 1 | 1 |
| 0.0% | 0 | jQuery("#triangle") | ||
| 0.0% | 0 | jQuery("body") | 1 | |
| 1.2% | 2 | .append("<div id="triangle" style="position: absolute; display: none;"> </div>") | 1 | 1 |
| 0.6% | 1 | jQuery("#repo_menu .active") | ||
| 3.6% | 6 | jQuery(".jshide") | ||
| 0.0% | 0 | .hide() | ||
| 1.2% | 2 | jQuery(".toggle_link") | ||
| 0.0% | 0 | .click(function()) | ||
| 0.6% | 1 | jQuery("#beta :text") | ||
| 0.0% | 0 | .focus(function()) | ||
| 0.6% | 1 | jQuery("#beta form") | ||
| 0.0% | 0 | .ajaxForm(function()) | ||
| 1.2% | 2 | jQuery(".hide_alert") | ||
| 0.0% | 0 | .click(function()) | ||
| 0.0% | 0 | jQuery("#login_field") | ||
| 0.0% | 0 | .focus() | ||
| 0.0% | 0 | jQuery("#versions_select") | ||
| 0.0% | 0 | .change(function()) | ||
| 1.2% | 2 | jQuery("a[rel*=facebox]") | 3 | |
| 17.6% | 29 | .facebox() | 3 | 3 |
| % | (ms) | Method | in | out |
|---|
| % | (ms) | Method | in | out |
|---|---|---|---|---|
| 6.9% | 2 | jQuery("#facebox .loading") | ||
| 3.4% | 1 | jQuery("facebox_overlay") | ||
| 3.4% | 1 | jQuery("body") | 1 | |
| 6.9% | 2 | .append("<div id="facebox_overlay" class="facebox_hide"></div>") | 1 | 1 |
| 0.0% | 0 | jQuery("#facebox_overlay") | 1 | |
| 6.9% | 2 | .hide() | 1 | 1 |
| 3.4% | 1 | .addClass("facebox_overlayBG") | 1 | 1 |
| 0.0% | 0 | .css("opacity", 0) | 1 | 1 |
| 3.4% | 1 | .click(function()) | 1 | 1 |
| 6.9% | 2 | .fadeIn(200) | 1 | 1 |
| 3.4% | 1 | jQuery("#facebox .content") | 1 | |
| 3.4% | 1 | .empty() | 1 | 1 |
| 3.4% | 1 | jQuery("#facebox .body") | 1 | |
| 0.0% | 0 | .children() | 1 | 2 |
| 10.3% | 3 | .hide() | 2 | 2 |
| 0.0% | 0 | .end() | 2 | 1 |
| 6.9% | 2 | .append("<div class="loading"><img src="/facebox/loading.gif"/></div>") | 1 | 1 |
| 0.0% | 0 | jQuery("#facebox") | 1 | |
| 0.0% | 0 | jQuery({...}) | 1 | |
| 3.4% | 1 | .width() | 1 | |
| 0.0% | 0 | .css({...}) | 1 | 1 |
| 6.9% | 2 | .show() | 1 | 1 |
| 0.0% | 0 | jQuery(#document) | 1 | |
| 0.0% | 0 | .bind("keydown.facebox", function()) | 1 | 1 |
| 0.0% | 0 | jQuery(#document) | 1 | |
| 3.4% | 1 | .trigger("loading.facebox") | 1 | 1 |
| % | (ms) | Method | in | out |
|---|
| % | (ms) | Method | in | out |
|---|---|---|---|---|
| 16.7% | 1 | jQuery(#document) | 1 | |
| 66.7% | 4 | .trigger("close.facebox") | 1 | 1 |
| % | (ms) | Method | in | out |
|---|
This quick table of data should be able to provide you with some interesting information about what's happening in your code. The result is still incredibly basic (really only providing the most basic level of jQuery method introspection) but it definitely shows some merit.
If you wish to create a different view for the data you can access the raw data structure by running jQuery.getProfile();.
The next stage of development for this plugin would be to reveal which methods are running inside other jQuery methods - in addition to monitoring other aspects of the application (such as timers, Ajax callbacks, etc.). I'm pleased with even this most-basic result - it gives me the ability to quickly, and easily, learn much more about a jQuery-using application.
Related javascript Projects
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Mapsand Gmaileasy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.
GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Javaprogramming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.
A simple command-line tool to create the folders and helper files for a new JavaScript project/library. As a bonus, you can quickly create a website to promote your project.
When you start a new JavaScript library, how do you layout the source files, the tests, the distribution files? Do you have support scripts to generate distributions from source files? Run your JavaScript unit tests? Generators to create new unit test HTMLfiles?
mapper.js 1.2 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.