Thymeleaf Select Option 性能问题 [英] Thymeleaf Select Option Performance Issue

问题描述

我最近一直在忙于 Spring MVC 5 和 Thymeleaf 3.0，并注意到一些奇怪的事情.我已经开始从网站上的教程中实现一个下拉列表，并注意到了一些性能问题.如果我使用以下代码，我的页面需要大约 5.5 秒才能呈现大约 100 个项目的下拉列表.

<option th:each="item : ${items}"th:value="${item.getId()}"th:text="${item.getValue()}"></option></选择>
另一方面，如果我使用以下代码，我的页面会在大约 150 毫秒内呈现.
<span th:text="${item.getId()}"/><span th:text="${item.getValue()}"/>
我已经遍历了控制器中的项目列表并打印了这些值，以查看它们是否因从数据库获取数据而变慢，但是从控制器中获取项目是立即发生的.我还尝试在 select 标记中呈现不同的 html 元素以进行测试，即使它不是有效的 html，它仍然可以快速呈现页面.
我唯一一次在页面渲染中遇到极度延迟的情况是在选项的 select 标签中使用 th:each 时.Thymeleaf 是否以不同方式处理选择标签?我认为如果相同的项目列表，调用相同的方法可以通过循环 div 在 130 毫秒内呈现一个页面，那么它应该能够以相当的速度创建选项，而不是花费 5.5 秒.
有没有人遇到过这样的问题?我进行了一些搜索，发现 Thymeleaf 中存在循环性能问题，但这些案例有超过 100,000 条记录，其中我的列表大约有 100 个项目.任何帮助将不胜感激.
更新
我已将问题缩小到在 th:field="*{item}" 上表现不佳.如果我运行以下代码，页面会立即加载.
<option th:each="item : ${items}"th:value="${item.getId()}"th:text="${item.getValue()}"></option></选择>

一旦我尝试使用 th:field="*{item}" 绑定选择，页面会挂起大约 5.5 秒.是否有任何理由说明使用 th:field 绑定会导致滞后问题?

解决方案

这篇文章很老了，但希望我能帮助遇到同样问题的人.这几天前发生在我身上.将字段映射到对象列表时需要 40 秒以上才能完成的请求.如果您将属性 th:field 仅映射到 id，Spring 将不会序列化整个对象，仅将 id 返回给控制器.我找到的解决方案是使用不同的语法重新创建 Thymeleaf 生成的输出.

取而代之的是:

<option th:each="item : ${items}"th:value="${item.getId()}"th:text="${item.getValue()}"></option></选择>
这样做:
<option th:each="it : ${items}"th:selected ="${it.getId()} == *{item.getId()}"th:value="${item.getId()}"th:text="${item.getValue()}"></option></选择>

输出将相同，但页面加载速度提高了 30 倍，并且会维护整个对象item".

I've been messing around with Spring MVC 5 and Thymeleaf 3.0 lately and have noticed something strange. I've started to implement a dropdown list from the tutorial on the site and have noticed some performance issues. If I use the following code, it takes around 5.5 seconds for my page to render a dropdown list of about 100 items.

<select th:field="*{item}">
    <option th:each="item : ${items}" 
            th:value="${item.getId()}" 
            th:text="${item.getValue()}"></option>
</select>

On the other hand, if I use the following code, my page renders in about 150ms.

<div th:each="item : ${items}">
    <span th:text="${item.getId()}"/>
    <span th:text="${item.getValue()}"/>
</div>

I've looped through the list of items in my controller and printed out the values to see if their was any slowdown with getting data from the database, but grabbing items from the controller happened instantly. I've also tried rendering different html elements in the select tag for testing purposes and even though it isn't valid html, it still renders the page quickly.

The only time I experience an extreme amount of lag on page rendering is when I use a th:each inside of a select tag on options. Does Thymeleaf handle select tags differently? I would think that if the same list of items, calling the same methods can render a page in 130ms by looping through divs, it should be able to create options at a comparable rate, instead of taking 5.5 seconds.

Has anyone encountered an issue like this before? I did some searching and found that there were performance issues looping in Thymeleaf, but those cases had upwards of 100,000 records, where my list is about 100 items. Any help would be greatly appreciated.

Update

I've narrowed down the issue to performing poorly on th:field="*{item}". If I run the following code, the page loads instantly.

<select>
    <option th:each="item : ${items}" 
            th:value="${item.getId()}" 
            th:text="${item.getValue()}"></option>
</select>

Once I try to bind the select using th:field="*{item}", the page hangs for around 5.5 seconds. Is there any reason why binding using th:field would cause an issue with lag?

解决方案

This post is old, but hope I can help someone with the same problem. This happened to me some days ago. Requests where taking more than 40 seconds to complete when mapping a field to a list of objects. And if you map the attribute th:field only to the id, Spring will not serialize the whole object, only the id, when returning it to controller. The solution I found was to recreate the output that Thymeleaf produces, with a different syntax.

Instead of this:

<select th:field="*{item}">
    <option th:each="item : ${items}" 
            th:value="${item.getId()}" 
            th:text="${item.getValue()}"></option>
</select>

Do this:

<select name="item" id="item">
    <option th:each="it : ${items}"
            th:selected ="${it.getId()} == *{item.getId()}"
            th:value="${item.getId()}" 
            th:text="${item.getValue()}"></option>
</select>

The output will be the same, but the page will load 30 times faster and it will maintain the whole object "item".

这篇关于Thymeleaf Select Option 性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！