## window對象補充知識點 * 三種對話框 ``` //window對象中的三種對話框 //alert()：警告對話框，用于提示頁面信息 alert("請在安全的情況下輸入密碼"); console.log("a"); //confirm():確定操作對話框，用于頁面詢問是否達成某項操作。 //返回一個布爾類型的值，點擊確定，返回true，點擊取消，返回false var flag = confirm("確認刪除嗎？"); console.log(flag); if(confirm("確認刪除嗎？")) { alert("刪除成功！"); } //prompt():用戶輸入對話框，在提示文字下面還有輸入框， //要求用戶輸入信息，有確定和取消按鈕，往往用來獲取用戶輸入的數據 var name = prompt("請輸入你的名字","Jack"); console.log(name); ``` * onload事件 ~~~JavaScript //load事件 //load事件發生在文檔的瀏覽器窗口加載完畢的時候， //window.onload屬性可以指定這個事件的回調函數 //其實是指，我們可以將頁面的預處理代碼定義在onload中 window.onload = function() { document.getElementById("aa").innerHTML="Hello,world!"; } ~~~ ## 關于瀏覽器的補充知識點 1. JavaScript代碼嵌入到網頁的四種方法 1.1 在script標簽中寫入代碼 1.2 引入外部JS文件 1.3 事件屬性，將我們的js代碼寫入事件中 1.4 URL協議，URL支持以JavaScript的協議方式，執行JavaScript代碼 ~~~ <a href="https://www.baidu.com" onclick="alert('aaa');return false;">百度</a> <a href="javascript:alert('bbb')">百度</a> ~~~ 2. script標簽的工作原理：瀏覽器加載JavaScript腳本，主要是通過script標簽去完成的，有著如下的流程 * 瀏覽器一邊下載HTML頁面，一邊開始解析； * 如果在解析的過程中，發現script標簽 * 暫停解析，網頁的渲染控制器，就交給JavaScript引擎； * 如果script標簽引用的是外部js文件，則會下載該文件，否則直接執行 * 執行完成之后，控制器交給渲染引擎，繼續向下解析HTML文檔 3. 瀏覽器的組成-渲染引擎和JavaScript引擎 * 渲染引擎：作用是將網頁代碼渲染為用戶可以感知的平面文檔。不同的瀏覽器有著不同的渲染引擎。 * Chrome：Blink引擎 * IE：Trident引擎 * Firefox：Gecko引擎 * Safari：Webkit引擎 * Edge：EdgeHTML引擎 * 渲染引擎處理頁面的步驟 * 解析代碼：將HTML解析為DOM，css代碼解析成CSSOM(CSS Object Model) * 對象合成：將DOM和CSSOM合成渲染樹（render tree） * 布局：計算出渲染樹的布局 * 繪制：將渲染樹顯示到屏幕上 * 以上四步，并非按照嚴格的順序執行，往往第一步還沒完成，第三步或第四步就已經開始執行 * JavaScript引擎 * 作用是讀取JavaScript代碼對其處理后執行 * JavaScript是一種解釋型的語言，也就是說不需要編譯，由解釋器實時運行，這樣的好處運行和修改比較方便，刷新頁面就是重新解釋。缺點就是每次運行的時候都要調用解釋器，占用系統開銷比較大，運行速度比一般的編譯型語言稍慢一些。為了提高運行的速度，目前的瀏覽器都對JavaScript進行一定程度的編譯，產生類似字節碼的中間代碼，用于提高運行速度。