大选择减慢页面加载 - 缓存PHP

Question

I'm building a web app, the way I started off the app for testing purposes is to load lots of data in to session arrays from my database so I can use the values easily throughout the pages. I have one page the has numerous selects on it, and each time the php page loops through all the variables, chooses the selected one, and outputs the dropdown. One of my arrays though has just under 3000 values and loading this dropdown slows the page down from about 300ms to 1-1.2s. Not terrible but easy to tell that it is less responsive. So I'd like to know if there is anyway for me to improve the load speed, or any thoughts on a substitute for the dropdown.

What I have tried so far:

1. Session arrays hold all the values, when the page is loaded through jquery ajax method the php page loops through these values and echos the dropdowns.

2. Php include - create php or html pages of all the values pre written as selects, this creates a ~100kb page for the problem dropdown and this is then included with include . Takes roughly the same amount plus I'd have to then use javascript to set the value, but I'd do this if it could be improved. I thought perhaps some caching could provide improvements here. There seemed to be no significant difference between html and php pages for include but I'd assume html would be better. I'm also assuming that I cannot use regular caching because I am using a php function to include these pages.

3. I have tried just loading in the html page and it takes about 1 sec on first load, after browser caching it is back down to 100-350ms so I imagine caching could provide a huge boost in performance.

I have considered:

1. Creating a cached version of the whole page but this will be quite the pain to implement so I'd only do it if people thought it is the right way to go with this. I would have to use ajax to retrieve some data for the inputs which I was originally doing with php echos.

2. Just removing the problem dropdown.

Just to clarify something I've never had clarified, am I correct in thinking php pages can never be cached by the browser, and so by extension any php included files can't be either. But then how come a javascript file linked to in a php file can be cached, because it is using an html method?

Answer 1

I suspect the problem is the raw size of the data you're transmitting, based on the results of number 2 in "What I have tried so far." I don't think you can rely on browser caching, and server-side caching won't change the size of the data transmitted.

Here are a couple of ideas to reduce the amount of data transmitted during page load:

1. Load the select box separately, after the main page has been delivered, using an asynchronous javascript call.
2. Break the choice into a hierarchical series of choices. User chooses the top-level category, then another select box is populated with matching sub-categories. When they choose a sub-category, the third box fills with the actual options in that sub-category. Something like this . Of course, this only works if those 2nd and 3rd controls are filled-in using an async javascript call.

Either way, make sure gzip compression is enabled on your server.

Edit: More on browser caching
The browser caches individual files, and you typically don't ask it to cache PHP pages because they may be different next time. (Individual php includes are invisible to the browser, because PHP combines their contents into the HTML stream.) If you use a browser's developer console (hit f12 on Chrome and go to Network, for example), you can see that most pages cause multiple requests from the browser to the server, and you may even see that some of those files (js, css, images) are coming from the cache.

What the browser caches and for how long is controlled by various HTTP response headers, like Cache-Control and Expires . If you don't override these in php by calling the header function, they are controlled by the web server (Apache) configuration.

Answer 2

The data being returned and parsed into a dropdown is probably your bottleneck. However, if the bottleneck is actually the PHP code you could try installing an optcode cache like APC at http://php.net/manual/en/book.apc.php . It will speed up your PHP. (Zend Optimizer is also available at: http://www.zend.com/en/products/guard/runtime-decoders )

If your bottleneck is the database where the items in the dropdown is coming from, you may want to try setting MySQL to cache the results.

You may also want to try an alternative dropdown that uses AJAX to populate the dropdown as the user scrolls down, a few records at a time. You could also create it as a text field that prompts the user for possible matches as they type. These things may be faster.