javascript是网页中的一种,网页中出现javascript:void_加载网站出现javascript是什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/chatgpt002/article/details/134732071

本文详细解释了javascript在网页中的作用，涉及src、async、defer属性，以及XHTML、MIME类型、跨域请求、脚本加载顺序、文档模式和HTTP协议等内容，帮助读者掌握JavaScript在网页开发中的关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，本文将围绕点击网页出现javascript是什么意思展开说明，javascript是网页中的一种脚本语言是一个很多人都想弄明白的事情，想搞清楚网页出现javascript是什么意思需要先了解以下几个事情。

<>元素

src（路径）：外部文件路径

async（异步）：只对外部脚本文件有效，表示立即开始下载脚本，不阻止其它页面动作（下载资源、等待其它脚本加载等）

defer（延时）：只对外部脚本文件有效，表示将脚本延迟到文档完全被解析和显示之后再执行（在IE7及其更早版本中，defer对行内元素也起作用）

integrity（完整性）：允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Intagrity）。当接收到的签名和integrity属性指定的值不匹配时，网页报错Python中的所有运算符号。该属性一般用于对CDN（内容分发网络，Content Delivery Network）资源进行验证

language（语言）：废弃属性，最初用于表示代码中的脚本语言，已被type属性代替

type（类型）：表示代码块中的脚本语言内容类型（MIME类型），使用它需要注意以下几点：

惯例该值一般是"text/java"，但是事实上这种用法已经被废弃了

JavaScript文件的type一般是"application/x-java"，但可能会导致脚本被忽略

除IE浏览器之外，这个值还可以是"application/java"和"application/ecma"

type=module时，代码作为ES6模块，可以出现export和import关键字

charset（字符）：指定src属性所使用的代码字符集，一般很少使用

crossorigin（跨源）：配置相关请求的CORS（跨源资源共享），默认不使用，有如下两个值：

crossorigin="anonymous" : 匿名，配置文件请求不必设置凭据标志

crossorigin="use-credentials" : 设置凭据标志，出站请求包含凭据

使用JavaScript的两种方式：

行内嵌入

外部引入

使用<>标签的几个注意点：

<>内部的代码是从上到下解释的

<>中代码被计算完成之前，页面的其余内容不会被加载或者显示

在<>如果存在含有</>字样的字符串，需要在前加转义字符

<>
    console.log("<\/>");
</>

和解释定义的行内代码一样，在解释src引入的外部JavaScript文件时也会出现阻塞

在XHTML中可以忽略结束标签

JavaScript惯例扩展名是js，但是并非必须，浏览器不会检查js文件的扩展名，但是服务器经常根据文件扩展来确定响应正确的MIME类型，这种扩展名自由的用处有以下几点：

方便服务器端脚本语言动态生成JavaScript代码

方便在浏览器中将JS扩展语言（TS、JSX等）转义为JavaScript代码

后缀名只是标注请求，MIME是标注回应。
首先要放空脑袋，回到最朴素的socket开发，比如你要个jpg，请求消息里面就要表达这个诉求，怎么表达先不要管,但是服务端拿到后给你什么是服务端说了算，完全可以写个逻辑当客户端请求jpg的时候返回一个word文件，所以说白了你要求什么不重要，重要的是服务端给你什么。在返回这个word文件的时候如果良心就在响应消息里面标注这是个word类型。如果没良心我也可以就标注个jpg。客户端收到响应消息的时候会按照协议去读取消息体里面约定的类型标注字段，再写一个逻辑调用相应的处理流程。对得上就是正常显示，对不上就有可能乱码。当然有的聪明的客户端不会相信服务端，会自己解析，这就是后话了。
这里我们可以看到有两个问题1、这个消息里面哪个字段是说明文件类型的。2、这个类型的格式说明必须大家都懂。比如image/jpeg，代表的是jpg文件。那么在浏览器和web服务端之间第1个问题是用http协议解决的，contentType字段就是这个作用。第二个问题就是MIME了，大家约定好了image/jpeg，代表的是jpg文件。
你只要记住，计算机只认字节，程序员做的一切就是怎么处理字节。

如果在设置了src属性的同时还添加了行内js代码，浏览器会忽略行内代码，优先引入外部js文件

<>支持外部域的JavaScript文件，这时的src可以指向和html页面不在同一个域中的url资源，integrity完整性属性就是针对跨域获取脚本文件的功能服务的。

标签位置

过去的习惯是将<>标签全都写在<head>中，方便和css一起对外部文件进行管理，但是由于这种方式需要将外界Js页面都下载、解析、解释完后才开始渲染页面，延迟会降低用户的交互体验，因此现在的习惯是将引入放在<body>的最后面。

