Question

在我的Typo3扩展程序中，我们使用<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>  <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>来迭代几个项目。完全184项。

我生成一个滑块。

问题是这次迭代极其缓慢。有没有办法加快速度。后端速度不到一秒。只有前端渲染需要很长时间。

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

            <HashRouter>
            <div className="App">

                {/* Static section */}
                <div>
                    <NavBar title="MyApp" />
                </div>

                {/* Dynamic section */}
                <div>

                    <Route path="//" component={HomePage} />
                    <Route path="/market" component={MarketPage}/>

                </div>

            </div>
        </HashRouter>

Answer 1

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

避免iteration和你的条件，并将最后一个块移到循环之外，应该消除80％的成本（不计算你渲染的部分内容会发生什么 - 它可能在性能上非常可怕，我们永远不知道，因为你没有粘贴那个）。

最后，在选择是呈现部分还是部分时，需要考虑几件事情。其中大部分完全取决于您的使用案例（如：您需要如何构建模板 - 使用部分覆盖而不是您不能的部分更有意义吗？）但是可以说一些关于性能：

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

您总是需要为任务选择合适的工具 - 这是我们作为开发人员的工作之一 - 因此这些要点非常通用。某些用例在部分和部分之间的性能上没有差异，有些使用iteration不会明显受到影响;这一切都取决于您的设置要求和您正在渲染的数据。分析模板肯定有助于找到正确的解决方案，因此我强烈建议您这样做。

typo3流体f：因为极度缓慢

1 个答案: