Script标签

1. 标签属性

  • charset
  • src
  • type(text/javascript)
  • defer
  • async

2. script特性

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

3. 与页面渲染的关系

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

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

4. 平稳退化

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

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