欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css要放在head標(biāo)簽中的原因

這篇文章主要介紹css要放在head標(biāo)簽中的原因，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家集成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站制作公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

思考: css為什么要放在head標(biāo)簽中, 而不能像javascript一樣置于body標(biāo)簽尾部?

Talk is cheap, show me the code.

OK, 那我們通過寫一些代碼來得出結(jié)果

在這里先說chrome控制臺(tái)的一個(gè)小技巧:

css要放在head標(biāo)簽中的原因

限制download速度對(duì)我們的測(cè)試很有幫助! 可以讓我們看清一些細(xì)節(jié)

我們先把download速度限制為40kb/s, 開始測(cè)試:

當(dāng)css引入位置放于body標(biāo)簽尾部

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <h2>Hello world</h2>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</body>
</html>

在瀏覽器中查看效果:

當(dāng)bootstrap.min.css文件未加載完成時(shí), 網(wǎng)頁中已經(jīng)出現(xiàn)了"Hello world", 但樣式為默認(rèn)樣式, 說明網(wǎng)頁已經(jīng)渲染過一遍了

css要放在head標(biāo)簽中的原因

當(dāng)bootstrap.min.css文件加載完成之后, 網(wǎng)頁中的"Hello world"樣式發(fā)生改變, font-size發(fā)生明顯變化, 因此可以判斷: 網(wǎng)頁出現(xiàn)reflow

css要放在head標(biāo)簽中的原因

當(dāng)css引入位置放于head標(biāo)簽中時(shí):

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
 <h2>Hello world</h2>
</body>
</html>

在瀏覽器中打開查看效果:

當(dāng)bootstrap.min.css未加載完成時(shí), 網(wǎng)頁中并未出現(xiàn)任何內(nèi)容, 說明此時(shí)網(wǎng)頁并未發(fā)生渲染

css要放在head標(biāo)簽中的原因

當(dāng)bootstarp.min.css加載完成后, 網(wǎng)頁中出現(xiàn)帶有bootstrap樣式的"Hello world", 說明此時(shí)網(wǎng)頁發(fā)生渲染

css要放在head標(biāo)簽中的原因

從上面兩個(gè)例子可以看出:

css放在body標(biāo)簽尾部時(shí), DOMTree構(gòu)建完成之后便開始構(gòu)建RenderTree, 并計(jì)算布局渲染網(wǎng)頁, 等加載解析完css之后, 開始構(gòu)建CSSOMTree, 并和DOMTree重新構(gòu)建RenderTree, 重新計(jì)算布局渲染網(wǎng)頁
css放在head標(biāo)簽中時(shí), 先加載css, 之后解析css構(gòu)建CSSOMTree, 于此同時(shí)構(gòu)建DOMTree, CSSOMTree和DOMTree都構(gòu)建完畢之后開始構(gòu)建RenderTree, 計(jì)算布局渲染網(wǎng)頁
對(duì)比兩者, css放在head標(biāo)簽中比css放在body標(biāo)簽尾部少了一次構(gòu)建RenderTree, 一次計(jì)算布局和一次渲染網(wǎng)頁, 因此性能會(huì)更好; 并且css放在body標(biāo)簽尾部時(shí)會(huì)在網(wǎng)頁中短暫出現(xiàn)"裸奔"的HTML, 這不利于用戶體驗(yàn)

再講一個(gè)小技巧:

css要放在head標(biāo)簽中的原因
css要放在head標(biāo)簽中的原因

通過以上操作可以查看網(wǎng)頁解析渲染全過程, 所以用來解決"css文件放置在head中有什么優(yōu)點(diǎn)?"這個(gè)疑惑也是極好~

以上是“css要放在head標(biāo)簽中的原因”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：css要放在head標(biāo)簽中的原因
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article22/iijdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化