说一说 HTML 中的 script 标签
我们在 《Javascript简史》这遍文章中说过,「Javascript」这门语言是由 Netscape开发而来,当初开发的时候为了能让 「Javascript」这门语言能与 HTML 页面共存,而且不影响页面的其他内容,为此增加了一个统一的脚本支持( script 脚本元素)。
script 元素
在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素,script 元素内部的代码从上而下依次执行。
在引入多个 script 元素的时候,浏览器会按照 script 元素在页面的中的先后顺序进行解析,当上一个解析完成时,才会进行下一个 script 元素中的内容
在 HTML 中使用 Javascript 的两种方法
//第一种方法:直接在标签内使用 javascript 即可
<script>
console.log('第一种使用方法');
</script>
//第二种方法:引用外部文件
<script src="example.js"></script>
script 元素的属性
script 元素比较常用的几个属性
- src:可选,用于引用外部 javascript 文件
- type:可选,编写代码使用的脚本语言的类型(也成MIME类型),默认值为 text/javascript
- async:可选,异步加载脚本,只对外部脚本文件有效
- defer:可选,延迟脚本加载,在文档完全被解析后在执行,只对外部脚本文件有效
script 元素在 HTML 中的位置
由于「Javascript」语言是一门单线程语言,在同一时间内,只能执行一个任务,所以只有当上一个任务完成之后才能进行下一个任务,因此会导致 script 元素在 HTML 中的位置不同,会表现出不同效果。
所有 script 元素都放在 <head> 元素中
这种做法意味着,我们必须等待所有的 Javascript 代码必须执行完成之后才能开始展示页面的内容,如果页面的 Javascript 代码非常多,这种方法就会导致我们看到页面的加载会非常慢,用户体验非常差,那么这么样去优化呢?其实很简单。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="example1.js"></script>
<script src="example2.js"></script>
</head>
<body>
<div>页面的内容区域</div>
</body>
</html>
所有 script 元素都放在页面内容的后面
优化上面所说的页面加载慢的问题,只需要把我们使用的 Javascript 代码放到页面的内容之后即可,这样页面会首先加载内容然后现实出来,再去执行 Javascript 代码,这样用户就不会等待很久页面才会显示内容。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>页面的内容区域</div>
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
脚本的延时加载
脚本如何进行延时加载,这个就要利用 script 元素的 defer 属性,在元素使用 defer 属性时,脚本会被延迟到整个页面解析完成后在执行。
//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));
//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
</head>
<body>
<div id="content">这里页面的内容</div>
</body>
</html>
你会发在没有加入 defer 属性时控制台会打印出如下结果
example1
null
example2
null
当给元素加上 defer 属性时,结果会发生变化,可以发现在 div 元素的内容加载完成之后 Javascript 代码才会执行。
example1
<div id="content">这里页面的内容</div>
example2
<div id="content">这里页面的内容</div>
脚本的异步加载
脚本的异步加载,要用到 script 元素到 async 属性,它与 defer 属性类似,都是修改 script 元素的加载行为,不过 async 属性不会影响页面的其他加载,不会阻塞文档呈现,而且带有 async 属性的脚本不能保证它们执行的前后顺序,这一点与 defer 属性有着不同之处。
换句话说 example2.js 的代码可能会先于 example1.js 中的代码执行,所以在使用 async 属性时,要避免两个 js 相互依赖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<div id="content">这里页面的内容</div>
</body>
</html>
noscript 元素
早期的浏览器都会又一个问题,那就是当浏览器不支持 Javascript 语言时如何显示页面内容,为此的解决方案就是创建了一个 noscript 元素,它可以在不支持 Javascript 的浏览器中显示内容,而且只会在不支持 Javascript 的浏览器中才会显示其中的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<noscript>
当前浏览器不支持 Javascript 请更换浏览器
</noscript>
</body>
</html>
说一说 HTML 中的 script 标签的更多相关文章
- js中的script标签
在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...
- js中的script标签属性
HTML <script> 元素用于嵌入或引用可执行脚本. 在html中插入一个script标签 <script src="index.js" sync cros ...
- 前端中的script标签
script标签中的重要属性! . 浏览器解析行内脚本的方式决定了它在看到字符串时,会将其当成结束的 标签.想避免这个问题,只需要转义字符"\" ①即可: 要包含外部文件中的 Ja ...
- angularjs 1 如何在ng-route的模板中使用script标签
如果你在angularjs 的路由模板里使用<script>标签的话,你会发现标签不起作用.这是因为angular为了安全起见而禁止了模板执行script.如果一定要在路由模板里使用scr ...
- html 中的<script>标签
https://www.w3.org/TR/html51/semantics-scripting.html#the-script-element 一. <script type='text/ja ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- script标签里的defer属性
入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...
- 页面动态加入<script>标签并执行代码
在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码 ...
随机推荐
- 35)PHP,关于PHP和html
(1)其实无论是CSS还是js,又或者是html,都是可以随意的载入到我们的php文件中,其实这些文件就是一个外来的引入文件,所以,根本没有什么神奇的, 你要是想把php的结果有调理的展示,那么就直接 ...
- 01-信贷路由项目架构和 rose 框架的搭建
1.信贷路由项目架构 2.工程搭建及测试 搭建tyrRouter-parent,tyrRouter-log-web,工程采用 maven 构建 配置 pom.xml 文件,父项目管理 jar 包的版本 ...
- BGP2
1) 按照拓扑搭建网络,在所有AS间使用直连接口建立EBGP邻居关系: 2) 在公司总部AS400中,R4与R5,R5与R7,R7与R6,R6与R4间使用环回接口建立IBGP邻居关系,IGP协议使用O ...
- 《C程序设计语言》练习1-5
#include<stdio.h> /*修改温度转换程序,要求以逆序(即按照从300度到0度的顺序)打印温度转换表*/ main () { float fahr,celsius; int ...
- SpringBoot:Shiro 整合 Redis
前言 前段时间做了一个图床的小项目,安全框架使用的是Shiro.为了使用户7x24小时访问,决定把项目由单机升级为集群部署架构.但是安全框架shiro只有单机存储的SessionDao,尽管Shrio ...
- mysql简介/安装以及破解密码等
1.什么是数据库: 数据库即存放数据的仓库,只不过这个仓库是在计算机存储设备上,而且数据是按一定的格式存放的 过去人们将数据存放在文件柜里,现在数据量庞大,已经不再适用 数据库是长期存放在计算机内.有 ...
- 重复测量的方差分析|Mauchly's Test of Sphericity|
生物统计学-重复测量的方差分析 之前的方差分析应用条件要求组之间是独立的,即某种因素下相同时段测量的结果数据,但4月与5月数据是有关系的,所以必须考虑某种因素下不同时段测量的结果数据,即使用重复测量的 ...
- 使用junit测试springMVC项目提示ServletContext找不到定义错误
原文链接:https://blog.csdn.net/liu_gan/article/details/78400627 @RunWith(SpringJUnit4ClassRunner.class) ...
- jenkins发布项目到远程主机上,配置linux使用SSH免密码登录
一.首先要配置两台linux如何使用SSH免密码登录,这样脚本执行scp命令以及远程执行脚本都不需要输入密码: A为本地主机(即用于控制其他主机的机器,jenkins服务器) ; B为远程主机(即被控 ...
- python djangjo 文件上传
视图: request.GET 获取数据 request.POST 提交数据 request.FILES 获取文件用 checkbox 等多选的内容 request.POST.getlist ...