客户要求不分页显示记录，一万多条记录，速度要求十三秒内。
------解决方案--------------------------------------------------------
------解决方案--------------------------------------------------------
我下载个100M的程序，1M的速度，我也要下100秒，13秒之内我必须要达到将近10M的速度。
真要有100M的话，你再ajax也白扯
------解决方案--------------------------------------------------------
只显示文本标题，不显示具体内容，如果真显示，100M的文本IE都卡死了，可以让鼠标滑过标题时AJAX获取数据弹出层显示。
一开始加载前面1000条，再逐步AJAX追加数据，加载的数据如果有格式先把格式在服务器端合成好了再返回到客户端，不要在客户端根据数据合成table，这样会卡死。
------解决方案--------------------------------------------------------
------解决方案--------------------------------------------------------
如果一屏只能显示30条数据,你可以先读出60条.
滚屏达到一定程度时,用ajax读取更多的数据,同时,用javascript将前面的部分数据
从DOM中remove,以便及时清除占用内存.
------解决方案--------------------------------------------------------
------解决方案--------------------------------------------------------
１万多条记录，就算是全部显示出来，也需要用户去拖动滚动条也可以看的完
１、采用flush response，分块输出
２、采用ajax，分多次输出内容，前面有人也己经提出来了
３、或者根据用户滚动条的位置，确实加载的内容
我们用一般的文本编辑器，打开一个10M的文件也一样会慢，何况IE去加载一个10M文本，这个没有太好的办法
------解决方案--------------------------------------------------------
JavaScript lazy loading
- JScript code
(function($) { $.fn.lazyload = function(options) { var settings = { threshold : 0, failurelimit : 0, event : "scroll", effect : "show", container : window }; if(options) { $.extend(settings, options); } /* Fire one scroll event per scroll. Not one scroll event per image. */ var elements = this; if ("scroll" == settings.event) { $(settings.container).bind("scroll", function(event) { var counter = 0; elements.each(function() { if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear"); } else { if (counter++ > settings.failurelimit) { return false; } } }); /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }); } this.each(function() { var self = this; /* Save original only if it is not defined in HTML. */ if (undefined == $(self).attr("original")) { $(self).attr("original", $(self).attr("src")); } if ("scroll" != settings.event || undefined == $(self).attr("src") || settings.placeholder == $(self).attr("src") || ($.abovethetop(self, settings) || $.leftofbegin(self, settings) || $.belowthefold(self, settings) || $.rightoffold(self, settings) )) { if (settings.placeholder) { $(self).attr("src", settings.placeholder); } else { $(self).removeAttr("src"); } self.loaded = false; } else { self.loaded = true; } /* When appear is triggered load original image. */ $(self).one("appear", function() { if (!this.loaded) { $("<img />") .bind("load", function() { $(self) .hide() .attr("src", $(self).attr("original")) [settings.effect](settings.effectspeed); self.loaded = true; }) .attr("src", $(self).attr("original")); }; }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if ("scroll" != settings.event) { $(self).bind(settings.event, function(event) { if (!self.loaded) { $(self).trigger("appear"); } }); } }); /* Force initial check if images should appear. */ $(settings.container).trigger(settings.event); return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).height() + $(window).scrollTop(); } else { var fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).width() + $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollTop(); } else { var fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; /* Custom selectors for your convenience. */ /* Use as $("img:below-the-fold").something() */ $.extend($.expr[':'], { "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" }); })(jQuery);