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