【前端红宝书】温故知新 第二章 HTML中的JavaScript

笔落惊风云
70 阅读3分钟

1.使用 <script>元素

<script>标签有8个属性（async、charset、crossorigin、defer、intergrity、language、src、type）,其中language属性已废弃，使用type来代替。下面解释下未废弃的7个属性：

  • async： 个人理解就是异步加载外部脚本文件，也就是说添加async属性之后，浏览器无需等待该标签所引用的外部脚本下载完成之后再渲染其他元素。
  • charset ：src属性所指定的代码字符集，这个属性现在无所谓了，浏览器不在乎。
  • crossorigin: 用来配置跨域的，由于浏览器的同源策略，外部文件如果来自其他域名下，如果crossorigin = "use-credentials"则会报错。默认是crossorigin = 'anonymous'。
  • defer: 延迟属性，设置之后表示该外部脚本需要等文档完全被解析之后并且显示完成，才会执行。
  • intergrity: 确保脚本在传输过程中没有被篡改，它的值是一串哈希值，浏览器将使用文件的哈希值与指定的哈希值进行比较。如果哈希值匹配，则资源文件未被篡改。
  • src: 引用的外部脚本文件路径。
  • type：type的值设为model,则脚本文件可以使用es6语法。

2.行内脚本与外部脚本的比较

<script> 
function sayHi(){
console.log('</script>')
}
</script>

上述代码会报错，因为浏览器在执行过程中看到字符串</script>会将其当作结束标签</script>，我们应加上转义字符\,如：

<script> 
function sayHi(){
console.log('<\/script>')
}
</script>

注意：在引用外部脚本文件的</script>标签中使用行内脚本，浏览器则会忽略行内脚本，只执行外部脚本。

<script src='http://wwww.somewhere.com/aa.js'> 
function sayHi(){
console.log('<\/script>')
}
</script>

在<script>没有使用defer和async属性的情况下，建议将<script>标签写在<body> 标签中，避免脚本文件执行过长导致网页出现空白时间过长。

  • 注意：更建议使用外部文件的方式开发方式，原因如下：1.可维护性，避免了每个页面都要写一遍同样的函数2.缓存同一个脚本文件浏览器只会下载一次，意味着页面加载更快。

3.文档模式对JavaScript有什么影响

<!DOCTYPE html>

文档模式对 JavaScript 的影响主要体现在以下几个方面：

  1. DOM 解析和构建：不同的文档模式可能会影响浏览器对 HTML 文档的解析和构建 DOM 树的方式。某些模式可能会导致浏览器更严格或更宽松地解析 HTML，这可能会影响到 JavaScript 中操作 DOM 元素的方式。
  2. CSS 样式解析：文档模式也会影响 CSS 样式的解析和应用。这可能会影响到 JavaScript 中获取样式信息或操作样式的方式。
  3. 事件处理：不同的文档模式可能会导致事件处理的行为有所不同。在较老的文档模式下，可能存在一些事件处理的兼容性问题，需要在 JavaScript 中采取特定的处理方式来确保跨浏览器的一致性。
  4. 特性支持：某些文档模式可能支持或禁用特定的 HTML、CSS 或 JavaScript 特性。因此，开发者在编写 JavaScript 代码时需要考虑目标文档模式的特性支持情况。

4.确保JavaScript不可用时的用户体验

  • 浏览器不支持脚本或者禁用脚本
<noscript>
    <p>
    该浏览器不支持JavaScript脚本文件
    </p>
</noscript>
avatar
文章
阅读
粉丝