JavaScript高级程序设计学习总结二

最新推荐文章于 2022-07-12 17:26:39 发布

Devinpp

最新推荐文章于 2022-07-12 17:26:39 发布

阅读量199

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_25140671/article/details/81977286

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在HTML中使用JavaScript

<script>元素

在HTML页面中插入JavaScript的主要方法有两个：在HTML中使用<script>元素，内部直接嵌入JavaScript代码和外部引用JavaScript脚本

在HTML中使用<script>元素，HTML4.01为<script>元素定义了下列6个属性：

async：表示应该立即下载脚本，但不应该妨碍页面中其他的操作，比如下载其他资源或等待加载其他脚本。只对外部引入脚本文件生效。
charset：表示通过scr属性置顶的代码的字符集。由于大多数浏览器会忽略它charset，很少有人用着个属性。
defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
language：已废弃，
src：表示包含要执行代码的外部文件。
type：表示编写代码使用的脚本语言的内容类型。默认属性text/JavaScript。

内部直接嵌入JavaScript代码：

<script type = "text/javascript">
    function () {
        alert("Hello world!")
    }
</script>

外部引用JavaScript脚本：

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

注意点：带有src属性的<script>标签中不能存在额外的JavaScript代码，因为会被直接忽略。

浏览器解析JavaScript文件顺序：

不存在defer和async属性的<script>中，浏览器会按照<script>元素在HTML中出现的先后顺序进行解析。

<script type = "text/javascript" src = "index1.js"></script> //第一个先解析
<script type = "text/javascript" src = "index2.js"></script> //然后第二个解析
<script type = "text/javascript" src = "index3.js"></script> //然后第三个解析

标签的位置

传统的做法是放在<head>标签中，目的是把所有的外部文件的引用都放在相同的地方。

缺点是必须等到全部JavaScript代码都被下载解析和执行完全以后，才能开始呈现HTML的内容（浏览器在遇到<body>标签时才开始呈现内容）。会导致浏览器在呈现HTML内容时出现明显的延迟，延迟期间的浏览器窗口中僵尸一片空白。

所以为了避免这个问题，把JavaScript引用放在</body>标签上。当页面内容完全呈现在浏览器中，再解析JavaScript代码，浏览器窗口显示空白页面的时间缩短而打开页面的速度也加快了。

延迟脚本（只适用于外部脚本文件）

defer属性：脚本会被延迟到整个页面都解析完毕后执行，相当于告诉浏览器立即下载脚本，但是等所有文件被解析完毕后再解析带有defer属性的<script>引入的JavaScript代码。

异步脚本（只适用于外部脚本文件）

async属性：不让页面等待两个脚本下载和执行，，从而异步加载页面其他内容。建议异步脚本不要在加载期间修改DOM。

异步脚本一定会在load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

外部引用外部文件的优点：

可维护性：把所有JavaScript文件都放在一个文件夹中，维护更轻松。
可缓存：两个页面同时使用相同的JavaScript文件，这个文件只需要下载一次，加快浏览器加载页面速度。
适应于未来

<noscript>标签

用在不支持JavaScript的浏览器中显示替代的内容。

小结

把JavaScript插入到HTML页面中要使用<script>标签。
插入位置放在</body>前，<body>内容后。
在包含外部JavaScript文件时，必须将src属性设置为指向相应文件的url。
在不使用属性为defer和async的情况下，所有<script>标签都会按照先后顺序依次解析JavaScript文件
使用defer属性的<script>可以让脚本在文档完全呈现之后再执行。延迟脚本也是按照先后顺序依次执行。
使用async属性的<script>可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本在页面导入顺序执行。
<noscript>可以指定在不支持JavaScript脚本的浏览器中显示的替代内容，在支持JavaScript脚本下，浏览器不会显示<noscript>标签中的任何内容。