摘要:瀏覽器中的瀏覽器中的通常稱為客戶端的客戶端對象是所有客戶端特性和的主要接入點。瀏覽器不會執(zhí)行之間的代碼中的事件處理程序當腳本所在的文件被載入的時候??梢赃_到延遲腳本的執(zhí)行,直到文檔載入和解析完成,才方可操作。
web瀏覽器中的JavaScript
web瀏覽器中的js通常稱為客戶端的JavaScript
window對象是所有客戶端JavaScript特性和api的主要接入點。
即,表示web瀏覽器一個窗口或窗體。使用標識符window來完成引用。
window對象定義了一些屬性,用來指定當前窗口的一些信息。通過該屬性的引用,可以獲取當前窗口的信息
// web API 接口 獲取當前頁面的信息,返回一個頁面信息的對象 window.location // 所有的必須小寫,為只讀屬性。
// 設(shè)置localtion屬性,完成跳轉(zhuǎn)到一個新的頁面,即使是原來的鏈接也會完成跳轉(zhuǎn) window.location = "https://www.google.com.hk";
注意,該屬性為只讀屬性,不可進行修改,能進行賦值操作,并不意味著能進行修改。進行賦值以后會完成頁面的跳轉(zhuǎn),而讓其達到被修改的目的。
方法window還定義了一些方法,alert()彈出對話框,以及setTimeout()注冊一個函數(shù),在給定的一段時間以后觸發(fā)回調(diào)
> setTimeout(() => {alert("hello word!");}, 2000); 2
返回值為一個定時器的編號,該定時器和window.setInterval(重復(fù)調(diào)用一個函數(shù),或執(zhí)行一段代碼)共用一個編碼池。
該代碼,并沒有顯式的使用window屬性。但是依然隱式的使用了window屬性。因為window為全局對象,即window對象處于作用域鏈的頂部,其屬性以及方法為全局變量和全局函數(shù)。在沒有直接說明的時候,自動從作用域鏈往上尋找,直到window頂部。window對象有一個引用自身的屬性,即window,如果要引用其窗口本身,可以用window這個屬性。
即上方代碼和下方代碼等價
> window.setTimeout(() => {alert("hello word!");}, 2000); 2一個屬性document
該屬性引用Document對象,為window對象的一個屬性。該屬性有一些方法。該方法同時也為document屬性的一些方法(因為是引用關(guān)系)
例如
// 尋找 id = "timestamp" 的元素 > var timestamp = document.getElementById("timestamp"); undefined > timestamp;// 獲取腳本的內(nèi)容 > timestamp.firstChild #text "2222222" // 插入當前時間 > timestamp.appendChild(document.createTextNode(new Date().toString())) html嵌入jshtml嵌入js有四種方法
內(nèi)聯(lián),放置在
和
標簽對之間
放置在
標簽的src屬性指定的外部文件中
放置在html事件處理程序中,該事件處理程序由onclick或onmouseover這樣的html屬性值指定
放在一個url里,這個url使用javascript:協(xié)議
后兩個用的很少
script元素
因為需要html和js分離,依據(jù)mvc進行分離,使得html變的結(jié)構(gòu)化,易于閱讀下面是一個數(shù)字時鐘使用onload事件處理程序
Element.innerHTML 屬性設(shè)置或獲取HTML語法表示的元素的后代。外部文件中腳本數(shù)字時鐘 Digital Clock
使用
的src屬性進行引用
可以在標簽內(nèi)部加上版權(quán)以及配置定義了一個配置項,由core.js讀取。將頁面的參數(shù)傳入庫的一種手法。在
之間的代碼是純文本。在core.js執(zhí)行的時候讀取這段文本,然后動態(tài)執(zhí)行一次。瀏覽器不會執(zhí)行之間的代碼
html中的事件處理程序當腳本所在的html文件被載入的時候。腳本里的js會執(zhí)行一次。為了可交互,js會定義事件處理程序即web瀏覽器先注冊函數(shù),并在之后調(diào)用其作為事件的響應(yīng)。其中事件處理程序的屬性可以包含任意條js語句。相互之間用逗號分隔。該語句會成為一個函數(shù)體,然后這個函數(shù)體成為對應(yīng)事件處理程序?qū)傩缘闹怠?/p> url中的js
應(yīng)用用途 書簽
js程序的執(zhí)行
通過協(xié)議類型指定url內(nèi)容為任意字符串,該字符串是會被js解釋器運行的js代碼,其會被當成多帶帶的一行代碼實現(xiàn)。即語句之間必須使用分號作為分割。
即,書簽的實現(xiàn)。如果書簽是javascript:url,那么將會保存一小段腳本。該腳本是一個小型程序,即可以在瀏覽器菜單或工具欄里啟動。該代碼執(zhí)行會像頁面上的腳本一樣,查詢和設(shè)置文檔的內(nèi)容,呈現(xiàn)和行為(不能有返回值,會重新促使瀏覽器渲染)即通過書簽,操作文檔,將文檔替換成為新的內(nèi)容這些代碼都會功用同一個全局window對象。即都能共享全局函數(shù)和全局變量的集合。即一個頁面中js都會在執(zhí)行后對所有的全局變量和函數(shù)都可見。
如果使用的窗體,即這兩個頁面共享的不是同一個window,會被當做獨立于頁面的js程序。
js程序執(zhí)行的階段 一階段載入文檔內(nèi)容,執(zhí)行所有腳本,一般是從上到下的
二階段文檔載入完畢,所有腳本執(zhí)行完畢。js進入第二階段,該階段為異步,由事件驅(qū)動。web會調(diào)用事件處理程序,對事件進行處理。一般事件會是用戶輸入,鍵盤輸入,網(wǎng)絡(luò)活動,運行時間等等。
js的同步,異步和延遲腳本
事件驅(qū)動的第一個事件,即第一個被執(zhí)行的事件為load事件。因為載入文檔和執(zhí)行腳本是一并執(zhí)行的,所以在第一次執(zhí)行腳本的時候,會沒有api來操作文檔,和遍歷內(nèi)容。在文檔載入的時候,影響文檔內(nèi)容的方法為快速生成內(nèi)容。
document.write() 將字符串寫入document.write()打開的文檔流一個例子
計算階乘
這樣在加載的時候完成了頁面文檔的修改,并輸出。為1996年的技術(shù)
╮(╯▽╰)╭
當腳本把文件傳遞給document.write()的時候,該文本會被添加到文檔的輸入流中,html解析器會在當前位置創(chuàng)建一個文本節(jié)點,將文本插入這個文本節(jié)點后面。當html的解析器遇到script元素的時候,默認先執(zhí)行腳本,再恢復(fù)文檔的解析和渲染。但是如果是src的話,將會導(dǎo)致,腳本未下載和執(zhí)行之前,都不會出現(xiàn)在dom樹中。都會等待js的腳本執(zhí)行。稱之為阻塞頁面ui的渲染。
腳本執(zhí)行默認情況下是同步和阻塞的。script 有兩個屬性,h5中,為async 以及 defer 該兩個屬性可以支持異步執(zhí)行js腳本。因此這樣瀏覽器將會在下載腳本的時候繼續(xù)解析和渲染文檔。可以達到延遲腳本的執(zhí)行,直到文檔載入和解析完成,才方可操作。不會出現(xiàn)js阻塞頁面ui的渲染。異步的時候執(zhí)行是無序。事件驅(qū)動的jsjs還能通過注冊事件程序函數(shù)寫程序。之后在發(fā)生該事件的時候異步調(diào)用這些函數(shù)。
程序會響應(yīng)一個事件,然后調(diào)用一個函數(shù),該函數(shù)稱為事件處理程序,事件監(jiān)聽器,或者回調(diào),將該函數(shù)注冊。一個約定,事件處理程序一般是on開頭的舉例
window.onload = function() {}; document.getElementById("button1").onclick = function(){};在發(fā)生onload事件的時候,回調(diào)第一個函數(shù),在發(fā)生點擊button1的時候回調(diào)第二個函數(shù)。
冒泡如果事件的目標是文檔元素,如果該文檔元素沒有相應(yīng)的處理事件,將會往上傳遞文檔樹,知道遇到注冊的事件。這個過程稱之為冒泡。
addeventListener// 注冊函數(shù)f, 當文檔載入完成時執(zhí)行這個函數(shù)f // 如果文檔載入完成,將會用異步的方式執(zhí)行 function onload(f) { if (onload.loaded) // 如果文檔以及載入完成 window.setTimeout(f, 0); // 設(shè)置一個定時器,放入js執(zhí)行的隊列中,等待執(zhí)行 else if (window.addEventListener) // 將事件進行注冊 window.addEventListener("load", f, false) // 注冊事件 load, 當加載完成以后執(zhí)行函數(shù)f, } // 設(shè)置標志,指示文檔是否載入完成 onload.loaded = false; // 表明未載入完成, // 注冊函數(shù),當文檔載入完成時載入標志 onload(() => {onload.loaded = true;}); // 大概解釋一下,首先定義了一個函數(shù),設(shè)置了一個加載的標志,在加載的過程中,設(shè)置loaded的值為false,當加載完成以后,執(zhí)行onload函數(shù),將其內(nèi)部定義的函數(shù)傳入onload中,和load事件進行綁定。等待文檔載入完成,觸發(fā)一個匿名函數(shù),將onload.loaded的值改為true,此時再次傳入的函數(shù)f將會返回js的執(zhí)行隊列中,等待執(zhí)行。將一個監(jiān)聽器和回調(diào)函數(shù)綁定,當監(jiān)聽器被觸發(fā)的時候,回調(diào)函數(shù)將會被觸發(fā)。
客戶端js線程模型js的客戶端為單線程模型。
客戶端js時間線
h5中有一種并發(fā)的控制方式,為web worker 為一個后臺線程,允許線程里的代碼訪問文檔的內(nèi)容。不能和主線程或者其他worker共享狀態(tài),只可進行異步事件進行通信。web瀏覽器先創(chuàng)建document對象,并且開始解析web頁面,(即根節(jié)點),解析html元素和其文本內(nèi)容都會添加到其后方的節(jié)點中
html遇到script元素的時候,先執(zhí)行內(nèi)部腳本,等待內(nèi)部腳本執(zhí)行完畢后,在繼續(xù)解析html節(jié)點,此時節(jié)點解析會暫停??梢允褂胐ocument.write()實現(xiàn)將文本插入流中。解析器恢復(fù)解析的時候,該文本會正式的成為文檔的一部分,但是頁面的源碼中并不存在該內(nèi)容。該操作此時是同步的,可以達到遍歷和操作文檔樹的目的。因為在執(zhí)行的時候,其上方的文檔樹就已經(jīng)存在。
遇到async屬性的時候會邊下載,邊進行解析html。異步的時候禁止使用document.write,因為此時腳本無法插入文檔流中。異步的時候,解析是隨意的。也不清楚什么時候腳本會解析。
文檔解析完成。document.readyState將會變成interactive,之前一直為loading狀態(tài)。此時表明解析完成
所有有defer屬性的腳本,會在此時執(zhí)行,此時能訪問完成的文檔樹,但是禁止使用document.write()因為此時文檔樹已經(jīng)固定
瀏覽器進入異步事件驅(qū)動階段。此時可能還沒有異步腳本執(zhí)行完成。
此時文檔全部解析完成,但瀏覽器可能在等待圖片的加載,等所有的異步腳本全部完成載入和異步執(zhí)行的時候,將會觸發(fā)load事件,表明全部執(zhí)行完成,readState將會改為complete
此刻調(diào)用異步事件,響應(yīng)用戶輸入事件,網(wǎng)絡(luò)事件,計時器事件。
兼容 ie條件注釋盡管現(xiàn)在兼容不是那么嚴重了,ie也淘汰了,edge上臺了。但還是說一下吧
ie支持條件注釋,上方是使用條件注釋的,在ie下,將會執(zhí)行上方的js腳本
通過@_jscript可以判斷是不是ie,因為該變量在ie中圓圓為true
寫法如下,用于ie的
使用條件注釋來寫/*@cc_on @if (@_jscript) // 書寫兼容的ie代碼,在ie下會被執(zhí)行, alert("in ie") // 發(fā)出警告 @end再ie下也會進行執(zhí)行。
總結(jié) 一下/*@*cc_on @if(@_jscript) // 這里的代碼盡管被注釋,也會執(zhí)行在ie中 // ie會執(zhí)行這段代碼,其他瀏覽器不會執(zhí)行 alert("ie") @else*/ // 這段代碼并沒有在js注釋中,但仍然在ie條件注釋中。 // 除了ie之外都會執(zhí)行 alert("not ie") /*@end @*/處理兼容的類和庫exanvas.js
功能測試使用if進行測試,是否實現(xiàn)了
怪異模式和標準模式使用標準模式就行了
瀏覽器測試
記的加上h5的聲明可以根據(jù)頭部信息,web服務(wù)器返回響應(yīng)的js代碼
博客www.iming.info
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/96551.html
摘要:服務(wù)器處理請求返回報文響應(yīng)報文由相響應(yīng)行響應(yīng)頭響應(yīng)主體三個部分組成,如下圖響應(yīng)行包含協(xié)議版本狀態(tài)碼狀態(tài)碼描述協(xié)議版本狀態(tài)碼請求成功以創(chuàng)建,成功請求并創(chuàng)建了新的資源非授權(quán)信息。 輸入一個url發(fā)生了什么 DNS解析 TCP連接 發(fā)送http請求 服務(wù)器處理請求 瀏覽器解析渲染頁面 連接結(jié)束 DNS解析 什么是DNS? DNS是一種組織成域?qū)哟谓Y(jié)構(gòu)的計算機和網(wǎng)絡(luò)服務(wù)命名系統(tǒng),他用于TC...
摘要:原生應(yīng)用是一個基于引擎的運行環(huán)境使用了一個事件驅(qū)動非阻塞式的模型,使其輕量又高效的包管理器,是全球最大的開源庫生態(tài)系統(tǒng)本文主要介紹構(gòu)建一個應(yīng)用的基本步驟和模塊,并假定你已經(jīng)對有一定的了解本文引用部分代碼作為例子,如果希望參看全部源碼,歡迎去 原生 Node.js 應(yīng)用 Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境Node.js 使用了一個事件驅(qū)...
摘要:如何解決跨域問題跨域原因由于瀏覽器的同源策略限制,只允許請求當前源域名協(xié)議端口的資源。同源策略同源策略是客戶端腳本尤其是的重要的安全度量標準。同源策略指的是協(xié)議,域名,端口相同,同源策略是一種安全協(xié)議。狀態(tài)表示客戶端已發(fā)送報文。 如何解決跨域問題: 跨域原因:由于瀏覽器的同源策略限制,XmlHttpRequest只允許請求當前源(域名、協(xié)議、端口)的資源。在腳本中發(fā)起HTTP請求,出于...
摘要:但是還是會阻塞事件,所以會可能在觸發(fā)前或后執(zhí)行,但是一定會在事件前觸發(fā)。當監(jiān)聽到該圖片元素進入可視窗口時,即將自定義屬性中的地址存儲到屬性中,達到懶加載的效果。當代碼執(zhí)行,線程被凍結(jié)。所以的性能讓變慢。 概括 涉及到的分類 網(wǎng)絡(luò)層面 構(gòu)建層面 瀏覽器渲染層面 服務(wù)端層面 涉及到的功能點 資源的合并與壓縮 圖片編解碼原理和類型選擇 瀏覽器渲染機制 懶加載預(yù)加載 瀏覽器存儲 緩存機制...
摘要:例如指定一些依賴到模塊中實現(xiàn)規(guī)范的模塊化,感興趣的可以查看的文檔。 CommonJS 定義了 module、exports 和 require 模塊規(guī)范,Node.js 為了實現(xiàn)這個簡單的標準,從底層 C/C++ 內(nèi)建模塊到 JavaScript 核心模塊,從路徑分析、文件定位到編譯執(zhí)行,經(jīng)歷了一系列復(fù)雜的過程。簡單的了解 Node 模塊的原理,有利于我們重新認識基于 Node 搭建的...
閱讀 483·2021-11-22 12:05
閱讀 1543·2021-11-17 09:33
閱讀 3589·2021-11-11 16:54
閱讀 2682·2021-10-14 09:49
閱讀 4060·2021-09-06 15:01
閱讀 1833·2019-08-29 17:23
閱讀 706·2019-08-29 14:09
閱讀 724·2019-08-29 12:28