您的位置：首页 > Web前端 > JavaScript

js的引入与优化

2016-04-23 00:00 393 查看
摘要: js引入位置会对访问有所影响

1、下图是《javascript高级程序设计》书中提到的，将js外引放到body的最后。

这样解析DOM不会有停顿感觉。但是建议将js放在body标签外和</html>之前；

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>


2、启用延迟属性defer（defer="defer"）。

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本。

请注意，defer属性只适用于外引的js文件。并且在HTML5中，defer属性是默认的，可以不写。

3、使用async（异步脚本，async=“async”）属性。

使用async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js引入 SEO
相关文章推荐
新的分享
章节导航