我试图找出在页面速度方面加载JavaScript的最佳方法.
我们来看这个例子：
file.Js：
// Synchronous delay of 5 secondsvar 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”.
解决方法 我明白了吗？您只使用一个流来比较同步和异步？这是浪费时间,因为同步方法当然更快.只需一次加载几十个文件,你就会看到,异步方式要快得多,因为它们是并行加载的,而不是按顺序加载的.
总结以上是内存溢出为你收集整理的通过网页末尾的异步脚本标记加载外部JavaScript全部内容，希望文章能够帮你解决通过网页末尾的异步脚本标记加载外部JavaScript所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）