2.1.1 script标签的位置

最新推荐文章于 2023-04-26 19:54:11 发布

dao-keer

最新推荐文章于 2023-04-26 19:54:11 发布

阅读量269

点赞数

分类专栏： javascript高级程序设计

本文链接：https://blog.csdn.net/qq452981462/article/details/79037111

版权

javascript高级程序设计专栏收录该内容

45 篇文章 0 订阅

订阅专栏

script标签在html文档中的位置

经过尝试在html文档的各个部分插入<script>标签引入外部JavaScript文件，发现所有位置的JavaScript文件都成功加载了，包括<html>标签内外，标签之间的奇葩位置，最后在开发者工具下，发现在html的结构中，浏览器已经自动把这些文件放到了相当合理的位置上了，随意插入JavaScript文件的做法肯定是不可取的，下面就最佳方式做个简单的介绍

外部JavaScript文件

对于外部的JavaScript文件用<script>标签引入时，推荐的做法是将标签放到<body>的结束标签之前内容元素之后，这样做的好处是：当外部引入的JavaScript文件比较多时，会先渲染<body>标签里的内容，然后再去下载执行外部的JavaScript文件，减少了白屏的时间，用户就会觉得页面加载的很快，从而提高用户体验。

<body>
    <div id="app">
        <div class="message" contenteditable="true"></div>
        <div class="send" contenteditable="true"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

内部JavaScript代码块

对于在html结构内部的JavaScript代码块，最好的方式也是将代码块放在<body>的结束标签之前内容元素之后，虽然代码在html文档内不用花费HTTP请求时间，但这里面的代码有可能依赖外部JavaScript文件里的方法，还有一种情况就是操作了dom元素，这个时候非JavaScript动态加载的dom元素应该是都已经加载好了的，这时候对dom元素做相关的操作不会出现取到null值的情况

<body>
    <button id="btn" type="button" onclick="clickMe()">click me</button>
    <script type="text/javascript">
        function clickMe(){
          document.getElementById("btn").innerHTML = "do not click me";
        }
    </script> 
</body>

总结

除了引入JavaScript文件的位置外，还有比较重要的是引入的文件顺序问题，这涉及到了JavaScript文件之间的依赖关系，手动引入外部JavaScript文件需要特别注意。css外部文件的引入其实很类似，推荐的做法是将外部的css文件统一在<head>标签之间引入，当然也要注意顺序问题