javascript - Why is js not executed in the order it is loaded?

Question

The code I use is prettify source code highlighting.
It must be written in <pre> to be highlighted, and <pre> must be added with class="prettify"
So I use $(" pre").attr("class","prettify");Add it all in js at once.
No need to write it by hand.
The code probably looks like this

<pre>
<?php
echo "hello world";
?>
</pre>

The js order at the bottom is like this

<script src="./public/js/jquery.min.3.2.1.js"></script>
<script>$(function () {
        $("pre").attr("class", "prettyprint");
    });</script>
<script src="./public/prettify/run_prettify.js"></script>

Under Google Chrome, jq can be parsed first, and then my js that adds classes. Finally, the js with source code highlighting is executed.
However, under Firefox and IE, jq is executed first. The second step executes the source code highlighted js. The third step executes my handwritten js
I don’t know why this happens.

Answer 1

$(function () {
        $("pre").attr("class", "prettyprint");
    });

$(function () { is to execute the JS inside after the DOM of the page is loaded. The JS is already executed according to your order. It’s just that you put event listening in the middle.
You can also highlight the code after the DOM is loaded. After

Answer 2

https://github.com/amdjs/amdj...
/q/10...
This post can solve your problem

Answer 3

<script src="./public/js/jquery.min.3.2.1.js"></script>
<script>
    $("pre").attr("class", "prettyprint");
</script>
<script src="./public/prettify/run_prettify.js" defer="defer"></script>

Try it