HTML中的JavaScript

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

<script>元素

src路径外部文件路径

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

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

integrity完整性允许比对接收到的资源和指定的加密签名以验证子资源完整性SRISubresource Intagrity。当接收到的签名和integrity属性指定的值不匹配时网页报错。该属性一般用于对CDN内容分发网络Content Delivery Network资源进行验证

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

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

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

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

除IE浏览器之外这个值还可以是"application/javascript"和"application/ecmascript"

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

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

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

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

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

使用JavaScript的两种方式

行内嵌入

外部引入

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

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

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

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

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

和解释script定义的行内代码一样在解释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文件

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

标签位置

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

推迟执行defer属性

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

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

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

XHTML中的defer属性应该写为

<script defer="defer"></script>

异步执行async属性

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

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

在XHTML中async属性应该写为

<script async="async"></script>

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

动态加载脚本

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

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

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

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

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

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

XHTML中的变化

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

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

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

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

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

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

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

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

废弃的语法

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

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

行内代码与外部文件

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

可维护性

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

适应未来确保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">

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