前端优化方法集锦--bigrender

最新推荐文章于 2024-05-23 11:06:31 发布

牛你懂么

最新推荐文章于 2024-05-23 11:06:31 发布

阅读量563

点赞数 1

分类专栏： javascript 文章标签：前端优化

本文链接：https://blog.csdn.net/woshidayingxing/article/details/46866319

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

- 如何加快首屏内容展现速度

思路是一次性读出所有文档，但是将不需要第一屏展现的内容放在textarea标签中，判断屏幕滚动，当该内容的容器出现在可视范围，则取出textarea标签中的内容，渲染到dom树中。

   var topics = {};
jQuery.Topic = function(id) {
    var callbacks,
        method,
        topic = id && topics[id];
    if (!topic) {
        callbacks = jQuery.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if (id) {
            topics[id] = topic;
        }
    }
    return topic;
};


(function($) {
    $.fn.bigrender = function(opts) {

        var winHeight = document.documentElement.clientHeight;
        var sum = 0;
        var count = 0;
        var flash = [];

        // 'class' 是textarea父节点的类；'textarea' 是textarea标签的类；'threshold'是距离进入屏幕还有150像素就开始渲染；'remove'是否删除textarea标签       
        options = $.extend({
            'class': '.render',
            'textarea': 'textarea',
            'threshold': 150,
            'remove': true
        }, opts);

        $brenders = $(options['class']);
        // 渲染首屏的内容
        initBigrender();
        // 绑定滚动条事件
        scrollDisplay();


        // 函数定义
        function initBigrender() {
            $brenders.each(function(n, object) {
                sum++;
                if (isRender($(this))) {
                    display($(this));
                    count++;
                    flash[n] = true;
                } else {
                    flash[n] = false;
                }
            });
        }

        // 判断时候需要渲染
        function isRender(object) {
            offsetTop = object.offset().top;
            ojh = object.outerHeight(true);
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);

            if (offsetTop + ojh + options.threshold >= st && offsetTop - options.threshold < (st + winHeight)) {
                return true;
            } else return false;

        }

        // 渲染textarea内的html代码
        function display(object) {
            $display = object.find(options.textarea).eq(0);
            if (options.remove) {
                object.append($display.val());
                $display.remove();
            } else {
                object.append($display.val());
            }
            $.Topic('dom_render').publish(object);
        }

        // 屏幕绑定滚动条事件，当待渲染的内容进入可视屏幕就触发isRender函数
        function scrollDisplay() {
            $(window).scroll(function(event) {
                event.preventDefault();
                if (count < sum) {
                    $brenders.each(function(n, object) {
                        if (flash[n] === false) {
                            if (isRender($(this))) {
                                display($(this));
                                count++;
                                flash[n] = true;
                            } else {
                                flash[n] = false;
                            }
                        }
                    });
                }
            });
        }
    };
})(jQuery);