专栏首页前端萌媛的成长之路在HTML中使用JavaScript

在HTML中使用JavaScript

前言

JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果

JavaScript代码嵌入网页的方法

1、<script>元素直接嵌入代码

<script type="text/javascript">
	function sayHello() {
		alert("hello!");
	}
</script>

2、<script>元素加载外部脚本

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

<script>标签相关属性

type属性

  • <script>标签默认就是JavaScript代码,嵌入javascript脚本时,type属性可以省略
  • 如果type属性的值,浏览器不认识,就不会执行其中的代码,所以可以在<script>标签中嵌入任意的文本内容,只要加上一个浏览器不认识的type属性就行,浏览器不会执行也不会显示它的内容,但是这个<script>节点依然存在于DOM之中,可以使用<script>节点的text属性读取它的内容

defer属性

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer属性的运行流程:

  1. 浏览器开始解析HTML网页
  2. 解析过程中,发现带有defer属性的<script>元素
  3. 浏览器继续往下解析HTML网页,同时并行下载<script>元素加载的外部脚本
  4. 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本

需要注意:

  • 异步加载资源
  • 按照顺序执行脚本
  • 使用defer加载的外部脚本不应该使用document.write方法

async属性

<script src="a.js" async></script>
<script src="b.js" async></script>

async属性的运行流程:

  1. 浏览器开始解析HTML网页
  2. 解析过程中,发现带有async属性的<script>标签
  3. 浏览器继续往下解析HTML网页,同时并行下载<script>标签中的外部脚本
  4. 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
  5. 脚本执行完毕,浏览器恢复解析HTML网页

需要注意:

  • 异步加载资源
  • 并不会按照顺序执行JS,谁先下载完,谁就先执行
  • 使用async加载的外部脚本不应该使用document.write方法

async和defer属性归纳

  • 都能解决“阻塞效应”
  • 都是异步加载资源,但执行顺序不一样
  • 如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性

动态生成脚本

['a.js', 'b.js'].forEach(function(src) {
	var script = document.createElement('script');
	script.src = src;
	script.async = false;
	document.head.appendChild(script);
});
  • 不会阻塞页面渲染
  • async设置为false可以保证b.js在a.js后面执行
  • 在这段代码后面加载的脚本文件,会等在b.ja执行完成后再执行

相关知识点总结

  1. 包含在<script>标签内部的JavaScript代码,将被从上到下一次解析
  2. 无论以哪种方式嵌入代码,只要不存在defer和async属性,浏览器都会按照<Script>标签在页面中出现的先后顺序对它们进行解析
  3. 加载外部脚本的优点:可维护性、可缓存、适应未来
  4. <script>放在底部的原因1、避免“阻塞效应”。2、避免,在DOM结构生成之前调用DOM节点,而产生错误

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flex布局

    pitaojin
  • url、href和src区别

    pitaojin
  • css清浮动

    pitaojin
  • 浏览器中的ECMAScript模块(译)

    原文:https://jakearchibald.com/2017/es-modules-in-browsers/

    IMWeb前端团队
  • Js基础教程之认识js

    老雷PHP全栈开发
  • 浏览器中的ECMAScript模块(译)

    本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://jakearchibald.com/20...

    IMWeb前端团队
  • HTML的 script 标签引用js文件及其属性整理

    在 HTML 页面中,可以通过 <script> 标签插入 JavaScript 代码,也可以引用外部 js 文件。

    德顺
  • Javascript文件加载:LABjs和RequireJS

    传统上,加载Javascript文件都是使用<script>标签。 就像下面这样:   <script type="text/javascript" src=...

    ruanyf
  • Javascript文件加载 ——LABjs和RequireJS

    <script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。

    javascript.shop
  • 解决Electron加载带jquery的项目报错问题

    <!-- Insert this line above script imports --> <script>if (typeof module === 'o...

    hbbliyong

扫码关注云+社区

领取腾讯云代金券