• domReady和onload


    最近面试的时候被问到了什么是domReady。

    之前一直使用传统的window.onload,但是如果页面有大量的图片需要加载,那么资源还未加载完成的话用户触发页面上的事件怎么办?这时,我们就引入了domReady,只需要dom树构建完成,就触发回调函数。

    本人只是从初学者角度理解一下domReady

    未考虑的因素还很多,所以我简单记录一下,等以后自己水平高了再来补充。

    首先了解一下浏览器渲染引擎的HTML解析流程.

    1. 解析html标签,构建页面中的dom树。
    2. 构建render树,解析样式信息。
    3. 布局render树,确定dom元素在页面的位置大小等信息。
    4. 绘制render树,渲染到页面显示。

    window.onload 是第四步介绍触发,这会大大影响用户体验,因为图片样式还没加载完,用户如果点击轮播图切换之类的,都没办法绑定触发事件。

    DOMContentLoaded是页面文档完全加载并解析完毕之后,会触发的事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

    使用方法

    document.addEventListener('DOMContentLoaded', fn,false);
    

    兼容性:ie6,7,8不支持

    然后我把司徒正美老师的《javascript框架设计》介绍的domReady在ie低版本下处理的代码扒来学习一下。

    function IEContentLoaded(w, fn) {
        var d = w.document, done = false, 
            init = function() {
                if (!done) {
                    done = true;
                    fn();
                }
        };
    
        (function () {
            try {
                d.documentElement.doScroll('left');
            } catch (e) {
                setTimeout(arguments.callee, 50);
                return;
            }
            init();
        })();
    
        d.onreadystatechange = function() {
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        };
    }
    
    1. 首先定义一个初始化函数init,并且定义一个开关done,使得fn回调函数只执行一次。
    2. 通过自执行函数,采用setTimeout轮询的方式,不断调用doScroll方法,MDN上的解释:在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态,因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。

    参考文档:

    http://www.cnblogs.com/rubylouvre/archive/2010/04/15/1712780.html 司徒正美
    http://kb.cnblogs.com/page/129756/#chapter1 浏览器内部工作原理

  • 相关阅读:
    Win7升Windows10有获取通知,但是就不推送的解决方法
    使用git@osc管理现有项目
    暗黑符文之语1.10
    springcloud干活之服务消费者(feign)
    springcloud干货之服务消费者(ribbon)
    springcloud干货之服务注册与发现(Eureka)
    java对redis的基本操作
    微信公众号开发模式中文乱码
    Java 验证代理ip
    maven将项目及第三方jar打成一个jar包
  • 原文地址:https://www.cnblogs.com/Aralic/p/4574296.html
Copyright © 2020-2023  润新知