成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

《javascript高級(jí)程序設(shè)計(jì)》筆記:script元素屬性

since1986 / 1240人閱讀

摘要:高級(jí)程序設(shè)計(jì)摘錄可選。表示通過屬性指定的代碼的字符集。這個(gè)屬性并不是必需的,如果沒有指定這個(gè)屬性,則其默認(rèn)值仍為。規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行,因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行,而這兩個(gè)腳本會(huì)先于事件執(zhí)行。

《javascript高級(jí)程序設(shè)計(jì)》摘錄:

async:可選。表示應(yīng)該立即下載腳本,但不應(yīng)妨礙頁(yè)面中的其他操作,比如下載其他資源或 等待加載其他腳本。只對(duì)外部腳本文件有效

charset:可選。表示通過 src 屬性指定的代碼的字符集。由于大多數(shù)瀏覽器會(huì)忽略它的值, 因此這個(gè)屬性很少有人用。

defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對(duì)外部腳本文件有效。IE7 及更早版本對(duì)嵌入腳本也支持這個(gè)屬性。

language:已廢棄。原來用于表示編寫代碼使用的腳本語言(如 JavaScript、JavaScript1.2 或 VBScript)。大多數(shù)瀏覽器會(huì)忽略這個(gè)屬性,因此也沒有必要再用了。

src:可選。表示包含要執(zhí)行代碼的外部文件。

type:可選??梢钥闯墒?language 的替代屬性;表示編寫代碼使用的腳本語言的內(nèi)容類型(也稱為 MIME 類型)。這個(gè)屬性并不是必需的,如果沒有指定這個(gè)屬性,則其默認(rèn)值仍為 text/javascript。

MIME類型

百度百科解釋:

MIME(Multipurpose Internet Mail Extensions)多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型。是設(shè)定某種擴(kuò)展名的文件用一種應(yīng)用程序來打開的方式類型,當(dāng)該擴(kuò)展名文件被訪問的時(shí)候,瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來打開。多用于指定一些客戶端自定義的文件名,以及一些媒體文件打開方式

通俗的將,MIME類型就是告訴瀏覽器用什么程序解析傳遞給他的文件,而前端涉及到MIME類型的也就是與后臺(tái)交互時(shí)。http 協(xié)議中常見的MIME:參考維基百科

text/plain(純文本)

text/html(超文本標(biāo)記語言)

image/png(PNG圖像)【PHP中為:image/x-png】

application/x-www-form-urlencoded(使用HTTP的POST方法提交的表單)

DOM 文檔的執(zhí)行順序

兩個(gè)屬性都是用來設(shè)定外部腳本執(zhí)行的方式,在詳細(xì)講解兩個(gè)屬性的區(qū)別之前,先看一下DOM文檔的加載順序:

解析HTML結(jié)構(gòu);

加載外部腳本和樣式表文件;

解析并執(zhí)行腳本代碼;

DOM樹構(gòu)建完成;//DOMContentLoaded

加載圖片等外部文件;

頁(yè)面加載完畢;//load

由于瀏覽器采用至上而下的方式解析,所以會(huì)先解析html,直到遇到外部樣式和外部腳本。這時(shí)會(huì)阻塞瀏覽器的解析,外部樣式和外部腳本(在沒有async、defer屬性下)會(huì)并行加載,但是外部樣式會(huì)阻塞外部腳本的執(zhí)行(查看css和js的阻塞請(qǐng)點(diǎn)擊)。
即:html解析->外部樣式、腳本加載->外部樣式執(zhí)行->外部腳本執(zhí)行->html繼續(xù)解析

async 和 defer 對(duì)比

async和defer屬性決定了js腳本的執(zhí)行方式,內(nèi)嵌式的腳本會(huì)忽略這兩個(gè)屬性

defer:腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再執(zhí)行

書中的例子和解釋:



    Example HTML Page
    
    


    

在這個(gè)例子中,雖然我們把

