红宝石 -- 第二章(复习)

最新推荐文章于 2023-07-16 09:58:14 发布

LC-name

最新推荐文章于 2023-07-16 09:58:14 发布

阅读量150

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45367843/article/details/106657568

版权

2.1 <script>元素

在解释器对<script>元素内部的所有代码求值完毕之前，页面中的剩余内容都不会被浏览器加载或显示。同时在解析外部JavaScript文件时页面的处理也会暂时停止。
无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script/>元素在页面中出现的先后顺序对他们依次进行解析。

2.1.1 标签的位置

在文档的<head>元素中包含所有的js文件，这就意味着必须等到所有的js代码都被下载，解析和执行完成之后，才开始呈现页面的内容（浏览器在遇到<body>标签之后才开始呈现内容）。对于需要很多js代码的页面来说就会出现明显的延迟。因此通常将其因在<body>标签中。

<!DOCTYPE html>
<html>
	<head>
		<title>标签位置<title/>
	<head/>
	<body>
		<!--这里放内容-->
		<script src="xxx"><script>
	<body/>
<html/>

2.1.2 延迟脚本

<!DOCTYPE html>
<html>
	<head>
		<title>延迟脚本<title/>
		<script defer="defer" src="第一个脚本"><script>
		<script defer="defer" src="第二个脚本"><script>
	<head/>
	<body>
		xxx内容
	<body/>
<html/>

2.1.3 异步脚本

同样与defer类似，async只适用于外部脚本文件
<script>标签中定义了async属性，相当于告诉浏览器立即下载，但不执行。
标记为async的的脚本并不能保证按照他们的先后顺序执行。

2.2 嵌入代码与外部文件

通常使用外部文件会有以下优点：
可维护性强，可缓存（浏览器可以根据具体的设置缓存链接的所有外部js文件，也就是说有两个页面都使用一个文件，那么这个文件只需下载一次，进而提高页面加载的速度），适应未来。

LC-name

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
红宝石 -- 第二章(复习)

2.1 <script>元素在解释器对<script>元素内部的所有代码求值完毕之前，页面中的剩余内容都不会被浏览器加载或显示。同时在解析外部JavaScript文件时页面的处理也会暂时停止。无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script/>元素在页面中出现的先后顺序对他们依次进行解析。2.1.1 标签的位置在文档的<head>元素中包含所有的js文件，这就意味着必须等到所有的js代码都被下载，解析和执行完成之后，
复制链接

扫一扫