Question

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

我正在尝试找出在页面速度方面加载javascript的最佳方式。

我们来看这个例子：

FILE.JS：

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

和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的网址（所以去那里之后file.js必须存储在你的缓存中）
按“CONTROL N”打开新窗口
输入放置file.html的网址

如果你经常做这个测试，那么第二次使用file.html？test = 2，因为浏览器也可以缓存file.html。您可以使用Chrome进行相同的测试。

在我的电脑上：Chrome和Firefox都会在5秒钟后在屏幕上显示“SOME HTML”！因此，在渲染方面看起来并不是一个加速页面的好方法。

在我看来，一个非常合乎逻辑的结果（来自理论），因为异步意味着浏览器可以在他认为这是一个好时机时执行js代码。但这并没有说明任何渲染！当然“同步javascript代码”将阻止“HTML解析器”，因为javascript可以使用例如document.write向DOM添加内容，但是在javascript代码之前还会出现html，并且还必须呈现html。

在执行javascript之前，前面的html必须在“DOM树”中，因此在“js代码执行”开始之前，必须先解析“SOME HTML”。但这并没有说明任何渲染。渲染和“解析html”是两回事。解析器完成“SOME HTML”后，渲染器会将“SOME HTML”放在“渲染树”中。在屏幕上显示之前，“渲染器”将计算尺寸等。这也需要一些时间。我们也知道浏览器无法在“javascript执行”期间在屏幕上显示内容，因为（例如）您可以通过javascript更改元素的样式。为了避免同时显示和更改某些内容，浏览器将在执行javascript时暂停渲染过程（至少Chrome和Firefox此时正在执行此操作）。

所以让我们说：

y = DONE PARSING HTML和DONE RENDERING之间的时间

如果在那段时间y，javascript的执行开始，渲染过程将被延迟。我做了很多测试来检查我是否能找到一些一致的结果，但事实并非如此。每次浏览器都可以以稍微不同的速度执行操作，因此它取决于浏览器是否会在执行javascript之前或之后显示某些内容。这就是为什么我在这个测试中做了“CONTROL N”（在新窗口中打开）的原因，因为这会产生一些影响。

所以我的结论是：在互联网上，我看到很多人假装你必须使用异步，所以javascript不会阻止渲染。但从我的测试和理论来看，这似乎并非如此。当你有一个异步脚本标签，加载外部javascript文件，但外部javascript文件在浏览器缓存...然后它是一种与内联脚本相同的情况，因为没有下载时间。例如，参见以下示例：

<!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文件（通过脚本标记加载的异步）相同，但是从缓存中获取。

所以async不会在渲染方面加快速度吗？那为什么我在互联网上到处读？如果浏览器在执行javascript之前完成渲染，那将是真实有用的。

我没有得到它，我认为浏览器（和讨论）需要在“执行javascript”之前专注于“完成渲染”。那么异步在“渲染速度”方面会很有用，但现在并不是很多。

我在页面的头部进行了相同的测试：“创建元素 - ＆gt;脚本标记异步”，但它给出了相同的结果：浏览器在执行外部javascript文件后显示“SOME HTML”来自缓存。

Answer 1

我说对了吗？您只使用一个流来比较同步和异步？这是浪费时间，因为同步方法当然更快。

一次只加载几十个文件，你会看到异步方式更快，因为它们是并行加载的，而不是按顺序加载。

通过网页末尾的异步脚本代码加载外部JavaScript！

1 个答案: