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

資訊專欄INFORMATION COLUMN

關(guān)于css,js放置位置的問題

zacklee / 1831人閱讀

摘要：一天，小明正在網(wǎng)上查找資料，項(xiàng)目中遇到的問題需要通過查閱資料來解決，他看到一個(gè)標(biāo)題很有意思，覺得這應(yīng)該是他要找的答案，于是他就點(diǎn)了進(jìn)去，結(jié)果進(jìn)入網(wǎng)站后幾秒鐘的時(shí)間，網(wǎng)頁還是一片空白，過了好久才加載完成。

一天，小明正在網(wǎng)上查找資料，項(xiàng)目中遇到的問題需要通過查閱資料來解決，他看到一個(gè)標(biāo)題很有意思，覺得這應(yīng)該是他要找的答案，于是他就點(diǎn)了進(jìn)去，結(jié)果進(jìn)入網(wǎng)站后幾秒鐘的時(shí)間，網(wǎng)頁還是一片空白，過了好久才加載完成。

為什么會出現(xiàn)這種情況？

說到這那我們就有必要先了解一下網(wǎng)站加載的整個(gè)完整過程了。

首先瀏覽器從服務(wù)器接收到html代碼，然后開始解析html

構(gòu)建DOM樹（根據(jù)html代碼自頂向下進(jìn)行構(gòu)建），并且在同時(shí)構(gòu)建渲染樹

遇到j(luò)s文件加載執(zhí)行，將阻塞DOM樹的構(gòu)建；遇到css文件，將阻塞渲染樹的構(gòu)建

script標(biāo)簽中的defer屬性：構(gòu)建DOM樹的過程和js文件的加載異步（并行）進(jìn)行，但是js文件執(zhí)行需要在DOM樹構(gòu)建完成之后

script標(biāo)簽中的async屬性：構(gòu)建DOM樹、渲染樹的過程和js文件的加載和執(zhí)行異步（并行）進(jìn)行

什么要對css，js的放置位置進(jìn)行調(diào)整？

從以上過程可以知道，當(dāng)js文件放在head中時(shí)，瀏覽器構(gòu)建DOM樹的時(shí)候遇到j(luò)s文件加載會阻塞，也就是說，瀏覽器不會加載body中的標(biāo)簽，一旦這個(gè)js文件的數(shù)量和內(nèi)容都比較大，那么就會造成剛剛小明遇到的那種情況，就不會給用戶一個(gè)十分良好的可視化回饋，而在前端開發(fā)中，給予用戶的可視化回饋十分重要。

我們現(xiàn)在十分青睞于用進(jìn)度條來描述一個(gè)過程，而對用戶的可視化回饋，就是網(wǎng)頁加載的進(jìn)度條。

對于現(xiàn)如今有著快節(jié)奏的人們，如果一個(gè)網(wǎng)頁打開后在兩秒鐘內(nèi)沒有反應(yīng)，或者加載很慢，那么用戶就會很不耐煩的關(guān)掉它，想當(dāng)于被直接宣判死刑了。

應(yīng)該放在哪里？

綜上所述，script標(biāo)簽最好放在標(biāo)簽的前面，因?yàn)榉旁谒衎ody中的標(biāo)簽后面就不會出現(xiàn)網(wǎng)頁加載時(shí)出現(xiàn)空白的情況，可以持續(xù)的給用戶提供視覺反饋，同時(shí)在有些情況下，會降低錯(cuò)誤的發(fā)生。

而css標(biāo)簽應(yīng)該放在標(biāo)簽之間，因?yàn)槿绻旁?/body>標(biāo)簽的前面，那么當(dāng)DOM樹構(gòu)建完成了，渲染樹才構(gòu)建，那么當(dāng)渲染樹構(gòu)建完成，瀏覽器不得不再重新渲染整個(gè)頁面，這樣造成了資源的浪費(fèi)。效率也不高。如果放在之間，瀏覽器邊構(gòu)建邊渲染，效率要高的多。

（個(gè)人愚見，如有不足，或者錯(cuò)誤的地方，還請大家不吝賜教）

歡迎光臨 個(gè)人博客

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82809.html

相關(guān)文章

  • 關(guān)于css,js放置位置的問題

    摘要：一天，小明正在網(wǎng)上查找資料，項(xiàng)目中遇到的問題需要通過查閱資料來解決，他看到一個(gè)標(biāo)題很有意思，覺得這應(yīng)該是他要找的答案，于是他就點(diǎn)了進(jìn)去，結(jié)果進(jìn)入網(wǎng)站后幾秒鐘的時(shí)間，網(wǎng)頁還是一片空白，過了好久才加載完成。 一天，小明正在網(wǎng)上查找資料，項(xiàng)目中遇到的問題需要通過查閱資料來解決，他看到一個(gè)標(biāo)題很有意思，覺得這應(yīng)該是他要找的答案，于是他就點(diǎn)了進(jìn)去，結(jié)果進(jìn)入網(wǎng)站后幾秒鐘的時(shí)間，網(wǎng)頁還是一片空白，過...

    wayneli 評論0 收藏0

  • [譯]關(guān)于vertical-align:你需要知道的一切

    摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個(gè)在文檔流中的元素并且?guī)в袑傩缘脑?。最右，不在文檔流中的元素但是內(nèi)容區(qū)域有高度。元素的基線依賴于元素是否是文檔流中的元素。 原文：Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個(gè)接著一個(gè)的元素。CSS提供了很多種可能...

    wuyangchun 評論0 收藏0

  • JavaWEB開發(fā)02——CSS&JS

    摘要：今日目標(biāo)使用完成網(wǎng)站首頁的優(yōu)化使用完成網(wǎng)站注冊頁面的優(yōu)化使用完成簡單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數(shù)據(jù)類型，能夠使用完成簡單的頁 今日目標(biāo) 使用CSS完成網(wǎng)站首頁的優(yōu)化 使用CSS完成網(wǎng)站注冊頁面的優(yōu)化 使用JS完成簡單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果 教學(xué)目標(biāo)： 了解...

    MorePainMoreGain 評論0 收藏0

  • JavaWEB開發(fā)02——CSS&JS

    摘要：今日目標(biāo)使用完成網(wǎng)站首頁的優(yōu)化使用完成網(wǎng)站注冊頁面的優(yōu)化使用完成簡單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數(shù)據(jù)類型，能夠使用完成簡單的頁 今日目標(biāo) 使用CSS完成網(wǎng)站首頁的優(yōu)化 使用CSS完成網(wǎng)站注冊頁面的優(yōu)化 使用JS完成簡單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果 教學(xué)目標(biāo)： 了解...

    高勝山 評論0 收藏0

發(fā)表評論

0條評論

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