使用PHP在HTML中回显CSS和JS的内容

Question

To reduce http requests, is it okay to inline css and js using php ? Eg:

<style>
 <?php echo require_once("css/style.css"); ?>
</style>


<script>
 <?php echo require_once("js/myjs.js"); ?>
</script>

Answer 1

I'm going to answer the second half of your question first, and then apply the first half.

" is it okay to inline css and js using php " - yes. There are certain cases where it's a good idea to add your CSS and JS into an internal stylesheet inside your document.

Your method however could do with a lot of improvement. A quick way to do this would be to use file_get_contents like this:

echo '<style type="text/css">'.file_get_contents('/path-to-your/style.css').'</style>';

The only cases where I would suggest grabbing file contents and adding them into the document directly are cases that involve writing plugins for CMS systems such as Wordpress or Joomla etc.

Sometimes, your plugin may only need to utilise 5 - 10 lines of CSS and/or JS , and it would be bad form to force your user to add another stylesheet to their http requests for so little code. In these cases, I would suggest loading internal stylesheets/scripts.

BUT it's not a good idea to do this to " To reduce http requests " as your first half of the question has asked. If you truly want to reduce your http requests then you should seriously consider merging your stylesheets and script files. It's better to have a few large files than a lot of tiny ones.

Answer 2

This looks like a really bad practice to me. Plus, I don't see how you will have any performance gain here, more like the contrary.

You should more focus on WHEN do you really need to load your js and css. Minifying it should help too.

Answer 3

Printing resources like JS or CSS into file to load them faster is definitely bad practice to me. Modern browsers eventually cache them while user hit your first page.

According to me you can try to minify your resources files to load them faster and improve caching if you want but there is no need of it because all modern browsers handle caching pretty good now.

Answer 4

Here is what I do to load CSS as fast as possible and take advantage of browser cache at the same time:

I check or set a cookie for first-time visitors; if if it's a first-time visitor I load CSS inline + prefetch the actual link (note that I use prefetch as it is widely supported by modern browsers as opposed to preload). That way this visitor will get the prefetched CSS from cache on the next visit or the next page/s.

if(isset($_COOKIE['v'])) $CSS='<link href="default.css" rel="stylesheet">';
else {
$CSS='<style>'.file_get_contents('default.css').'</style><link rel="prefetch" href="default.css">';setcookie('v','1',time()+31556926,'/','example.com',1,1);
}