在html中使用javascript
1.内嵌式：
一般在<body>标签的尾部添加<script>标签，并且指定type="text/javascript"
比如这样：
<html>
<head>
</head>
<body>
<!--内容-->
<script type="text/javascript">
console.log('Tag should be here');
</scipt>
<body>
</html>
这样的好处是：
- 避免脚本加载阻塞文档渲染
- 避免脚本操作DOM时文档流未渲染完毕导致获取DOM元素失败。
看个例子：
<html>
<head>
<script type = "text/javascript">
let btn = document.getElementsByTagName('button')[0];
// do sth with btn
// error
</script>
</head>
<body>
<!-- content here -->
<button>按钮</button>
</body>
</html>
报错:
原因是先加载了脚本内的内容，而此时文档流未渲染，并没有<button>标签存在，所以获取button得到的结果为
undefined.
解决办法
将script里的内容放置到window.onload{ }里，在文档加载完成后会触发load事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了加载。
2.外部引入
外部引入JS脚本文件作为最佳实践，src作为外部引入资源的重要属性，用来指定外部资源的引入路径，可以是相对路径，也可以是绝对路径：
<html>
<head>
<script type = "text/javascript" src="js/相对路径.js"></script>
<script type = "text/javascript" src="desktop/example/js/绝对路径.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
同样，如同嵌入式JS一样，外部引入JS同样也需要考虑使得文档流优先加载的问题。
延迟脚本
使用defer表明外部引入的脚本将按照它们出现的顺序先后执行，也就是说先出现的脚本会先执行，然后再到后者。但是在现实里，延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。（顺序得不到保障，无法保证预期效果，容易出错）
<html>
<head>
<script type="text/javascript" defer="defer" src="我会先执行.js"></script>
<script type="text/javascript" defer="defer" src="我会后执行.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
异步脚本
async表示浏览器立即下载物件，但是不保证执行先后顺序，指定为async的目的是不让页面等待两个脚本的下载和执行，从而可以异步加载页面其他内容。所以设为async的脚本最好不要进行dom操作，否则有可能出现加载页面时出现错误。
<html>
<head>
<script type="text/javascript" defer="defer" src="我不一定第二个执行.js"></script>
<script type="text/javascript" defer="defer" src="我不一定第二个执行.js"></script>
</head>
<body>
<!-- 我不会等待两个脚本文件的加载，我会直接进行页面渲染 -->
</body>
</html>
网友评论