What is the best way to find the cause of high cpu usage of javascript?
I have a script that simply loads photos from flickr in a thumbnail gallery. After they're loaded, nothing is being done (waiting for you to click them to display in a lightbox), but the cpu usage is still 25% or more.
I've opened firebug, clicked profile, waited a bit then clicked it again, but it says "No activity to report". If there was something going on, wouldn't it report? Or am I using this tool wrong?
I am doing this after everything is loaded, just to see what might be causing that high cpu usage.
Thanks,
Wesley
Edit: Seem to have traced it's origin.. It's not anything JS related, but CSS! WHAT THE HELL?
The issue is this:
I have a thumbnail gallery, I display a loading indicator instead of the thumbnail whilst the image is loading:
.thumbnail img {
display:block;
background-image: url("/images/ajax-loader.gif");
background-position: center center;
background-repeat:no-repeat;
overflow:hidden;
color:white;
}
If I remove this code, the cpu usage drops to 0,03% or something.. instead of 20%... Is this because of the animated gif that is still playing, but just covered up?
I did not know that animated gifs take this much from the cpu? Granted, it's doing that more than 20 times, but still. It was the same in safari/chrome as well.
I guess I should either not use the loading indicator thing inside of each image, or remove the background-image on a successful load of the image..
I have used over the last weeks the tool "dynaTrace AJAX Edition" (free tool) for analyzing web sites (not only JavaScript). It has some pretty good views that show the usage of resources. Give it a try to track down the part of the javascript (or other parts of the browser) that are the reason for high cpu usage. However the tool is only working with firefox and current internet explorer implementations, but when you use firebug, that seems to indicate that you are using firefox.
There is an entry on their forums page named "What else can impact Browser CPU Usage and AJAX Performance?" which gives some more hints that may help.
You could try Chrome/Chromium Developer Tools » Profiler, Start, reload the page, wait a few minutes and stop it. It would be enough data to have a clue of what could be the problem.
Another common issue with high cpu usage on browsers it's css animations, (as well as gif images). I've been stuck with a high cpu usage issue when developing a web application, it was weird that it only happened when the tab was active/visible, but when on background it didn't, and the problem were present on FF, Chrome and Chromium. Finally it turned to be animated Bootstrap Progress bar.
You could check this easily here http://getbootstrap.com/components/#progress-animated, open it on Chrome, open Tools » Task Manager, then Toggle animation on Bootstrap site and check cpu usage.
I guess this is not strictly an answer to the question, but a usefull tip to find the problem. Since I can't comment yet, I decided to post it as an answer as someone could find it usefull, let me know if this is such a bad practice.
Try to reload the page after enabling FireBug profile feature.
I heavilly used FireBug profile feature to do this. You can see which function is consuming most of the time. Great thing. Try this on other pages with simple javascript example. It should work well. If it doesn't work in your example, just post them a bug.
Related
Hello StackOverflow 😀
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
I am in the process of trying to speed up my HTML website and the first thing I have done is to reduce the images to the exact size that they are loaded into.
My PageSpeed Insight for desktop is 90 which I am very happy with but for mobile, it is 24, which isn't so good (was 19 before I did the images)! It says that I can save 4 seconds if I "remove unused JavaScript" but I haven't added any JavaScript to my website yet (only just taught myself HTML and CSS so moving onto JavaScript soon).
So I am wondering what this unused JavaScript is and how I can remove it if I wasn't the one to add it in there in the first place. Any other tips on how to speed up the website will be much appreciated!
Thank you!
If by "speed up the page" you mean improve the performances of your website:
Changing the dimension of images don't necessary mean that they are "optimized for the web". You can find tools like https://optimage.app/ and information on the web on how to compress them.
You can use the inspector of your browser (Right-click on the page + Inspect) to do this :
Go to Network Tab, clear all logged requests then reload the page you will be able to see which requests are the most time-expensives and maybe do something about it.
Go to performance, start recording, reproduce the actions that you want to analyze
(You can zoom in and out in the timeline and click on the element to have more details)
Delete all Javascript from your website
When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.
I've built a Javascript-heavy web app and recently tweaked it to work on iPad (it needed tweaks because it allows drawing by moving the mouse around, and onmousedown/onmousemove would not get triggered until finger release).
Now, with the tweaks, the app runs fine on Mobile Safari. I'm seeing a problem, however, where the first time I try to load the app on the iPad, it often crashes Mobile Safari. However, reopening the browser and refreshing the page loads the app perfectly and it's fully usable. After doing some research I found out that the most common cause for Mobile Safari crash is over 6MB of pictures or multiple pictures loaded through Javascript. My app only uses images for icons, so the total image size is actually very small (probably under 100KB total), my JS code, however, is 2.5MB uncompressed and 350KB compressed using gz (which is how I'm sending it to the client).
I've also read that loading images through CSS can avoid crashes due to the image size limit. I figured it was worth a try since it's also possible the crash is due to large number of images, not just total image size. After changing some of my icons to be rendered using CSS background-image property, the crash seemed to have gone. I decided to go a step further and tweak all other icons to render using CSS backgrounds as well. After changing all of my images to be rendered using CSS, all of a sudden the crash seems to be back.
Which leads me to several possible conclusions:
A.) Even the partial CSS fix I made did not actually help but somehow I got extremely lucky and saw no crash while reloading my app and restarting the iPad multiple times (then the crash is likely somewhere with my JS code or other parts of the page)
B.) I introduced some other issue when changing the rest of my icons to load through css (if that's the case, I wouldn't expect reloading the page to fix the issue, but it does)
C.) The crash is due to something in my Javascript unrelated to images (but then why does it load and work correctly after reload)
D.) iPad chokes when trying to render/uncompress that much Javascript at once (I haven't heard of this being an issue, but it's also rare to see a chunk of Javascript this big)
Does anyone know what other issues aside from 6MB image limit can cause Mobile Safari to crash the first time a page is loaded, but not the second?
If it helps, here is the link to my web app (this is the old version that loads images through JS): http://www.grafpad.com/grafpad/canvas/demo (it's written in Pyjamas, which is why there is so much generated Javascript).
Thanks
You need to remember that compared to your desktop the iPad is seriously underpowered. Its particularly limited in memory. I noticed right away that there were many, many script blocks on the page. Without tearing your app apart completely to try and find the culprit you might start by combining, just to see if its just dealing with that many nodes that is causing the crash.
We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.
From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.
IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.