Script标签

1. 标签属性

  • charset
  • src
  • type（text/javascript）
  • defer
  • async

2. script特性

  • 阻塞页面：嵌入式javascript代码和引入外部文件，都会阻塞页面处理。
  • 外部优先：带src属性的script会忽略嵌入代码，只会下载并执行外部脚本。
  • 允许跨域：src属性可以包含来自外部域的文件（JSONP的本质）。

3. 与页面渲染的关系

  • 浏览器按照script标签的出现顺序对他们依次解析。
  • 传统做法都是将引用外部文件的script标签放在<head>里；但是浏览器在遇到<body>之后才开始呈现内容，所以下载脚本时会页面空白。现在推荐放在body中，配合defer和async，不影响页面呈现。
  • defer与async只能用于外部文件
  • 外部文件的引入分下载阶段和执行阶段；只使用script标签的下载和执行都会阻塞页面，defer和async的下载阶段不阻塞渲染，执行阶段阻塞渲染。
  • 同步脚本（script）：按顺序，下载和执行都会阻塞页面。
  • 延迟脚本（defer）：defer表示脚本在执行时不会影响页面结构，所以脚本立即下载（下载不阻塞页面呈现），但会被延迟到整个页面解析完毕后再执行。
  • 异步脚本（async）：立即下载文件，下载不阻塞页面呈现，下载完成后立即执行。

这部分知识推荐看这里，有图有真相，说的非常清楚

4. 平稳退化

使用<noscript>在不支持javascript的浏览器中平稳退化

<body>
<noscript>
	<p>本页面需要浏览器支持JavaScript</p>
</noscript>
</body>