博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习 JavaScript(二) ——在 HTML 中使用 JS
阅读量:6837 次
发布时间:2019-06-26

本文共 1336 字,大约阅读时间需要 4 分钟。

基本用法

在 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> 标签内部的代码,比如:

复制代码

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

复制代码

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

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

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

脚本解析的顺序

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

  KurryLuo 的个人站    //主体内容复制代码

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

  KurryLuo 的个人站    //主体内容复制代码

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

  KurryLuo 的个人站    //主体内容复制代码

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

  KurryLuo 的个人站      //主体内容复制代码

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


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

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

个人网站:

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

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

转载地址:http://ogqkl.baihongyu.com/

你可能感兴趣的文章
精读《Function VS Class 组件》
查看>>
关于startActivityForResult
查看>>
关于如何用100行如何实现docker
查看>>
Redis SLAVE过期键策略
查看>>
【PHP 开发】mac 下配置 PHP 环境的方法
查看>>
快收藏!52篇25万字,微服务、云原生、容器、K8S、Serverless精华文章集锦
查看>>
Glide加载gif图片优化
查看>>
C++ 基本数据类型
查看>>
面试笔记(2.JS
查看>>
在标签使用onclick(this)来传递参数
查看>>
做数据科学领域的「召唤师」,组织一场人人可参与的数据科学比赛
查看>>
Express 搭建web服务器
查看>>
Github 的 Pull Request 教程
查看>>
SmartRules让MindManager的交互图变得更加智能
查看>>
如何使用React动态添加/删除class来改变样式
查看>>
mysql-连接查询
查看>>
Axure RP9 自学之路2-基础操作篇
查看>>
GMS(cts、gsi、vts、gts、ctsv)问题总结
查看>>
runtime 关联对象objc_setAssociatedObject
查看>>
比较某两个时间的时间戳相等
查看>>