focus_scroll_1

JavaScript performance comparison

Test case created by Ted

Info

test focus scroll effect

Preparation code

<script type="text/javascript" src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
<script type="text/javascript" src="focus-scroll.js"></script>
    <h1>Focus Auto Scroll</h1>
    <p>Tab or Shift-tab</p>
    <div id="foo">
        <ul>
            <li>
                <a href="javascript:alert(0);">Link #0</a>
            </li>
            <li>
                <a href="javascript:alert(1);">Link #1</a>
            </li>
            <li>
                <a href="javascript:alert(2);">Link #2</a>
            </li>
            <li>
                <a href="javascript:alert(3);">Link #3</a>
            </li>
            <li>
                <a href="javascript:alert(4);">Link #4</a>
            </li>
            <li>
                <a href="javascript:alert(5);">Link #5</a>
            </li>
            <li>
                <a href="javascript:alert(6);">Link #6</a>
            </li>
            <li>
                <a href="javascript:alert(7);">Link #7</a>
            </li>
            <li>
                <a href="javascript:alert(8);">Link #8</a>
            </li>
            <li>
                <a href="javascript:alert(9);">Link #9</a>
            </li>
            <li>
                <a href="javascript:alert(10);">Link #10</a>
            </li>
            <li>
                <a href="javascript:alert(11);">Link #11</a>
            </li>
            <li>
                <a href="javascript:alert(12);">Link #12</a>
            </li>
            <li>
                <a href="javascript:alert(13);">Link #13</a>
            </li>
            <li>
                <a href="javascript:alert(14);">Link #14</a>
            </li>
            <li>
                <a href="javascript:alert(15);">Link #15</a>
            </li>
            <li>
                <a href="javascript:alert(16);">Link #16</a>
            </li>
            <li>
                <a href="javascript:alert(17);">Link #17</a>
            </li>
            <li>
                <a href="javascript:alert(18);">Link #18</a>
            </li>
            <li>
                <a href="javascript:alert(19);">Link #19</a>
            </li>
            <li>
                <a href="javascript:alert(20);">Link #20</a>
            </li>
            <li>
                <a href="javascript:alert(21);">Link #21</a>
            </li>
            <li>
                <a href="javascript:alert(22);">Link #22</a>
            </li>
            <li>
                <a href="javascript:alert(23);">Link #23</a>
            </li>
            <li>
                <a href="javascript:alert(24);">Link #24</a>
            </li>
            <li>
                <a href="javascript:alert(25);">Link #25</a>
            </li>
            <li>
                <a href="javascript:alert(26);">Link #26</a>
            </li>
            <li>
                <a href="javascript:alert(27);">Link #27</a>
            </li>
            <li>
                <a href="javascript:alert(28);">Link #28</a>
            </li>
            <li>
                <a href="javascript:alert(29);">Link #29</a>
            </li>
            <li>
                <a href="javascript:alert(30);">Link #30</a>
            </li>
            <li>
                <a href="javascript:alert(31);">Link #31</a>
            </li>
            <li>
                <a href="javascript:alert(32);">Link #32</a>
            </li>
            <li>
                <a href="javascript:alert(33);">Link #33</a>
            </li>
            <li>
                <a href="javascript:alert(34);">Link #34</a>
            </li>
            <li>
                <a href="javascript:alert(35);">Link #35</a>
            </li>
            <li>
                <a href="javascript:alert(36);">Link #36</a>
            </li>
            <li>
                <a href="javascript:alert(37);">Link #37</a>
            </li>
            <li>
                <a href="javascript:alert(38);">Link #38</a>
            </li>
            <li>
                <a href="javascript:alert(39);">Link #39</a>
            </li>
            <li>
                <a href="javascript:alert(40);">Link #40</a>
            </li>
            <li>
                <a href="javascript:alert(41);">Link #41</a>
            </li>
            <li>
                <a href="javascript:alert(42);">Link #42</a>
            </li>
            <li>
                <a href="javascript:alert(43);">Link #43</a>
            </li>
            <li>
                <a href="javascript:alert(44);">Link #44</a>
            </li>
            <li>
                <a href="javascript:alert(45);">Link #45</a>
            </li>
            <li>
                <a href="javascript:alert(46);">Link #46</a>
            </li>
            <li>
                <a href="javascript:alert(47);">Link #47</a>
            </li>
            <li>
                <a href="javascript:alert(48);">Link #48</a>
            </li>
            <li>
                <a href="javascript:alert(49);">Link #49</a>
            </li>
            <li>
                <a href="javascript:alert(50);">Link #50</a>
            </li>
            <li>
                <a href="javascript:alert(51);">Link #51</a>
            </li>
            <li>
                <a href="javascript:alert(52);">Link #52</a>
            </li>
            <li>
                <a href="javascript:alert(53);">Link #53</a>
            </li>
            <li>
                <a href="javascript:alert(54);">Link #54</a>
            </li>
            <li>
                <a href="javascript:alert(55);">Link #55</a>
            </li>
            <li>
                <a href="javascript:alert(56);">Link #56</a>
            </li>
            <li>
                <a href="javascript:alert(57);">Link #57</a>
            </li>
            <li>
                <a href="javascript:alert(58);">Link #58</a>
            </li>
            <li>
                <a href="javascript:alert(59);">Link #59</a>
            </li>
            <li>
                <a href="javascript:alert(60);">Link #60</a>
            </li>
            <li>
                <a href="javascript:alert(61);">Link #61</a>
            </li>
            <li>
                <a href="javascript:alert(62);">Link #62</a>
            </li>
            <li>
                <a href="javascript:alert(63);">Link #63</a>
            </li>
            <li>
                <a href="javascript:alert(64);">Link #64</a>
            </li>
            <li>
                <a href="javascript:alert(65);">Link #65</a>
            </li>
            <li>
                <a href="javascript:alert(66);">Link #66</a>
            </li>
            <li>
                <a href="javascript:alert(67);">Link #67</a>
            </li>
            <li>
                <a href="javascript:alert(68);">Link #68</a>
            </li>
            <li>
                <a href="javascript:alert(69);">Link #69</a>
            </li>
            <li>
                <a href="javascript:alert(70);">Link #70</a>
            </li>
            <li>
                <a href="javascript:alert(71);">Link #71</a>
            </li>
        </ul>
    </div>
    <div id="hint"></div>
    <script>
    YUI().use("focus-scroll", function (Y) {
        Y.one("#foo ul").offset = 10;
        Y.one("#foo ul").plug(Y.FocusScrollPlugin);
    });
    </script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
