整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
實，我們日常開發中，如果不是做前端架構，一般情況下，對BOM的操作其實并不會太多，當然，H5的話也可以借助BOM來定位和判斷網絡，這個以后再說。
對于BOM的操作，我們常用的有Location、Navigator、History和彈窗，我們分別來說一下。
window.location通常是用來獲取或重定向當前窗口的頁面網址，即URL，常用的屬性有以下幾個：
location.href：獲取頁面網址，也就是地址欄上的地址； location.hostname：獲取web主機域名，例如www.xxx.com； location.port：獲取端口號； location.pathname：獲取當前頁面的路徑和文件名； location.protocol：返回當前頁面所使用的web協議（file、http、https等）。
window.navigator通常是用來獲取訪問者瀏覽器的相關信息，主要屬性如下：
navigator.platform：獲取運行瀏覽器的操作系統平臺； navigator.userAgent：獲取由客戶機發送服務器的 user-agent 頭部的值； navigator.appVersion：獲取瀏覽器的平臺和版本信息
window.history通常用來獲取瀏覽器的瀏覽歷史，常用屬性主要如下：
history.forward()：瀏覽器歷史前進，與點擊瀏覽器前進按鈕一樣； history.back()：瀏覽器歷史后退，與點擊瀏覽器后退按鈕一樣。
在JavaScript中，可以創建三種消息框：警告框、確認框、提示框。
警告框（alert）經常用于確保用戶可以得到某些信息。當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。
確認框通常用于驗證是否接受用戶操作。當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。當你點擊 "確認"，確認框返回 true， 如果點擊 "取消", 確認框返回 false。
提示框經常用于提示用戶在進入頁面前輸入某個值。當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。
點關注，不迷路，歡迎關注，每日都更新大量前端知識
bom 瀏覽器對象模型
ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（瀏覽器對象模型）則無疑才是真正的核心。BOM 提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關.
bom 瀏覽器對象模型
bom可以使通過js來操作瀏覽器，在bom中為我們提供一組對象，用來完成瀏覽器的操作
bom中的主要對象
1.window對象 代表整個瀏覽器的窗口，同時window也是網頁的全局對象
2.navigator對象 代表當前瀏覽器的信息，通過該對象可以識別不同的瀏覽器
由于歷史原因，已經navigator的大部分屬性不太能識別了。一般只會使用userAgent來判斷瀏覽器信息
不同的瀏覽器會有不同的userAgent。
console.log(navigator.userAgent)
如果通過UserAgent不能判斷，還可以通過瀏覽器的特有對象，來判斷瀏覽器的信息，
比如ActivexObject，他是ie獨有的一個屬性，可以用來判斷ie瀏覽器ie10以下。
window.ActivexObject如果有的話會返回true，可以用來判斷ie瀏覽器ie10以下。
用('ActivexObject' in window)返回true，可以用來判斷ie所有瀏覽器
3. location對象 封裝了當前瀏覽器的地址欄信息，通過location，可以獲得地址欄信息
也可以改變location的值，可以添加相對路徑和絕對路徑，像一個超鏈接。并且會生成歷史記錄
console.log(location)
location='www.baidu.com'
4.history對象 代表瀏覽器的歷史記錄，該對象不能獲得具體的歷史記錄，只能操作瀏覽器向前或向后翻頁
而且該操作只在當次訪問時有效。
5.screen對象 代表用戶的屏幕信息，通過該對象可以獲得到用戶顯示器相關的信息
這些bom對象在瀏覽器中都是作為window對象的屬性保存的，可以通過瀏覽器對象來使用也可以直接使用為全局對象。
6.定時器
js的程序執行速度是非常快的，如果希望一段程序，可以每隔一段時間執行一次，可以使用定時調用。但設置的定時器必須清除，利用click，可能會多次創建定時器，所以創建定時器之前清除定時器每個定時器會返回一個Number類型的數據，這個數字作為定時器的唯一標識
eb前端技術由html、css和 javascript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低于任何一門后端語言。而我們在學習它的時候往往是先從某一個點切入，然后不斷地接觸和學習新的知識點，因此對于初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的縮寫，即瀏覽器對象模型，當一個瀏覽器頁面初始化時，會在內存創建一個全局的對象，用以描述當前窗口的屬性和狀態，這個全局對象被稱為瀏覽器對象模型，即BOM。BOM的核心對象就是window，window
對象也是BOM的頂級對象，其中包含了瀏覽器的 6個核心模塊：
document -
即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應的DOM對象，由于元素之間有層級關系，因此整個HTML代碼解析完以后，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document
用于描述DOM樹的狀態和屬性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在瀏覽器里嵌入另一個窗口，父框架和子框架擁有獨立的作用域和上下文。
history - 以棧(FIFO)的形式保存著頁面被訪問的歷史記錄，頁面前進即入棧，頁面返回即出棧。
location - 提供了當前窗口中加載的文檔相關信息以及一些導航功能。
navigator - 用來描述瀏覽器本身，包括瀏覽器的名稱、版本、語言、系統平臺、用戶特性字符串等信息。
screen - 提供了瀏覽器顯示屏幕的相關屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。
2、DOM 系統
DOM 是 Document Object Model 的縮寫，即 文檔對象模型，是所有瀏覽器公共遵守的標準，DOM
將HTML和XML文檔映射成一個由不同節點組成的樹型結構，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀態和屬性，并提供對應的DOM操作API。隨著歷史的發展，DOM
被劃分為1級、2級、3級，共3個級別：
1級DOM - 在1998年10月份成為W3C的提議，由DOM核心與DOM
HTML兩個模塊組成。DOM核心能映射以XML為基礎的文檔結構，允許獲取和操作文檔的任意部分。DOM
HTML通過添加HTML專用的對象與函數對DOM核心進行了擴展。
2級DOM - 鑒于1級DOM僅以映射文檔結構為目標，DOM
2級面向更為寬廣。通過對原有DOM的擴展，2級DOM通過對象接口增加了對鼠標和用戶界面事件（DHTML長期支持鼠標與用戶界面事件）、范圍、遍歷（重復執行DOM文檔）和層疊樣式表（CSS）的支持。同時也對DOM
1的核心進行了擴展，從而可支持XML命名空間。
3級DOM -
通過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名為“DOM載入與保存”的新模塊，DOM核心擴展后可支持XML1.0的所有內容，包括XML
Infoset、 XPath、和XML Base。
瀏覽器對不同級別DOM的支持情況如下所示：
從圖中可以看出，移動端常用的 webkit 內核瀏覽器目前只支持DOM2，而不支持DOM3 。
新手福利獲取方式：
1.在你手機的右上角有【關注】選項，或點擊我的頭像，點擊關注！（關注我）
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信發我：html
其實作為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要這里請私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長。小編會在里面不定期分享干貨源碼，包括我精心整理的一份零基礎教程。歡迎各位感興趣的的小伙伴。
學習思路：
3、事件系統
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發展到了 移動端的 觸摸事件(touch) 和
手勢事件(guesture)，touch事件描述了手指在屏幕操作的每一個細節，guesture 則是描述多手指操作時更為復雜的情況，總結如下：
第一根手指放下，觸發 touchstart，除此之外什么都不會發生
手指滑動時，觸發touchmove
第二根手指放下，觸發 gesturestart
觸發第二根手指的 touchstart
立即觸發 gesturechange
任意手指移動，持續觸發 gesturechange
第二根手指彈起時，觸發 gestureend，以后將不會再觸發 gesturechange
觸發第二根手指的 touchend
觸發touchstart (多根手指在屏幕上，提起一根，會刷新一次全局touch) _ ___
彈起第一根手指，觸發 touchend
更多關于手勢事件的介紹請參考：
gesture事件處理復雜手勢
DOM2.0 模型將事件處理流程分為三個階段，即 事件捕獲階段 、 事件處理階段 、 事件冒泡階段， 如圖所示：
事件捕獲 ：當用戶觸發點擊事件后，頂層對象document 就會發出一個事件流，從最外層的DOM節點向目標元素節點傳遞，最終到達目標元素。
事件處理 ：當到達目標元素之后，執行目標元素綁定的處理函數。如果沒有綁定監聽函數，則不做任何處理。
事件冒泡 ：事件流從目標元素開始，向最外層DOM節點傳遞，途中如果有節點綁定了事件處理函數，這些函數就會被執行。
利用事件冒泡原理可以實現 事件委托
，所謂事件委托，就是在父元素上添加事件監聽器，用以監聽和處理子元素的事件，避免重復為子元素綁定相同的事件。當目標元素的事件被觸發以后，這個事件就從目標元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過event.target
獲取到這個目標元素，這樣做的好處是，父元素只需綁定一個事件監聽，就可以對所有子元素的事件進行處理了，從而減少了不必要的事件綁定，對頁面性能有一定的提升。
4、HTML解析過程
瀏覽器加載 html 文件以后，渲染引擎會從上往下，一步步來解析HTML標簽，大致過程如下：
用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件；
渲染引擎開始解析 html 標簽，并將標簽轉化為DOM節點，生成 DOM樹；
如果head 標簽中引用了外部css文件，則發出css文件請求，服務器返回該文件，該過程會阻塞后面的解析；
如果引用了外部 js 文件，則發出 js 文件請求，服務器返回后立即執行該腳本，這個過程也會阻塞html的解析；
引擎開始解析 body 里面的內容，如果標簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來設置標簽的樣式屬性，并生成渲染樹；
如果 body 中的 img 標簽引用了圖片資源，則立即向服務器發出請求，此時引擎不會等待圖片下載完畢，而是繼續解析后面的標簽；
服務器返回圖片文件，由于圖片需要占用一定的空間，會影響到后面元素的排版，因此引擎需要重新渲染這部分內容；
如果此時 js 腳本中運行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；
直到 html 結束標簽為止，頁面解析完畢。
5、重繪 和 回流
當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如 background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。會引起重繪和回流的操作如下：
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動元素，比如改變top,left的值，或者移動元素到另外一個父元素中。(重繪+回流)
對style的操作(對不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)
另外，transform
操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進行transition/animation
動畫時將會創建一個合成層，這使得動畫元素在一個獨立的層中進行渲染，當元素的內容沒有發生改變，就沒必要進行重繪，瀏覽器會通過重新復合來創建動畫幀。
6、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。 但是 cookie
不適合大量數據的存儲，因為每請求一次頁面，cookie 都會發送給服務器，這使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
Firefox和Safari允許cookie多達4097個字節，包括名(name)、值(value) 和 等號。
Opera允許cookie多達4096個字節，包括：名(name)、值(value) 和 等號。
Internet Explorer允許cookie多達4095個字節，包括：名(name)、值(value) 和 等號。
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。
html5 提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value
的形式來存儲數據，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session)，即當瀏覽器窗口關閉后，sessionStorage中的數據被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當于一個5M大小的前端數據庫，相比于cookie，可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage
的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和
indexedDB，允許前端以關系型數據庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。
7、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段來控制文件緩存的機制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務器回包：Cache-Control:max-age=600
表示文件在本地應該緩存，且有效時長是600秒 (從發出請求算起)。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP
請求，而是直接使用本地緩存的文件。
Last-Modified 是標識文件在服務器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since
字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標準中的字段，Cache-Control 是 HTTP1.1
標準中新加的字段，功能一樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control 是高優化級的。
Etag 也是和 Last-Modified 一樣，對文件進行標識的字段。不同的是，Etag
的取值是一個對文件進行標識的特征字串。在向服務器查詢文件是否有更新時，瀏覽器通過 If-None-Match
字段把特征字串發送給服務器，由服務器和文件最新特征字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和
Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務重新拉取文件。
8、History
用戶訪問網頁的歷史記錄通常會被保存在一個類似于棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和后退：
window.history.back( ) 返回到上一個頁面
window.history.forward( ) 進入到下一個頁面
window.history.go( [delta] ) 跳轉到指定頁面
HTML5 對History Api 進行了增強，新增了兩個Api 和一個事件，分別是pushState、replaceState 和
onpopstate：
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史記錄。
當點擊瀏覽器后退按鈕或 js調用history.back 都會觸發 onpopstate 事件。
與其類似的還有一個事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來是用來監聽hash變化的，但可以被利用來做客戶端前進和后退事件的監聽，而onpopstate是專門用來監聽瀏覽器前進后退的，不僅可以支持hash，非hash的同源
url 也支持。
9、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
10、Web語義化 和 SEO
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。
搜索引擎通過爬蟲技術獲取的頁面就是由一堆 html 標簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。
但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，并予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
