YellowLabTools/lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js

/**
 * Analyzes DOM hidden content
 */
/* global document: true, Node: true, window: true */

exports.version = '1.0.a';

exports.module = function(phantomas) {
    'use strict';

    // total length of HTML of hidden elements (i.e. display: none)
    phantomas.setMetric('hiddenContentSize'); // @desc the size of content of hidden elements on the page (with CSS display: none) @offenders
    phantomas.setMetric('hiddenImages'); // @desc number of hidden images that can be lazy-loaded @offenders

    // HTML size
    phantomas.on('report', function() {
        phantomas.evaluate(function() {
            (function(phantomas) {
                var runner = new phantomas.nodeRunner(),
                    lazyLoadableImages = {};

                phantomas.spyEnabled(false, 'analyzing hidden content');

                runner.walk(document.body, function(node, depth) {
                    switch (node.nodeType) {
                        case Node.ELEMENT_NODE:
                            // @see https://developer.mozilla.org/en/DOM%3awindow.getComputedStyle
                            var styles = window.getComputedStyle(node);

                            if (styles && styles.getPropertyValue('display') === 'none') {
                                if (typeof node.innerHTML === 'string') {
                                    var size = node.innerHTML.length;
                                    phantomas.incrMetric('hiddenContentSize', size);

                                    // log hidden containers bigger than 1 kB
                                    if (size > 1024) {
                                        phantomas.addOffender('hiddenContentSize', phantomas.getDOMPath(node) + ' (' + size + ' characters)');
                                    }
                                }

                                // count hidden images that can be lazy loaded (issue #524)
                                var images = [];
                                if (node.tagName === 'IMG') {
                                    images = [node];
                                } else if (typeof node.querySelectorAll === 'function') {
                                    images = node.querySelectorAll('img') || [];
                                }

                                for (var i = 0, len = images.length; i < len; i++) {
                                    var src = images[i].src,
                                        path;

                                    if (src === '' || src.indexOf('data:image') === 0) continue;

                                    if (images[i].width === 1 && images[i].height === 1) continue;

                                    if (!lazyLoadableImages[src]) {
                                        path = phantomas.getDOMPath(images[i]);

                                        lazyLoadableImages[src] = {
                                            path: path
                                        };
                                    }
                                }

                                // don't run for child nodes as they're hidden as well
                                return false;
                            }
                            break;
                    }
                });

                Object.keys(lazyLoadableImages).forEach(function(img) {
                    var entry = lazyLoadableImages[img];

                    phantomas.incrMetric('hiddenImages');
                    phantomas.addOffender('hiddenImages', img);

                    phantomas.log('hiddenImages: <%s> image (%s) is hidden and can be lazy-loaded', img, entry.path);
                });

                phantomas.spyEnabled(true);
            }(window.__phantomas));
        });
    });
};