新兴的前端框架-Svelte

Svelte是一个新兴的前端框架，以其编译时优化机制而著称，能够在构建时将复杂的UI逻辑转换为高效的JavaScript代码，从而实现高性能的Web应用。

官网：Svelte 中文文档 | Svelte 中文网

1. 核心理念：Svelte的核心理念是将复杂性从运行时转移到编译时。这意味着在开发阶段，Svelte会分析组件的声明，并将其转换为最小化的、优化过的JavaScript，这些JavaScript在用户浏览器中运行时具有极高的效率。

2. 性能：Svelte显示了很好的运行时性能。JavaScript数据趋势也显示，这个框架特别适合中小型项目。

3. 语法：Svelte的语法简单明了，可读性强。而且，Svelte应用程序不需要太多的模板。

4. 架构概览：Svelte架构主要包括Svelte编译器，它负责将.svelte文件转换为.js文件，创建DOM和.css文件来设置其样式。

5. Svelte vs 其他框架：

   • 与Vue相比，Svelte的模板更接近原生HTML，且支持计算属性和条件语句。Svelte的体积比Vue小得多，因为它的大部分优化发生在编译时。
   • 与Angular相比，Svelte的学习曲线更平缓，其语法更直观，不需要理解指令和模块等概念。Svelte的编译时优化使其在运行时性能上优于Angular。

6. 应用场景：

   • 对于小型项目，Svelte的轻量级和高性能特性使其成为理想的选择。
   • Svelte同样适用于构建单页应用（SPA），其高效的更新机制和响应式系统确保了流畅的用户体验。

7. SvelteKit：SvelteKit是Svelte团队的官方应用框架，它将处理调用Svelte编译器，创建DOM和CSS文件，并提供开发服务器、路由、部署和SSR支持。SvelteKit使用Vite来构建代码。

8. 最新动态：Svelte 4已经发布，带来了性能提升、开发者体验改进和站点更新。Svelte 5也在积极开发中，将带来重大的新特性和性能改进。

9. Svelte 5：Svelte 5将是Svelte编译器和运行时的重写，Svelte 4主要是为了未来的改进做准备，通过采用现代工具和放弃对一些旧版本的支持。

Svelte处理组件的更新和重绘

1. 声明式更新： Svelte使用声明式更新来追踪和管理组件的状态变化。当数据改变时，Svelte会自动计算受影响的部分，只更新必要的DOM节点，避免了不必要的DOM操作。这种方式减少了运行时的开销，提高了性能。

2. 模板内联： Svelte在编译时将模板内联到JavaScript中，这样在运行时就无需额外的模板解析步骤，提高了性能。

3. 计算属性缓存： Svelte会对计算属性进行缓存，只有当依赖的响应式变量发生变化时，才会重新计算，这样可以避免不必要的计算和DOM更新。

4. 响应式系统： Svelte的响应式系统跟踪组件内数据的变化，自动更新相关视图。Svelte不依赖于虚拟DOM，而是使用编译器将组件转换为JavaScript，这个JS代码会非常高效。

5. 差异算法： 当组件状态发生变化时，Svelte会生成一个新的组件实例，并使用差异算法比较新旧组件实例的DOM结构，然后更新需要更改的部分。这种方法减少了比较的复杂性和DOM操作的数量。

6. 使用key标记DOM： Svelte使用“key”属性来帮助识别相同类型的元素。当Svelte在比较新旧DOM树时遇到相同类型的元素时，它会使用“key”属性来判断这些元素是否相同，并避免进行不必要的更新。

7. 合并DOM（移位算法）： Svelte会尝试合并DOM更新，使用移位算法来减少不必要的DOM操作，提高性能。

8. 减少DOM操作： Svelte通过编译时优化减少了运行时的DOM操作，这是其性能优势的主要来源之一。

9. 缓存DOM： Svelte会缓存DOM，减少重复的DOM操作，提高性能。

Svelte响应式系统工作方式

1. 响应式变量（Reactive Variables）： Svelte允许你定义响应式变量，这些变量可以是简单的值，也可以是对象或数组。当你在组件中使用这些变量，并且它们的值发生变化时，Svelte会自动重新渲染组件。

   javascript

   <script>
     import { reactive } from 'svelte';
     const count = reactive(0);
     // 当count的值发生变化时，重新渲染组件
     $: if (count > 5) {
       console.log('Count is greater than 5');
     }
   </script>

2. 编译时追踪： Svelte的响应式系统在编译时工作，它会分析你的组件代码，并生成一个依赖于响应式变量的高效JavaScript代码。这意味着Svelte会在构建时就知道哪些部分的UI依赖于哪些状态，从而在状态变化时只更新必要的部分。

3. $: 反应性声明： Svelte提供了$:语法，允许你编写反应性声明，这些声明会在依赖的响应式变量变化时执行。这类似于Vue中的计算属性。

   javascript

   <script>
     let count = 0;
     $: doubled = count * 2;
     function handleClick() {
       count += 1;
     }
   </script>

4. 依赖收集和变化侦测： Svelte通过编译时的静态分析来收集依赖，并在运行时使用这些信息来侦测变化。当响应式变量被修改时，Svelte会通知所有依赖于这些变量的组件进行更新。

5. 批量更新和脏检查（Dirty Checking）： Svelte使用一个脏检查机制来确定何时需要更新组件。当一个响应式变量变化时，Svelte会将依赖于这个变量的组件标记为“脏”（dirty），然后在下一个事件循环中批量更新这些组件。

6. Bitmask优化： Svelte使用位掩码（bitmask）技术来高效地跟踪哪些响应式变量已经变化，这减少了内存使用并提高了更新效率。

7. 响应式API： Svelte提供了一系列的响应式API，如$state、$derived和$effect，这些API使得创建响应式变量、计算属性和副作用变得更加简单。

原文地址：https://blog.csdn.net/qq_35876316/article/details/143427008

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！