这是我对DOM和浏览器如何工作的幼稚理解
每当DOM中的某些内容(真实dom)更改时,浏览器就会重新绘制或重排该DOM。因此,用更简单的术语来说,每次DOM更改时,浏览器都需要重新计算CSS,进行布局并重新绘制网页。这是在真正的dom中花费时间的原因。
因此,React附带了这个虚拟DOM,它的实际作用是将更改批量进行批处理,然后调用一次将它们应用于实际域。因此,最大程度地减少了重焊和重绘(repaint)。
那斯维尔特呢。如果直接操作DOM,它将如何控制浏览器的重绘/重排。
最佳答案
除了上面的(正确)答案之外:Svelte还可以“编译”您提供给它的代码,因此最终代码可以在没有库运行时的情况下执行(与React相比)。而且它创建了可读性强的代码,因此绝对有可能了解其内部工作原理。
注意:这将是更长的答案-仍然遗漏了有关斯维尔特(Svelte)背后发生的事情的许多详细信息。但是,我希望这有助于揭开某些幕后神秘面纱。同样,这也是Svelte从v3.16.x起执行操作的方式。由于这是内部的,因此可能会更改。但是,我仍然发现了解实际情况总是很有意义的。
所以,我们开始。
最重要的是: Svelte教程具有一项有用的功能,可让您查看生成的代码(在“结果” Pane 旁边)。乍一看可能有点吓人,但很快您就可以掌握它了。
下面的代码将基于此示例(但经过进一步简化):Svelte tutorial - reactivity/assignments
我们的示例组件定义(即App.svelte)如下所示:
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>{count}</button>
基于此组件定义,Svelte编译器创建一个函数,该函数将创建一个“片段”,该片段接收“上下文”并与之交互。
function create_fragment(ctx) {
let button;
let t;
let dispose;
return {
c() {
button = element("button");
t = text(/*count*/ ctx[0]);
dispose = listen(button, "click", /*handleClick*/ ctx[1]);
},
m(target, anchor) {
insert(target, button, anchor);
append(button, t);
},
p(ctx, [dirty]) {
if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]);
},
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(button);
dispose();
}
};
}
片段负责与DOM交互,并将随组件实例一起传递。简而言之,其中的代码
注意:像element或set_data这样的函数实际上非常容易实现。
例如,function元素只是document.createElement的包装:
function element(name) {
return document.createElement(name);
}
上下文(ctx)将保存所有实例变量以及函数。它不过是一个简单的数组。由于Svelte在编译时“知道”每个索引的含义,因此它可以在其他地方硬引用这些索引。
这段代码实质上定义了实例上下文:
function instance($$self, $$props, $$invalidate) {
let count = 0;
function handleClick() {
$$invalidate(0, count += 1);
}
return [count, handleClick];
}
实例方法以及create_fragment都将从另一个函数调用init调用。它涉及更多的内容,因此您可以查看此link to the source,而不是在此处复制和粘贴。
$$ invalidate将确保将count变量设置为脏变量并安排更新。当下一次更新运行时,它将查看所有“脏”组件并进行更新。这是如何发生的实际上更多是实现细节。如果有兴趣,请在flush function中设置一个断点。
实际上,如果您真的想更深入一点,我建议克隆template应用程序,然后创建一个简单的组件,对其进行编译,然后检查“bundle.js”。如果删除源映射或将其禁用,也可以调试实际代码。
因此,例如,如下设置rollup.config.js:
output: {
sourcemap: false,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
dev: false,
注意:如上所示,建议将开发人员模式也设置为false,因为这将创建更简洁的代码。
一项简洁的功能:运行我们的应用程序后,您还可以访问应用程序变量(由于它被绑定(bind)为立即调用的函数表达式,因此已分配给全局窗口对象)。
因此,您可以打开控制台并简单地说
console.dir(app)
会产生这样的东西
App
$$:
fragment: {c: ƒ, m: ƒ, p: ƒ, i: ƒ, o: ƒ, …}
ctx: (2) [0, ƒ]
props: {count: 0}
update: ƒ noop()
not_equal: ƒ safe_not_equal(a, b)
bound: {}
on_mount: []
on_destroy: []
before_update: []
after_update: []
context: Map(0) {}
callbacks: {}
dirty: [-1]
__proto__: Object
$set: $$props => {…}
一个很酷的功能是,您可以自己使用$ set方法来更新实例。例如这样:
app.$set({count: 10})
还有Svelte DevTools试图使Svelte的内部结构更加平易近人。当我亲自试用它们时,它们似乎会以某种方式影响我的应用程序的渲染性能,因此我不会自己使用它们。但是肯定值得一看。
好吧,那里有。我知道这仍然是技术性的,但是我希望它有助于更好地了解Svelte编译代码的功能。
关于javascript - SvelteJS与ReactJS渲染差异(重绘/重排),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58902385/