我试图找出在页面速度方面加载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”.
