CSS和JS在網(wǎng)頁中的放置順序

js是阻塞頁面的加載儡遮,會影響頁面加載的速度,js文件的大小和算法的復雜程度影響著頁面的加載速度澳厢。瀏覽器在下載和執(zhí)行腳本時出現(xiàn)阻塞的原因在于篙骡,腳本可能會改變頁面或javascript的命名空間宾巍,它們對后面內(nèi)容造成影響咕幻。一個典型的例子就是在頁面中使用document.write()。

瀏覽器從服務(wù)器接收到html代碼顶霞,就開始解析html肄程,根據(jù)html的代碼會自上向下進行構(gòu)建,同時構(gòu)建渲染樹选浑,如果遇到j(luò)s文件加載執(zhí)行蓝厌,將會阻塞DOM樹的構(gòu)建,遇到css文件古徒,又會阻塞渲染樹的構(gòu)建拓提。

如今人們更喜愛相對于呈現(xiàn)用戶面前的“快”網(wǎng)頁,即呈現(xiàn)出來的時間越短隧膘,內(nèi)容也不是很糟糕代态,更受人歡迎,如果一個網(wǎng)頁加載沒有反應(yīng)疹吃,時間超過兩秒甚至更多蹦疑,對于用戶來說,這個網(wǎng)頁是差勁的

所以萨驶,script標簽應(yīng)該放在</body>標簽的前面歉摧,因為,放在body標簽后會避免出現(xiàn)網(wǎng)頁加載空白的情況腔呜,可持續(xù)的給用戶提供視覺反饋叁温,同時在有些情況下,會降低錯誤的發(fā)生核畴。頁面渲染的時候膝但,相對于其他的圖片或css來說js是阻塞的,所以等頁面的渲染樹成行以后再引入js就可以避免白屏現(xiàn)象.

css標簽應(yīng)放在<head></head>標簽之間,如果放在</body>標簽的前面膛檀,當DOM樹構(gòu)建完成锰镀,渲染樹開始構(gòu)建,等構(gòu)建完成咖刃,瀏覽器需要渲染整個頁面泳炉,其實可以邊渲染便構(gòu)建,減少資源的浪費

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嚎杨,一起剝皮案震驚了整個濱河市花鹅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌枫浙,老刑警劉巖刨肃,帶你破解...
    沈念sama閱讀 212,657評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件古拴,死亡現(xiàn)場離奇詭異,居然都是意外死亡真友,警方通過查閱死者的電腦和手機黄痪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盔然,“玉大人桅打,你說我怎么就攤上這事∮福” “怎么了挺尾?”我有些...
    開封第一講書人閱讀 158,143評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長站绪。 經(jīng)常有香客問我遭铺,道長,這世上最難降的妖魔是什么恢准? 我笑而不...
    開封第一講書人閱讀 56,732評論 1 284
  • 正文 為了忘掉前任魂挂,我火速辦了婚禮,結(jié)果婚禮上顷歌,老公的妹妹穿的比我還像新娘锰蓬。我一直安慰自己,他們只是感情好眯漩,可當我...
    茶點故事閱讀 65,837評論 6 386
  • 文/花漫 我一把揭開白布芹扭。 她就那樣靜靜地躺著,像睡著了一般赦抖。 火紅的嫁衣襯著肌膚如雪舱卡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,036評論 1 291
  • 那天队萤,我揣著相機與錄音轮锥,去河邊找鬼。 笑死要尔,一個胖子當著我的面吹牛舍杜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赵辕,決...
    沈念sama閱讀 39,126評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼既绩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了还惠?” 一聲冷哼從身側(cè)響起饲握,我...
    開封第一講書人閱讀 37,868評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后救欧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衰粹,經(jīng)...
    沈念sama閱讀 44,315評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,641評論 2 327
  • 正文 我和宋清朗相戀三年笆怠,在試婚紗的時候發(fā)現(xiàn)自己被綠了铝耻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,773評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡骑疆,死狀恐怖田篇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情箍铭,我是刑警寧澤,帶...
    沈念sama閱讀 34,470評論 4 333
  • 正文 年R本政府宣布椎镣,位于F島的核電站诈火,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏状答。R本人自食惡果不足惜冷守,卻給世界環(huán)境...
    茶點故事閱讀 40,126評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惊科。 院中可真熱鬧拍摇,春花似錦、人聲如沸馆截。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蜡娶。三九已至混卵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間窖张,已是汗流浹背幕随。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宿接,地道東北人赘淮。 一個月前我還...
    沈念sama閱讀 46,584評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像睦霎,于是被迫代替她去往敵國和親梢卸。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,676評論 2 351

推薦閱讀更多精彩內(nèi)容

  • JS碎赢、CSS渲染機制解析html構(gòu)建DOM樹解析CSS構(gòu)建CSSOM樹把DOM和CSSOM組合成渲染樹(Rende...
    __Qiao閱讀 2,047評論 1 7
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案低剔? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,741評論 1 92
  • 遠方 撐著油紙傘的姑娘 尋找著登船的港口 判不清方向,靠不近彼岸 像是無悲無喜無心傷的石頭 那些夢 都隨著潺潺流水...
    何夏陌舟閱讀 393評論 0 0
  • 生活雖然有些不盡人意,但是我們?nèi)杂羞x擇快樂的權(quán)力襟齿。 九月份初過完生日過后姻锁,老天又狠狠的連著甩了幾個巴掌給我。唯一想...
    小王紙kiah閱讀 1,144評論 3 5
  • 很久沒有正兒八經(jīng)地寫點什么猜欺,猛然發(fā)現(xiàn)位隶,自己好像很久不曾真正的思考過,腦子里一片空白开皿,一時間涧黄,竟然不知道應(yīng)該跟...
    Einsiedler閱讀 339評論 2 0