第二章 HTML中的JavaScript

第二章 HTML中的JavaScript

本章主要写了JavaScript和html的关系，如何在html中引用JavaScript，如何确保用户体验。

一、 <script>元素

我们一般使用<script>元素将JavaScript插入到Html中。该元素主要有如下属性：

• async ：异步执行脚本。（只对外部文件生效）
• charset
• crossorigin
• defer：表示脚本可以延长到文档完全被解析和显示后再执行。（只对外部文件生效）
• integrity
• language（废弃）
• scr：表示包含要执行的代码的外部文件
• type

1. 标签位置（确保JavaScript不可用时的用户体验）

过去往往将JavaScript放在head标签内，这意味着必须将所有js代码下载解析解释完成后才能开始渲染页面，这会使页面渲染明显延迟。

为了解决这个问题，现在往往将script标签放在body中的最后。

2. 延迟执行脚本

使用前文提到的defer标签（只对外部文件生效）可以表示脚本会在整个页面都解析完毕后再执行。相当于告诉浏览器立即下载，延后执行。

3. 异步执行脚本

使用async标签，告诉浏览器立即下载，但是不确保脚本执行的次序。相当于告诉浏览器，不必等脚本下载和执行后再加载页面，也不必等到该异步脚本下载和执行后再加载其他脚本。

因此，异步脚本不应该在加载期间修改DOM。

4. 动态加载脚本

这个涉及到DOM，暂时不想看。

二、行内代码和外部代码

推荐使用外部代码的理由：

• 可维护性
• 缓存
• 适应未来

三、<noscript>元素

如果浏览器不支持脚本，可以使用<noscript>元素指定显示的内容。如果浏览器支持脚本，该元素中的任何内容都不会被渲染。