在以上代碼中,第二個(gè)腳本文件可能會(huì)在第一個(gè)腳本文件之前執(zhí)行。因此,確保兩者之間互不依賴 非常重要。指定 async 屬性的目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行,從而異步加載頁(yè)面其他內(nèi)容。為此,建議異步腳本不要在加載期間修改 DOM。異步腳本一定會(huì)在頁(yè)面的 load 事件前執(zhí)行,但可能會(huì)在 DOMContentLoaded 事件觸發(fā)之前或之后執(zhí)行

以上內(nèi)容純粹式學(xué)術(shù)的的探討和老舊代碼的維護(hù),不介意做過多的糾結(jié)。因?yàn)槲覀兌紩?huì)將css外鏈放在head元素內(nèi),而將js腳本放在文檔的最后

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/84698.html

相關(guān)文章

  • js高級(jí)程序設(shè)計(jì)-DOM-閱讀筆記

    摘要:節(jié)點(diǎn)層次類型和屬性假設(shè)我的是一個(gè)元素返回至于就是元素的名稱節(jié)點(diǎn)關(guān)系每個(gè)節(jié)點(diǎn)都有一個(gè)屬性其中保存著一個(gè)對(duì)象是一個(gè)類數(shù)組對(duì)象這個(gè)對(duì)象有屬性但不屬于對(duì)象會(huì)隨著結(jié)構(gòu)變化而變化因?yàn)槭穷悢?shù)組所以訪問里面的屬性可以使用索引也可以使用方法效果是一樣的 節(jié)點(diǎn)層次 ?showImg(https://segmentfault.com/img/bVIl1b?w=646&h=407); node類型-dom1 ...

    mating 評(píng)論0 收藏0
  • JavaScript高級(jí)程序設(shè)計(jì)筆記:DOM(十)

    摘要:添加節(jié)點(diǎn)后,的新增節(jié)點(diǎn)父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。插入后成為最后一個(gè)子節(jié)點(diǎn)插入后成為第一個(gè)節(jié)點(diǎn)插入到最后一個(gè)子節(jié)點(diǎn)前面接受兩個(gè)參數(shù),要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)只移除而非替換節(jié)點(diǎn)。 Node類型 nodeType以下是一些重要的nodeType的取值:1: 元素element2: 屬性attr3: 文本text8: 注釋comments9: 文檔docume...

    Pluser 評(píng)論0 收藏0
  • javascript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)摘錄上

    摘要:在這種情況下,函數(shù)在停止執(zhí)行后將返回值。這種用法一般用在需要提前停止函數(shù)執(zhí)行而又不需要返回值的情況下嚴(yán)格模式對(duì)函數(shù)有一些限制不能把函數(shù)命名為或不能把參數(shù)命名為或不能出現(xiàn)兩個(gè)命名參數(shù)同名的情況。 把近期看高程這本書做的筆記摘錄整理出來了,總歸對(duì)原生javascript理論有了一個(gè)比較全面的的認(rèn)識(shí),這次把書中的一些知識(shí)要點(diǎn)摘錄出來了,便于以后查閱的時(shí)候有方向,也更有效率??! 第一章、jav...

    leap_frog 評(píng)論0 收藏0
  • 談?wù)?<script> 標(biāo)簽以及其加載順序問題,包含 defer & async

    摘要:標(biāo)簽加載順序如果要談標(biāo)簽加載順序問題,首先要談的就是標(biāo)簽的位置,因?yàn)闃?biāo)簽的位置對(duì)于加載順序來說有著很重要的影響。例如標(biāo)簽在以上代碼中,可能由于下載時(shí)間比較長(zhǎng),由于兩個(gè)標(biāo)簽都是異步執(zhí)行,互不干擾,因此可能就會(huì)先于執(zhí)行。 談?wù)? 標(biāo)簽加載順序的問題 這篇文章比較長(zhǎng),如果你耐心讀完了,我會(huì)感謝你愿意在這篇文章上花費(fèi)時(shí)間,也希望你有收獲。 其實(shí)說起,幾乎搞前端的都知道他的作用:引入 JavaS...

    alexnevsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<