How to detect JS function that is executed when the page loads in the browser?

Optimizing website for Google speed insights. The main stopper - long handled js scripts.

During page load WordPress runs a lot of scripts. 8-10 seconds is processed in the loaded page. JS code is more than 1 MB. Though the website is nothing dynamic in the template a zoo. Today found a plugin for jQuery already 2010.

I see for several seconds after loading the appended CSS classes to the body tag. See how long delay before the slider appears.

I want to leave only the desired functionality. And the rest thrown out. But it is impossible to divide a huge js file.
Tell me how to compile a list to be executed when loading the JS functions? Or how to find unused functions?
April 19th 20 at 12:38
3 answers
April 19th 20 at 12:40
Enough technical approach should be, sometimes it is better from zero to collect. But in General, you can use the blunt brute force + to watch that as called.

In the blunt brute force will help you console.log() or alert() in function bodies. If the function is called (it is necessary to look, as is called, for the part called immediately, and some other functions), and if it is running, you'll get a message in console or in a modal window.

But generally it is better just to learn the JS basics of site building, to dismantle components, or maybe just to find how these components are going on the website and based on all this knowledge to cut off unnecessary. So right, but brute force is also quite can help you. See only those pages are poverty needed)
April 19th 20 at 12:42
To solve this problem, you need to have good experience with JS. Understanding of the methods, knowledge bases, and so on.

JS code is more than 1 MB.


Not so much. There are zoos and more.

Today found a plugin for jQuery already 2010.


Starting from this we can guess that there is a huge pile of scripts, which in our days can be reduced to minimal fragments, but again the emphasis in knowledge and experience.

I see for several seconds after loading the appended CSS classes to the body tag. See how long delay before the slider appears.


Otlavlivatsya events, features, and check what is responsible for what. Test. Split your code into logical chunks, create components. It will be easier to work with. If you happen to calculate more than a huge script can rewrite them in a modern style, or Google concise solutions. Using the second option will save time, Yes.

You can use the console.log() & alert(), as noted in the adjacent answer. It is also very good. And very good separation of code into functions. A very good thing.

So I think you need to learn JS and slowly can start to clean code. Most importantly - don't rush.

Javascript is not CSS & HTML which is more or less easier to fix bugs. In JS, some functions may be so linked that will have a long time then think where is the main error/bug.

And of course, perhaps there are some good methods for solving such problems. You may want to Google, and suddenly you're lucky.
April 19th 20 at 12:44
Thank you all for the advice.
I did this:
1) Opened a large JS file and made it beautiful with prettier

2) Added all the functions of the console.log
Used auto replace with regular expressions
Find:
(function[^)(]*\([^)(]*\)\s*\{)
Replace with:
$1 if (arguments.callee.name.length > 5) {console.log( arguments.callee.name + '. length - ' + arguments.callee.name.length);} else {console.log( arguments.callee.name );}

Note: a lot of internal functions without names or with short names. I want to find functions that are called on the page. They usually have long names. I added the output to the console, word length and length functions.

3) open the page of website in Chrome
Moved to the Dev Tools Console
Looked what's going on with the functions - several unnamed functions are fixated.

Filtered out all functions with long names at word length

4) Copied the list in LibreOffice Calc (the delimiter is a space).
've filtered out the duplicates.
Found 57 functions.
Judging by the names while loading pages is all that is without any conditions.

5) Now I will look for the source template where these functions are called and shoot. I hope they are all in one place.

Find more questions by tags JavaScript