像React，Angular和Vue一樣，Svelte是JavaScript組件庫(kù)。但是，其核心區(qū)別是：

1. 提前編譯： Svelte充當(dāng)編譯器，將其混合HTML，JavaScript和CSS代碼轉(zhuǎn)換為優(yōu)化的JavaScript，HTML和CSS文件。這種預(yù)譯本類似於c＃to bytecode或typescript到j(luò)avaScript，但涵蓋了所有三種語(yǔ)言，通過(guò)將計(jì)算從運(yùn)行時(shí)轉(zhuǎn)換為構(gòu)建時(shí)間來(lái)增強(qiáng)靈活性和客戶端性能。

2. 沒有虛擬DOM：傳統(tǒng)框架利用虛擬DOM，即DOM的內(nèi)存駐留副本，以進(jìn)行有效的更新。 Svelte繞過(guò)這一點(diǎn)，直接操縱真實(shí)的DOM。雖然虛擬DOMS提供優(yōu)化，但Svelte的方法及其構(gòu)建時(shí)間計(jì)算進(jìn)行了手術(shù)應(yīng)用更改，從而導(dǎo)致潛在的性能增長(zhǎng)，尤其是在較大的應(yīng)用程序中。

3. 內(nèi)置CSS範(fàn)圍： Svelte的集成樣式避免了CSS-IN-JS解決方案的複雜性。它隔離組件CS，將其輸出到構(gòu)建過(guò)程中分離文件，從而促進(jìn)清潔，封裝的樣式。儘管Sass和Simel等預(yù)處理器存在插件，但Svelte的本機(jī)CSS處理非常有效且直接。

Svelte vs.其他框架

Svelte的獨(dú)特體系結(jié)構(gòu)影響了其性能和開發(fā)人員的經(jīng)驗(yàn)。儘管存在許多比較，但其速度是一個(gè)重要的優(yōu)勢(shì)。但是，速度不是唯一的指標(biāo)。下表提供了更廣泛的比較：

[根據(jù)原始文本的表格描述，將SVELTE與其他框架進(jìn)行比較的表格將進(jìn)入這裡。高開發(fā)人員的滿意度與“三巨頭”框架中最近觀察到的最新下降形成對(duì)比。它的開源性質(zhì)是一項(xiàng)相當(dāng)大的資產(chǎn)。

一個(gè)實(shí)用的苗條示例：交叉觀察者

為了說(shuō)明Svelte的實(shí)用性，讓我們實(shí)現(xiàn)一個(gè)交叉觀察者，這是一種避免被動(dòng)滾動(dòng)事件問(wèn)題的增強(qiáng)性能提高技術(shù)。我們將利用Svelte的REPL進(jìn)行簡(jiǎn)化的示例。

設(shè)置一個(gè)基本的Svelte項(xiàng)目（省略了簡(jiǎn)潔的詳細(xì)信息）後，在src/components文件夾中創(chuàng)建IntersectionObserver.svelte 。

從'svelte'導(dǎo)入{onmount};
導(dǎo)出讓一次= false;
導(dǎo)出令top = 0;
導(dǎo)出讓底部= 0;
導(dǎo)出讓左= 0;
導(dǎo)出讓正確= 0;
讓相交= false;
讓容器;

onmount（（）=> {
    if（typeof IntersectionObserver！=='undefined'）{
      const rootmargin =`$ {bottom} px $ {left} px $ {top} px $ {right} px`;
      cont observer = new IntersectionObserver（entries => {
        相交=條目[0] .Isintersing;
        if（相交&&一次）{
          observer.unobserve（容器）;
        }
        }，{
          rootmargin
      }）;
        observer.observe（容器）;
        return（）=> observer.unobserve（容器）;
  }

  功能處理程序（）{
    const bcr = container.getBoundingClientRect（）;
    相交=（（
      （bcr.bottom底部）> 0 &&
      （bcr.right對(duì)）> 0 &&
      （bcr.top-頂）<window.innerheight if window.removeeventlistener window.addeventlistener> window.removeeventlistener（'scroll'，handler）;
  }）;

  div {
    寬度：100％；
    身高：100％；
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

在您的主要App.svelte文件中，導(dǎo)入並使用該組件：

從“ ./components/intersectionobserver.svelte”導(dǎo)入IntersectionObserver；

<intersectionobserver let:intersecting top="{400}">
  {#if相交}
    <div class="content">此消息顯示在相交時(shí)。</div>
  {：別的}
    <div class="content">此消息否則顯示。</div>
  {/如果}
</intersectionobserver>

<style>
  /* ...styles as in original article... */
</style>

這證明了IntersectionObserver如何充當(dāng)包裝器，並根據(jù)元素相交觸發(fā)動(dòng)作。 onMount函數(shù)確保瀏覽器特定的代碼執(zhí)行。添加CSS（如原始文章所示）完成了示例。

結(jié)論

Svelte為已建立的框架提供了令人信服的替代方案。它的性能，易用性和乾淨(jìng)的方法使其成為強(qiáng)大的競(jìng)爭(zhēng)者。儘管其較小的社區(qū)提出了潛在的挑戰(zhàn)，但其成熟度和開源性質(zhì)減輕了風(fēng)險(xiǎn)。在大規(guī)模採(cǎi)用之前，建議對(duì)非關(guān)鍵項(xiàng)目進(jìn)行實(shí)驗(yàn)。

Svelte生態(tài)系統(tǒng)包括Sapper（用於完整的Web應(yīng)用程序）和Svelte Antial（用於移動(dòng)應(yīng)用程序），以擴(kuò)展其功能?？紤]一下Svelte的性能優(yōu)勢(shì)和對(duì)開發(fā)人員友好的設(shè)計(jì)。

以上是結(jié)識(shí)了Skvelte，這是街區(qū)上的新框架的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！