本文探讨了JavaScript放置位置对网页渲染的影响，指出将脚本置于body底部可以避免白屏问题。同时介绍了defer属性，它允许脚本延迟执行，待页面解析完毕后运行。此外，async属性使得脚本异步加载，不保证执行顺序。最后提到了动态创建script元素的方法，以实现异步加载脚本，提高页面性能。
标签位置
在过去，所有 script 元素都被放在页面 head 标签内，这种做法主要目的是 css 与 javaScript 放在一起代码看上去比较整洁，但是有一个问题就是把 javaScript 放在 head 里面意味着必须把所有 javaScript 代码都下载、解析和解释完成后，才开始渲染页面，从而导致打开页面可能会产生白屏问题，解决方法就是将所有 javaScript 引用放在 body 元素中的内容后面，例子如下。
<html>
<head>
<title>xipiker</title>
</head>
<body>
<script scr="xxx.js" />
</body>
</html>
推迟执行脚本
script 元素中有一个 defer 属性，这个属性表示脚本在执行的时候不会改变页面结构。脚本会被延迟到整个页面都解析完毕后再运行。因此，在 script 元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。
<html>
<head>
<title>xipiker</title>
<script defer scr="xxx.js" />
</head>
<body></body>
</html>
异步执行脚本
script 元素中有一个 async 属性，这个属性与 defer 不同的是标记为 async 的脚本并不能保证能按照它们的出现顺序执行。
<html>
<head>
<title>xipiker</title>
<!-- 可能我先执行，也可能它先执行 -->
<script async scr="xxx1.js" />
<!-- 可能我先执行，也可能它先执行 -->
<script async scr="xxx2.js" />
</head>
<body></body>
</html>
动态加载脚本
通过向 DOM 中动态添加 script 元素。
let script = document.createElement('script');
script.src = 'xxx.js';
// 默认情况下这种方法创建的<script>元素是以异步加载的，相当于添加了async属性，我们需要把async禁用掉
script.async = false;
document.head.appendChild(script);
8277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
