來自 https://blog.csdn.net/u011088260/article/details/79563315
最近在研究HTML頁面中JavaScript的執行順序問題。在JavaScript中，定義一個方法或者函數有很多方式，最常見的有2中，function語句式與函數直接量方式。
對於function語句式，解釋器會優先解釋。即加載了這個js文件后，會掃描一下所有的js代碼，然后把該優先執行的東西先執行了，然后再從上到下按順序執行。所以，定義的代碼可以在執行的代碼后邊。就跟C#中的方法定義一樣。解釋器已經記住了這個方法，知道在內存中的哪里，用的時候直接去取就行了。
C#語言是，對象中的屬性與方法具有優先的解釋權，先放到內存中，之后哪里都可以用，所以沒有先后順序。這也是對象定義的時候，字段中不能有任何計算的原因。因為字段在優先解釋的時候，只是為這個對象開辟內存空間，然后把值放入到內存空間。一個字段肯定不會用到另外的一個字段，因為字段定義的時候，是沒有計算的。如果用到了另外一個字段，那肯定是有計算了，就報錯了。
但是函數直接量方式，地位跟一般的普通變量一樣，沒有優先解釋權。是在正常的從上到下運行過程中，遇到了才在內存中分配地址。遇到之前，解釋器里根本沒這個東西，不知道是什么。所以下邊的這個代碼就會出錯。
接下來我們來看一個例子，一段代碼。
- <html>
- <head>
- <script>
- test();
- </script>
- </head>
- <body>
- <div>HelloWorld</div>
- //HHHHHHHHHHHHHHHH
- </body>
- <script>
- functiontest()
- {
- alert('a');
- }
- </script>
- </html>
這段代碼在頁面中運行的時候是報錯的。不是說function語句式定義的函數，在前邊調用也可以嗎？但是注意,調用與定義要在同一個script代碼塊中。在這個例子中，在不同的script語句塊中，所有報錯了。但是如果前邊定義，后邊調用，就可以。
現在來分析一下所有的這些CSS,HTML,JS文件的執行順序。接下來僅僅是我自己的一些觀點。
當瀏覽器向服務器發起一次請求之后，xxx.com,服務器會向瀏覽器返回字符串，即HTML代碼。接下來的執行情況是這樣的。瀏覽器會一點點的從頭接收這些字符串，然后從<html>節點開始分析，從上到下，遇到<script>節點就開始執行JS代碼，在此同時，也會一點點的加載HTML控件。（分析與執行JS代碼與加載HTML控件是兩個同時進行的線程）所以現在document.getElementById這個方法如果獲取頁面尾部的控件，很有可能為空，因為這時候還沒有加載到。而且，在此同時，瀏覽器也在加載外部CSS文件，並且應用到相應的控件上。
在更新頁面內容HTML組件的，叫做UI Upate線程。
我的理解是，這些都是在同時進行的，但是加載HTML控件稍微快一些，CSS稍微慢一些，這就是為什么一個CSS復雜的頁面，剛剛load的時候是布局混亂的，過一會就好了。因為那時候CSS還沒有加載完全。
在加載HTML的同時，如果css沒有加載下來，那么HTML標簽中的class就不會起作用。如果CSS很大，那么一時半會不會加載下來，就會看到沒有任何格式化的HTML文字。這時候就顯示出inline html的好處了，在加載HTML的時候能夠立即顯示。當然這只是一個方面，也會造成的后果是HTML頁面的加載慢，導致長時間白屏。
JS與CSS相互之間的影響也是有可能存在的。
JS 有可能會修改 DOM.典型的，可能會有 document.write. 這意味着，在當前 JS 加載和執行完成前，后續所有資源的下載有可能是沒必要的。這是 JS阻塞后續資源下載的根本原因。
JS的執行有可能依賴最新樣式。比如，可能會有 var width = $('#id').width(). 這意味着，JS 代碼在執行前，瀏覽器必須保證在此 JS之前的所有 css（無論外鏈還是內嵌）都已下載和解析完成。這是 CSS 阻塞后續 JS 執行的根本原因。
https://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/