最近免费中文字幕大全高清10,一个人在看www免费,在厨房拨开内裤进入在线视频,中文字幕亚洲乱码熟女在线 ,亚洲日本一区二区三区在线

Elementor 性能提示：縮小 DOM 大小，讓網(wǎng)站更快

11月12日 09:22更新

016660

具有大量 DOM 輸出的網(wǎng)站會增加 HTML 的大小，這可能會損害網(wǎng)站的性能。但是，有一些技術(shù)可以減少網(wǎng)站的 DOM 大小。本篇文章將探討如何通過使用各種策略來最小化 HTML 大小，從而增強(qiáng) Elementor 網(wǎng)站。

理解“DOM 大小過大”問題

DOM （文檔對象模型）表示網(wǎng)頁的結(jié)構(gòu)。DOM 大小過大通常表示 DOM 結(jié)構(gòu)復(fù)雜，通常是由于使用了過多的 HTML 元素、嵌套節(jié)點(diǎn)或動態(tài)內(nèi)容注入造成的。包含大量 HTML 元素的頁面往往加載緩慢，并且會影響動畫和其他用戶交互。

DOM 大小對頁面性能的影響

較大的 DOM 大小會增加渲染時間，導(dǎo)致頁面渲染延遲和加載時間變慢。這是因?yàn)闉g覽器必須解析和渲染每個節(jié)點(diǎn)。此外，每個 DOM 節(jié)點(diǎn)都需要瀏覽器內(nèi)存，這可能會導(dǎo)致系統(tǒng)資源耗盡和內(nèi)存消耗增加。這可能會導(dǎo)致性能下降，尤其是在低端設(shè)備上。

此外，DOM 過大還會導(dǎo)致用戶交互遲緩，網(wǎng)站使用過程中響應(yīng)速度降低。大量的 DOM 元素通常包含許多事件監(jiān)聽器，這會增加開銷并減慢用戶交互速度。我們不會提及所有原因，但經(jīng)驗(yàn)法則是 HTML 越大，頁面越慢。

如何使用外部工具測量 DOM 大??？

要衡量 DOM 大小對網(wǎng)站性能的影響，可以使用以下工具：

Google Chrome DevTools：轉(zhuǎn)到“元素”面板檢查 DOM 元素及其嵌套深度。使用“性能”選項(xiàng)卡評估渲染性能并發(fā)現(xiàn)由 DOM 操作導(dǎo)致的潛在瓶頸。

Lighthouse：Lighthouse 審核提供了對 DOM 大小指標(biāo)的見解，例如“DOM 大小”、“DOM 深度”和“最大 DOM 深度”，指出了需要改進(jìn)的領(lǐng)域。

WebPageTest?：評估瀑布圖和性能結(jié)果中的 DOM 大小指標(biāo)，以了解 DOM 復(fù)雜性和頁面加載時間之間的關(guān)系。

什么才算是較大的 DOM 尺寸？

Lighthouse使用 DOM 樹標(biāo)記頁面，如下所示：

<body>當(dāng)元素超過818 個節(jié)點(diǎn)時發(fā)出警告。
當(dāng)<body>元素有超過1,400 個節(jié)點(diǎn)時會出現(xiàn)錯誤。

但是，這些指標(biāo)將來可能會發(fā)生變化。此外，不同的工具可能會設(shè)置不同的閾值來警告 DOM 大小過大。

減少 Elementor DOM 大小

Elementor 是一款可視化的拖放式網(wǎng)站構(gòu)建器，可簡化向頁面添加元素的過程。使用 Elementor 通常不會對網(wǎng)站的性能產(chǎn)生負(fù)面影響。但是，可以采取一些步驟來進(jìn)一步優(yōu)化構(gòu)建的頁面。這包括減少可以最小化 DOM 的 HTML 元素?cái)?shù)量，而不會影響設(shè)計(jì)。

為了有效優(yōu)化，了解 Elementor 布局元素的結(jié)構(gòu)很有用。我們將重點(diǎn)介紹布局元素，因?yàn)榈湫偷捻撁姘瑪?shù)十個這樣的元素，因此優(yōu)化它們會產(chǎn)生更大的影響。

有三種推薦的技術(shù)可以優(yōu)化您的布局元素：

從部分/列遷移到容器。
使用單個嵌套容器壓平容器。
盡可能實(shí)現(xiàn)全寬而不是盒寬的嵌套容器。

讓我們了解有關(guān)減少 Elementor DOM 大小的更多信息。

Elementor 元素類型

Elementor 有兩種類型的元素：

小部件：用來構(gòu)建網(wǎng)站的所有常規(guī)元素，如標(biāo)題、圖像、圖標(biāo)、按鈕、分隔線等。
布局元素：結(jié)構(gòu)元素，例如部分/列和容器。這些元素包裝小部件并將它們分組在一起。

