typo3流体f:因为极度缓慢

Fel*_*lix 1 html typo3 fluid

在我的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>
Run Code Online (Sandbox Code Playgroud)

Cla*_*Due 5

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

避免iteration和你的条件,以及移动循环外的最后一个块,应该消除80%的成本(不计算你渲染的部分内容 - 它可能是绝对可怕的性能,我们永远不会知道,因为你没有不粘贴那个).

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

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

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