Mithril单页应用开发：首次操作时阻止重绘的技术问询

处理大型JSON数据时，避免不必要的自动重绘确实能有效提升初始化阶段的性能。Mithril默认会跟踪m.request这类异步操作，并在请求完成后自动触发重绘——这正是你需要禁用的行为。下面是两种可靠的实现方式：

方法1：使用background: true参数（推荐） #

Mithril的m.request内置了background配置项，设置为true时，该请求不会被纳入自动重绘的触发队列，完全由你手动控制重绘时机。

修改你的代码如下：

var Data = {
    fetch: function () {
        m.request({ 
            method: "GET", 
            url: "/api/read",
            background: true // 核心配置：阻止Mithril自动触发重绘
        })
            .then(function (items) {
                // 在这里安心处理大型数据，比如初始化模型
                // 如果后续需要更新视图，再手动调用重绘：
                // m.redraw();
            });
    }
}

// 其余组件代码保持不变
var Home = {
    oninit: Data.fetch,
    view: function (vnode) {
        return m("div", [components]);
    }
}

var root = document.getElementById("main");
m.route(root, "/", { "/": Home });

为什么推荐这个方法？ #

• 语义清晰：明确告诉Mithril这是一个“后台”请求，不需要自动同步视图
• 侵入性低：仅需修改请求配置，无需改动其他组件逻辑
• 灵活性高：后续需要更新UI时，直接调用m.redraw()即可触发重绘

方法2：手动管理计算周期（兼容旧版Mithril） #

如果你需要兼容Mithril旧版本，可以用m.startComputation()和m.endComputation()手动控制异步操作的生命周期——只要不调用m.endComputation()，Mithril就不会触发自动重绘：

var Data = {
    fetch: function () {
        m.startComputation(); // 标记启动一个异步计算
        m.request({ 
            method: "GET", 
            url: "/api/read"
        })
            .then(function (items) {
                // 处理大型数据
                // 注意：不要调用m.endComputation()，避免触发自动重绘
            });
    }
}

重要注意事项 #

• 若后续需要将数据同步到视图，务必手动调用m.redraw()，否则数据变化不会反映到UI上
• 处理大型JSON时，建议在then回调中先做数据预处理（比如分页、过滤、格式转换），避免在视图层处理大量数据导致卡顿

内容的提问来源于stack exchange，提问作者RekaB