【JavaScript高级程序设计4th】第2章 HTML中的JavaScript——总结

<script>元素

为了解决JavaScript引入网页后与主导语言HTML的关系问题,网景公司提出使用<script>元素来插入JavaScript。

<script>有如下8个属性:async、charset、defer、integrity、language(废弃)、type(MIME)、src、crossorigin

1. 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下,包含在<script>元素中的代码必须严格按次序解释。

2. <script>元素放在页面的<head>标签内,是为了把外部的CSS和JavaScript放在一起。但是这种情况会导致页面必须把所有JavaScript代码都下载、解析、解释完后才可以开始渲染页面,会导致页面渲染明显延迟,期间内浏览器窗口完全空白。为此,通常应该把<script>元素放到页面末尾,介于主内容之后及</body>标签之前。

3. defer:推迟执行脚本,即告诉浏览器应该立即开始下载,但是执行应该推迟。只对外部脚本文件有效。

4. async:异步执行脚本,即告诉浏览器应该立即开始下载,但是不必等脚本下载和执行完后再加载页面和加载其他脚本,不会阻塞文档渲染。因此,此时无法保证脚本加载的次序。只对外部脚本文件有效。
注意:异步脚本不可以再加载期间修改dom

5. 动态加载脚本:通过使用DOM API(document.createElement())再向DOM中动态添加script元素来加载指定脚本(文件),默认情况下是以异步方式加载的。记得在文档头部显式声明要动态加载的脚本文件,否则会严重影响性能。
注意:所有浏览器都支持createElement,但不是所有浏览器都支持async属性,最好统一动态脚本的加载行为,明确设置位同步加载async=false。

其他

1. 使用JavaScript的最佳实践:尽可能将JavaScript代码放在外部文件中。

2. <noscript>元素:针对早期浏览器不支持JavaScript的问题而提出的一个页面优雅降级处理方案。当浏览器不支持脚本或者对脚本的支持被关闭时,包含在<noscript>中的内容就会被渲染。

原文地址:https://www.cnblogs.com/pmcee/p/14475395.html