使用 ajax 渲染页面快还是使用 php 来生成页面比较快呢？

[ben548]

如题，上次在项目中看到一个页面非常慢，整个 table 数据都是通过 ajax 生成 dom 来渲染的， ajax 中请求到的数据结果集有 5000-10000 条数据，其实接口响应时间并不慢，所以想问问，是不是使用 ajax 生成 dom 在数据量比较大的时候会很慢，或者说至少比 php 直接渲染慢？

[oott123]

一次性渲染 10k 条数据到 DOM 里，怎么都慢……
除非 lazyload

[yyfearth]

要看你 JS 怎么写的
这么大的数据 估计怎么样都会挺慢的
不过如果是 JS 插入 DOM
如果操作不当(比如一条一条的插入并显示)
导致 reflow 会让整个过程更加异常缓慢

[TakanashiAzusa]

这么多数据。。 php 直接渲染效率肯定比 js 高。。

[ben548]

@yyfearth 是那种用+拼接的方式将最终生成的字符串输出的方式，很想知道 php 和 js 在页面渲染这个层面上面有什么区别

[ben548]

@TakanashiAzusa 为什么呢？ php 和 js 在页面渲染这个层面上面有什么区别？这个是不是会涉及到更深层次的浏览器页面渲染原理呢？

[bramblex]

我就问一句，你们不做分页

[BOYPT]

从一个 Datatable 的角度来看，这是一个 client side 还是 server side 处理的问题。
client side 的话，如果每一个数据都处理 DOM ，那是必然慢的，但是有优化方法，比如数据都存在 js 数组中，只在滚动表格过程中实时从数据填入 DOM ，这样优化后效率高很多。
server side 处理，那逻辑会交到服务器上，一次的传输数据也少一些。

方法各有利弊，自己决定。

参考文献：
百万数据的网页表格 http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records

[cxbig]

这么大的数据一次性输出，那么 php 处理你的服务器压力大， js 处理客户端的压力大。要找个平衡点，或减少数据量。
Ajax 只是异步通信，你前端用什么框架渲染？

[TakanashiAzusa]

@ben548 php 直接渲染比 ajax 动态生成少了一步，就是 js 生成 dom 节点的过程。而 js 生成 dom 节点的过程会造成浏览器 reflow ，这是非常消耗浏览器资源的一种行为——量小的话还好，无所谓，量大的话比如你一次喂 5000 条进来，那是个浏览器都得跪。
我觉得正常解法应该是 6 楼说的做分页或者瀑布流加载， 5000 条数据单次喂 20 条进来之类的，那样这两种方式区别应该不会特别大。。
就算是 php 直接渲染的，页面上上千条数据，这个 document 文件本身大小估计也会很可怕。。

[chemzqm]

是不会分页还是烂的实现分页？
就算 js 一次取了 10000 条也不用一次都渲染啊，可以等滚动条到头再渲染更多的一部分啊
我这个组件就有这个功能 https://github.com/chemzqm/mobile-list ，设置 limit 和 moreCount 就行了

[ben548]

@bramblex 不是这个是一个订单数据，给财务用的，分页没有意义，主要是给财务看的，没有什么问题，财务就会导出成 excel 表了，额，其实仔细想想直接提供导出 execl 就行了，不必输出这些数据

[ben548]

@cxbig 原生的 js 啊，没有用 js 框架，硬要说的话 jquery

[ben548]

貌似大家都比较赞同分页的做法？

[yyfearth]

@ben548 @TakanashiAzusa 拼接后 然后直接 innerHtml 插入性能是没有大问题的 也不会造成严重的 reflow
和 php 比唯一的劣势是 php 渲染时候 可以边渲染 边输出 页面慢慢呈现
用 JS 只能是最后一下子输出 不过对于最终结果而言 速度应该不会差太多

其实这种需求 不如直接导出 csv 方便

[bramblex]

@ben548

这问题不就解决了吗？导出 csv 给财务就好，记得注意下字符集的坑

[iiaini]

淘宝页面是 ajax 加载

[Zzzzzzzzz]

https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/

[chend]

@chemzqm 回答问题了， 顺便 广告了自己的~~ 急着用的估计就直接 fork 或者 star 了。。 你为何这么机(pian)智(star)

[ChiChou]

为什么不分页。。

[chemzqm]

@chend 😀我的组件用了些设计模式和其它组件，对新手不太友好，其实只需要 scroll 事件上绑定个函数判断下 scrollTop 然后再添加 dom 元素就行了， mdn 有个例子 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight