標籤：get xxx width 出錯 開始 忘記 優先執行 函數 依賴
最近在研究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/
對於HTML頁面中CSS, JS, HTML的載入與執行過程的簡單分析
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
