Where is the best place to put <script> tags in HTML markup?
2016-04-28 15:47
701 查看
转自:http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup
Here's what happens when a browser loads a website:
Fetch the HTML page (e.g. index.html)
Begin parsing the HTML
The parser encounters a
referencing an external script file.
The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
After some time the script is downloaded and subsequently executed.
The parser continues parsing the rest of the HTML document.
Step 4 causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.
Any script can insert its own HTML via
other DOM manipulations. This implies that the parser has to wait until the script has been downloaded & executed before it can safely parse the rest of the document. After all, the script could have
inserted its own HTML in the document.
However, most javascript developers no longer manipulate the DOM while the document is loading. Instead, they wait until the document has been loaded before modifying it. For example:
Javascript:
Because your browser does not know my-script.js isn't going to modify the document until it has been downloaded & executed, the parser stops parsing.
The old approach to solve this problem was to put
at the bottom of your
because this ensures the parser isn't blocked until the very end.
This approach has its own problem: the browser cannot start downloading the scripts until the entire document is parsed. For larger websites with large scripts & stylesheets, being able to download the script as soon as possible is very important for performance.
If your website doesn't load within 2 seconds, people will go to another website.
In an optimal solution, the browser would start downloading your scripts as soon as possible, while at the same time parsing the rest of your document.
Today, browsers support the
on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded.
Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it's downloaded, without blocking the browser in the meantime.
This implies that it's possible script 2 is downloaded & executed before script 1.
According to http://caniuse.com/#feat=script-async, 90% of all browsers support this.
Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser.
Unlike async scripts, defer scripts are only executed after the entire document has been loaded.
According to http://caniuse.com/#feat=script-defer, 90% of all browsers support this. 92% support it at
least partially.
An important note on browser compatibility: in some circumstances IE <= 9 may execute deferred scripts out of order. If you need to support those browsers, please read this first!
The current state-of-the-art is to put scripts in the
and use the
This allows your scripts to be downloaded asap without blocking your browser.
The good thing is that your website should still load correctly on the 20% of browsers that do not support these attributes, while speeding up the other 80%.
Here's what happens when a browser loads a website:
Fetch the HTML page (e.g. index.html)
Begin parsing the HTML
The parser encounters a
<script>tag
referencing an external script file.
The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
After some time the script is downloaded and subsequently executed.
The parser continues parsing the rest of the HTML document.
Step 4 causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.
Why does this even happen?
Any script can insert its own HTML via document.write()or
other DOM manipulations. This implies that the parser has to wait until the script has been downloaded & executed before it can safely parse the rest of the document. After all, the script could have
inserted its own HTML in the document.
However, most javascript developers no longer manipulate the DOM while the document is loading. Instead, they wait until the document has been loaded before modifying it. For example:
<!-- 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>
Javascript:
// 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"; });
Because your browser does not know my-script.js isn't going to modify the document until it has been downloaded & executed, the parser stops parsing.
Antiquated recommendation
The old approach to solve this problem was to put <script>tags
at the bottom of your
<body>,
because this ensures the parser isn't blocked until the very end.
This approach has its own problem: the browser cannot start downloading the scripts until the entire document is parsed. For larger websites with large scripts & stylesheets, being able to download the script as soon as possible is very important for performance.
If your website doesn't load within 2 seconds, people will go to another website.
In an optimal solution, the browser would start downloading your scripts as soon as possible, while at the same time parsing the rest of your document.
The modern approach
Today, browsers support the asyncand
deferattributes
on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded.
async
<script type="text/javascript" src="path/to/script1.js" async></script> <script type="text/javascript" src="path/to/script2.js" async></script>
Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it's downloaded, without blocking the browser in the meantime.
This implies that it's possible script 2 is downloaded & executed before script 1.
According to http://caniuse.com/#feat=script-async, 90% of all browsers support this.
defer
<script type="text/javascript" src="path/to/script1.js" defer></script> <script type="text/javascript" src="path/to/script2.js" defer></script>
Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser.
Unlike async scripts, defer scripts are only executed after the entire document has been loaded.
According to http://caniuse.com/#feat=script-defer, 90% of all browsers support this. 92% support it at
least partially.
An important note on browser compatibility: in some circumstances IE <= 9 may execute deferred scripts out of order. If you need to support those browsers, please read this first!
Conclusion
The current state-of-the-art is to put scripts in the <head>tag
and use the
asyncor
deferattributes.
This allows your scripts to be downloaded asap without blocking your browser.
The good thing is that your website should still load correctly on the 20% of browsers that do not support these attributes, while speeding up the other 80%.
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)