Cfform and Flush performance questions

dev
1

We have performance problems with the display speed in various templates. While investigating these problems (with the help of FusionReactor 8.7 and other tools) I came across the following problems and I now have a few questions about it:

Problem A:
The FusionReactor “Stream Metrics” show that 3 flushes are always executed for templates in Lucee. I think only 1 flush (like ColdFusion) would be normal.

Question 1:
Why does Lucee need 3 flushes to output the HTML code of a template, while ColdFusion only uses 1 flush?

Problem B:
If, for example, 5 different <cfform> forms are used in a template, 5 requests are made for the “formtag-form.cfm” file, because this file is also integrated 5 times within a JS script tag. Unfortunately, the “formtag-form.cfm” file is not cached by the browser either, which results in completely unnecessary traffic. With ColdFusion, however, the “cfform.js” file is only loaded once, regardless of how many forms with the <cfform> tag are included in the template. In addition, the ColdFusion file “cfform.js” is cached by the browser - I assume because it is recognized as a JavaScript file due to the file extension?

Question 2:
Why is the “formtag-form.cfm” file repeatedly included as a <script> tag for each <cfform> form in the generated HTML? - That doesn’t make sense from my point of view.

Question 3:
Why is the file extension .cfm used for “formtag-form.cfm”, even though it is a JavaScript file? - I assume that the .cfm file extension maybe prevents the script from being cached in the browser?

It would be great if someone could answer my questions.

OS: Debian Linux 9.13
Java Version: 11.0.7
Lucee Version: 5.3.8.178-SNAPSHOT

2

But what’s the actual performance overhead? stats are always useful

Lucee delivered .js is done via a .cfm file, because depending on the webserver config, .js may not be delivered, as only *.cfm / *.cfc are served via the ajp connector etc

cfflush isn’t slow is it? it actually makes the page load faster, especially when the browser has to download javascript, it can start earlier downloading, rather than waiting for the whole page to complete server side

cfform like all the older ajax-era cfml tags are mostly provided only for backward compatibility and are not recommended for modern cfml, the tags are rather limited and not extensible, there’s better modern javascript solutions etc

I’ve added an expires header to the formtag-form, but I’m not sure when we will update the extension

you can always use your own scriptSrc and serve a customised version yourself

I’ve filed a bug, but this is extremely low priority on the roadmap

https://luceeserver.atlassian.net/browse/LDEV-3529

3

Ok, I understand. Thank you.

In this case it is probably not a question of “performance overhead” and/or “stats” but rather the behavior when a page is to be displayed. The multiple flushes probably lead to undesirable side effects in my case. I try to explain that:

In some of our templates pagination buttons (first, prior, next, last) are used with which the user can switch from one dataset to another (page is reloaded with the next query result). Each data set consists, for example, of 20 rows in a table.

Additionally we use jQuery-UI tabs in our templates to offer filtering settings, search options, etc…

jQuery SAMPLE CODE:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.</p>
  </div>
</div>

If you call up the next data set via the ‘next’ button, the <href> tags of the jQuery tabs are first shown for a short time as blue links and the entire screen content is visibly shifted downwards. Only shortly afterwards are the jQuery tabs displayed correctly, the links disappear again and the entire screen content shifts again.

A “flush” that is performed before the DOM condition

jQuery(document).ready(function($) {
  $(function() {
    $("#tabs").tabs();
  });
});

is fulfilled, leads (in my opinion) to this undesirable effect.

I think that a one-time flush at the end of the page is better (standard ColdFusion behavior), because the programmer should decide whether or not to use the <cfflush> tag for longer content. Otherwise, what is the tag for if you don’t have full control over it?!

“backward compatibility” is what I need. I don’t want to rewrite all code of our very complex application.

Thank you very much. That works fine.

(Sorry for my English. Google helps a little …)

4

maybe @cfmitrah can shed some light on why it is that way?

5

It would be great if also this question were examined in more detail (@cfmitrah), because integrating the same JavaScript multiple times into a page makes no sense at all. :wink: