一、前言
突然想起來浪听，有學(xué)生問我說“老師螟碎，我的CSS和JS放在哪里都能執(zhí)行，為什么大多數(shù)我們書寫要有固定的位置迹栓，為什么不能亂放掉分？明明可以執(zhí)行呀”。
那我今天就解釋一下吧~
二、加載和渲染
頁面的的加載和渲染也是一個非常復(fù)雜的過程
這個文章里需要你知道酥郭，頁面能成功顯示在你的電腦上华坦，其實是至少要經(jīng)歷先 加載 后 渲染 的兩個步驟
加載暫時可以理解為 先把頁面下載下來，然后開始讀一下
渲染就是不从，把你讀到的內(nèi)容 在瀏覽器窗口展示出來
三惜姐、css阻塞
其實,正常情況下css是阻塞html的DOM樹渲染的
為什么呢？
正常我們的代碼執(zhí)行順序是這樣的：
<style>
.......
</style>
<div>
......
</div>
- 測試發(fā)現(xiàn)：當css沒有加載完成的時候消返，html其實已經(jīng)加載解析完成了,我們在控制臺是可以打印出來html標簽的
- 但是你會發(fā)現(xiàn)html并沒有展現(xiàn)在瀏覽器上载弄，因為它要等著css加載完成，然后在把樣式給添加上以后才會進行渲染展示給用戶撵颊。
如果css加載的時候不阻塞DOM樹渲染宇攻，那么等html展示給用戶的時候，然后css加載完成添加樣式倡勇，這時候html就會被重新渲染（也叫做重繪或者回流）逞刷。這樣肯定是影響性能的。
四妻熊、重繪與回流
頁面重繪：當render tree（渲染樹）中的一些元素需要更新屬性夸浅，但這些屬性只會影響元素的外觀、風(fēng)格扔役，而不會影響到元素的布局帆喇，此類的頁面渲染叫作頁面重繪。
頁面回流：當render tree（渲染樹）中的一部分（或全部）因為元素的規(guī)模尺寸亿胸、布局坯钦、隱藏等改變而引起的頁面重新渲染（或者叫作重新構(gòu)建繪制）
五、css的書寫位置
- 首先要明白侈玄，無論css寫在哪里婉刀，這個css都能生效。（css阻塞）
- 那我就能隨便亂寫了序仙？突颊？？
- 由于網(wǎng)頁文檔是自上而下加載并解析的潘悼，假設(shè)將style標簽書寫在了</body>的后面律秃，在讀取到style標簽之前，整個網(wǎng)頁文檔已經(jīng)渲染得差不多了
- 這時候突然發(fā)現(xiàn)存在一個style標簽治唤，并且style標簽中的內(nèi)容針對網(wǎng)頁中某些元素的樣式進行了設(shè)置棒动，于是瀏覽器只好重新為每個元素計算樣式，再加載出來(重繪與回流)肝劲。
- 所以不建議這樣寫迁客，否則會導(dǎo)致網(wǎng)頁的加載速度的變慢。
