学习JS高级程序设计 --- HTML中使用JavaScript要点

2018-03-17

要点一: `<script>`元素

1. async(异步)

只适用于外部脚本文件

异步加载，目的是不让页面等待脚本下载和执行，同时异步加载页面其他内容

不要在页面加载期间修改DOM

异步脚本会在页面的load事件之前执行，但不确定在DOMContentLoaded前后执行(建议只使用一个异步脚本)

使用示例:

<scirpt type="text/javascript" async="async"></script>

2. defer(延迟)

只适用于外部脚本文件

立即下载脚本，但脚本会延迟到整个页面解析完毕后再运行

脚本会在遇到</html>标签后，DOMContentLoader事件前执行(建议只使用一个延迟脚本)

使用示例:

<script type="text/javascript" defer="defer"></script>

3. src

包含要执行的外部脚本文件

脚本文件可以是与页面在一个服务器上的文件，也可以是跨域文件

建议使用该属性，使用外部文件，可以提高可维护性和适应未来

使用示例:

<script type="text/javascript" src="./example.js"></script>

4. type

编写代码使用的脚本语言内容类型(MIME类型)

默认值 text/javascript

使用示例:

<script type="text/javascript">
    (function() {
      alert('这是一个示例！');
    })();
</script>

要点二: `<script>`标签位置

1.在<head>元素中

目的是将所有外部文件(包括CSS和JavaScript文件)都放在相同的地方

弊端: 必须等到所有JavaScript代码都被下载、解析和执行完才开始呈现页面内容(遇到<body>标签才开始呈现页面内容)，如果外部文件过大，会导致页面加载外部文件速度慢，延迟了加载页面内容，导致一段时间的页面空白

使用示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例</title>
    <script type="text/javascript" src="./example.js"></script>
  </head>
  <body>
  </body>
</html>

2.在<body>元素中，</body>元素前

放在<body>所有页面内容之后

优点: 在解析JavaScript代码之前，页面内容完全呈现在浏览器中，加强了用户体验

使用示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例</title>
  </head>
  <body>
    <script type="text/javascript" src="./example.js"></script>
  </body>
</html>

要点三: `<noscript>`元素

1.主要用于早期浏览器不支持JavaScript时，让页面平稳退化
2.在以下情况中会显示<noscript>中的内容

浏览器不支持脚本

浏览器支持脚本，但脚本被禁用

使用示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例</title>
    <script type="text/javascript" src="./example.js"></script>
  </head>
  <body>
    <noscript>
      <p>本页面需要浏览器支持（启用）JavaScript。</p>
    </noscript>
  </body>
</html>

展开全文 >>

要点一: <script>元素

使用示例:

使用示例:

使用示例:

使用示例:

要点二: <script>标签位置

使用示例:

使用示例:

要点三: <noscript>元素

使用示例:

要点一: `<script>`元素

要点二: `<script>`标签位置

要点三: `<noscript>`元素