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而明顯受苦； 這完全取決於您的設置要求和要呈現的數據。 對模板進行性能分析無疑有助於找到正確的解決方案，因此我強烈建議您這樣做。