PHP + Apache long wait time

Question

I am attempting to change the cursor in a specific element.

Changing

area {
    cursor: pointer;
}

to

area {
    cursor: url("http://fivebs.net/fiddle/cursor.ani"), pointer;
}

doesn't work. However, using the default cursors (wait, help, etc.) works:

area {
    cursor: url("http://fivebs.net/fiddle/cursor.gif"), help;
}

Tried modifying global cursor parameters, different containers, java script, different CSS styles, etc. Also looked up most previous stackoverflow questions, and used jsfiddle to test them out (with previous google searches).

HTML

<div>
    <map id="world" name="world">
        <area shape="circle" alt="Africa" title="Africa" coords="682,462,97" href="AllItems.aspx" target="_self" onmouseover="afr.style.visibility='visible'; afr.src='africa.png';" onmouseout="afr.style.visibility='hidden';" />
        <area shape="circle" alt="Americas" title="Americas" coords="228,198,123" href="AllItems.aspx" target="_self" onmouseover="ame.style.visibility='visible'; ame.src='americas.png';" onmouseout="ame.style.visibility='hidden';" />
        <area shape="circle" alt="Asia/Pacific" title="Asia/Pacific" coords="1110,412,122" href="AllItems.aspx" target="_self" onmouseover="asi.style.visibility='visible'; asi.src='asiapacific.png';" onmouseout="asi.style.visibility='hidden';" />
        <area shape="circle" alt="Europe" title="Europe" coords="627,136,98" href="AllItems.aspx" target="_self" onmouseover="eur.style.visibility='visible'; eur.src='europe.png';" onmouseout="eur.style.visibility='hidden';" />
    </map>
    <img alt="Africa" style="position:absolute;top:559px;left:779px;visibility:hidden;" id="afr" src="africa.png" />
    <img alt="Americas" style="position:absolute;top:321px;left:351px;visibility:hidden;" id="ame" src="americas.png" />
    <img alt="Asia/Pacific" style="position:absolute;top:534px;left:1232px;visibility:hidden;" id="asi" src="asiapacific.png" />
    <img alt="Europe" style="position:absolute;top:234px;left:725px;visibility:hidden;" id="eur" src="europe.png" />
    <img id="worldmap" alt="world map" src="http://fivebs.net/fiddle/worldmap.png" usemap="#world" />
</div>
<img alt="Ta Da" src="http://fivebs.net//fiddle/tada.png" />

CSS

#worldmap {
    position: relative;
    cursor: url("http://fivebs.net/fiddle/cursor.ani"), url("http://fivebs.net/fiddle/cursor.gif"), auto;
}
area {
    cursor: url("http://fivebs.net/fiddle/cursor.gif"), help;
}

Would be preferable to be able to use a custom cursor, on hover-over-area, on said image map.

Been testing this Jsfiddle: click here

Update

Apparently the tag is outside of DOM, and such cannot be altered. Any suggestions (apart from using SVG)?

Solution 1

I think your problem is simply your hard disk with it's access times. Apache can cache html-pages in memory, but php-scripts are not cached; the need to be executed every time again. Therefore the php interpreter is called and it reads the script from the hdd. This takes a lot of time. The most slowest thing on your server is your HDD. On my pc, there is an extreme difference between applications starting from my SSD and my HDD (the SSD is up to 10 times faster!). If your HDD works, then the latency for executing an php script may increase drastically.

Possible solutions: get an SSD (maybe a small one just for often accessed data such as scripts) and minimize script calls (and HDD accesses) on your server. Make sure, the filesystem is defragmented (usually done automatically). If your php-script creates often the same contents, try caching them into an html file.

This answer could also help you: https://stackoverflow.com/questions/4181865/apache-php-caching

Solution 2

HTML file you're testing is just a plain file, all that Apache has to do is do a few system calls (open, read) and then serve its content.

PHP OTOH is actually quite a "heavy" option: it's an entire interpreter (bytecode compiler?). And since you're using concurrent testing (-c) who knows how well the requests are multiplexed to it? This does not have to be apache problem at all, but rather PHP's problem.

What I'd do:

1. Switch to Apache MPM (multi-threaded in multiple processes).

2. Do sequential test (no multiple concurrent requests), compare.

3. Run valgrind or some such on apache process and see where most CPU time is spent (apache or PHP).

4. run the same test but serving this page via nginx. Since nginx is based on async model and very fast, then if you get similar results, PHP is the culprit.

5. Finally, you could install Zend Optimizer (30-day trial is free) or smth like this: https://github.com/zendtech/ZendOptimizerPlus.

Really, comparing serving a static file to dynamically generated webpage is sort of apples to oranges comparison. None of the typical solutions (Python mod-apache, Django, PHP, etc) are going to be very fast in this regard, at least when compared to serving a static file. Node.js is an exception perhaps, due to sort of "low level" programming webpage directly in async model.

P.S. you have not quoted php.ini content. Post it and/or tweak it.

Comments

[Moe]

Yea I was also thinking that also, but I guess if I can minimise any hardware upgrade expense, it would help immensely. I have a dedicated 100mbit port.

[DerfK]

Is phpmyadmin running on the same server but in a different VirtualHost directive? If so, then likely there is something in the website's VirtualHost (or .htaccess?) causing the problem (eg allow/deny using a hostname and you have a slow ip lookup). Could also be a user.ini file for your website directory causing weird php startup issues.

[Moe]

Thanks for this. I installed APC with little to no improvement. Upon the recommendation of the next answer, I installed varnish cache. I was skeptical at first, and setting it up wasn't as straight forward as the tutorials made it out to be. But once I got it working. Wow. My server is now a rocket and my server load rarely passes 1! Madness!

[user785g313]

According to my tests, using both PNG and GIF yields the same results @Carlos27 Example > cursor: url("media.giphy.com/media/Z70sotJNZ8nyU/giphy.gif"), pointer; It only allows me to change it outside the designated area/hotspot.

[Carlos27]

correct, but your initial post shows that you are trying to use a .ani file for a cursor which is not supported.

[Carlos27]

You can also give an id to the <area> tag and then in css use the #id selector to assign your custom cursor. That should fix your problem.