HTML中的JavaScript

前端_贾公子
106 阅读7分钟

HTML中的JavaScript

字样的字符串，需要在前加转义字符 
<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文件

标签位置

过去的习惯是将

推迟执行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中的变化

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

在XHTML中

如果需要指定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>
    <!--
        代码内容
    -->
</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">

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

元素

用于给不支持JavaScript的浏览器提供替代内容，可以包含任何可以出现在中的HTML元素，除了

下面两种情况下，中的内容可以被渲染出来：

  • 浏览器不支持脚本

  • 浏览器对脚本的支持被关闭

总结

  1. 要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。

  2. 所有

  3. 对不推迟执行的脚本，浏览器必须解释完位于标签之前。

  4. 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。

  5. 可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。

  6. 通过使用元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则元素中的任何内容都不会被渲染。

avatar
文章
阅读
粉丝