雾の乡

W3C中关于浏览器加载过程的时间信息的接口标准中有很多页面加载方面的标准，简单地说在chrome里检查performance.timing就可以看见各个事件发生的时间戳
無名の QQ スクリーンショット.png
W3C的这张图很好地描述了浏览器加载页面的整个过程，除了domLoading(开始解析dom树)可能会抢先在responseEnd(网络接受应答完毕)之前发生之外，基本是从左到右时间顺序发生

这里我们关注processing以及之后的部分，我尝试解释一下各个事件的含义

domLoading 浏览器拿到了一些HTML代码，开始解析dom树
- 设置document.readyState为”loading”（也就触发了readyStateChange)
- 注意引用的外部script会阻塞dom树解析
- 解析过程比较复杂这里不多涉及，可以参考W3C的Parsing部分的标准
domInteractive 浏览器初步解析完dom树，但并不稳定，仍残余一些工作，W3C的相关标准链接
- 设置document.readyState为”interactive”
- 清空打开标签堆栈，也就是强制关闭仍未闭合的标签
- 写在html中的script元素，含defer属性且不含async属性的会在这个时机被执行
- 此时才会触发domContentLoaded事件
domContentLoaded其实就是俗称的domReady事件，此时dom树已经稳定
- aync属性的script元素在这个时机被执行
- 满足另一种条件的script元素也是这个时机被执行，我没能看懂，估计是来自于document.createElement创建出来的某种情况
domComplete 需要加载的资源（包括图片、iFrame等等等等）以及脚本全部执行完毕
- 设置document.readyState为”complete”
- 这个事件和load事件的区别是load事件必须要有Browsing Context才会被触发，但时机是一样的
loadEventStart load事件被触发
loadEventEnd load事件执行完毕

domReady的现实

一般来说我们希望页面上的脚本尽量快速地被执行，但很多情景下都需要完整可操作的dom树才能保证脚本执行正确,尤其是IE6在interactive以及之前的阶段，如果用JS操作了dom树会直接“无法打开站点”。

问题是绝大多数情况下，图片(或者swf等)都不是JS脚本需要的资源，也就是说我们要找的时间点是dom树完整之后，图片加载之前的一个地方来执行我们的脚本，也就是所谓的domReady。对于主流标准浏览器来说，domContentLoaded正是我们需要的domReady，但很不幸我们生活在有IE的世界里，所以需要为IE找一个替代品(doScroll checking)

jQuery相关源码解析

这里看的是jQuery1.7.2的代码，相关部分在core.js里面

jQuery里domReady的绑定代码是jQuery(callback)或者jQuery(document).ready(callback)，最终都落到了jQuery.fn.ready上，readyList维护注册在ready时间上的callback集合，jQuery.ready是jQuery希望绑定在domReady上的callback，里面会执行所有通过各种手段绑定上ready的callback，于是我们主要看jQuery.bindReady

处理了被调用时已经load事件都发生过的情况(L430)
对标准浏览器，用domContentLoaded事件并同时也绑上load事件作为fallback来支持早期版本 (L437)
对IE，首先绑定了readystatechange的complete的情况，以及load事件，然后尝试使用doScrollCheck来更早地触发ready事件(L445)

domReady的问题

domReady虽然通常比load快不少，但此时并不能保证外部资源全部load到，所以需要读img/包含img的元素的尺寸时不能直接在domReady里面跑，flash及类似的外部资源也有类似的问题

参考：DOM Ready 详解

标签: jQuery, JS

发表评论

Permanent link to this article: http://mcfog.com/p848/%e5%85%b5%e8%b4%b5%e7%a5%9e%e9%80%9f-domready%e4%ba%8b%e4%bb%b6%e5%8e%9f%e7%90%86%e5%8f%8a%e7%9b%b8%e5%ba%94jquery%e6%ba%90%e7%a0%81%e5%88%86%e6%9e%90.fog

Nite.PointDenoiser的正确用法

Categories:

技术

2012年3月4日

by McFog

2012年3月4日

摘要

在OpenNI/Kinect框架开发中，如何正确地使用Nite.PointDenoiser (XnVPointDenoiser) 来对手势进行平滑、降噪处理

问题

嗯，最近调教Kinect做手势识别，上OpenNI/Nite框架。
追踪手部用Nite.SessionManager很轻松就能弄出样子来，但是用带除噪的Nite.PointDenoiser代替Nite.PointControl却无效，坐标依旧不停地颤动。

原因

在GoogleGroups里找到了一些有关的讨论，简单地说就是根据API手册，相关的事件如OnPrimaryPointUpdate在PointDenoiser类中压根没有重载，

翻API手册，可以找到一张难看的类图
PointDenoiser类图
作为一个PointFilter的子类，PointDenoiser是有信息输入（订阅者）MessageListener 和信息输出（发布者）MessageGenerator两者的特性的，在XnVPointDenoiser Member List页面可以很清楚地看到PrimaryPointUpdate等事件都是属于PointControl也就是MessageListener继承而来的，所以这些事件中的信息必然是和输入的信息一模一样不可能被降噪，要获取降噪后的结果，我们需要的是MessageGenerator下的方法，也就是PointDenoiser::AddListener

解决

最简单的方法就是把PointControl的实例传给PointDenoiser::AddListener，然后监听PointControl的相关事件，大致代码如下

^?View Code CSHARP

ScriptNode scrNode;
SessionManager session = Context.CreateFromXmlFile("./path/to/config.xml", out scrNode);
PointControl pointControl = new PointControl();
PointDenoiser pointDenoiser = new PointDenoiser();
 
session.AddListener(pointDenoiser);
pointDenoiser.AddListener(pointControl);
pointControl.PrimaryPointUpdate += new EventHandler&lt;HandEventArgs>(pointControl_PrimaryPointUpdate);

最后贴个完整的类，转发了PointDenoiser的三个配置属性，另外在当中插入了一个broadcaster预留给子类一个访问和控制的接口

^?View Code CSHARP

using System;
using NITE;
 
namespace GGI.Model
{
    class PointDenoiseControl:PointControl
    {
        public PointDenoiseControl(SessionManager _session)
            : base()
        {
            session = _session;
            broadcaster = new Broadcaster();
            broadcaster.AddListener(this);
 
            pointDenoiser = new PointDenoiser();
            session.AddListener(pointDenoiser);
            pointDenoiser.AddListener(broadcaster);
        }
 
        protected Broadcaster broadcaster;
        protected SessionManager session;
        protected PointDenoiser pointDenoiser;
 
        public float DistanceThreshold
        {
            get
            { return pointDenoiser.DistanceThreshold; }
            set
            { pointDenoiser.DistanceThreshold = value; }
        }
        public float CloseRatio
        {
            get
            { return pointDenoiser.CloseRatio; }
            set
            { pointDenoiser.CloseRatio = value; }
        }
        public float FarRation
        {
            get
            { return pointDenoiser.FarRatio; }
            set
            { pointDenoiser.FarRatio = value; }
        }
    }
}