通过网页末尾的异步脚本标记加载外部JavaScript [英] Loading external javascript via async script tag at the end of a webpage
问题描述
通过网页末尾的异步脚本标记加载外部javascript
Loading external javascript via async script tag at the end of a webpage
我正在尝试找出以页面形式加载javascript的最佳方式速度。
I'm trying to find out what is the best way to load javascript in terms of page speed.
让我们举个例子：
FILE.JS：
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
和FILE.HTML：
And FILE.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
SOME HTML
<script src="file.js" async></script>
</body>
</html>
现在执行以下操作：
- 打开Firefox
- 转到你放置file.js的url（所以去那里之后file.js必须存储在你的缓存中）
- 按CONTROL N打开新窗口
- 输入放置file.html的网址
- Open Firefox
- Go to the url where you put file.js (so after going there file.js must be stored in your cache)
- Press "CONTROL N" to open a new window
- Type the url where you put file.html
如果你经常做这个测试，那么第二次使用file.html？test = 2，因为浏览器也可以缓存file.html。您可以使用Chrome进行相同的测试。
If you do this test more often then use file.html?test=2 the second time, because the browser can also cache file.html. You can do the same test with Chrome.
在我的计算机上：Chrome和Firefox都会在5秒钟后在屏幕上显示SOME HTML！因此，在渲染方面看起来并不是一个加速页面的好方法。
On my computer: Chrome and Firefox both will show "SOME HTML" on the screen AFTER 5 seconds! So it looks like it's not really a good way to speed up your page in terms of rendering.
在我看来，一个非常合乎逻辑的结果（来自理论），因为异步意味着当浏览器认为这是一个好时机时，它可以执行js代码。但这并没有说明任何渲染！当然同步javascript代码将阻止HTML解析器，因为javascript可以使用例如document.write向DOM添加内容，但是在javascript代码之前还会出现html，并且还必须呈现html。
In my opinion a pretty logical result (from theory), because asynchronous means that the browser can execute the js code when he thinks it's a good moment. But this does not say anything about rendering! Of course "synchonous javascript code" will block the "HTML parser", because javascript can add things to the DOM with for example document.write, but there is also coming html BEFORE the javascript code and that html must also be rendered.
在执行javascript之前，前面的html必须在DOM树中，所以在js代码执行开始之前，必须首先解析SOME HTML。但这并没有说明任何渲染。渲染和解析html是两回事。解析器使用SOME HTML完成后，渲染器会将SOME HTML放在渲染树中。在屏幕上显示之前，渲染器将计算尺寸等。这也需要一些时间。我们也知道浏览器无法在javascript执行期间在屏幕上显示内容，因为（例如）您可以通过javascript更改元素的样式。为了避免同时显示和更改某些内容，浏览器会在执行javascript时暂停渲染过程（此时至少Chrome和Firefox正在这样做）。
Before executing javascript, the preceding html must be in the "DOM tree", so first "SOME HTML" must have been parsed, before the "js code execution" can start. But this doesn't say anything about rendering. Rendering and "parsing html" are two different things. After the parser is done with "SOME HTML", the renderer will place "SOME HTML" in a "render tree". Before showing it on the screen, the "renderer" will calculate the dimensions et cetera. This also takes some time. We also know that a browser can not show things on the screen, during "javascript execution", because (for example) you can change the style of elements via javascript. To avoid showing and changing some content at the same time, the browser will pause the rendering process while executing javascript (at least Chrome and Firefox are doing it like that at this moment).
所以我们说：
y = DONE PARSING HTML和DONE RENDERING之间的时间
y = time between DONE PARSING HTML and DONE RENDERING
如果在此期间时间y，javascript的执行开始，渲染过程将被延迟。我做了很多测试来检查我是否能找到一些一致的结果，但事实并非如此。每次浏览器都可以以稍微不同的速度执行操作，因此它取决于浏览器是否会在执行javascript之前或之后显示某些内容。这就是为什么我在这个测试中做了CONTROL N（在新窗口中打开），因为这会产生一些影响。
If during that time y, the execution of javascript starts, the rendering process will be delayed. I did a lot of tests to check if i could find some consistent results, but that's not the case. Everytime a browser can do things at a slightly different speed, so it just depends if the browser will show some content before or after the javascript execution. That's why i did "CONTROL N" (opening in new window) in this test, because that can have some influence.
所以我的结论是：在互联网上我看到了很多人假装你必须使用异步，所以javascript不会阻止渲染。但从我的测试和理论来看，这似乎并非如此。当你有一个异步脚本标签，加载外部javascript文件，但外部javascript文件在浏览器缓存...然后它是一种与内联脚本相同的情况，因为没有下载时间。例如，参见以下示例：
So my conclusion: On the internet i see a lot of people pretending that you have to use async, so the javascript will not block rendering. But from my tests and from theory this seems not true. When you have an async script tag, to load an external javascript file, but the external javascript file is in the browsers cache ... then it's kind of the same situation as an inline script, because there is no download time. See for example this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
SOME HTML
<script>
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
</script>
</body>
在Chrome和Firefox中，它们在5秒后显示SOME HTML。所以与外部javascript文件（通过脚本标记加载异步）的结果相同，但是从缓存中获取。
In Chrome and Firefox thet are showing "SOME HTML" after 5 seconds. So the same result as an external javascript file (async loaded via script tag), but taken from cache.
所以async在渲染方面没有加快速度吗？那为什么我在互联网上到处读？如果浏览器在执行javascript之前完成渲染，那将是真实有用的。
So async is not speeding up anything in terms of rendering? Then why am i reading that everywhere on the internet? It would only be true and useful if a browser would finish rendering, before executing javascript.
我没有得到它，我认为浏览器（和讨论）需要在执行javascript之前专注于完成渲染。那么异步在渲染速度方面会很有用，但现在不是很多情况。
I don't get it and i think a browser (and the discussion) needs to focus on "finishing rendering" before "executing javascript". Then async would be useful in terms of "rendering speed", but now not in a lot of cases.
我做了同样的测试：创建元素 - >脚本标记async在页面的头部，但它给出了相同的结果：浏览器在从缓存执行外部javascript文件后显示SOME HTML。
And i did the same test with: "create element -> script tag async" in the head of the page, but it's giving the same results: the browser is showing "SOME HTML" after the execution of external javascript file from cache.
推荐答案
我说对了吗？您只使用一个流来比较同步和异步？这是浪费时间，因为同步方法当然更快。
Did I get u right? You are comparing sync with async using just one stream? That's waste of time, because of course the sync approach is faster.
一次只加载几十个文件你会看到异步方式更快，因为它们是并行加载的，而不是按顺序加载。
Just load dozens of files at a time and u will see, that the async way is much faster, since they are loaded in parallel, not in sequence.
这篇关于通过网页末尾的异步脚本标记加载外部JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
