JS脚本的加载

最新推荐文章于 2024-03-10 14:16:37 发布

帮我砍刀拼多多

最新推荐文章于 2024-03-10 14:16:37 发布

阅读量246

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_35370002/article/details/113058017

版权

JavaScript 有三种引入方式：
JavaScript 加载和执行
- 脚本位置
- 动态脚本元素（推荐）

JavaScript 有三种引入方式：

行内引入

<开始标签 on+事件类型=“js 代码”></结束标签>

行内引入方式必须结合事件来使用，但是内部 js 和外部 js 可以不结合事件

<body>
  <input
    type="button"
    οnclick="alert('行内引入')"
    value="button"
    name="button"
  />
  <button οnclick="alert(123)">点击我</button>
</body>

内部引入

在 head 或 body 中，定义 script 标签，然后在 script 标签里面写 js 代码

<script>
  alert('这是js的内部引入');
</script>

外部引入

定义外部 js 文件(.js 结尾的文件)

<script type="text/javascript" src="demo.js"></script>

注:

script 标签一般定义在 head 或 body 中
Script 标签要单独使用，要么引入外部 js，要么定义内部 js，不要混搭使用

外部的 JS 文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点

JavaScript 加载和执行

<body>
  <script>
    var p = document.getElementsByTagName('p');
    p[0].style.color = 'red';
  </script>
  <p>hello</p>
</body>

在这里插入图片描述

我们会发现 hello 没有正常的变成红色

由于多数浏览器使用单一进程来处理用户界面刷新和 JavaScript 脚本的执行，所以同时只能做一件事。简单来说，<script>标签每次已出现，页面都只能等待脚本的解析和执行。在这个过程中，页面渲染和用户交互是完全被阻塞的。

脚本位置

由于脚本会阻塞页面其他资源的加载，因此推荐将所有<script>标签尽可能放到<body>标签的底部

<body>
  <p>hello</p>
</body>
<script>
  var p = document.getElementsByTagName('p');
  p[0].style.color = 'red';
</script>

现在，hello 正确变成了我们设置的红色。

当以后遇到项目开发时，书写的脚本过于庞大时，如果等待它全部解析完毕加载，那样效率太低了。有没有办法改进一下呢？

动态脚本元素（推荐）

利用 DOM 动态的创建<script>元素：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'index.js';
document.getElementsByTagName('head')[0].appendChild(script);