typo3 fluid f:for 速度极慢

typo3 fluid f:for is extreamly slow

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

避免 iteration 和你的条件,并将最后一个块移到循环之外,应该可以减少 80% 的成本(不包括你渲染的部分中发生的事情 - 这可能是绝对可怕的性能,我们永远不会知道,因为你没有粘贴那个)。

最后,在选择是渲染部分还是部分时,有几件事需要考虑。其中大部分完全取决于您的用例(例如:您需要如何构建模板 - 与您不能覆盖的部分相比,您可以覆盖的部分是否更有意义?)但是可以说一些一般性的事情表现:

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

您始终需要为任务选择正确的工具 - 这是我们作为开发人员的工作之一 - 所以这些要点非常通用。有些用例在部分和部分之间的性能上根本没有区别,有些用例不会因为使用 iteration 而受到明显影响;这完全取决于您的设置要求和您呈现的数据。分析您的模板肯定有助于找到正确的解决方案,因此我强烈建议您这样做。