这是一个创建于 3262 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，上次在项目中看到一个页面非常慢，整个 table 数据都是通过 ajax 生成 dom 来渲染的， ajax 中请求到的数据结果集有 5000-10000 条数据，其实接口响应时间并不慢，所以想问问，是不是使用 ajax 生成 dom 在数据量比较大的时候会很慢，或者说至少比 php 直接渲染慢？
 |
1
oott123 2015-12-18 17:00:23 +08:00
一次性渲染 10k 条数据到 DOM 里，怎么都慢……
除非 lazyload |
 |
2
yyfearth 2015-12-18 17:09:28 +08:00
要看你 JS 怎么写的
这么大的数据 估计怎么样都会挺慢的 不过如果是 JS 插入 DOM 如果操作不当(比如一条一条的插入并显示) 导致 reflow 会让整个过程更加异常缓慢 |
 |
3
TakanashiAzusa 2015-12-18 17:10:54 +08:00
这么多数据。。 php 直接渲染效率肯定比 js 高。。
|
 |
4
ben548 OP @yyfearth 是那种用+拼接的方式将最终生成的字符串输出的方式，很想知道 php 和 js 在页面渲染这个层面上面有什么区别
|
|
5
ben548 OP @TakanashiAzusa 为什么呢？ php 和 js 在页面渲染这个层面上面有什么区别？这个是不是会涉及到更深层次的浏览器页面渲染原理呢？
|
 |
6
bramblex 2015-12-18 17:14:00 +08:00 via Android
我就问一句，你们不做分页
|
 |
7
BOYPT 2015-12-18 17:17:26 +08:00
从一个 Datatable 的角度来看，这是一个 client side 还是 server side 处理的问题。
client side 的话，如果每一个数据都处理 DOM ，那是必然慢的，但是有优化方法，比如数据都存在 js 数组中，只在滚动表格过程中实时从数据填入 DOM ，这样优化后效率高很多。 server side 处理，那逻辑会交到服务器上，一次的传输数据也少一些。 方法各有利弊，自己决定。 参考文献： 百万数据的网页表格 http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records |
 |
8
cxbig 2015-12-18 17:18:04 +08:00
这么大的数据一次性输出，那么 php 处理你的服务器压力大， js 处理客户端的压力大。要找个平衡点，或减少数据量。
Ajax 只是异步通信，你前端用什么框架渲染？ |
|
9
TakanashiAzusa 2015-12-18 17:19:42 +08:00
@ben548 php 直接渲染比 ajax 动态生成少了一步，就是 js 生成 dom 节点的过程。而 js 生成 dom 节点的过程会造成浏览器 reflow ，这是非常消耗浏览器资源的一种行为——量小的话还好，无所谓，量大的话比如你一次喂 5000 条进来，那是个浏览器都得跪。
我觉得正常解法应该是 6 楼说的做分页或者瀑布流加载， 5000 条数据单次喂 20 条进来之类的，那样这两种方式区别应该不会特别大。。 就算是 php 直接渲染的，页面上上千条数据，这个 document 文件本身大小估计也会很可怕。。 |
 |
10
chemzqm 2015-12-18 17:29:32 +08:00
是不会分页还是烂的实现分页？
就算 js 一次取了 10000 条也不用一次都渲染啊，可以等滚动条到头再渲染更多的一部分啊 我这个组件就有这个功能 https://github.com/chemzqm/mobile-list ，设置 limit 和 moreCount 就行了 |
|
11
ben548 OP @bramblex 不是这个是一个订单数据，给财务用的，分页没有意义，主要是给财务看的，没有什么问题，财务就会导出成 excel 表了，额，其实仔细想想直接提供导出 execl 就行了，不必输出这些数据
|
|
13
ben548 OP 貌似大家都比较赞同分页的做法？
|
|
14
yyfearth 2015-12-18 17:37:34 +08:00
@ben548 @TakanashiAzusa 拼接后 然后直接 innerHtml 插入性能是没有大问题的 也不会造成严重的 reflow
和 php 比唯一的劣势是 php 渲染时候 可以边渲染 边输出 页面慢慢呈现 用 JS 只能是最后一下子输出 不过对于最终结果而言 速度应该不会差太多 其实这种需求 不如直接导出 csv 方便 |
 |
16
iiaini 2015-12-18 18:44:48 +08:00 via iPhone
淘宝页面是 ajax 加载
|
 |
17
Zzzzzzzzz 2015-12-18 18:48:18 +08:00
|
 |
18
chend 2015-12-18 19:42:31 +08:00
@chemzqm 回答问题了， 顺便 广告了自己的~~ 急着用的估计就直接 fork 或者 star 了。。 你为何这么机(pian)智(star)
|
 |
19
ChiChou 2015-12-18 19:57:37 +08:00
为什么不分页。。
|
|
20
chemzqm 2015-12-18 20:26:37 +08:00
@chend 😀我的组件用了些设计模式和其它组件，对新手不太友好，其实只需要 scroll 事件上绑定个函数判断下 scrollTop 然后再添加 dom 元素就行了， mdn 有个例子 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
|
 |
21
adspe 2015-12-18 20:34:42 +08:00 via Android
JS 写的时候加缓存
|
 |
22
loading 2015-12-18 20:56:27 +08:00 via Android
不说用户体验？
我个人建议是 php 渲染前 10 条给用户看首屏，然后加 json 。 |
 |
23
sarices 2015-12-18 23:53:25 +08:00
下拉加载就行了，只载入首页，其他通过 scroll 事件触发异步载入
|
 |
24
eoo 2015-12-19 00:30:47 +08:00 via Android
Ajax 生成 DOM...... 头一次听说 ajax 有这功能啊！ 这不是 JavaScript 干的活么？
|
 |
25
jarlyyn 2015-12-19 13:54:38 +08:00
这不是 react 的领域么？
|
 |
26
Felldeadbird 2015-12-19 14:42:24 +08:00
相同数据量的情况下（超过 5000 条），百分百 PHP 比 JS 快。同样 2 万条记录生成在 table 中。 PHP 大概等一会就正常。而 JS 极大可能会导致浏览器崩溃。
|
 |
27
Matrixbirds 2015-12-19 22:56:21 +08:00
当然 php 啊 世界上最好的语言啊 最好的语言都慢还玩个 JJ
|
Select Language