前端day06--JavaScript学习之script元素

最新推荐文章于 2024-07-20 23:54:17 发布

W_jiaying

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量141

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/W_Chelsea/article/details/115371523

版权

< script >元素

目录
一、JavaScript组成
二、HTML中的JavaScript
总结

一、JavaScript组成

1–核心：ECMAScript

由ECMA-262定义，提供核心语言功能

2–文档对象模型：DOM

提供访问和操作网页内容的方法和接口

3–浏览器对象模型：BOM

提供与浏览器交互的方法和接口

二、HTML中的JavaScript

1.< script >元素

HTML5为script定义了六个属性：

async:可选，表示立即下载脚本，但不妨碍页面中的其他操作。只对外部脚本有效。
charset：可选，表示通过src属性指定的代码的字符集。少用
defer：可选，表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本有效。
language：已废弃
src：可选，表示包含要执行代码的外部文件。
type：必选。表示编写代码使用的脚本语言的内容类型。默认值为text/javascript。

使用< script >的方法：在页面中直接嵌入JavaScript代码和包含外部JavaScript文件。

2.标签的位置

传统的做法：将script元素放入页面的head元素中。
这种做法使得页面在加载了所有script脚本以后才开始显示页面内容 （浏览器在遇到< body >标签后才开始加载页面内容）。
如果一个页面中有许多的JavaScript代码，那么浏览器在呈现页面时会有明显的延迟。为避免这个问题，可以把JavaScript代码放在< body >中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js源代码</title>
</head>
<body>
    <!-- 这里放内容 -->
    <script type="text/javascript" src="04-JavaScript.js"></script>
</body>
</html>

延迟脚本

延迟脚本会用到defer属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js源代码</title>
    <script type="text/javascript" defer="defer" src="04-JavaScript.js"></script>
    <script type="text/javascript" defer="defer" src="05-JavaScript.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

上述代码虽然将script放到了head中，但是该脚本会延迟到浏览器遇到< /html >再执行。两个延迟脚本按照顺序进行。
延迟脚本建议放在浏览器底部。

异步脚本

使用async属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js源代码</title>
    <script type="text/javascript" async="async" src="04-JavaScript.js"></script>
    <script type="text/javascript" async="async" src="05-JavaScript.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

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

总结

< script >元素会按照他们在页面中出现的先后顺序依次被解析。
浏览器会先解析不使用defer属性的script标签中的代码，然后再解析后面的内容，所以一般应该把< script >元素放在页面的最后，即主要内容的后面，body的前面。
使用defer属性可以让脚本在文档完全呈现后再执行。延迟脚本总按照指定他们的顺序执行。
使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

W_jiaying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端day06--JavaScript学习之script元素

< script >元素目录一、JavaScript组成二、HTML中的JavaScript1.< script >元素2.标签的位置延迟脚本异步脚本总结目录这篇博客是根据《JavaScript高级程序设计》来写的，可以算是读书笔记吧。一、JavaScript组成1–核心：ECMAScript由ECMA-262定义，提供核心语言功能2–文档对象模型：DOM提供访问和操作网页内容的方法和接口3–浏览器对象模型：BOM提供与浏览器交互的方法和接口..
复制链接

扫一扫