1. <script>通常用于加载外部文件,当<script>用于加载外部文件时,它可以放在<head>中,也可以放在<body>中,当<script>放在head中时,浏览器必须等到<script>标签加载并运行外部文件代码后,页面才能开始渲染,之前页面都是空白。因而这是将<script>放在<head>中不好的一面。那么好的一面:如果整个页面必须依赖<script>外部文件才能够有正常的行为,那么放在<head>中是一个极好的方法。至于其他的<script>文件,最好放在<body>底部,最好放在<body>底部。最好放在<body>底部。因为放在<body>底部时,整个页面已经渲染完成了,进入页面的速度不会显得太慢。
2. 将多个<script>标签合成一个比同时加载多个标签要好。
3. HTML4为<script>定义了一个扩展属性,defer,这个defer属性指明元素中所包含的脚本不打算修改DOM,从而代码可以稍后执行。从而方便浏览器进行优化。
4. defer 与 async的区别
两者相同点:
异步加载
<script>标签的defer属性——告诉浏览器该脚本不会在页面加载完成之前操作DOM,脚本将会和其他资源文件并行下载;
<script>标签的async属性——HTML5新的异步、并行模式,脚本将在完成下载后等待合适的时机执行代码。
回调初始化:
<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>
两者区别:
async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。
5. 如果多个文件的次序非常重要,最好能将其练成一个文件。