• HTML文档、javascript脚本的加载与解析


    1、onload事件

      1.1 onload事件分类

        a、文档加载完成事件(包括脚本、图片等资源都加载完),绑定方法:<body onload="doSomething()"></body> 或者 window.onload=doSomething

        b、图片与脚本加载事件    

         var image = document.createElement('img');
            image.onload = function () {
                $('#image').html('image loaded')
            }
            image.src = 'ww.png';
    
            var script = document.createElement('script');
            script.onload = function () {
                $('#script').html('script loaded')
            }
            script.src = 'test.js';
            document.getElementById('container').appendChild(script);  // 加载script并触发onload事件之前,必须插入到dom中

          注意: 1、图片元素的src属性赋值之后就开始加载,不必等到插入dom文档中;而脚本元素必须插入到dom中之后才开始加载

              2、对于图片元素,onload事件必须在src赋值之前绑定

              3、样式表的加载事件特点与js脚本相同

      1.2 onload事件与DOM事件

         jQuery封装的dom文档加载完成方法:$(function(){})

        该方法注册的事件是在dom文档元素(不包括图片)加载完成并且脚本执行完之后触发,总是位于onload之前执行

        一种简单的测试方法:将img元素对图片的加载设为http处理并返回字节流的方式,在后台处理程序中添加断点,程序运行时,我们发现onload总是在img请求返回之后才会触发,而dom事件正常触发不受影响(一种说法是jQuery的dom事件是对window.onload事件的封装,该例说明这种说法是错误的)

    2、js脚本的加载、解析与执行

      2.1 js脚本文件在等待或加载期间,js执行线程处于阻塞还是闲置?

        答:为闲置状态,示例代码如下,

         lottery.js的内容:

          alert('lottery.js');

        在页面中的一段代码如下:

        <script type="text/javascript">
            setTimeout(function () { alert('blocking')}, 0);
            alert('script1');
        </script>
        <script type="text/javascript" src="/js/lottery.js" onload="alert('loaded')"></script>
        <script type="text/javascript">
            alert('script2');
        </script>

       实际测试的响应结果有两种(ie11与chrome):

        1、script1 -> blocking -> lottery.js -> loaded -> script2

        2、script1 -> lottery.js -> loaded -> blocking -> script2

       ‘blocking’总是在‘script1’之后、‘script2’之前,因此其执行必定在lottery.js加载期间(ie7中script无onload事件,其执行结果除了无onload响应结果,其他与ie11相同,因此该结论同样使用于ie7)

      2.2 脚本文件的onload事件与该脚本的执行关系

        在2.1的示例中,‘loaded’总是在‘lottery.js’之后、‘script2’之前,因此onload处理程序紧随lottery.js之后并在下一段脚本之前执行

      2.3 chrome中脚本、图片等外部资源的下载时多线程进行,但脚本的解析、执行依然是单线程

      2.4 函数声明的提升(即非匿名函数)是以script标签为单位

        如下代码:

          <script type="text/javascript">
              test()
          </script>
          <script type="text/javascript">
              function test() {
                  alert('hello')
              }
          </script>

        运行时会显示test未定义,将这个标签合二为一或者上下顺序调整一下则会正常执行

      2.5 js脚本可以放置在dom中间,此时可以访问到位于脚本之前加载的html元素,而无法访问之后的

        具体原因:js执行与dom解析时同一线程,脚本之后的元素尚未解析,因此无法访问

       2.6 js脚本对dom的操作会立即生效,因此可以在脚本中操作上一行代码插入的html元素

        如下所示

            $('#myDiv').html('<span></span>')
            $('#myDiv span').html('my span')

        代码中,第2行可以立即对第1行插入的html元素进行访问

        另外需要注意的是,js对dom的操作不会立即绘制到页面,原因:绘制页面与执行js虽然是两个不同的线程,但是这两个线程是互斥的,即js当执行完成并闲置时,页面才会更新,详细可以参考JavaScript下的setTimeout(fn,0)意味着什么?

       2.7 某一js文件不存在(返回404错误),页面会忽略该文件正常加载显示;某一js文件加载较慢(fiddler设断点),页面处于loading状态,等待文件加载完

  • 相关阅读:
    Hadoop集群配置(最全面总结 )(转)
    spring + ibatis 多数据源事务(分布式事务)管理配置方法(转)
    使用java5的注解和Sping/AspectJ的AOP 来实现Memcached的缓存
    2.git使用之git fetch和git push的区别
    1.git使用入门之基本的更新提交操作
    docker命令
    tornado-模版reverse_url
    获得随即图片https://source.unsplash.com/random
    tornado-同步异步下载图片
    html-prepend
  • 原文地址:https://www.cnblogs.com/MattCheng/p/5019489.html
Copyright © 2020-2023  润新知