1. 犀牛前端部落首页
  2. Html5百科

script标签应该放在HTML哪里,总结分享

几年前,有经验的程序员总是让我们将script标签放在页面最底部。

很明显,现在浏览器有了更加酷的兼容方式,这篇文章,俺将跟大家一起来学习script标签的async和defer新特性,探讨script应该放在哪里更好。

页面加载方式

在我们讨论<script>标签应该放在页面哪里之前,我们来看看当页面加载<script>标签时会发生什么?

当浏览器加载带有<script>标签的网站时,将发生以下情况:

  1. 获取html页面(如index.html)
  2. 开始解析HTML
  3. 解析器遇到引用外部脚本
  4. 浏览器请求脚本文件,同时解析器阻塞并停止解析页面上其他的HTML
  5. 一段时间后,脚本被下载并随后执行
  6. 解析器将继续解析HTML文档的剩余部分

步骤4会导致不良的用户体验, 您的网站基本上会停止加载,没有任何响应,直到您下载了所有脚本。

如果你的脚本文件很大,那么对用户体验的影响可以说是致命的。

为什么会发生这种情况?

任何脚本都可以通过document.write()或其他DOM操作插入自己的HTML。 这意味着解析器必须等到脚本被下载并执行后,才能安全地解析文档的其余部分。 毕竟,脚本可能已经在文档中插入了自己的HTML。

但是,大多数JavaScript开发人员在文档加载时不再处理DOM。 取而代之的是,他们等到文档加载完成后再进行修改。 例如:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

因为您的浏览器不知道my-script.js在下载并执行文档之前不会修改文档,所以解析器遇到script后将会停止解析。

老的解决方案

解决此问题的旧方法是将<script>标记放在<body>的底部,因为这可以确保解析器直到最后才被阻塞。

这种方法有其自身的问题:浏览器在解析整个文档之前无法开始下载脚本。 对于具有大型脚本和样式表的大型网站,能够尽快下载脚本对于提高性能非常重要。 如果您的网站在2秒钟内未加载,人们将转到另一个网站。

在最佳解决方案中,浏览器将尽快开始下载脚本,同时解析文档的其余部分。

现代化解决方案

如今,浏览器支持脚本的async和defer属性。 这些属性告诉浏览器在下载脚本时继续解析是安全的。

async

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

具有async属性的脚本是异步执行的。 这意味着该脚本在下载后立即执行,同时不会阻塞浏览器。
这意味着可以在脚本1之前下载并执行脚本2。

根据http://caniuse.com/#feat=script-async,所有浏览器中的97.78%支持此功能。

defer

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

具有defer属性的脚本按顺序执行(即,第一个脚本1,然后是脚本2)。 这也不会阻止浏览器。

与异步脚本不同,延迟脚本仅在整个文档加载后才执行。

根据http://caniuse.com/#feat=script-defer,所有浏览器中的97.79%支持此功能。 98.06%至少部分支持它。

关于浏览器兼容性的重要说明:在某些情况下IE <= 9可能会无序执行延迟的脚本。 如果您需要支持这些浏览器,请先阅读此内容!

总结

当前的最新技术是将脚本放在<head>标记中,并使用async或defer属性。 这样一来,您的脚本就可以尽快下载,而不会阻止浏览器。

目前98%的浏览器都支持了该属性!

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2955.html

发表评论

登录后才能评论