blocks|key|665691|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665692|665693|将行推入数组，然后简单地|unordered-list-item|665694|665695|el.innerHTML+=+array.join("");|665696|use+document+fragments|offset|length|665697|665698|var+frag+=+document.createDocumentFragment()；for+(循环){+frag.appendChild(+el+)；}+parent.appendChild(+frag+);|665699|entityMap|0|LINK|mutability|MUTABLE|url|http://ejohn.org/blog/dom-documentfragments/^0|0|0|0|0|0|4|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Z|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|E|7|12|8|@]|9|@$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

try:

<ul>
<li>push rows into an array, then simply 

<pre><code> el.innerHTML = array.join("");
</code></pre></li>
<li>use <a href="http://ejohn.org/blog/dom-documentfragments/" rel="nofollow noreferrer">document fragments</a> 

<pre><code>var frag = document.createDocumentFragment();
for ( loop ) {
 frag.appendChild( el );
}
parent.appendChild( frag );
</code></pre></li>
</ul>

blocks|key|2294232|text|如果不需要一次显示所有300条记录，可以尝试一次对它们分页30或50条记录，并且只展开JSON数组，因为这些子部分需要通过分页器或本地搜索框显示。转换后，您可以缓存内容，以便在用户上下浏览页面时进行后续显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2294233|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you don't need to display all 300 records at once you could try to paginate them 30 or 50 records at a time and only unroll the JSON array as those sub-parts are required to be displayed through a pager or a local search box. Once converted you could cache the content for subsequent display as users navigate up and down the pages.

blocks|key|665542|text|尝试在分离的DOM节点或文档片段中创建元素，然后一次性附加所有内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665543|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Try creating the elements in a detached DOM node or a document fragment, then attaching the whole thing in one go.

blocks|key|3701403|text|300不是很多。我使用jQuery创建了一个包含500多个元素的树，在Chrome上只用了不到几秒钟的时间。300不是个大数字。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3701404|如果它们渲染得如此慢，可能是因为使用了错误的方法。你能详细说明你是如何做到的吗？|3701405|最慢的方法是在Javascript中将HTML写成一个字符串，然后将它与innerHtml成员一起赋值。但对于300行来说，这仍然是非常快的。|3701406|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

300 isn't a lot. 
I managed to create a tree of over 500 elements with data from JSON using jQuery, in a fraction of a second on Chrome.
300 isn't a big number.

If they are rendered so slowly, it might be due to a wrong way of doing it. Can you specify how you do it?

The slowest way would be to write HTML into a string in Javascript, then assign it with innerHtml member. But that would still be fast as hell for 300 rows.

blocks|key|3701430|text|Google+Web+Toolkit拥有旨在快速呈现大型表格的BulkTableRenderers。即使您选择不使用GWT，您也可以通过查看source+code来学习一些技术，这些技术在Apache+2.0版下可用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3701431|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/google-web-toolkit/|1|http://code.google.com/p/google-web-toolkit-incubator/wiki/BulkTableRenderers|2|http://www.google.com/codesearch/p?hl=en#kxqvj77bOTo/trunk/src/com/google/gwt/gen2/table/client/TableBulkRenderer.java&q=TableBulkRenderer%2520package:http://google-web-toolkit-incubator%255C.googlecode%255C.com&sa=N&cd=1&ct=rc^0|0|I|0|V|I|1|1Y|B|2|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]|N|$5|G|H|I|C|$J|O]]]]

<a href="http://code.google.com/p/google-web-toolkit/" rel="nofollow noreferrer">Google Web Toolkit</a> has <a href="http://code.google.com/p/google-web-toolkit-incubator/wiki/BulkTableRenderers" rel="nofollow noreferrer">BulkTableRenderers</a> that are designed to render large tables quickly. Even if you choose not to use GWT, you might be able to pick up some techniques by looking through the <a href="http://www.google.com/codesearch/p?hl=en#kxqvj77bOTo/trunk/src/com/google/gwt/gen2/table/client/TableBulkRenderer.java&amp;q=TableBulkRenderer%20package:http://google-web-toolkit-incubator%5C.googlecode%5C.com&amp;sa=N&amp;cd=1&amp;ct=rc" rel="nofollow noreferrer">source code</a> which are available under Apache License, Version 2.0.

I take a fat JSON array from the server via an AJAX call, then process it and render HTML with Javascript. What I want is to make it as fast as humanly possible.

Chrome leads over FF in my tests but it can still take 5-8 seconds for the browser to render ~300 records.

I considered lazy-loading such as that implemented in Google Reader but that goes against my other use cases, such as being able to get instantaneous search results (simple search being done on the client side over all the records we got in the JSON array) and multiple filters.

One thing I have noticed is that both FF and Chrome do not render anything until they loop over all items in the JSON array, even though I explicitly insert the newly created elements into DOM after every loop (as soon as I have the HTML). What I'd like to achieve would be just that: force the browser to render as soon as it can.

I tried deferring the calls (every item from the array would be processed by a deferred function) but ran into additional issues there as it seems that the order of execution isn't guaranteed anymore (some items further down the array would be processed before other items before it).

I'm looking for any hints and tips here.

Strategies for rendering HTML with Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我通过AJAX调用从服务器获取一个庞大的JSON数组，然后对其进行处理并使用Javascript呈现HTML。我想要的是让它尽可能快。在我的测试中，Chrome领先于FF，但浏览器渲染大约300条记录仍然需要5-8秒。我考虑过延迟加载，例如在Google Reader中实现的延迟加载，但这与我的其他用例不一致，例如能够获得即时搜索结果(在客户端对我们在JSON数组中获得的所有记录执行简单搜索)和多

问用Javascript渲染HTML的策略
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用Javascript渲染HTML的策略EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用Javascript渲染HTML的策略
EN