Hi.

We noticed performance issues when listing a large number (150-300+) of host macros in the web frontend, which takes around 30-40 seconds to load when pressing "Inherited and host macros" button (higher values even crash the page just by clicking on the Macros tab, depending on the hardware running the browser). Further analysis on our side revealed that the problem is caused by neither the database, nor by the frontend web server, but actually by the JavaScript code causing excessive layout reflows in the client browser when generating the list of macros, which significantly slows down the page rendering. 

The culprit appears to be an utility function called textareaFlexible in the file js/textareaflexible.js. After disabling the call to .trigger('input'); in line 83, the browser performance improved greatly.

    var methods = {
        init: function() {
            return this.each(function() {
                var $textarea = $(this);                $textarea
                    .off('input keydown paste', update)
                    .on('input keydown paste', update)
//                                      .trigger('input');
            });
        },
        clean: function() {
            return this.each(function() {
                var $textarea = $(this);                $textarea
                    .val('')
                    .css('height', '');
            });
        }
    }; 

(I have commented out the specified line here)

As a negative side effect, this breaks the automatic sizing of the macro fields, so this is just a temporary workaround that we are using right now.

The test have been done primarily in Zabbix 6.0.9, but it looks like 5.0, 6.2 and 6.4beta3 is affected as well. I did the test on the other versions using a small Python script that creates "250" host macros on the Zabbix host entry and they showed the same behavior.

I have attached the modified file. Also, creating even more macros with the script, like let's say 1000, makes the difference between the patched and unpatched version very obvious. After the change, even thousands of macros are displayed in just 1-2 seconds on my system.

Here's the python script used to generate the macros:

import pyzabbix

zapi = pyzabbix.ZabbixAPI("http://10.50.0.43/")
zapi.login("Admin", "zabbix")

macros = []
for i in range(1000):
    macros.append({
        "macro": "{$MACRO_%04d}" % i,
        "value": "value %04d" % i
    })

zapi.host.update(hostid=xxxxxx, macros=macros) 

Steps to reproduce:

1. Run the python script to create macros on a host (You need to add the HostID and the correspondent URL of your Zabbix)
2. Navigate to Configuration > Hosts > Chosen Host
3. Click on the Macro tab
   On my desktop, it just kills the page, not even listing the Macros at all.
4. Apply the changes on the textareaflexible.js file
5. Clear cache of browser to avoid possible false positives

Result:
After applying this fix, it instantly shows the Macros on my station. When I click to list Inherited Macros it takes a little while (less than 10 seconds) to list all the 1000 macros there.

Expected:
To work natively without any limitations on the amount of Macros.

Suggestion: 
Would it be possible to improve the event handling in the frontend JavaScript code, e.g. by calling the input event only once after generating the list of macros to avoid the layout reflow issue?