js 高级三 基础篇 （一）

还不容易 开篇了，本来不知道写点啥还是 记录 一下自己发现的亮点 ：

1,  建议把全部引入的javascript 放在</body> 结尾 的前面

2, <script> 的defer （延期） 与 html5 的 async （异步）

　　defer: 在外部js 加入defer = "defer" 例如： <script type="text/javascript" src="jquery-1.8.3.min.js" defer = "defer"></script>   脚本会延迟到整个页面解析完成再加载  但在现实中延迟脚本 不一定会按照它们出现是顺序呢加载 也不一定在DomContentLoaded 前加载：最好只包含一个延迟脚本 htm5 忽略 给嵌入式脚本设置 defer 的属性 ； ie8 >= 完全支持 htm5规定的行为

 async ：设置 async = "async" 这个属性和defer类似 但与defer不同的是，标记 async的脚本不能保证按照指定的先后顺序执行。async 一定会在load事件前执行，但可能在DomContentLoaded事件之前或者之后执行。

 

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

3，在xhtml 中的用法 ： 与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。

<script type="text/javascript">

　　function compare(a, b){

　　　　　　　　if(a < b){
                return 'a 小于b';
            }else if(a>b){
                return 'a 大于 b';
            }else{　　　　　　　
　　　　        return 'a == b' 
            }
        }

    </script>

　　在html中这些规则是被解析的，但在xhtml是不被解析的这里语句中a<b中的小于号在xhtml 当做一个新标签来解析的但作为标签来讲 小于号后面是不能跟空格的，因此导致语法错误。两种解决方法：1是用html相应的（&lt;）替换代码中出现的所有的小于号( < ) 

　　代码如下：

　　

　　<script type="text/javascript">
        function compare(a, b){
            if(a &lt; b){
                return 'a 小于b';
            }else if(a>b){
                return 'a 大于 b';
            }else{　　　　　　　
　　　　        return 'a == b'
            }
        }    
    </script>
这样是可以用 导致无法理解，CData片段来包含javascript代码；在xhtml 与xml 中 CData 片段是文档中的一个特殊区域；引入 CData 片段如下：

<script type="text/javascript">
        function compare(a, b){
            <![CDATA[
                if(a < b){
                    return 'a 小于b';
                }else if(a>b){
                    return 'a 大于 b';
                }else{　　　　　　　
    　　　　        return 'a == b'
                }
                }
            ]]>
            // 还有的是不支持     CDATA片段的 则把CDATA的标记注释掉        
            function compare(a, b){
            <![CDATA[
                if(a < b){
                    return 'a 小于b';
                }else if(a>b){
                    return 'a 大于 b';
                }else{　　　　　　　
    　　　　        return 'a == b'
                }
                }
            ]]>
    </script>

4

<noscript>
　　对于不支持的js显示
</noscript>