通过网页末尾的异步脚本标签加载外部 javascript

Question

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.我试图找出在页面速度方面加载 javascript 的最佳方式。

Let's take this example:让我们以这个例子为例：

FILE.JS:文件.JS：

// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime(); 
while( new Date().getTime() - timeWhile < 5000 );

And FILE.HTML:和 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>

Now do the following:现在执行以下操作：

Open Firefox打开火狐
Go to the url where you put file.js (so after going there file.js must be stored in your cache)转到您放置 file.js 的 url（所以在那里之后 file.js 必须存储在您的缓存中）
Press "CONTROL N" to open a new window按“CONTROL N”打开一个新窗口
Type the url where you put file.html输入放置 file.html 的 url

If you do this test more often then use file.html?test=2 the second time, because the browser can also cache file.html.如果您更频繁地执行此测试，则第二次使用 file.html?test=2，因为浏览器也可以缓存 file.html。 You can do the same test with Chrome.您可以使用 Chrome 进行相同的测试。

On my computer: Chrome and Firefox both will show "SOME HTML" on the screen AFTER 5 seconds!在我的电脑上：Chrome 和 Firefox 都会在 5 秒后在屏幕上显示“SOME HTML”！ So it looks like it's not really a good way to speed up your page in terms of rendering.因此，就渲染而言，这似乎并不是加快页面速度的好方法。

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.在我看来，这是一个非常合乎逻辑的结果（从理论上讲），因为异步意味着浏览器可以在他认为时机好的时候执行 js 代码。 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 解析器”，因为 javascript 可以使用例如 document.write 向 DOM 添加内容，但是在 javascript 代码之前也有 html 并且该 html 也必须呈现。

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.在执行 javascript 之前，前面的 html 必须在“DOM 树”中，因此必须先解析“SOME HTML”，然后才能开始“执行 js 代码”。 But this doesn't say anything about rendering.但这并没有说明渲染。 Rendering and "parsing html" are two different things.渲染和“解析 html”是两件不同的事情。 After the parser is done with "SOME HTML", the renderer will place "SOME HTML" in a "render tree".解析器完成“SOME HTML”后，渲染器会将“SOME HTML”放置在“渲染树”中。 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.我们也知道，在“javascript 执行”期间，浏览器无法在屏幕上显示内容，因为（例如）您可以通过 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).为了避免同时显示和更改某些内容，浏览器会在执行 javascript 时暂停渲染过程（至少 Chrome 和 Firefox 目前是这样做的）。

So let's say:所以让我们说：

y = time between DONE PARSING HTML and DONE RENDERING y = DONE PARSING HTML 和 DONE RENDERING 之间的时间

If during that time y, the execution of javascript starts, the rendering process will be delayed.如果在那个时间 y 开始执行 javascript，则渲染过程将被延迟。 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.每次浏览器都可以以稍微不同的速度做事，所以这取决于浏览器是否会在 javascript 执行之前或之后显示一些内容。 That's why i did "CONTROL N" (opening in new window) in this test, because that can have some influence.这就是我在此测试中执行“CONTROL N”（在新窗口中打开）的原因，因为这会产生一些影响。

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.所以我的结论是：在互联网上我看到很多人假装你必须使用异步，所以 javascript 不会阻止渲染。 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.当你有一个异步脚本标签，加载一个外部 javascript 文件，但外部 javascript 文件在浏览器缓存中......那么它的情况与内联脚本相同，因为没有下载时间。 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>

In Chrome and Firefox thet are showing "SOME HTML" after 5 seconds.在 Chrome 和 Firefox 中，5 秒后显示“SOME HTML”。 So the same result as an external javascript file (async loaded via script tag), but taken from cache.因此与外部 javascript 文件（通过脚本标记异步加载）相同的结果，但从缓存中获取。

So async is not speeding up anything in terms of rendering?所以 async 在渲染方面没有加速任何东西？ 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".我不明白，我认为浏览器（和讨论）需要在“执行 javascript”之前专注于“完成渲染”。 Then async would be useful in terms of "rendering speed", but now not in a lot of cases.然后 async 在“渲染速度”方面很有用，但现在不是在很多情况下。

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.我做了同样的测试：页面头部的“创建元素 - > 脚本标签异步”，但它给出了相同的结果：浏览器在执行来自缓存的外部 javascript 文件后显示“一些 HTML”。

Answer 1

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

问题描述

1 个解决方案

解决方案1
0 2017-10-27 16:40:06

通过网页末尾的异步脚本标签加载外部 javascript

问题描述

1 个解决方案

解决方案1 0 2017-10-27 16:40:06

解决方案1
0 2017-10-27 16:40:06