Javascript условия гонки погрузки - PullRequest
1 голос
/ 11 апреля 2020

У меня есть простая веб-страница, которую javascript файлы загружают в неправильном порядке:

<!DOCTYPE html>
<html>
<head>
  <title>Template App!</title>
  <script src="/webjars/jquery/3.4.1/jquery.min.js" type="text/javascript" ></script>
  <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css" >
  <script src="/webjars/bootstrap/4.4.1-1/js/bootstrap.min.js" type="text/javascript" ></script>
  <script type="text/javascript" src="/api/routes"></script>
  <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
  <script src="/assets/client-fastopt.js" type="text/javascript" ></script>
</head>
<body>
  <h1>Content Dynamically Loaded from DB!</h1>
</body>
</html>

И я получаю следующие ошибки:

TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
ReferenceError: jQuery is not defined

У меня уже есть убедился, что jquery является первым включенным импортом (как вы можете видеть), и где-то нашел другой ответ, в котором говорилось, что добавление type="text/javascript" решит проблему (это не имеет никакого эффекта).

Проблема не в Это похоже на состояние гонки.

И да, я знаю, что в соответствии со стандартами загрузка должна выполняться синхронно. Что-то не так, но я не уверен, что.


Редактировать: Итак, я проверил с Google Chrome, и проблема там не возникает. Кажется, Firefox конкретный c.

Кроме того, это не происходит в производственной среде (у меня есть сервер, на котором работает прототип веб-сайта), поэтому происходит сбой только на моей локальной машине.

Кроме того, он работает по ссылке CDN из комментариев.

Я начинаю думать, что Firefox трактует систему разработки иначе, чем производство. В частности, в моей среде разработки используется порт 9000 вместо 443. Я собираюсь добавить перенаправление, чтобы увидеть, что происходит, но из этого обсуждения кажется, что firefox могут быть портами специального корпуса.


Редактировать 2: Я проверил, перенаправив порт 80 на порт 9000 и подключившись к нему. Возникла та же проблема.

Моя следующая догадка - что-то с заголовками HTTP (см. Предыдущую ссылку).

Официальный CDN (Работает):

Request:
Host: code.jquery.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:9000/
DNT: 1
Connection: keep-alive
Cookie: cf_clearance=a78075ea1c5a32fa8dca44f7b71a76f5a655f785-1586627258-0-250
Pragma: no-cache
Cache-Control: no-cache

Response:
HTTP/1.1 200 OK
Date: Sat, 11 Apr 2020 22:45:50 GMT
Connection: Keep-Alive
Accept-Ranges: bytes
Content-Encoding: gzip
Content-Length: 30638
Content-Type: application/javascript; charset=utf-8
Last-Modified: Wed, 01 May 2019 21:14:27 GMT
Server: nginx
ETag: W/"5cca0c33-15851"
Cache-Control: max-age=315360000
Cache-Control: public
Access-Control-Allow-Origin: *
Vary: Accept-Encoding
X-HW: 1586645150.dop016.fr8.shc,1586645150.dop016.fr8.t,1586645150.cds159.fr8.c

Локальное производство (Работает ):

Request:
Host: my.server.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://my.server.com/
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Response:
HTTP/1.1 200 OK
Date: Sat, 11 Apr 2020 23:03:27 GMT
Server: Apache/2.4.25 (Debian)
ETag: "2dd180233bcfa564aa7f079a2a03f7d019d589bf-gzip"
Accept-Ranges: bytes
Cache-Control: public, max-age=3600
Last-Modified: Sun, 05 May 2019 15:29:52 GMT
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Permitted-Cross-Domain-Policies: master-only
Content-Type: application/javascript; charset=UTF-8
Vary: Accept-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=5, max=82
Connection: Keep-Alive
Transfer-Encoding: chunked

Местное развитие (условия гонки):

Request:
Host: localhost:9000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:9000/
DNT: 1
Connection: keep-alive
Cookie: org.cups.sid=06f22708ed9d548a97575306c76e8ca3; PLAY_SESSION=eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImNzcmZUb2tlbiI6IjUzOWY2MzE2NzE5ZGY2MDBlMzY3NmE5ZjJiZTQyZmQyNmFiZGYxY2ItMTU4NjYyODc5MTAwNC1kMDI4YmU0ZDM1NmI0OTRhMzhkOGFlZjcifSwibmJmIjoxNTg2NjI4NzkxLCJpYXQiOjE1ODY2Mjg3OTF9.LKhzjKS2RZAjBuXCSbpgn0ADJasejEMfBCpBzyQX7wM
Pragma: no-cache
Cache-Control: no-cache

Response:
HTTP/1.1 200 OK
ETag: "137e612d567f365cd470db586615dd5294920d30"
Accept-Ranges: bytes
Cache-Control: no-cache
Last-Modified: Sun, 05 May 2019 17:29:52 GMT
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Permitted-Cross-Domain-Policies: master-only
Date: Sat, 11 Apr 2020 22:45:49 GMT
Content-Type: application/javascript; charset=UTF-8
Content-Length: 88145
...