HTML 中的 JavaScript
前言
在上一篇文章"什么是JavaScript?"中我們說到j(luò)s作為一門和頁(yè)面交互的語(yǔ)言。那如何把網(wǎng)頁(yè)的主導(dǎo)語(yǔ)言HTML和JavaScript關(guān)聯(lián)起來呢?在js早期,網(wǎng)景公司創(chuàng)造出了
元素,用來講JavaScript插入到HTML中。
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供甘南網(wǎng)站建設(shè)、甘南做網(wǎng)站、甘南網(wǎng)站設(shè)計(jì)、甘南網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、甘南企業(yè)網(wǎng)站模板建站服務(wù),10多年甘南做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
元素
博主在看“紅寶書”的時(shí)候,看到script標(biāo)簽居然有足足8個(gè)屬性。如下:
- async:可選。表示應(yīng)該立即開始下載腳本,但不能阻止其他頁(yè)面動(dòng)作,比如下載資源或等待其他腳本加載。只對(duì)外部腳本文件有效。
- charset:可選。使用 src 屬性指定的代碼字符集。這個(gè)屬性很少使用,因?yàn)榇蠖鄶?shù)瀏覽器不在乎它的值。
- crossorigin:可選。配置相關(guān)請(qǐng)求的CORS(跨源資源共享)設(shè)置。默認(rèn)不使用CORS。crossorigin= "anonymous"配置文件請(qǐng)求不必設(shè)置憑據(jù)標(biāo)志。crossorigin="use-credentials"設(shè)置憑據(jù)標(biāo)志,意味著出站請(qǐng)求會(huì)包含憑據(jù)。
- defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對(duì)外部腳本文件有效。在 IE7 及更早的版本中,對(duì)行內(nèi)腳本也可以指定這個(gè)屬性。
- integrity:可選。允許比對(duì)接收到的資源和指定的加密簽名以驗(yàn)證子資源完整性(SRI,Subresource Integrity)。如果接收到的資源的簽名與這個(gè)屬性指定的簽名不匹配,則頁(yè)面會(huì)報(bào)錯(cuò),腳本不會(huì)執(zhí)行。這個(gè)屬性可以用于確保內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN,Content Delivery Network)不會(huì)提供惡意內(nèi)容。
- language:廢棄。最初用于表示代碼塊中的腳本語(yǔ)言(如"JavaScript"、"JavaScript 1.2"或"VBScript")。大多數(shù)瀏覽器都會(huì)忽略這個(gè)屬性,不應(yīng)該再使用它。
- src:可選。表示包含要執(zhí)行的代碼的外部文件
- type:可選。代替 language,表示代碼塊中腳本語(yǔ)言的內(nèi)容類型(也稱 MIME 類型)。按照慣例,這個(gè)值始終都是"text/javascript",盡管"text/javascript"和"text/ecmascript"都已經(jīng)廢棄了。JavaScript 文件的 MIME 類型通常是"application/x-javascript",不過給type 屬性這個(gè)值有可能導(dǎo)致腳本被忽略。在非 IE 的瀏覽器中有效的其他值還有"application/javascript"和"application/ecmascript"。如果這個(gè)值是 module,則代碼會(huì)被當(dāng)成 ES6 模塊,而且只有這時(shí)候代碼中才能出現(xiàn) import 和 export 關(guān)鍵字。
博主今年5月入行前端,個(gè)人認(rèn)為在現(xiàn)在這個(gè)前端框架盛行的時(shí)代,平時(shí)的業(yè)務(wù)也不會(huì)接觸到這么多屬性,掌握 src屬性就足以。其他看過有點(diǎn)印象,可能以后維護(hù)前后端不分離的項(xiàng)目的時(shí)候能用到。并且再好的web開發(fā)實(shí)踐中部分屬性也是不推薦使用的。
使用方法
使用的兩種方法,一種就是在直接在標(biāo)簽內(nèi)部嵌入js代碼,另一種就是在標(biāo)簽的src屬性里輸入外部文件的URL。
有一點(diǎn)是值得注意 在使用別人服務(wù)器上的js文件時(shí),必須要確認(rèn)來源是可靠的,穩(wěn)定。不然別人把文件一換,項(xiàng)目就可能因此跑不起來。
在最佳實(shí)踐中通常認(rèn)為,使用外部文件時(shí)更好的選擇。理由如下:
- 可維護(hù)性。如果js分散到一個(gè)個(gè)HTML頁(yè)面中,這會(huì)導(dǎo)致維護(hù)困難。然而放到一個(gè)js文件中就會(huì)極大提升可維護(hù)性。
- 緩存。瀏覽器會(huì)根據(jù)特定的設(shè)置緩存所有外部鏈接的js文件。如果兩個(gè)頁(yè)面用到同一個(gè)js文件,則該文件只會(huì)下載一次,意味著頁(yè)面加載更快了。
- 適應(yīng)未來 。使用外部鏈接的方式,就不用去考慮XHTML文件中轉(zhuǎn)義字符帶來的問題。
執(zhí)行順序
在沒有async和defer關(guān)鍵字的影響下,不管包含什么代碼,瀏覽器會(huì)按照
標(biāo)簽在頁(yè)面中出現(xiàn)的順序來依次解釋它們。
標(biāo)簽位置
過去,所有的
標(biāo)簽都是寫在head里面的,這就意味著需要把head里面的所有的js都下載、解析和解釋完成才會(huì)開始渲染頁(yè)面,這就會(huì)導(dǎo)致頁(yè)面在首次加載的時(shí)候會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏。為了解決這個(gè)問題,現(xiàn)代web應(yīng)用通常會(huì)把js放在body里的頁(yè)面元素之后,這樣就會(huì)在處理js之前把頁(yè)面渲染完成,顯著提升了用戶體驗(yàn),感覺頁(yè)面加載變快了。
元素
當(dāng)瀏覽器不支持腳本語(yǔ)言或者腳本語(yǔ)言的支持被關(guān)閉的時(shí)候就會(huì)去渲染
標(biāo)簽內(nèi)的內(nèi)容?,F(xiàn)在感覺基本上不會(huì)遇到這種業(yè)務(wù)場(chǎng)景。
網(wǎng)頁(yè)題目:HTML 中的 JavaScript
轉(zhuǎn)載注明:
http://weahome.cn/article/dsojgoj.html