面试官：HTML中的这些坑你都不知道？？？

动态加载脚本

我们在上一节讲到了异步执行，其实除了<script>标签，还有其他方式可以加载脚本，因为JavaScript可以使用DOM API，所以咱们只要通过向DOM中动态加入<script>元素同样可以加载指定的脚本，创建一个<script>元素并将其添加到DOM即可

<script>
let script = document.createElement('script');
script.src = 'demo1.js';
document.head.appendChild(script);
    </script>

注意注意！！！

我们在把HTMLElement元素添加到DOM且执行到这段代码之前都不会发送请求，一般我们默认以这种方式创建的<script>元素是以异步方式加载进去的，相当于我们添加了一个async属性，不过这样做可能会有问题，因为并不是所有的浏览器都支持async属性，因此如果我们要统一动态脚本，就要把他们设置成同步加载

<script>
let script = document.createElement('script');
script.src = 'demo1.js';
script.async = false ;
document.head.appendChild(script);
    </script>
复制代码

小提示~

咱以这种形式获取的资源对浏览器预加载器是不可兼得，但是会严重影响它们在资源获取队列中的优先级，这种方法可能会严重影响性能，因此我们可以在文档头部显示声明它们

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

XHTML中的变化

首先我们要知道什么是超文本标记语言（XHTML），是将HTML作为XML的应用重新包装的结果，与HTML不同的是，在XTHML中使用JavaScript必须指定type属性值并且值为type/JavaScript

下面的代码在HTML中有效，但是在XHTML中是无效的

<script type="text/javascript">
function compare(a,b) {
    if(a < b ){
        console.log("A is less than B");
    }else if(a > b){
        console.log("A is greater than B");
    }else {
        console.log("A is equal to B");
    }
}
</script>

这样我们一看，在HTML中，解析<script>会应用特殊规则，但是咱的XHTML中没有这种规则，这意味着a < b语句的小于号（<）会被解释成一个标签的开始，但是这样会导致一个语法错误，所以咱不能这么写！！！

船新方法教你解决问题~

我们把所有的代码都包含到一个CDATA块中，在XHTML中（及XML中），CDATA块表示文档可以包含任意文本的区块，其内容不作为标签来解析，所以我们可以这么写！

<script type="text/javascript"><![CDATA[
function compare(a,b) {
    if(a < b ){
        console.log("A is less than B");
    }else if(a > b){
        console.log("A is greater than B");
    }else {
        console.log("A is equal to B");
    }
}]]>
</script>

好多小伙伴一看，不是这也不好看啊？ ，我说你别急，这种写法能够在兼容XHTML的浏览器中，解决问题，但是不支持在CDATA块非HTML兼容浏览器中则不行，因此咱们的CDATA标记必须使用JavaScript注释来抵消~

<script type="text/javascript">
function compare(a,b) {
    if(a < b ){
        console.log("A is less than B");
    }else if(a > b){
        console.log("A is greater than B");
    }else {
        console.log("A is equal to B");
    }
}
</script>

这种风格我相信是绝大多数程序员最爱的一种风格，但是这个可以通过XHTML验证，而且能够有效的对XHTML之前的浏览器进行优雅的降级

危险危险危险！！！

XHTML模式会在页面的MIME类型被指定为application/xhtml+xml时触发，并不是所有的浏览器都支持这种方式送达的XHTML~

废弃的东西（bushi）

自从砸门的Netscape 2发布以来啊，所有浏览器都把JavaScript当做 “圣经” ，无一例外的type的属性使用一个MIME来识别<script>的内容，但是MIME类型并没有跨浏览器标准化，即使浏览器默认使用JavaScript，但是在某些无效的情况下也可能导致浏览器跳过或者不执行，除非你用XHTML或者<script>标签要求或包含非JavaScript的代码，最佳做法是不指定type的属性。综上所述，这种格式也会导致脚本被忽略，因为代码处于有效的XML注释中

总结

今天的JavaScript学习之旅就到这里啦，我们今天学习了动态加载脚本，同时注意到了XHTML的变化，让我们对HTML和XHTML有了更深刻的了解，同时明白了XHTML在浏览器中某些不能使用的情况，举证相关例子以表示适用场景