快捷導(dǎo)航

詳解關(guān)于html，css，js三者的加載順序問(wèn)題

更新時(shí)間：2019年04月10日 15:11:17 作者：落落月

這篇文章主要介紹了關(guān)于html，css，js三者的加載順序問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

<head lang="en">
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/*.css" rel="external nofollow" >
  <script src="js/*.js></script>
</head>

DOM文檔的加載順序是由上而下的順序加載；

1、DOM加載到link標(biāo)簽

css文件的加載是與DOM的加載并行的，也就是說(shuō)，css在加載時(shí)Dom還在繼續(xù)加載構(gòu)建，而過(guò)程中遇到的css樣式或者img，則會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，待資源返回后，將其添加到dom中的相對(duì)應(yīng)位置中；

2、DOM加載到script標(biāo)簽

由于js文件不會(huì)與DOM并行加載，因此需要等待js整個(gè)文件加載完之后才能繼續(xù)DOM的加載，倘若js腳本文件過(guò)大，則可能導(dǎo)致瀏覽器頁(yè)面顯示滯后，出現(xiàn)“假死”狀態(tài)，這種效應(yīng)稱之為“阻塞效應(yīng)”；會(huì)導(dǎo)致出現(xiàn)非常不好的用戶體驗(yàn)；

而這個(gè)特性也是為什么在js文件中開頭需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是讓DOM文檔加載完成之后才執(zhí)行js文件，這樣才不會(huì)出現(xiàn)查找不到DOM節(jié)點(diǎn)等問(wèn)題；

js阻塞其他資源的加載的原因是：瀏覽器為了防止js修改DOM樹，需要重新構(gòu)建DOM樹的情況出現(xiàn)；

3、解決方法

前提，js是外部腳本；

在script標(biāo)簽中添加 defer=“ture”，則會(huì)讓js與DOM并行加載，待頁(yè)面加載完成后再執(zhí)行js文件，這樣則不存在阻塞；

在scirpt標(biāo)簽中添加 async=“ture”，這個(gè)屬性告訴瀏覽器該js文件是異步加載執(zhí)行的，也就是不依賴于其他js和css，也就是說(shuō)無(wú)法保證js文件的加載順序，但是同樣有與DOM并行加載的效果；

同時(shí)使用defer和async屬性時(shí)，defer屬性會(huì)失效；

可以將scirpt標(biāo)簽放在body標(biāo)簽之后，這樣就不會(huì)出現(xiàn)加載的沖突了。

以上所述是小編給大家介紹的關(guān)于html，css，js三者的加載順序問(wèn)題詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

前端給后端傳數(shù)據(jù)的五種方式總結(jié)
前端與后端數(shù)據(jù)交互是軟件開發(fā)中不可或缺的一環(huán),下面這篇文章主要給大家介紹了關(guān)于前端給后端傳數(shù)據(jù)的五種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
這篇文章主要介紹了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
JS實(shí)現(xiàn)獲取來(lái)自百度,Google,soso,sogou關(guān)鍵詞的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取來(lái)自百度,Google,soso,sogou關(guān)鍵詞的方法,結(jié)合實(shí)例形式分析了js獲取來(lái)路頁(yè)面的方法與相關(guān)搜索引擎關(guān)鍵詞的處理技巧,需要的朋友可以參考下
2016-12-12
Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
官網(wǎng)實(shí)例中給出了各式各樣的demo，可以參照document修改自己需要的即可，本文實(shí)現(xiàn)的是一個(gè)學(xué)生成績(jī)走勢(shì)demo，有需求的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
跟我學(xué)習(xí)javascript的執(zhí)行上下文
跟我學(xué)習(xí)javascript的執(zhí)行上下文，讀完本文后，你應(yīng)該清楚了解釋器做了什么，為什么函數(shù)和變量能在聲明前使用以及它們的值是如何決定的，需要了解這些內(nèi)容的朋友可以參考下
2015-11-11
詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（1）
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象，對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述，感興趣的小伙伴們可以參考一下
2015-12-12
關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)?lái)一篇關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟
這篇文章主要介紹了微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
js實(shí)現(xiàn)自定義路由
本文介紹了js實(shí)現(xiàn)自定義路由，主要是事件hashchange的使用，然后根據(jù)我們的業(yè)務(wù)需求封裝。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
禁止iframe腳本彈出的窗口覆蓋了父窗口的方法
這篇文章主要介紹了如何禁止iframe里面的腳本彈出的窗口覆蓋了父窗口,經(jīng)測(cè)試，貌似只能在IE下進(jìn)行需要的朋友可以參考下
2014-09-09