推迟执行defer属性

defer属性只作用于外部脚本文件（除IE4-7），设置了defer属性的脚本会被延迟到整个页面都解析完毕后才会执行，相当于告诉浏览器：立即下载，但延迟执行。

单个添加了defer属性的脚本会在DOMContentLoaded事件之前执行，但如果是多个添加了defer的脚本，则实际情况可能会有偏差。

因此，比起使用defer，还是更推荐将要延迟执行的脚本放在页面底部的方法。

XHTML中的defer属性应该写为

< defer="defer"></>

异步执行async属性

async属性只适用于外部脚本，相当于告诉浏览器：立即下载，但不必等脚本下载完之后再加载页面或其他脚本。因此async异步脚本不应该在加载期间修改DOM。

async脚本一定会在页面的load事件前执行，但是对于DOMContentLoad却并不确定。

在XHTML中，async属性应该写为

< async="async"></>

defer与async的区别是：
defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

动态加载脚本

也可以通过向DOM中动态添加元素来加载指定脚本。

<>
    let  = document.creatElement("");
    .src="index.js";
    .async = false;
    document.head.addChild();
</>

注意：这种动态DOM添加的方法创建的是 异步脚本，默认带有async属性，但是这里就出现问题了，因为所有的浏览器都支持creatElement方法，但是不是所有浏览器都支持异步脚本，因此还需要对创建出来的脚本 手动进行同步加载属性添加。

这种方式获取的资源对浏览器预加载器是不可见的，会影响它们在资源获取队列中的优先级。因此会影响性能。

可以通过文档头部显式声明的方式让预加载器知道这些动态添加的脚本的存在。（注意不要漏掉as属性，否则有些浏览器会警告）

<link ref="preload" href="index.js" as="">

XHTML中的变化

XHTML，Extensible HyperText Markup Language，可扩展超文本标记语言。是将HTML作为XML的应用重新包装的结果。

在XHTML中<> 使用JavaScript必须将type设置为text/java

如果需要指定XHTML模式，可以将MIME的type指定为application/xhtml+xml（不是所有浏览器都适用）

在XHTML中代码编写规则非常严格，比如小于号<会被解释成一个标签的开始，必须使用实体形式（&lt）来代替。

也可以使用CDATA块，CDATA即文档中可以包含任意文本的区块。使用格式如下：

< type="text/java"><![CDATA[
    代码内容
]]></>

不过对于一些不兼容XHTML的浏览器中就不支持CDATA块因此可以将CDATA标记和JavaScript注释一起使用来兼容所有浏览器。

< type="text/java">
    //<![CDATA[
        代码内容
    //]]>
</>

废弃的语法

以前为了兼容不使用<>标签的浏览器（Mosaic），会使用如下形式的代码：

<>
    <!--
        代码内容
    -->
</>

行内代码与外部文件

相比起行内代码，使用外部文件的优势如下：

可维护性

缓存：根据浏览器对脚本文件的缓存机制，如果多个页面使用同一个脚本文件，则只需下载一次

适应未来：确保HTML版本更新不会影响到脚本文件的读入

配置浏览器请求外部文件最重要的一点就是：带宽占用。在使用了SPDY/HTTP2的浏览器中，独立JavaScript组件更具优势，但JavaScript分装的具体策略还是要根据浏览器的配置来考虑。

HTTP 0.9：基于GET请求的文本传输协议

HTTPS：安全的HTTP传输协议

HTTP 1.0：增加HTTP头、扩展PUT、POST等方法

HTTP 1.1：长连接、流水线支持，最广泛使用的HTTP传输协议

SPDY：针对HTTP的增强，工作在SSL层之上、HTTP层之下

HTTP 2.0：安全高效的下一代HTTP传输协议

SPDY（读作“SPeeDY”）是Google开发的基于TCP的会话层协议，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。

文档模式

文档模式doctype这个概念由IE5.5发明有三种类型，区别只体现在CSS渲染内容方面，但是会对JavaScript产生一些副作用：

混杂模式（quirks mode）

功能：让IE做到一些非标准的特性

声明格式：标注/省略文档开头的doctype声明

标准模式（standards mode）

功能：让IE能够兼容标准

声明格式：

<!--HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--HTML5-->
<!DOCTYPE html>

准标准模式（almost standards mode）

功能：功能是支持了，标准规定了但没完全规定

声明格式：分为过渡性文档类型（Transitional）和框架集文档类型（Frameset）触发

<!-- HTML4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML4.01 Framset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-frameset.dtd">

一般情况下并不区分标准模式和准标准模式