第二章 HTML中的JavaScript 红宝书笔记

最新推荐文章于 2023-11-01 20:12:31 发布

在下小航（Harvey）

最新推荐文章于 2023-11-01 20:12:31 发布

阅读量87

点赞数

分类专栏： JS红宝书笔记文章标签： js

本文链接：https://blog.csdn.net/laoxiaohang/article/details/112541453

版权

JS红宝书笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在使用行内 JavaScript 代码时，要注意代码中不能出现字符串。比如，下面的代码会导致浏览器报错：

 <script> 
 function sayScript() { 
 console.log("</script>"); 
 } 
</script>

想避免这个问题，只需要转义字符“\”即可：

<script> 
 function sayScript() { 
 console.log("<\/script>"); 
 } 
</script>

在script元素中的代码被计算完成之前，页面的其余内容不会被
加载，也不会被显示。
与解释行内 JavaScript 一样，在解释外部 JavaScript 文件时，页
面也会阻塞。（阻塞时间也包含下载文件的时间。）
现代 Web 应用程序通常将所有 JavaScript 引用放在元素中的页面内容后面

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
 </head> 
 <body> 
 <!-- 这里是页面内容 --> 
 <script src="example1.js"></script> 
 <script src="example2.js"></script> 
 </body> 
</html>

这样一来，页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

defer属性 推迟执行脚本
- 脚本会被延迟到整个页面都解析完毕后再运行。
- 相当于告诉浏览器立即下载，但延迟执行。
- 第一个推迟的脚本会在第二个推迟的脚本之前执行
async属性 异步执行脚本
- async 属性与 defer 类似。
- 与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行
- 使用 async 也会告诉页面你不会使用document.write

动态加载脚本，使用DOM添加script元素，加载指定脚本

下述方式是默认异步加载，相当于添加了async属性

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script);

并不是所有浏览器都支持async属性，可以明确设置为同步加载

	let script = document.createElement('script'); 
	script.src = 'gibberish.js'; 
	script.async = false; 
	document.head.appendChild(script);

可扩展超文本标记语言XHTML
- 在 XHTML 中使用 JavaScript 必须指定 type 属性且值为text/javascript
- 在 XHTML 中编写代码的规则比 HTML 中严格
- CDATA 标记必须使用 JavaScript 注释来抵消

   	<script type="text/javascript"> 
   //<![CDATA[ 
		function compare(a, b) { 
		if (a < b) { 
		console.log("A is less than B"); 
		} else if (a > b) { 
		console.log("A is greater than B"); 
		} else { 
		console.log("A is equal to B"); 
	} 
} 
//]]> 
</script>

通过使用元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则元素中的任何内容都不会被渲染。

在下小航（Harvey）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二章 HTML中的JavaScript 红宝书笔记

在使用行内 JavaScript 代码时，要注意代码中不能出现字符串。比如，下面的代码会导致浏览器报错： <script> function sayScript() { console.log("</script>"); } </script>想避免这个问题，只需要转义字符“\”即可：<script> function sayScript() { console.log("<\/script>"); } &l.
复制链接

扫一扫

专栏目录