重點(diǎn)關(guān)注布局元素，以了解如何減少 DOM 大小。

布局元素的 HTML 結(jié)構(gòu)

在 Elementor 中，每個結(jié)構(gòu)元素由兩個<div>標(biāo)簽組成：一個 outer<div>和一個 inner <div>。這一點(diǎn)很重要，因?yàn)槲覀儗⒘私馊绾螠p少結(jié)構(gòu)布局元素中的 HTML 元素?cái)?shù)量。

部分/列的 HTML 結(jié)構(gòu)：

當(dāng)使用部分和列時，最終的 HTML 由兩個布局級別組成，每個級別有兩個<div>元素，兩個用于部分，兩個用于列?？偣?，我們用四個<div>元素包裝小部件：

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

容器的 HTML 結(jié)構(gòu)：

Elementor 引入了容器作為構(gòu)建具有更精簡結(jié)構(gòu)和 DOM 的頁面的一種方式。

切換到容器時，生成的 HTML 僅包含兩個<div>元素，而不是四個，這意味著可以使用一半的元素獲得相同的設(shè)計(jì)<div>。

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

使用容器扁平化 HTML 結(jié)構(gòu)

過去，網(wǎng)站結(jié)構(gòu)通常采用部分或列。如今，現(xiàn)代網(wǎng)站使用 CSS flex 和 CSS grid 來實(shí)現(xiàn)相同的視覺結(jié)構(gòu)，同時減少代碼量。為此，Elementor 引入了容器。通過將結(jié)構(gòu)元素轉(zhuǎn)換為容器，可以簡化 HTML 結(jié)構(gòu)并消除不必要的冗余。

雖然部分是堆疊在一起的，但列是并排放置的。另一方面，容器可以將內(nèi)部元素堆疊成一行或一列。可以利用這些差異來優(yōu)化一些結(jié)構(gòu)。

如果某個部分有多列，轉(zhuǎn)換后的結(jié)構(gòu)將具有單個列方向容器和多個行方向容器。但是，如果某個部分只包含一列，可以在轉(zhuǎn)換為容器時優(yōu)化此結(jié)構(gòu)?？梢韵粋€容器級別而不影響設(shè)計(jì)。DOM 大小減少 50%，從四個<div>元素減少到只有兩個?，F(xiàn)在將此乘以每個頁面的布局元素?cái)?shù)量，以計(jì)算對您網(wǎng)站的影響。

值得注意的是，可以真正減少嵌套內(nèi)部部分的部分/列元素的 DOM 大小。在這些情況下，元素<div>在顯示小部件之前會使用八級元素。轉(zhuǎn)換為容器可以將其從八級元素減少<div>到四級，在某些情況下可以減少到只有兩級元素<div>。

如果仍在使用部分/列布局結(jié)構(gòu)，那么是時候遷移到容器了。這樣做的好處大于在遷移過程中投入的工作。為了簡化遷移，Elementor 甚至為此提供了一個方便的“轉(zhuǎn)換”按鈕。

盒裝與全寬

優(yōu)化 DOM 大小的另一種方法是區(qū)分盒裝容器和全寬容器。

盒裝容器具有最大寬度，因此需要在 Elementor 中使用內(nèi)部元素<div>。另一方面，向兩側(cè)拉伸的全寬容器因此只需要一個<div>元素。

盒裝結(jié)構(gòu)：

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

全寬結(jié)構(gòu)：

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

優(yōu)化嵌套容器結(jié)構(gòu)

現(xiàn)在了解了盒裝容器和全寬容器的不同 HTML 結(jié)構(gòu)，可以開始優(yōu)化我們網(wǎng)站的 DOM 輸出，尤其是嵌套其他容器的容器。

下一個優(yōu)化技巧如下：如果有一個使用盒裝寬度的父容器，則可以使所有嵌套容器都具有全寬。這樣，你可以獲得相同的設(shè)計(jì)，但 HTML 更少。

<div class="e-con e-con-parent">
	<div class="e-con-inner">

		<div class="e-con e-con-child">
			…
		</div>

		<div class="e-con e-con-child">
			…
		</div>

	</div>
</div>

上面的 HTML 結(jié)構(gòu)有一個帶框的父容器。如果兩個子容器也帶框，則每個容器將由兩層<div>元素組成。但如果它們是全寬的，則只會<div>使用一個。

再次強(qiáng)調(diào)，只有當(dāng)父容器被裝箱時，此優(yōu)化才有效。

結(jié)論

如你所見，有三種簡單的策略可以優(yōu)化布局元素的 DOM 大小：用容器替換部分/列布局元素；帶有單個嵌套容器的容器可以展平；如果使用嵌套容器并且父容器是盒裝的，要將所有內(nèi)部容器設(shè)置為全寬。這些策略可以幫助<div>從網(wǎng)站的 HTML 中消除大量不必要的元素，并提高網(wǎng)頁的整體性能。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息