zoukankan      html  css  js  c++  java
  • 第2章 两种调用JS的方法——在HTML中使用JavaScript

     一. <script>标记

      第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上面)

        <head>...
        <title>demo</title>
        <script type=”text/java script”>
        /*type属性常被忽略掉。脚本默认是js,所以<script type=”text/java script”>可直接简写做<script>*/
        ...
        </scipt>
        </head>

      内嵌js时,可能会涉及一些与html冲突的判断。比如<>之类的操作符。可以通过html实体来替代。如&gt;为>,&lt;为<。

     

     二.引用外链

      写好js文件,然后引用,在js文件中,不需要加入<script>标记。

      

    <script type=”text/java script” src=”xxx.js”></script>
    
      //内部的js代码将被忽略。

      推荐使用第二种方法。具有方便维护,可缓存,标准化等优点。

     

     三. 那么问题来了

      script标记的加载方式是由上到下进行的。在解析器<script>元素对所有js代码求值结束之前,页面中其余的内容都不会被显示。如何改善性能?

      1.defer属性延迟加载

      一个方法是利用script元素的defer属性。表面脚本在不影响页面构造时才会执行(在html内容加载完之后才执行)。如在<head>元素内加入:

    <script defer=”defer” arc=”xxx*.js”></script>

      两个defer存在时,理论上是按顺序执行。

     

      2.异步加载

     

       script的另一个属性async与defer相似。要求在不影响页面构造时,立即下载js文件。 

    <script defer=”defer” async arc=”xxx*.js”></script>

     

     

      但是当存在两个async时,即便理论上也不能保证二者是顺序加载。

     

     

      3.最好的方式

      把<script>放到html页面内容最后(</body>之前),再外链引用之——这样可以更好快地加载文件。

     

      4.又一个问题

      当浏览器不支持脚本;或者浏览器js脚本被禁用后,如何让页面平稳退化?

      在body元素内最后部分加上noscript代码(这段代码在js正常时不会显示):

     

    <noscript>
    
    <p>本页面需要浏览器支持(启用)javascript脚本。</p>
    
    </nosript>

       【补充】

       历史上,js可以被写在html注释中。可以认为是js的“行间形式”。<!--js代码//-->,现在已废弃。

  • 相关阅读:
    eclipse常用快捷键
    angularJS学习(三)——搭建学习环境
    node.js的安装
    AngularJS学习(二)——Angular应用的解析
    MTK如何烧录IMEI码(俗称串号)
    飞思卡尔IMX515评估板系统烧录和启动
    __asm__ __volatile__("": : :"memory")
    MTK6577+Android4.0之增加重启功能
    WinCE系统声音定制
    介绍一种很棒的wince 如何替换系统声音的方法
  • 原文地址:https://www.cnblogs.com/djtao/p/5833713.html
Copyright © 2011-2022 走看看