html元素使用 style 属性或者 class 定义样式，渲染效率区别如何？

Question

某个操作会批量生成上万个以下元素，添加到页面上进行显示：

1. style 设置行内样式

<span style="color:#999;">76371902_p0.png</span>

2.使用 class （预先定义了这个 class， color:#999）
<span class="color999">76371902_p0.png</span>

哪种渲染更快？为何？
（之前因为元素数量多，渲染时间太长导致页面假死）

Answer 1

根据上面你给出的例子，如果只改变了color，name用那种方式都是一样的，都不会导致页面重排，只是那上万级的dom才是致命的关键，如果可以，尽量分批次加载

Answer 2

哪个更快不清楚，具体涉及浏览器的渲染机制（Chrome和Firefox的渲染机制略有不同），自己做实验测试也不难。但是同时间渲染这么多DOM是不合理的。

DOM是个与JS共用线程的接口，当然会卡死。

推荐两种方案：多运货要么用大船，要么用多个小船

• 合并渲染。全部span都在document.create的元素上，最后再渲染这个大元素。尽可能少操作DOM。
• 分批次渲染。这种就会有“加载”的效果，不够快，但是用户能接收。方法是，把渲染任务分成多个，每个小任务交给setTimeout处理（切记不可用setInterval），这样就不好阻塞JS了。

Answer 3

上万个元素.....
不如你在后端图片上画好, 传个图片到前端.
或者传数据到前端, 在前端画好图片. 整体放页面上