【红宝书第4版读书笔记】02-关于 `<script>` 标签 #8

yuqingc · 2020-09-06T04:40:35Z

`<script>` 标签

<script> 标签的执行会阻塞页面其他资源的解析，默认情况下加载也会阻塞页面的解析，除非使用 async 或 defer

async：和页面同时加载（不阻塞页面），加载完成之后会立即执行，不保证页面渲染完成。只支持外部 script
defer：和页面同时加载，然后等待页面解析完成之后再执行。只支持外部 script
crossorigin：crossorigin="anonymous" 不发送跨域 credential，crossorigin="use-credentials" 会发送
integrity：可以传入资源的加密的签名，以监测 JS 是否被恶意篡改。有些浏览器不支持
language：已经废弃，请使用 type
type：MIME type。text/javascript 和 text/ecmascript 已经废弃。现在一般是 application/javascript 和 application/ecmascript
- 如果值是 module，则可以使用 ES6 Module
src：都懂

过去，为了好看整齐，都统一放在 <head></head> 里面，但是 HTML 是从上而下加载的，如果 JS 内容很多，会阻塞 DOM 的解析，从而导致很长的白屏时间
现在推荐放在 <body></body> 标签里面，</body> 之前，可以等 DOM 完全渲染之后再处理，提升用户体验
HTML5 的 defer 属性，就可以放在在 <head> 里面了

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

冷知识，如果浏览器不支持 JS（现在应该没有这种浏览器了）或者禁用了 JS，则 <noscript></noscript> 内的内容就会渲染出来

<noscript>
  <p>你的浏览器无法使用 JavaScript</p>
</noscript>

The text was updated successfully, but these errors were encountered:

yuqingc added the PJWD4 红宝书第4版读书笔记 label Sep 6, 2020