细谈在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属性的运行流程:
- 浏览器开始解析HTML网页
- 解析过程中,发现带有defer属性的
<script>
元素 - 浏览器继续往下解析HTML网页,同时并行下载
<script>
元素加载的外部脚本 - 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本
需要注意:
- 异步加载资源
- 按照顺序执行脚本
- 使用defer加载的外部脚本不应该使用document.write方法
async属性
<script src="a.js" async></script> <script src="b.js" async></script>
async属性的运行流程:
- 浏览器开始解析HTML网页
- 解析过程中,发现带有async属性的
<script>
标签 - 浏览器继续往下解析HTML网页,同时并行下载
<script>
标签中的外部脚本 - 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
- 脚本执行完毕,浏览器恢复解析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执行完成后再执行
相关知识点总结
- 包含在
<script>
标签内部的JavaScript代码,将被从上到下一次解析 - 无论以哪种方式嵌入代码,只要不存在defer和async属性,浏览器都会按照
<Script>
标签在页面中出现的先后顺序对它们进行解析 - 加载外部脚本的优点:可维护性、可缓存、适应未来
-
<script>
放在底部的原因1、避免“阻塞效应”。2、避免,在DOM结构生成之前调用DOM节点,而产生错误
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Discuz 论坛附件、头像等资源迁移到阿里云 OSS 并开启 CDN 的解决方案
本文首发 http://zhaoda.net/2018/05/23/discuz-attachment-oss/转载请注明出处 Discuz 论坛的附件、头像等资源不断增长,如果和主程序一起存储在云服务器上,就会导致云盘要定期进行扩容操作;附件如果需要进行 CDN 加速也只能使用回源策略进行 CDN 配置。为了一劳永逸的解决附件存储和加速问题,将附件等资源迁移到对象存储服务上是一个好的选择,本文以阿里云 ECS、OSS 服务为背景,其他云计算平台也可以参考。 创建 OSS Bucket 在 OSS 管理页面分别给论坛附件、头像创建 Bucket,名称为 img-bucket 和 avatar-bucket(如果自定为其他名字,后文提到的 Bucket 名称请自行替换),区域选择和论坛所在云服务器 ESC 一致的区域,记录下该区域的 Endpoint,存储类型选择标准存储,读取权限选择私有 到 访问控制 创建网站用户,生成 AccessKey和AccessKeySecret,给该用户授权 AliyunOSSFullAccess 开启 CDN 到刚创建好的 Bucket 的域名管理中绑定用...
- 下一篇
java后端工程师主流技术
参考自: https://blog.csdn.net/piantoutongyang/article/details/45470473 学习路线 :可以参考慕课网 偏头痛杨总结的java后端工程师的主流技术学习路径: 1.java基础阶段 类、对象、变量、接口、抽象类、数据类型、封装&继承&多态、异常、内部类、注解、泛型、枚举、多线程、IO&NIO、网络编程; 2.java web基础阶段 servlet、filter、listener、jsp、session&cookie、tomcat、mysql、jdbc、junit、html、javascript、json&xml; 3.单机web系统&前后端分离阶段 spring、springmvc、mybatis&spring jdbc、nginx、druid&c3p0&dbcp、quartz、gradle&maven、git&svn、jenkins、linux; 4.RPC&分布式&面向服务阶段 springboot、dubbo、zook...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS关闭SELinux安全模块
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长