JS BOM(浏覽器對象模型)

目标：

• 能夠說出什麼是BOM
• 能夠知道浏覽器的頂級對象window
• 能夠寫出頁面加載事件以及注意事項
• 能夠寫出兩種定時器函數并說明差別
• 能夠說出JS執行機制
• 能夠使用location對象完成頁面之間的跳轉
• 能夠知曉navigator對象涉及的屬性
• 能夠使用history提供的方法實作頁面重新整理

BOM概述

BOM：浏覽器對象模型，浏覽器視窗進行互動的對象，其核心對象是window，由一系列對象構成，每個對象都提供了很多方法和屬性

BOM比DOM更大

BOM的構成

它的頂級對象是window：

它是浏覽器視窗進行互動的對象

它是一個全局對象，

window對象的常見事件

視窗加載事件

window.onload = function(){}

頁面所有元素代碼加載完執行

window.addEventListener('load',function(){})

頁面所有元素代碼加載完執行

window.addEventListener('DOMcontentLoaded',function(){})

不需要加載圖檔等頁面就出現

調整視窗大小事件

window.onresize = function(){}

window.addEventListener(‘resize’,functon(){});

定時器

window.setInterval()

window.setTimeout()

JS的執行機制

JS是單線程

JS的一大特點就是單線程，也就是說，同一時間隻能做一件事。這是因為JS這門腳本語言誕生的使命所緻——js為處理頁面中使用者的互動，以及操作DOM而誕生。比如我們對某個DOM元素進行添加和删除操作，不能同時進行。

同步和異步

• 同步任務：需要執行的任務在主線程上排隊，一個接一個，前一個完成了再執行下一個
• 異步任務：沒有馬上被執行但需要執行的任務，存放在“任務隊列”（task queue）中，“任務隊列”會通知主線程什麼時候哪個異步任務可以執行，然後這個任務就會進入主線程并被執行。

同步任務和異步任務

• 同步任務都在主線程上執行，形成一個執行棧
• 異步任務是通過回掉函數實作的

• 一般而言，異步任務有以下三種類型：

  普通事件，如click 、resize 等

  資源加載，如load、error等

  定時器，包括setInterval,setTimeout等

  把異步任務相關的回溯函數添加到任務隊列中（消息隊列）

JS執行機制

1. 先執行執行棧中的同步任務
2. 異步任務（回溯函數）放到任務隊列
3. 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取任務隊列中的異步任務，于是被讀取的異步任務結束等待狀态，進行執行，開始執行；

[外鍊圖檔轉存失敗(img-vi5Vvnvw-1566354291618)(C:\Users\chenqiao\AppData\Roaming\Typora\typora-user-images\1564747749137.png)]

location對象

window對象給我們提供了location屬性用于擷取或設定視窗的URL，并且可以用于解析URL，因為這個屬性傳回的是一個對象，是以我們将這個屬性也稱為location對象。

URL

統一資源定位符(URL)是網際網路上标準資源的位址。網際網路上的每個檔案都有一個唯一的URL，它包含的資訊指出檔案的位置以及浏覽器應該怎麼處理它。

https://blog.csdn.net/qq_41720311/article/details/83865118

• URL由三部分組成：資源類型、存放資源的主機域名、資源檔案名。
• **格式：**protocol ?/ hostname[:port] / path / [;parameters][?query]#fragment

• protocol（協定）

  指定使用的傳輸協定，下表列出 protocol 屬性的有效方案名稱。 最常用的是HTTP協定，它也是目前WWW中應用最廣的協定。

• hostname（主機名）

  是指存放資源的伺服器的域名系統(DNS) 主機名或 IP 位址。有時，在主機名前也可以包含連接配接到伺服器所需的使用者名和密碼（格式：username:[email protected]）

• port（端口号）

  整數，可選，省略時使用方案的預設端口，各種傳輸協定都有預設的端口号，如http的預設端口為80。如果輸入時省略，則使用預設端口号。有時候出于安全或其他考慮，可以在伺服器上對端口進行重定義，即采用非标準端口号，此時，URL中就不能省略端口号這一項。

• path（路徑）

  由零或多個“/”符号隔開的字元串，一般用來表示主機上的一個目錄或檔案位址。

• parameters（參數）

  這是用于指定特殊參數的可選項。

• query(查詢)

  可選，用于給動态網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技術制作的網頁）傳遞參數，可有多個參數，用“&”符号隔開，每個參數的名和值用“=”符号隔開。

• fragment（資訊片斷）

  字元串，用于指定網絡資源中的片斷。例如一個網頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。

  location對象方法

  location對象方法	傳回值
  location.assign()	跟href一樣，可以跳轉頁面（也稱為重定位）
  location.replace()	替換目前頁面，因為不記錄曆史，是以不能後退
  location.reload()	重新加載頁面，相當于重新整理按鈕或 f5 如果參數為true強制重新整理 Ctrl+f5

navigator對象

可以判斷使用者所用浏覽器的相關資訊：userAgent,該屬性可以傳回由客戶機發送伺服器的user-agent頭部的值。

history對象

history對象的方法	結果
history.back()	頁面後退
history.forward()	頁面前進
history.go()	頁面往前或往後 1前進 ，-1後退

) | 頁面後退 |

| history.forward() | 頁面前進 |

| history.go() | 頁面往前或往後 1前進 ，-1後退 |