dballardgh · GitHub

HtmlUnit 2.51.0
JDK 8 or 11

With this HTML page:

<!DOCTYPE html>
<html>
<head>
<title>Jquery Ready Test</title>
</head>
<body>
<h1>Jquery Ready Test</h1>
<!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="A.js"></script>
<script src="B.js"></script>
<script src="C.js"></script>
</body>
</html>

And the following script A.js:

console.error( "A.js loaded" );
$( document ).ready(function() {
    console.error( "A ready" );
});

Script B.js:

console.error( "B.js loaded" );
$( document ).ready(function() {
    console.error( "B ready" );
});

And script C.js:

console.error( "C.js loaded" );
$( document ).ready(function() {
    console.error( "C ready" );
});

In a real browser I see that the files are processed in order, and the ready() functions are called in the order added:

A.js loaded
B.js loaded
C.js loaded
A ready
B ready
C ready

Using HtmlUnit 2.51.0:

private void runLocal() throws Exception {
  WebClient webClient = new WebClient();
  final HtmlPage page = webClient.getPage("http://localhost/mine.html");
  Thread.sleep(5000);
}

via the log I see:

SEVERE: A.js loaded
SEVERE: B.js loaded
SEVERE: C.js loaded
SEVERE: A ready
SEVERE: C ready
SEVERE: B ready

The files are loaded and processed in order, but under HtmlUnit, jquery is executing the ready functions out of order. The problem does not occur with jquery 1 or 2. The problem does occur with older versions of HtmlUnit. Not clear if this is related to issue #275. The problem does not occur with chrome, firefox, edge or IE.

Read the original on github.com ↗