In my Typo3 extension I us a <f:for
to iterate trough a couple of items. Exactly 184 Items.
I generate a slider out of this.
Problem is that this iteration is extremly slow. Is there a way to fast it up. Backend is fast less than a sec. Only the frontend rendering needs to long time.
My full frontend Code looks like this:
<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>
<f:else></f:else>
. iteration
variable whenever possible. It adds additional processing and variable assignment to each iteration. active
CSS class, thus avoiding 1) opening and closing tags incorrectly like you do, and 2) avoid another condition that only is true a single time, like the other one. <script>
in Fluid unless you have an extremely good reason. Whenever possible, load scripts externally and store whichever values the script needs, in for example data-
properties. Faster parsing, faster loop. f:render
calls. Do not profile in development context! Avoiding iteration
and your conditions, and moving the last block outside the loop, should remove a good 80% of the cost (not counting what happens in your partial you render - it could be absolutely horrible in performance and we'd never know since you didn't paste that one).
Finally, when selecting whether to render a partial or a section there are a couple of things to consider. Most of these completely depend on your use case (as in: how do you need your templates to be structured - does it make more sense with a partial you can overlay than a section you cannot?) but it is possible to say something general about performance:
You always need to choose the right tool for the task - that's one of the things our job is as developers - so these points are pretty generic. Some uses cases simply have no difference in performance between sections and partials, some don't suffer noticeably from using iteration
; it all depends on your setup requirements and the data you are rendering. Profiling your templates certainly helps finding the right solution so I highly recommend doing that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.