Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why duplicate script tags do not produce duplicate requests?

I have a very simple test case (and 3 hours of googling and a flu)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Два внешних скрипта</title>
</head>
<body>
    <script type="text/javascript" src="http://example.com/myscript.js"></script>
    <script type="text/javascript" src="http://example.com/myscript.js"></script>
</body>
</html>

And the server return the following reponse headers

Connection: keep-alive
Expires: Mon, 04 Dec 1999 21:29:02 GMT
Cache-Control: no-store, no-cache, must-revalidate, max-age=0
Pragma: no-cache

This code executed in chrome produces one request to server, also in opera, safari win.

Is this behaviour in anyway standard?

Is there any official documentation for this behaviour?

Is this cashe issue, cause I thought you will still have a request anyway with 304 response?

Disclaimer: please do not suggest randomizing or avoiding this issue. I want to learn background of this issue

like image 627
Olga Avatar asked Apr 18 '13 13:04

Olga


People also ask

Can I have 2 script tags?

An HTML page can contain multiple <script> tags in the <head> or <body> tag. The browser executes all the script tags, starting from the first script tag from the beginning.

Can we write multiple script tags in HTML?

Yes, we can write any number of tags inside tag. And browser access them in sequential order.


2 Answers

There are two reasons why this can happen. The first is that the content provider can set the expires heading so that the browser will not issue a second request, and the second is how browsers actually handle GET requets in HTTP, such as the get request to include the script.

1. Setting Expires Header of Content

The content provider can set the Expires header so that the script is cached by the browser the first time, hence the lack of a second request. This is a good standard web practice for speeding up web pages, and the expires header is set by the host server of a script. Yahoo Developer has a good article on this at Add an Expires or a Cache-Control Header which recommends adding the Expires header to scripts and stylesheets in addition to images.

2. Script Get Method is Idempotent

GET requests, such as the get request to include the javascript on a webpage are safe methods according to the HTTP specification. Safe methods are also idempotent, in that multiple requests yield the same result as a single request and that the method is only used to retrieve data. Many browsers take advantage of this property of the HTTP specification, and won't sent multiple requests for idempotent methods. George Cummins explained this well, and an article on this is available from the Mozilla Developer Network.

like image 180
KernelPanik Avatar answered Nov 04 '22 05:11

KernelPanik


Many HTTP methods (GET, HEAD, PUT, DELETE) are defined to be idempotent which means that multiple identical requests have the same effect as a single request. Browsers take this into account and will avoid the overhead of sending multiple identical requests where possible.

For more information, see the Hypertext Transfer Protocol -- HTTP/1.1 RFC section 9.1. For a high-level overview, see the Wikipedia article on HTTP.

like image 33
George Cummins Avatar answered Nov 04 '22 07:11

George Cummins