Creating javascript files with .php extension

Question

I have been writing javascript functions in separate .js files. In my last project, the number of javascript files were more and so loading of the page was slower because number of requests were more. So for experimental purpose, i converted few .js files with .php extension and added them with include statements. This way the loading time performance was better. There are lot of advantages of writing javascript in .php files. I can access the php variables and easily pass them to javascript.

My doubt here is that, are there any disadvantages of writing javascript in .php files and then including them ?

What i understand is that when a page loads, it calls the javascript files and parallelly executes the php part. So we write onload functions.

Answer 1

If you'd like to compile multiple Javascript files into one on the server side with PHP, you can do something like this:

<?php
// script.js
header('Content-Type: text/javascript'); // Tell browser to treat file as Javascript

$files  = array(
    'script-1.js',
    'script-2.js',
    'script-3.js'
);

foreach($files as $file){
    // Import each file
    echo file_get_contents($file).PHP_EOL;
}

Then, in your page, just reference that file as though it was a Javascript file:

...
<script src="script.php"></script>
...

Answer 2

Most browsers can use 2 or more simultaneous connections to load resources. So keeping the javascript in separate files may allow for browsers to fully utilize all the connections. You should include the <script> tags as late in your HTML as possible, so that the content of the page gets written before any JS even starts loading.

One advantage of using PHP would be to gzip the JS files to reduce their size.

If the size of the javascript files is small, say < 100 KB, it may very well be faster to include a number of them in one PHP script. But if the javascript files were larger, like 500 KB, it could be faster to keep them separate.

Experimentation and tuning will help you find your answer. There is no universal truth here.

Answer 3

Problem of loading js files from php is you are increasing size of your response because of that your page will render slowly on the browser. On the other side if browser loading your js file, browser send different request for js files, so if you don't want your initial page load to be slow don't put js in php.

If you want to speed up your js files loading do the following things

1. Minify you all js files using tools like javascriptCompressor or jsmini

2. Put these minified files on other servers which has cdn support, you can host your files for free on some free cdn, loading from cdn is always faster and browser can download multiple files at a time

3. load files like jquery or other libraries from google cdn url, or respective sites use expiry headers for letting browsers to keep your js files for long time, so that it won't load on very request

if you follow these techniques your pages will load faster