js在運(yùn)行的時(shí)候會阻塞渲染嗎？我想是的。我的一些理解：頁面呈現(xiàn)過程是：1。檢索HTML代碼并從上到下解析它。2. 在我看來，解析就是建立DOM樹、render樹和renderlayer樹。前面是每個(gè)H

js在運(yùn)行的時(shí)候會阻塞渲染嗎？

我想是的。

我的一些理解：

頁面呈現(xiàn)過程是：

1。檢索HTML代碼并從上到下解析它。

2. 在我看來，解析就是建立DOM樹、render樹和renderlayer樹。前面是每個(gè)HTML節(jié)點(diǎn)的結(jié)構(gòu)樹，最后兩個(gè)用于呈現(xiàn)頁面。為了建立DOM樹，我知道，比如我遇到一個(gè)HTML節(jié)點(diǎn)時(shí)，我會建立一個(gè)HTML節(jié)點(diǎn)，然后我會遇到

我把HTML作為父節(jié)點(diǎn)，節(jié)點(diǎn)存儲指向主體。遇到了在代表后面沒有子節(jié)點(diǎn)的情況。三。如果在構(gòu)建DOM樹的過程中遇到腳本、IMG或CSS，則會加載它們。當(dāng)我使用chrome時(shí)，我發(fā)現(xiàn)這些資源是并行加載的，即發(fā)送請求的時(shí)間是相同的。（這里有個(gè)小問題要問。如果從上到下構(gòu)建DOM樹，則應(yīng)該按照時(shí)間順序遇到這些標(biāo)記。chrome是如何實(shí)現(xiàn)的？）

4. 同時(shí)進(jìn)行DOM樹構(gòu)造、渲染樹構(gòu)造和渲染層樹構(gòu)造。第三點(diǎn)是遇到腳本時(shí)會加載它，加載后會立即執(zhí)行。因此，DOM樹的后續(xù)節(jié)點(diǎn)無法構(gòu)建，運(yùn)行塊將出現(xiàn)在這里。

注意：JS single thread的知識說JS engine和rendering不是同一個(gè)線程，這與JS blocking rendering并不矛盾，因?yàn)楫?dāng)DOM tree被構(gòu)建為script tag時(shí)，后面的節(jié)點(diǎn)被阻止構(gòu)建，但可能render tree和renderlayer tree還在構(gòu)建（前面的節(jié)點(diǎn)）。這兩個(gè)樹構(gòu)建（實(shí)際上，DOM樹構(gòu)建我懷疑也是在渲染線程中）屬于渲染線程。所以這個(gè)時(shí)候，JS在運(yùn)行，rendering在工作，這符合兩個(gè)線程的特點(diǎn)。

CSS動畫會不會被JS阻塞？

是的，瀏覽器從上到下呈現(xiàn)頁面。如果JS是在動畫效果的dom之后寫的，它不會阻塞?；蛘吣梢詫傩蕴砑拥侥_本標(biāo)記async=“true”，這樣JS將異步加載，并且不會阻止DOM呈現(xiàn)

怎樣保證js在頁面元素渲染完后再執(zhí)行？

1. HTML的加載不受JS加載的影響。2 / 4. 頁面呈現(xiàn)的一般過程是下載解析HTML并構(gòu)建DOM樹，然后解析CSS并繪制呈現(xiàn)樹。前者構(gòu)建頁面結(jié)構(gòu)，后者添加頁面樣式。在構(gòu)建DOM樹的過程中，您會遇到img、externalcss和script等標(biāo)記。此時(shí)，需要加載外部資源。加載資源由單個(gè)下載線程異步加載，瀏覽器將并行加載它們。但是，并行資源的具體最大數(shù)量是有限的，不同的瀏覽器可能會有所不同。然而，加載CSS和JS資源是非常特殊的，它們的加載會影響頁面的呈現(xiàn)。CSS加載不會阻止DOM樹解析，但會阻止呈現(xiàn)（這是因?yàn)槌尸F(xiàn)依賴于CSS）。如果在不等待CSS加載的情況下進(jìn)行渲染，則必須在CSS加載和解析之后再次進(jìn)行渲染，并且可能需要重新繪制或回流）。JS資源的加載會阻礙DOM樹的構(gòu)建和呈現(xiàn)，除非設(shè)置了script tag的asynchronous屬性。三。在解析DOM樹和呈現(xiàn)頁面之前，將它放在head中，并阻塞頁面。在正常情況下，JS將在加載后立即執(zhí)行。在JS腳本中，只能訪問current<script>以上的DOM，并在腳本執(zhí)行后繼續(xù)解析DOM。JS執(zhí)行引擎和頁面呈現(xiàn)是由不同的線程執(zhí)行的，但它們是互斥的，即JS執(zhí)行進(jìn)程不能構(gòu)建Dom和呈現(xiàn)頁面。這是一種優(yōu)化機(jī)制。由于JS可能會修改Dom和樣式，如果在解析JS的過程中構(gòu)建Dom，可能會導(dǎo)致不一致或重復(fù)構(gòu)建。所以我們應(yīng)該在正文中加入腳本，以使頁面呈現(xiàn)更快。

css加載會造成阻塞嗎？為什么？

這是可能的。概率相對較小。

任何資源都是有代價(jià)的，這就是原因。

網(wǎng)站為什么JS調(diào)用盡量放到網(wǎng)頁底部？

為了用戶體驗(yàn)，如果加載的JS非常大或者JS加載到其他網(wǎng)絡(luò)資源上，如果網(wǎng)速不夠，頁面可能會空白幾秒鐘，用戶體驗(yàn)非常差，因?yàn)榧虞dJS時(shí)HTML和CSS的呈現(xiàn)會被阻塞。

在前端開發(fā)中，頁面渲染指什么？

簡而言之，就是生成可視化頁面。

內(nèi)部工作原理是瀏覽器引擎解析HTML的DOM元素，最終形成屏幕像素，構(gòu)成可見的點(diǎn)、線、面。

渲染過程將調(diào)用GPU進(jìn)行圖形渲染，渲染的數(shù)據(jù)源是前端元素或標(biāo)簽。

渲染速度與代碼編寫密切相關(guān)。如果是一個(gè)大的周期，你會看到頁面加載非常慢。也可以說渲染非常慢，因?yàn)閳D形和文本的顯示需要完成整個(gè)計(jì)算。

整個(gè)過程如下：后端HTML頁作為靜態(tài)文件存在。當(dāng)前端請求時(shí)，后端不修改文件的內(nèi)容，而是直接以資源的形式返回給前端。獲取頁面后，前端修改HTML的內(nèi)容，并根據(jù)HTML頁面上編寫的JS代碼進(jìn)一步顯示。

答題完畢，供參考

！張飛鴻