1、script标签的属性[1]
- async 表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
- charset 表示通过src属性指定的代码的字符集。
- crossorigin 配置相关的CORS(跨源资源共享)设置。
- defer 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- integrity 允许比对接收到的资源和制定的加密签名以验证子资源完整性;
- language 表示编写代码使用的脚本语言。
- src 表示包含要执行代码的外部文件。
- type 表示编写代码使用的脚本语言的内容类型。type="module"代码块会被当成ES6模块,而且这时候代码中才能出现import和export关键字。
2、script标签放在页面位置[1]
- ①放到<head>里面是为了方便以后查找,需要等到所有的js文件加载后才能加载页面,对照成页面短暂的空白;
- ②放到页面底部页面加载完成之后,才加载js文件,用户会因为空白页面的缩短而感觉页面加载很快。
3、延迟脚本[1]
defer 将延迟脚本放到页面底部仍是最佳选择
4、异步脚本[1]
async 告诉浏览器立即下载文件;
5、在XHTML中用法[1]
可扩展超文本标记语言,页面中引入js文件,“>”比较符号会解析为新标签的开始或结束,需要用CData片段解决;例如:
<script type="text/javascript"><![CDATA[
function compare(a,b){
if(a<b){
alert("A is less than B");
}else if(a>b){
alert("a is greater than B");
}else{
alert("A is equal to B");
}
}
]}></script>
兼容浏览器不兼容XHTML的浏览器;
<script type="text/javascript">
//<![CDATA[
function compare(a,b){
if(a<b){
alert("A is less than B");
}else if(a>b){
alert("a is greater than B");
}else{
alert("A is equal to B");
}
}
//]}>
</script>
6、采用外部引入的优点[1]
- ①可维护性
- ②可缓存
- ③适应未来不用兼容XHTML
7、文档模型[1]
- ①混杂模式(quirks mode)
- ②标准模式(standards mode)