美文网首页
HTML中的JavaScript

HTML中的JavaScript

作者: 前端技术驿站 | 来源:发表于2021-04-28 08:45 被阅读0次

网页中的 JavaScript 能让页面完成复杂的逻辑交互,实现各种各样的功能需求,下面就让我们来了解一下 HTML 中的 JavaScript 吧。

一、<script>元素

将 JavaScript 插入 HTML 的主要方法是使用<script>元素,它有以下 8 个属性:

  • 1、async:可选。表示应该立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或等待其
    他脚本加载。只对外部脚本文件有效。
  • 2、 charset:可选。使用 src 属性指定的代码字符集。这个属性很少使用,因为大多数浏览器不在乎它的值。
  • 3、crossorigin:可选。配置相关请求的 CORS(跨源资源共享)设置。默认不使用 CORS。 crossorigin=
    "anonymous"配置文件请求不必设置凭据标志。 crossorigin="use-credentials"设置凭据
    标志,意味着出站请求会包含凭据。
  • 4、defer:可选。 表示脚本可以延迟到文档完全被解析和显示之后再执行。 只对外部脚本文件有效。
  • 5、integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以用于确保内容分发网络(CDN)不会提供恶意内容。
  • 6、language:废弃。
  • 7、src:可选。表示包含要执行的代码的外部文件。
  • 8、type:可选。代替 language,这个值始终都是"text/javascript"。

浏览器解析行内脚本的方式决定了它在看到字符串</script>时,会将其当成结束的</script>标签。想避免这个问题,只需要转义字符"":

<script>
function sayScript() {
    console.log("<\/script>");
}
</script>

以下几点需要注意:

1、设置 MIME 类型忽略扩展名

通常外部 JavaScript 文件的扩展名是.js,这不是必须的,如果不打算使用.js 扩展名,一定要确保服务器能返回正确的 MIME 类型。

2、<script></script>不应插入其他代码

使用了 src 属性的</script>元素不应该在<script></script>之间包含其他 js 代码,否则会忽略行内代码。

3、浏览器解析顺序

在没有 defer 和 async 时,浏览器会按照<script>出现的顺序依次解释他们。
此外,用外部 js 的时候,需确保其域是可信任的来源。

二、标签位置

以前我们通常会把<script>标签写在<header>标签内,这意味着需要把所有 js 都下载,解析和解释完成后才渲染页面,这会导致页面不能尽快的展示出来。对此,我们有三种方案:

1、推迟执行脚本

HTML 4.01 为<script>元素定义了一个叫 defer 的属性,脚本会被延迟到整个页面都解析完毕后再运行,相当于告诉浏览器立即下载,但延迟执行。
但是,这个属性只对外部脚本文件有效,而有些浏览器旧版本会忽略这个属性。所以我们最好把<script>写在页面底部比较好。
而 XHTML 文档,指定 defer 属性时应该写成 defer="defer"。

2、异步执行脚本

HTML5 为<script>元素定义了 async 属性。标记为 async 的脚本并不保证能按照它们出现的次序执行。

给脚本添加 async 属性的目的是告诉浏览器,不必等脚本下载和执行完后再加载页面,同样也不必等到该异步脚本下载和执行后再加载其他脚本。
对于 XHTML 文档,指定 async 属性时应该写成 async="async"。

3、动态加载脚本

我们可以通向DOM中动态添加script元素来加载脚本。默认情况下,这种方式是异步加载的,相当于添加了sync属性。然而并不是所有浏览器都支持sync,所以明确设置其为同步加载:

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

这种方式是很消耗性能的,要想让预加载器知道这些动态请求文件的存在,可以在文档头部显式声明它们:

<link rel="preload" href="gibberish.js">

综上,我们通常将<script>标签写在整个文件的最后

三、行内代码与外部文件

当然,使用外部文件的好处多多:

  • 可维护性,我们可以统一管理项目中的js文件。
  • 缓存,浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件,这意味着如果两个页面都用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。

总结

  • 要包含外部 JavaScript 文件,必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。
  • 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下,包含在<script>元素中的代码必须严格按次序解释
  • 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出
    的次序执行。

关注公众号【前端技术驿站】让我们共同进步吧!我整理了一些实战视频,欢迎来学习!

相关文章

  • JavaScript HTML DOM

    JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...

  • JS Dom Tree

    JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...

  • Javascript

    JavaScript是什么? JavaScript主要用于HTML的页面,嵌入在HTML的源码中。JavaScri...

  • 在HTML中使用Javascript

    把Javascript插入到HTML页面中要使用 元素。使用这个元素可以把Javascript嵌入到HTML页面中...

  • JavaScript最常用的嵌入方式是什么?

    把JavaScript插入到HTML页面中要使用 元素。JavaScript可以嵌入到HTML页面中,也可以引用外...

  • 如何在HTML中使用JavaScript

    把JavaScript插入到HTML页面中需要使用 元素。使用这个元素可以把JavaScript嵌入到HTML中,...

  • 第二章 在HTML中使用JavaScript

    html中如何添加javascript html中添加javascript的标签是 。支持两种方式添加,一种是页面...

  • JavaScript高级程序设计 读书笔记(一)

    在HTML中使用JavaScript 元素向HTML页面中插入JavaScript的主要方法,就是使用 元素。这个...

  • HTML中的JavaScript

    网页中的 JavaScript 能让页面完成复杂的逻辑交互,实现各种各样的功能需求,下面就让我们来了解一下 HTM...

  • HTML中的javascript

    本章内容  使用 元素  行内脚本与外部脚本的比较  文档模式对 JavaScript 有什么影响  确保...

网友评论

      本文标题:HTML中的JavaScript

      本文链接:https://www.haomeiwen.com/subject/rqgmrltx.html