before new object
YUI.add("focus-scroll", function (Y) {

    var MODULE_ID = "FocusScrollPlugin";

    function FocusScrollPlugin(config) {
        this._init(config);
    }

    FocusScrollPlugin.NS = "focus-scroll";

    FocusScrollPlugin.prototype = {
        _init: function (config) {
            Y.log("_init() is executed.", "info", MODULE_ID);
            var offset   = config.host.offset || 0,
                callback = config.host.callback || null,
                node = config.host,
                focusable = "a";
            Y.delegate("focus", this._handleFocus, node, focusable, node, callback, offset);
            // x
            // Focus the first element.
            node.one(focusable).focus();
        },
        _handleFocus: function (e, callback, offset) {
            Y.log("_handleFocus() is executed.", "info", MODULE_ID);
            var anim,
                container,
                isDoc,
                node,
                nodeY,        // node offsetY position.
                nodeHeight,   // Height of each node. (MUST BE THE SAME)
                rowTotal,     // Available amount of rows within the viewport.
                scrollY,      // Current scroll position.
                scrollHeight, // Current scroll height.
                scrollTop,    // Target scrollTop value.
                viewHeight;
            node = e.currentTarget;
            container = this;
            isDoc = (container._node === document || container._node === window || container._node === document.body);
            nodeY = (isDoc) ? node.get("region").top : node.get("offsetTop") - container.get("region").top;
            nodeHeight = node.get("offsetHeight");
            scrollY = (isDoc) ? node.get("docScrollY") : container.get("scrollTop");
            Y.log("scrollY = " + scrollY);
            viewHeight = (isDoc) ? node.get("winHeight") : container.get("offsetHeight");
            scrollHeight = viewHeight + scrollY;
            Y.log("_handleFocus() - Current position " +
                 "(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
                 "scrollHeight = " + scrollHeight + ").");

            // Scroll down when focused node exceeds viewport.
            if (nodeY + nodeHeight >= scrollHeight) {
                Y.log("_handleFocus() - Scroll down " +
                     "(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
                     "scrollHeight = " + scrollHeight + ").");

                scrollTop = nodeY - offset;

            // Scroll up.
            } else if (nodeY < scrollY ) {
                Y.log("_handleFocus() - Scroll up " +
                     "(nodeTopY = " + nodeY + ", " +
                     "scrollY = " + scrollY + ").");

                // Caculates target scrollTop.
                rowTotal = Math.floor(viewHeight / nodeHeight);
                scrollTop = nodeY - (rowTotal - 1) * nodeHeight;
                scrollTop = (scrollTop <= 0) ? - offset : scrollTop;
            }

            // Makes scrolling while scrollTop isn't undefined.
            if (scrollTop) {
                anim = new Y.Anim({
                    duration: 0.5,
                    easing: "easeIn",
                    node: this,
                    to: {
                        scrollTop: scrollTop
                    }
                });
                anim.run();
            }
            if (callback) {
                callback.apply(e.currentTarget);
            }
        }
    };

    Y.FocusScrollPlugin = FocusScrollPlugin;
}, "0.0.1", {
    "group"    : "mui",
    "js"    : "focus-scroll/focus-scroll.js",
    "requires": [
        "anim",
        "event-resize",
        "event-focus",
        "event-delegate",
        "node"]
});
pending…
after new object
YUI.add("focus-scroll", function (Y) {

    var MODULE_ID = "FocusScrollPlugin";

    function FocusScrollPlugin(config) {
        this._init(config);
    }

    FocusScrollPlugin.NS = "focus-scroll";

    FocusScrollPlugin.prototype = {
        _init: function (config) {
            Y.log("_init() is executed.", "info", MODULE_ID);
            var offset   = config.host.offset || 0,
                callback = config.host.callback || null,
                node = config.host,
                focusable = "a";
            Y.delegate("focus", this._handleFocus, node, focusable, node, callback, offset);
            // x
            // Focus the first element.
            node.one(focusable).focus();
        },
        _handleFocus: function (e, callback, offset) {
            Y.log("_handleFocus() is executed.", "info", MODULE_ID);
            var anim,
                container,
                isDoc,
                node,
                nodeY,        // node offsetY position.
                nodeHeight,   // Height of each node. (MUST BE THE SAME)
                rowTotal,     // Available amount of rows within the viewport.
                scrollY,      // Current scroll position.
                scrollHeight, // Current scroll height.
                scrollTop,    // Target scrollTop value.
                viewHeight;
            node = e.currentTarget;
            container = this;
            isDoc = (container._node === document || container._node === window || container._node === document.body);
            nodeY = (isDoc) ? node.get("region").top : node.get("offsetTop") - container.get("region").top;
            nodeHeight = node.get("offsetHeight");
            scrollY = (isDoc) ? node.get("docScrollY") : container.get("scrollTop");
            Y.log("scrollY = " + scrollY);
            viewHeight = (isDoc) ? node.get("winHeight") : container.get("offsetHeight");
            scrollHeight = viewHeight + scrollY;
            Y.log("_handleFocus() - Current position " +
                 "(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
                 "scrollHeight = " + scrollHeight + ").");

            // Scroll down when focused node exceeds viewport.
            if (nodeY + nodeHeight >= scrollHeight) {
                Y.log("_handleFocus() - Scroll down " +
                     "(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
                     "scrollHeight = " + scrollHeight + ").");

                scrollTop = nodeY - offset;

            // Scroll up.
            } else if (nodeY < scrollY ) {
                Y.log("_handleFocus() - Scroll up " +
                     "(nodeTopY = " + nodeY + ", " +
                     "scrollY = " + scrollY + ").");

                // Caculates target scrollTop.
                rowTotal = Math.floor(viewHeight / nodeHeight);
                scrollTop = nodeY - (rowTotal - 1) * nodeHeight;
                scrollTop = (scrollTop <= 0) ? - offset : scrollTop;
            }

            // Makes scrolling while scrollTop isn't undefined.
                anim = new Y.Anim({
                    duration: 0.5,
                    easing: "easeIn",
                    node: this,
                    to: {
                        scrollTop: scrollTop
                    }
                });
            if (scrollTop) {
                anim.run();
            }
            if (callback) {
                callback.apply(e.currentTarget);
            }
        }
    };

    Y.FocusScrollPlugin = FocusScrollPlugin;
}, "0.0.1", {
    "group"    : "mui",
    "js"    : "focus-scroll/focus-scroll.js",
    "requires": [
        "anim",
        "event-resize",
        "event-focus",
        "event-delegate",
        "node"]
});
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment