第二章在HTML 中使用JavaScript

史学娇

已于 2023-02-22 18:27:15 修改

阅读量350

点赞数

分类专栏： JavaScript高级程序设计文章标签： javascript

于 2021-09-07 10:54:52 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/120151544

版权

JavaScript高级程序设计专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1、<script>元素

1.1标签位置

问题：在文档的<head>元素中包含所有JavaScript 文件，意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后，才能解析body中的代码开始呈现页面的内容。（白屏）

解决：JavaScript 引用放在<body>元素中页面内容的后面

1.2 引入方式

HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本，JavaScript 代码将被从上至下依次解释。不设置async和defer属性，那么脚本会同步下载并执行，阻塞后续dom的渲染。

如果是外部脚本，还必须加入脚本下载的时间。
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了。

<!-- 内嵌式 -->
<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

<!-- 外链式 -->
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

1.3 标签属性

1.3.1 type

其默认值为text/javascript。

1.3.2 defer

<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

只对外部脚本文件有效，表示脚本可以延迟到文档完全被解析和显示之后再执行（</html>标签后再执行，即DOM 结构完全生成，以及其他脚本执行完成）。defer 属性，相当于告诉浏览器立即下载，但延迟执行。defer是“渲染完再执行”。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <!-- 脚本将延迟到浏览器遇到</html>标签后再执行 -->
        <script type="text/javascript" defer="defer" src="example1.js"></script>
        <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
    </body>
</html>

1.3.3 async

只对外部脚本文件有效，立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源，从而异步加载页面其他内容。async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。async是“下载完就执行”。


<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <!-- 标记为async 的脚本并不保证按照指定它们的先后顺序执行 -->
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example2.js"></script>
    </head>
    <body>
    </body>
</html>

2、<noscript>元素

<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" defer="defer" src="example1.js"></script>
        <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript。
        </noscript>
    </body>
</html>

史学娇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章在HTML 中使用JavaScript

1、<script>元素1.1标签位置问题：在文档的<head>元素中包含所有JavaScript 文件，意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后，才能解析body中的代码开始呈现页面的内容。解决：部JavaScript 引用放在<body>元素中页面内容的后面1.2引入方式JavaScript 代码将被从上至下依次解释。内嵌式<script type...
复制链接

扫一扫