I used Visual Studio 2010 excellent javascript profiler to profile the javascript of a web page on Internet Explorer.
(Analyze / Launch perf wizard / Instrumentation / JS application / profile js + url of page)
The perf report shows that jQuery's sizzle is the cause of the slowness (ie: some jquery selectors on my web page).
It shows the time spent is in Sizzle > filter > hidden > PSEUDO.
I do not have any selector with :hidden, so i don't understand why it looses this much time in hidden.
I'm using jQuery 1.4.4
I tried with jQuery 1.5 and it is the same.
As mentioned in the comment, :visible calls :hidden so if you're using that, it will show in the profiler.
Also note, that on the jQuery doc for the :hidden selector it mentions
Because :hidden is a jQuery extension and not part of the CSS
specification, queries using :hidden cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. To achieve the best performance when using :hidden to select
elements, first select the elements using a pure CSS selector, then
use .filter(":hidden").
Related
Does GwtQuery offer the same browser compatibility as jQuery? If not, what browsers has it been tested with?
gQuery(GwtQuery) supports Browser compatibility as jQuery.
Each browser gets separately compiled JS
gQuery is an entire rewrite of GWT in jQuery.
GQuery and jQuery are built around selectors.
Both support CSS standard selectors plus extra selectors (:text :password :hidden etc).
jQuery uses the sizzle engine. A javascript engine which works with any browser and has optimizations per browser.
GQuery has optimized engines written in java.
The more appropriate engine is selected in compile time.
GQuery uses a modified sizzle version for IE6/7
GQuery adds compile-time optimizations when using compiled selectors.
Compiled Selectors
Use them with immutable selectors and when selector performance is a goal in your application.
Selectors Performance
GQuery in compiled mode produces the faster javascript code to select DOM elements.
GQuery dynamic selectors are, in most cases, faster or equal than any other library.
Events
GQuery provides methods for assigning event in a cross-browser way.
GQuery event system is compatible with Gwt.
issues: – When Gwt detaches a widget, events added via GQuery are lost.
References:
https://code.google.com/p/gwtquery/wiki/GettingStarted
http://vinaytechs.blogspot.in/2009/09/gwtquery-jquery-in-gwt.html
I've built a GWT application that simulates a standalone popup widget. I can invoke a javascript method that pops the widget from the html page that is part of the application (i.e. PopWidget.html) -- the html is basically auto-generated when I create the GWT eclipse project.
Now I'd like to invoke the javascript method from a standalone html (not part of application). When I try to call the javascript method, I am getting a permissions exception. Is this a SOP issue? And if so, How can i either work around this problem or transform the app to behave as an embeddable 3rd-party javascript library?
I've looked in gwt gadgets and this seems like the ticket, but I have not discovered any "popup" gadgets...
You are correct that it is an SOP issue - the default linker used builds an iframe, and loads the app source into that iframe. To prevent the js from running any file on your system, this is locked down (in most browsers).
Take a look at the "Controlling Compiler Output" section of this link http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideModuleXml- the standard linker (std) uses iframes to protect against possible xss issues, but in your case you want cross origin loading, so you can probably use the xs linker instead.
I have compiled SHELL from standalone Google's V8 javascript engine to run javascript. It works fine until I give a javascript that has DOM API in it. With DOM APIs it gives syntax error. Is there any library that should be included to get this worked?
The stand-alone shell doesn't have the DOM (Document Object Model), since it's not running in a browser that provides the document and DOM implementation.
If you just want to try some DOM code, you might be able to use something like https://github.com/Raynos/DOM-shim to simulate a DOM. You obviously won't have a real page and it won't be visible anywhere, but it might work for testing purposes.
Is it jQuery or some custom HTML5 framework?
It is custom javascript. I don't think they use JQuery or any framework. They are very concerned about performance so they tend to get right down to the metal. If you view the source of the page you will see that they have about 30 js files referenced. Most of their site, including touch, uses HTML5 when available for certain things. If you want to know more, you are going to have to dig through their source code.
I want to design a website using GWT. This is my understanding of how GWT pages will be delivered to the client browser - When the user puts in the URL into her browser she receives all the static HTML + GWT javascript, and then the javascript queries the server for the dynamic page content and adds it to the DOM. eg - For a blog page the content of the blog is queried by the javascript. is my understanding correct?
If I know that the content will surely be a part of the page(add does not depend on user clicking an expand button etc.), Will it be more efficient if the blog content was a part of the HTML initially served? Something that could be done by using a templating engine like django.
Is there a way to make a templating mechanism in GWT?
Yes, putting your content into the HTML will reduce the number of round trips the client makes to your server. It also means that the blog content won't have to wait for your GWT javascript to load before it can be displayed.
GWT itself isn't useful for a template system, but most servers that run GWT servlets will also support JSP pages. GWT works fine with these pages, you just need to put the GWT script tag in as usual. You will no doubt be able to find a ready-made templating solution but rolling your own is not too hard.