typo3 fluid f：for非常慢

Question

在我的Typo3扩展程序中，我们使用<f:for来迭代两个项目。 恰好184个项目。

我从中生成一个滑块。

问题在于此迭代速度极慢。 有没有一种方法可以加快速度。 后端速度不到一秒。 仅前端渲染需要很长时间。

我完整的前端代码如下所示：

<f:if condition="{videos -> f:count()} > 4">
    <f:then>
        <f:for each="{videos}" as="video" iteration="i">
            <f:if condition="{i.isFirst}">
                <f:then>
                    <div class="item active">
                </f:then>
                <f:else>
                    <div class="item">
                </f:else>
            </f:if>
            <div class="col-lg-3 thumbnailParent">
                <f:link.action controller="FrontendVideo" action="show" arguments="{video : video}">
                    <f:render partial="Video/ShowThumbnail" arguments="{video : video, userAuthorization : userAuthorization}"/>
                </f:link.action>
            </div>
            <!-- adding slider-class to one of all slides. condition: slide must have more than 4 videos for slide-effect -->
            <f:if condition="{i.isLast}">
                <f:then>
                    <script type="text/javascript">
                        addClassForSliding('{myCarouselID}');
                        function addClassForSliding(myCarouselID) {
                            $("#myCarousel"+myCarouselID).addClass("isCarousel");
                            if(!$("div.videoSlide").find("div").hasClass("thisIsTheOnlySliderWhichSlides")){
                                $("#myCarousel"+myCarouselID).addClass("thisIsTheOnlySliderWhichSlides");
                            }
                        }
                    </script>
                </f:then>
                <f:else></f:else>
            </f:if>
            </div>
        </f:for>
    </f:then>
    <f:else>
        <f:for each="{videos}" as="video" iteration="i">
            <div class="item active">
                <div class="col-lg-3">
                    <f:link.action controller="FrontendVideo" action="show" arguments="{video : video}">
                        <f:render partial="Video/ShowThumbnail" arguments="{video : video, userAuthorization : userAuthorization}"/>
                    </f:link.action>
                </div>
            </div>
        </f:for>
    </f:else>
</f:if>

Answer 1

1. 确保已启用缓存-如果未启用，请不要根据未缓存的渲染来判断性能。
2. 尽量避免使用许多条件。 并且绝对不要留下<f:else></f:else>类的空节点。
3. 将您在上一次迭代中所做的工作移到循环之外（这样可以节省其他条件和大量节点构造）。
4. 尽可能避免使用iteration变量。 它为每个迭代增加了额外的处理和变量分配。
5. 我假设您使用JS激活组件。 因此，请使用JS设置active CSS类，从而避免1）像您一样错误地打开和关闭标签，以及2）避免仅一次有效的另一种情况，例如另一种情况。
6. 检查您渲染的局部图像。 它可能无法编译。 每次渲染时，都必须解决部分问题。 注意：在这种类型的用例中，节几乎总是比部分节表现更好。 我写了一个可以使用的工具，它还可以预编译模板，并且如果任何模板不兼容都可能失败： https : //github.com/NamelessCoder/typo3-cms-fluid-precompiler
7. 一般来说，除非有充分的理由，否则不要在Fluid中输出<script> 。 只要有可能，就从外部加载脚本并在脚本中存储所需的任何值，例如data-属性。 更快的解析，更快的循环。
8. 使用实际的性能分析工具来精确定位瓶颈。 您的代码使用ViewHelpers，并且对配置也很敏感，例如，对路径等的设置越多。在f:render调用中需要完成的处理越多。 不要在开发环境中进行概要分析！
9. 请勿在Docker设置上进行配置文件-除非您正在运行Linux。 即使这样，也要保留一些结果：文件系统性能将永远不平等。

避免iteration和您的条件，并将最后一个块移到循环外，应该可以节省80％的成本（不计算您渲染的部分中发生的事情-这在性能上绝对是可怕的，我们永远不会知道，因为您没有粘贴那个）。

最后，在选择是渲染部分片段还是部分片段时，需要考虑几件事。 其中大多数完全取决于您的用例（例如：您如何需要对模板进行结构化-与您无法覆盖的部分相比，可以覆盖的部分是否更有意义？），但是可以说一些笼统的内容性能：

• 渲染存在于同一模板中的部分时，将通过单个函数调用进行渲染，以使用一组新的模板变量切换到该部分。
• 但是，当渲染部分时，必须先解析该部分的模板文件，然后才能进行渲染。
• 解析的模板无法编译，因为必须能够在多个不同的上下文中呈现相同的已编译模板。
• 因此，每个模板的解析只能在每个上下文中缓存一次，这意味着，如果同一模板在页面上多次在多个上下文中呈现，则与使用段相比，性能可能会受到很大的影响（将其编译为纯文本函数调用）。
• 模板路径越多，文件解析就越困难。

您始终需要为任务选择正确的工具-这是我们作为开发人员要做的事情之一-因此，这些要点很通用。 有些用例在部分和部分之间的性能完全没有差异，而有些则不会因为使用iteration而明显受苦； 这完全取决于您的设置要求和要呈现的数据。 对模板进行性能分析无疑有助于找到正确的解决方案，因此我强烈建议您这样做。