Javascript 中js語句執行順序

時間 2019-11-19

原文原文鏈接

若是咱們把嵌入在HTML中的<script> js coding </script>看作Js代碼塊（實際上Js沒有代碼塊的意義一說，若是真要當作代碼塊那也應該是按函數塊來劃分）的話，下面就是Js代碼執行順序：javascript

這裏轉載 Js執行順序總結概括請參考 http://www.3lian.com/edu/2014/04-07/139469.htmlcss

step 1. 讀入第一個代碼塊<script> js coding </script>，按HTML中聲明的順序排列。html

　　step 2. 作語法分析，解析時的基本語法格式，有錯則報語法錯誤（好比括號不匹配等），並跳轉到step5。java

　　step 3. 對var變量和function定義作「預編譯處理」（永遠不會報錯的，由於只解析正確的聲明），也就是這些var 變量和function會最早預處理，即存儲在內存中，可是變量只是聲明，並無賦值，其之下的任意代碼塊都能執行調用函數和變量。函數

　　step 4. 執行代碼段，有錯則報錯（好比變量未定義），報錯以後，若是沒有catch則此段代碼執行結束，報錯以後的變量都不會賦值spa

　　step 5. 若是還有下一個代碼段<script> js coding </script>，則讀入下一個代碼塊，重複step2。code

　　step6. 結束。orm

根據HTML文檔流的執行順序htm

須要在頁面元素渲染前執行的js代碼應該放在<body>前面的<script>代碼塊中，事件

而須要在頁面元素加載完後的js放在</body>元素後面，

body標籤的onload事件註冊的函數是在最後執行的。另外請記住，window.onload 就是body上註冊的onload事件，那麼若是咱們

body以前聲明瞭window.onload = function(){};將會不起做用，緣由是被body中的onload覆蓋，然而，若是咱們把

window.onload放在body以後的代碼塊，那麼他就會覆蓋body中註冊的onload事件，這個相對於$(document).ready(function()

{})執行要晚，jQuery是在Dom樹加載完以後就運行，也就是標籤到位就行，它並不像window.onload 要求全部資源都被加載完成後

想要獲取一個元素的高度或寬度，只要元素被加載後就能獲取到，可是必須display不爲none

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
 <link href="form.css" rel="stylesheet"></link>
 <script type="text/javascript">
 
// 執行此處代碼塊，首先加載函數至內存中，可是不會加載click，會加載 variable，可是不會賦值
function fun(){ 
   alert('BODY ONLOAD 頁面已經渲染完成以後，等body後面的script代碼塊執行完後在執行');
   document.getElementById('panel').onclick = click;
  }
click = function(){
    alert('點擊後執行');
   }
 
  var variable = ‘hello’；
 
 </script>
 <script type="text/javascript">
      alert('body start 當即執行，頁面還未渲染');
  
 </script>
    <title>hello_world</title>
    <style type="text/css">
    </style>
</head>
<body onload="fun()">
 <div class="container">
 </div>
</body>
<script>
 alert('body end 頁面渲染後馬上執行');
// 元素的高度和寬度必須在頁面渲染完成以後才獲取其值，並且該元素必須不是display：none
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。