基本用法

在 HTML 中使用 <script> 元素引入 Javascript , <script> 有以下 4 个常用属性:

  • async: 异步加载,只对外部脚步有效。
  • defer: 规定是否对脚本执行进行延迟,直到页面加载为止。如果脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度,同样只对外部脚步有效。
  • src: 引入外部脚本文件.
  • type:规定脚本的 MIME 类型。

MIME :多用途Internet邮件扩展(MIME,Multipurpose Internet Mail Extensions)类型 是一种标准化的方式来表示文档的性质和格式。 MIME 类型由两部分组成:媒介类型和子类型。对于 JavaScript,其 MIME 类型是 "text/javascript"。

以上四个常用的属性,只有 type 是必选的,其他的都是可选。如果要通过引入外部脚本, 那么 src 属性是必需的。

<script type="text/javascript">

function sayScript(){
alert('Hell Word')
} </script>

嵌入代码和外部文件

嵌入代码就是写在 <script> 标签内部的代码,比如:

<script type="text/javascript">

function sayScript(){
alert('Hell Word')
} </script>

而外部文件则是通过 src 属性进行引入的,比如:

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

外部文件相比直接嵌入代码,有以下优点:

  • 可维护,写在专门管理 JS 的文件夹下,开发人员能专心对付 JS 。
  • 可缓存,如果有两个 HTML 引入同一个 JS 文件,就可以只让浏览器下载一次,起到缓存的作用。

但是,外部文件有它的缺点,就是外部文件如果在我们的控制范围之外,容易遭受攻击。比如,引用一个心怀不轨的人开发的组件,被他修改起来是相当容易的。

脚本解析的顺序

1.传统做法:将外部文件放在 标签中,页面等到 JavaScript 文件加载完毕,遇到 标签才开始加载页面。

<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index.js"></script>
</head>
<body>
//主体内容
</body>
</html>

2.比较取巧的办法:将 JavaScript 代码放到 中,用户会因为看到了仅仅加载了空白的页面就会感觉到页面打开变快了。

<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
</head>
<body>
<script src="index.js"></script>
//主体内容
</body>
</html>

3.手动延迟加载:在 <script> 标签中加入 defer 属性,作用是让页面加载完毕后再加载 JavaScript 文件。 defer 的意思就是“推迟”,光看字面上的意思就能理解。

<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index.js" defer="defer"></script>
</head>
<body>
//主体内容
</body>
</html>

4.异步脚本:HTML5 给 <script> 标签定义了 async 属性,这个属性和 defer 的作用类似,不同的是, defer 一般是按照 <script> 的排列顺序执行加载的,而 async 不按套路走。

<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index1.js" defer="defer"></script>
<script src="index2.js" defer="defer"></script>
</head>
<body>
//主体内容
</body>
</html>

上面代码中的 index2.js 可能比 index1.js 先加载,所以两者之间最好不要有任何联系,比如复用组件。同时,这两个脚步在加载时,也尽量不要修改 DOM 节点。


欢迎大家关注微信公众号:可视化技术( visteacher )

不仅有前端和可视化,还有算法、源码分析、书籍相送

个人网站:http://blog.kurryluo.com

各个分享平台的 KurryLuo 都是在下。

用心学习,认真生活,努力工作!

学习 JavaScript(二)在 HTML 中使用 JS的更多相关文章

  1. JavaScript:学习笔记(1)——在HTML中使用JS

    在HTML中使用JavaScript <script>元素 1.直接在网页中嵌入JS代码 说明: 请不要在代码的任何地方出现</script>字符串 这是由于解析嵌入式代码的规 ...

  2. 轻松学习JavaScript二十七:DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  3. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  4. Spring学习(二)——Spring中的AOP的初步理解[转]

      [前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring. ...

  5. Spring学习(二)——Spring中的AOP的初步理解

    [前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring.不知 ...

  6. Java学习笔记二十:Java中的内部类

    Java中的内部类 一:什么是内部类: (1).什么是内部类呢? 内部类( Inner Class )就是定义在另外一个类里面的类.与之对应,包含内部类的类被称为外部类. (2).那为什么要将一个类定 ...

  7. 深入学习JavaScript(二)

    函数表达式和函数声明 函数声明 function 函数名(参数){函数体} 函数表达式 function 函数名(可选)(参数){函数体} 示例: function foo(){} // 声明,因为它 ...

  8. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  9. nodejs学习(二) ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

  10. 学习javaScript必知必会(1)~js介绍、函数、匿名函数、自调用函数、不定长参数

    一.简单了解一下JavaScript(js) 1.什么是js? js:是网景公司开发的,是基于客户端浏览器, 面向(基于)对象.事件驱动式的页面脚本语言. 2.什么场景下使用到js? 表单验证.页面特 ...

随机推荐

  1. 完美解决IE渲染方式进入兼容模式问题

    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"> &l ...

  2. memcached command

    http://lzone.de/cheat-sheet/memcached memcached Cheat Sheet Telnet Interface How To Connect Use &quo ...

  3. ES2015也就是ES6知识点持续更新

    ES6,全名:ECMAScript2015,先扯点其他的,ECMA是一个国际标准化组织,它最重要最重要的作用就是让ECMAScript这门语言标准化,什么意思呢?我们知道,js这门脚本语言是运行在浏览 ...

  4. vue的生命周期钩子

    生命周期过程: new vue() :vue实例进行初始化,读取所有生命周期函数,并没有执行(不会调用) beforeCreate():创建前,读取属性,计算属性,添加set/get,读取watch ...

  5. DX11 Without DirectX SDK--01 DirectX11初始化

    回到 DirectX11--使用Windows SDK来进行开发 由于个人觉得龙书里面第4章提供的Direct3D 初始化项目封装得比较好,而且DirectX SDK Samples里面的初始化程序过 ...

  6. 在mac OX10.11.6上安装MySQL

    一.之前失败情况 官网下载dmg文件安装.源码安装,下过5.6  5.7  8.0 版本,都可以安装成功,但是在电脑设置界面无法启动,每次点启动输入密码后,均闪一下绿色然后变红色,既然不能界面启动,那 ...

  7. git - 简明指南

    助你入门 git 的简明指南,木有高深内容 ;) 作者:罗杰·杜德勒 感谢:@tfnico, @fhd 和 Namics如有纰漏,请在 github 提报问题 安装 下载 git OSX 版 下载 g ...

  8. Linux获取网络接口信息

    linux获取网络接口信息需要用到的函数为ioctl(),结构体struct ifreq,struct ifconf 1.ioctl()函数原型及作用 #include <sys/ioctl.h ...

  9. 基于Go的websocket消息服务

    3个月没写PHP了,这是我的第一个中小型go的websocket微服务.那么问题来了,github上那么多轮子,我为什么要自己造轮子呢? Why 造轮子? 因为这样不仅能锻炼自己的技术能力,而且能帮助 ...

  10. Java集合类的详解与应用

    Java集合类的详解与应用 集合简介: 1.定义:可以同时存储不同类型的数据 他的存储空间会随着数据的增大而增大 2.缺点:只能存储引用数据类型 3.优点:更加合理的利用空间,封装了更多的方法,用起来 ...