欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css為什么要放在head標(biāo)簽中

  發(fā)布時(shí)間：2020-10-12 16:49:43   作者：風(fēng)神修羅使   我要評(píng)論
這篇文章主要介紹了css為什么要放在head標(biāo)簽中,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

Talk is cheap, show me the code.

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

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

在這里插入圖片描述

限制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>
 <h1>Hello world</h1>
 <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)頁(yè)中已經(jīng)出現(xiàn)了"Hello world", 但樣式為默認(rèn)樣式, 說(shuō)明網(wǎng)頁(yè)已經(jīng)渲染過(guò)一遍了

在這里插入圖片描述

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

在這里插入圖片描述

當(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>
 <h1>Hello world</h1>
</body>
</html>

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

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

在這里插入圖片描述

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

在這里插入圖片描述

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

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

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

在這里插入圖片描述
在這里插入圖片描述

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

到此這篇關(guān)于css為什么要放在head標(biāo)簽中的文章就介紹到這了,更多相關(guān)css head標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • html5+css3之制作header實(shí)例與更新

    本文主要記錄了使用CSS3的float布局制作header的過(guò)程，從最初的結(jié)構(gòu)到最后的定稿的全部記錄以及修改過(guò)程，十分的詳細(xì)，給需要的小伙伴參考下
    2020-12-21

  • html5+css3之CSS中的布局與Header的實(shí)現(xiàn)

    本文從CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox簡(jiǎn)介）Header布局的實(shí)現(xiàn)（float實(shí)現(xiàn)布局、Header js的實(shí)現(xiàn)）向我們展示了HTML5與CS
    2014-11-21

最新評(píng)論