IE9: always a little CPU usage on my website

Question

I designed a website using jQuery and a lot of drag and drop elements that work very well.

However, in IE9 and when many drag and drop elements are dynamically loaded (using .load ()) and displayed, the browser always consumes a small processor charge (~ 10%) (to update?) Even if nothing has been done by the user for a long time, Do not touch the mouse or scroll on the page.

I don't have a timer, and the behavior in Chrome and Safari is fine.

Here is the context and what I discovered after my tests:

Context

On my main web page, I load custom views into a div using the load () function. Loaded views contain several containers with draggable items. These containers are droppables and are updated after each drop event, using the load () function as well.

• If I insert 50 tags <br> first of all on my web page, graphic elements do not appear without scrolling on my page: CPU load = 0%
• When I browse to only display half of my view containing graphic elements, CPU utilization = 10%
• When all my graphic elements are displayed: loading of my processor = 20%
• When I reduce the size of the windows: decreasing the processor load according to the window size

Could someone explain why? Give me an advice? Is this due to a lot of jQuery events? Any solution to check how much of my code is using CPU resources?

Any advice is appreciated!

Edit

When I delete all the jQuery events in the loaded form (click, mouseover, ...) and all the jQueryUI element declarations (.draggable () ,. droppable ()), the processor load is still here.

But keep in mind that the view is always loaded dynamically using the .load () function. FYI, I also tried loading my view using $ .post ().

I tried this morning with the new version of jQuery 1.8.0 and jQueryUI 1.8.22, but that doesn’t change anything.

Answer 1

jQuery uses a timer to control the animation. Every 13 ms, the timer starts.

You can download the jquery development code, find "interval: 13" and change it to, for example, interval: 150.

EDIT

From jQuery 1.4.3, you can change the jQuery.fx.interval property to adjust the number of frames per second at which the animation will run. The default value is 13 milliseconds.

http://api.jquery.com/jQuery.fx.interval/

Answer 2

You need a profile of your site in Internet Explorer - this will give you an idea of ​​where the CPU is loading. (You asked for a tool.)

Answer 3

It may not be your business, because I don’t know if you use Sort or not, but

I had a similar problem with IE when I used JQueryUI Sortable to handle drag and drop. I had several UL elements on a page with several LI elements, and I dragged between different UL elements.

I did most of my development in Chrome, and everything was fine. When I switched to IE for some testing, the result was as you described.

It so happened that during development, at some point, I specified the "connectWith" parameter (so that I could drag the selected items from one to another) and the "items" parameter (so that I could tell which elements inside the element should be sortable).

Now, when I debug the source code for the JQuery UI, it manipulates the DOM quite a lot under the covers, for example, removes and inserts nodes and binds various events and so on. It turns out that when I had both the options that I mentioned above, in the JQuery code, the UI did some kind of looping cycle in a material type cycle and the number of times it set the position and style of the same element (count * ConnetWith Count elements).

I had some CSS style for working (without scrolling the title, footer and sidebar menu), and since the JQuery user interface controlled the nodes, it made the browser execute the layout and recalculate the style requests, causing the CSS to reapply. The more elements I saw on the page, the more it was necessary to lay out and stylize. This can be a problem for IE when it has a lot of attachments, for example, with a large number of rows in tables, but most of the time it is not so noticeable. However, this is due to the almost exponential increase in layout requests caused by the JQuery UI processing / processing cycle, and I had a real problem with IE. I worked with a 1920 x 1080 screen, so it took about 40 seconds on a fast machine before the CPU stopped going crazy. In other browsers, it was only about a second or so.

It helped change the styles of the header, footer and sidebar. But more importantly for me, when I removed the “Items” option from the code shell in the style update cycles to significantly reduce the processor, only a short time, and then returned to 0-1%.