Hi to all sitepoint people,I need your help please to enlighten my mind.I would like to know what is the sequence when the browser renders your page…
HTML,CSS,Javascript and PHP…which one of this four will be executed first.
Thank you in advance.
It all depends really. If your page is a php page, it will be processed on the server and the output will be sent to the browser. Then html is processed in the browser up until either CSS or JS is encountered, then they will be processed. So it really depends on the order in which each is encountered.
php is not involved with the browser rendering a page. PHP runs on the web server, not in the browser.
I never said PHP was processed by the browser, the output of the PHP file is usually processed by the browser. Think of how CMS’s like Wordpress of Prestashop work. You access a PHP file and the file builds the output which is in turn displayed by the browser.
Then main stream is as follows:
- Browser sends request to the html-/php-page on server (via filename in the browserbar or via a link), and waits for response.
- Server is looking if it is a php-file. In case yes, php-machine of the browser is started and php-instructions are processed, with a html-code as result. In case no, it was already a html-file (hopefully). In both cases, the html-code is sent to the browser.
- Browser is downloading the html-code from the server, and put in the browser-cache and in the Temp.InternetFiles-directory of the browser (can have another name).
- Browser reads the <head> of the html, but isn’t rendering anything yet of the page, for in the head are the needed “meta” instructions how to handle this html-page. That is among others: which Doctype, which charset, and which attached stylesheets and attached javascript-files.
- Browser stops reading of the html, if a file to download is encountered (css/javasacript).
- Browser sends request to server for the files to download, and waits until arriving. Only a limited number of files can be requested/downloaded simulteanously.
- Browser is downloading these css/js-files, and puts them in memory/tmp-folder, but is not rendering them yet.
- When downloading is ready, the browser goes on with reading the html-code.
- When browser has followed all instructions in the <head>, browser goes on with reading the <body> code. This is the start of the real rendering of the page!
- In the html-code are hooks for the styling, and if a hook is encountered, the css of the stylesheet(s) is used. In 99% of the cases, the downloaded javascript is not used yet.
- In case there is an image-file called in the <body>, the image-file is requested/downloaded.
- In case there is a javascript-file called in the <body>, the browser stops the rendering, and requests for downloading the js-file first.
- When all rendering of the <body> elements is finished, the browser goes to the [B]javascript/B in order to see if there has to be executed some script right at the opening of the page.
- Loading and rendering of the page is finished.
- With AJAX (asynchronic loading) there can be made requests for dynamically loading of new parts of the page: afterwards.
Now downloading of a file is much faster then sending a request to the server, which is uploading, in fact!
So less http-requests (combining files of the same extension) is a faster page.
While javascript is mostly waiting until the page is rendered completely, there is no need to put the javascripts in the head. That is only slowing down the performance.
- [U]Put Stylesheets at the Top[/U].
- [U]Put Scripts at the Bottom[/U].
- And more good advices in the rest of this article: [U]Best Practices for Speeding Up Your Web Site[/U] of developer.yahoo.com.
So the sequence is/has to be: (PHP), HTML, CSS, IMG, JS. 
@francky’s breakdown is very good especially when combined with Pingdom.com, scroll to the bottom and select Pingdom Tools.
Pages submitted can be sorted into time, size, order, etc, lots of other info available.