performance - DOJO WidgetList 和 InlineTemplate 真的很慢

Question

我的一个自定义 dojo 小部件有问题。

我正在使用 MVC 结构来构建我的小部件，并且还使用了 dojo 的 dojox/mvc 功能。

我有一个包含 WidgetList 和 InlineTemplate 的模板。

我的问题是，当商店里面有超过 50 件商品时，它会很慢。

有时需要 15 秒才能在屏幕上显示渲染数据。

有没有人遇到过这个问题，如果有，您是如何解决的？

如果您需要更多信息，请询问我。

编辑：

这是带有 WidgetList 和 InlineTemplate 的模板：

如果您看到不应该在这里的东西，请告诉我！

<div>
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div class="container-fluid">
    <div class="row-fluid" id="flaggedWidgetList2">
        <div>
            <h3>Test 1</h3>
        </div>
        <div data-dojo-type="dojox/mvc/WidgetList"
            data-dojo.attach-point="flaggedPoint"
            data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
            data-dojo-props="children: at(this.controller.model.listItems, 'Items')">
            <script type="dojox/mvc/InlineTemplate">
               <div class="row-fluid" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
                <div class="row-fluid itemRow">
                    <div class="span1" style="float: left;">
                        <input class="span3" type="checkbox" style="float: left;" />
                        <span class="dateRecieved span9" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                    </div>
                    <div class="span1" style="float: left;">
                        <span class="span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                    </div>
                    <div class="span10" style="float: left;">
                        <div class="row-fluid">
                            <span class="from span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                            <span class="docId span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                        </div>
                        <div class="row-fluid">
                            <span class="title span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                        </div>
                        <div class="row-fluid">
                            <span class="span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
                            <span class="deadline span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                     <div class="span10 offset2" data-dojo-type="DTWidgets/ActionsMenu/ActionMenu" data-dojo-attach-point="itemId" data-dojo-props="itemId: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'itemId'}"">
                    </div>
                </div>
                </div>
            </script>
        </div>
    </div>
</div>

谢谢，

梭伦

score 0 · Accepted Answer

dojox/mvc/WidgetList是基于的dijit/_Container，而子元素的添加是通过它的来完成的addChild()，它使用domConstruct.place(). 当子级基于时dijit/_WidgetsInTemplateMixin，即dojox/mvc/_InlineTemplateMixin使用中的情况，会dojo/parser针对每个子级运行以实例化模板中的小部件。

我认为这两个是考虑性能的主要部分dojox/mvc/WidgetList。前者（调用addChild()）是在dojox/mvc/WidgetList代码中完成的，后者（在模板中实例化小部件）是在dijit/_WidgetsInTemplateMixin代码中完成的，因此您可能需要仔细查看它们的每次迭代需要多长时间，例如使用performance.now()API等。视情况而定，可能需要更深入地挖掘，例如，使用Chrome 开发者工具的时间线面板。

下面的代码可能会有所帮助，尽管渲染子小部件并不需要很长时间：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            @import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css";
            @import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css";
        </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" 
            data-dojo-config="parseOnLoad: 0, async: 1"></script>
        <script type="text/javascript">
            require([
                "dojo/_base/array",
                "dojo/parser",
                "dojo/when",
                "dojo/Stateful",
                "dojox/mvc/StatefulArray",
                "dojo/domReady!"
            ], function(array, parser, when, Stateful, StatefulArray){
                model = new Stateful({items: []});
                when(parser.parse(), function(){
                    model.set("items", new StatefulArray(array.map(new Array(50), function(){
                        return new Stateful({
                            notRead: 1,
                            cssClass: "cssClass",
                            DateReceived: "DateReceived",
                            PriorityFlag: 1,
                            Sender: "Sender",
                            AttachmentNumber: 1,
                            Title: "Title",
                            WobNum: 1,
                            AttachmentType: "AttachmentType",
                            Deadline: "Deadline"
                        });
                    })));
                });
            });
        </script>
    </head>
    <body>
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div>
            <div>
                <div data-dojo-type="dojox/mvc/WidgetList"
                    data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
                    data-dojo-props="children: at(model, 'items'), partialRebuild: 1">
                    <script type="dojox/mvc/InlineTemplate">
                        <div>
                            <div data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
                            <div> 
                                <div>
                                    <input type="checkbox" />
                                    <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                </div>
                                <div>
                                    <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                </div>
                                <div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                    </div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                    </div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

希望那些帮助。

最好的，阿基拉

performance - **DOJO** WidgetList 和 InlineTemplate 真的很慢

1 回答 1

Related

Reference

performance - DOJO WidgetList 和 InlineTemplate 真的很慢