通过网页末尾的异步脚本标记加载外部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的url(所以去那里之后file.js必须存储在你的缓存中)
>按“CONTROL N”打开一个新窗口
>键入放置file.html的URL

如果你经常做这个测试,那么第二次使用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文件(通过脚本标记加载异步)的结果相同,但是从缓存中获取.

所以异步不会加速渲染方面的任何事情吗？那为什么我在互联网上到处读？如果浏览器在执行javascript之前完成渲染,那将是真实有用的.

我没有得到它,我认为浏览器(和讨论)需要关注“执行javascript”之前的“完成渲染”.那么异步在“渲染速度”方面会很有用,但现在并不是很多情况.

我在页面的头部进行了相同的测试：“创建元素 – >脚本标记异步”,但它给出了相同的结果：浏览器在从缓存执行外部javascript文件后显示“SOME HTML”.

解决方法

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

只需一次加载几十个文件,你就会看到,异步方式要快得多,因为它们是并行加载的,而不是按顺序加载的.

原文地址：https://www.jb51.cc/html/231968.html

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

解决方法

相关推荐