JS基础笔记之js代码在HTML中的使用方式

最新推荐文章于 2022-10-10 18:44:29 发布

programmer_trip

最新推荐文章于 2022-10-10 18:44:29 发布

阅读量295

点赞数

分类专栏： JS基础笔记文章标签： js代码的使用 script标签放置位置引用外部script 引用外部脚本时

本文链接：https://blog.csdn.net/programmer_trip/article/details/103332238

版权

JS基础笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

JS基础笔记之js代码在HTML中的使用方式

必须放在<script>与</script>标签之间

若使用外部javascript，则需新建一个扩展名为.js文件，然后在<script>标签的src属性中注明js文件的路径，外部js文件通常包含被多个网页使用的代码

使用外部js文件代码实践：
利用js输出HTML内容
若不使用js外部文件时：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<h1>JS输出HTML内容</h1>
<script>
   document.write("<h2>我是JS输出的内容</h2>")
</script>
</body>
</html>

使用js外部文件时，HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script  src="ceshi2.js"> </script>
</heaad>
<body>
<h1>JS输出HTML内容</h1>
</body>
</html>

新建的.js文件中的代码

 document.write("<h2>我是JS输出的内容</h2>")

文件名为"ceshi2.js"

对于引用外部js文件时，script标签是放在<head></head>标签中，<body></body>标签中还是<body></body>标签之后？

在浏览器渲染页面之前，它需要通过解析HTML标记然后构建DOM树。在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。

还有一点是需要我们注意的，那就是外部引入的脚本(script)会阻塞浏览器的并行下载，HTTP/1.1规范表明，浏览器在每个主机下并行下载的组件不超过两个(也就是说，浏览器一次只能够同时从同一个服务器加载两个脚本)；如果你网站的图片是通过多个服务器提供的，那么按道理来说，你的网站可以一次并行下载多张图片。但是，当我们网站在加载脚本的时候；浏览器不会再启动任何其它的下载，即使这些组件来自不同的服务器。
对于必须要在DOM加载之前运行的JavaScript脚本，我们需要把这些脚本放置在页面的head中，而不是通过外部引用的方式，因为外部的引用增加了网络的请求次数；并且我们要确保内敛的这些JavaScript脚本是很小的，最好是压缩过的，并且执行的速度很快，不会造成浏览器渲染的阻塞。
对于支持使用script标签的async和defer属性的浏览器，我们可以使用这两个属性；其中需要注意的点就是，async表示的意思是异步加载JavaScript文件，它的下载过程可以在HTML的解析过程中进行，加载完成之后立即执行这个文件的代码，执行文件代码的过程中会阻塞HTML的解析，它不保证文件加载的顺序。defer表示的意思是在HTML文档解析之后在执行加载完成的JavaScript文件，JavaScript文件的下载过程可以在HTML的解析过程中进行，它是按照script标签的先后顺序来加载文件的。

programmer_trip

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础笔记之js代码在HTML中的使用方式

JS基础笔记之js代码在HTML中的使用方式必须放在<script>与</script>标签之间若使用外部javascript，则需新建一个扩展名为.js文件，然后在<script>标签的src属性中注明js文件的路径，外部js文件通常包含被多个网页使用的代码使用外部js文件代码实践：利用js输出HTML内容若不使用js外部文件时：<!DO...
复制链接

扫一扫