Performance **DOJO**WidgetList和InlineTemplate在_Performance_Widget_Dojo

Performance **DOJO**WidgetList和InlineTemplate在

performance dojo

Performance **DOJO**WidgetList和InlineTemplate在,performance,widget,dojo,Performance,Widget,Dojo,我的一个自定义dojo小部件出现问题我使用MVC结构来构建我的小部件，并且我还使用dojo的dojox/MVC功能我有一个包含WidgetList和InlineTemplate的模板我的问题是，当商店里有50多种商品时，速度会非常慢有时需要15秒才能在屏幕上显示渲染数据有没有人遇到过这个问题？如果有，你是如何解决的如果你需要更多的信息，请问我编辑：这是包含WidgetList和InlineTemplate的模板：如果你看到不应该在这里的东西，请告诉我 <div> &

我的一个自定义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>


at:“dojox/mvc/at”
测试1
[]
dojox/mvc/WidgetList
基于，子元素的添加通过其addChild（）
完成，它使用。当子项基于时，即使用dojox/mvc/_InlineTemplateMixin
时，对每个子项运行以实例化模板中的小部件
我认为这两个部分是考虑dojox/mvc/WidgetList

性能的主要部分。前者（调用

addChild（）

）已经完成，而后者（在模板中实例化小部件）已经完成，因此您可能需要更仔细地了解它们的每次迭代需要多长时间，例如使用等。根据具体情况，可能需要更深入地挖掘，例如使用

下面的代码可能有助于入门，尽管呈现子窗口小部件并不需要很长时间：

<!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>


@导入“//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css”；
@导入“//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css”；
要求([
“dojo/_基/阵列”，
“dojo/parser”，
“dojo/when”，
“dojo/Stateful”，
“dojox/mvc/StatefulArray”，
“dojo/domReady！”
]，函数（数组、解析器、when、Stateful、StatefulArray）{
模型=新的有状态（{items:[]}）；
当（parser.parse（），function（）时）{
model.set（“items”，新StatefulArray（array.map）（新数组（50），函数（）{
返回新状态({
notRead:1，
cssClass：“cssClass”，
DateReceived:“DateReceived”，
优先标志：1，
发送者：“发送者”，
附件编号：1，
标题：“标题”，
沃布纳姆：1，
AttachmentType:“AttachmentType”，
截止日期：“截止日期”
});
})));
});
});
at:“dojox/mvc/at”
[]

希望这些帮助

最好的，

Akira

仔细安排时间，找出占用时间的原因，然后发布代码。@PaulGrime我用开发工具中的IE9“Profile”和“Network”尝试过这样做（由于跨域web服务调用，我现在无法使用任何其他浏览器），我只看到来自未指定来源的等待时间。我会编辑上面的帖子，以显示模板，如果你看到任何可能导致这一点，请让我知道。感谢您创建一个JSFIDLE来显示问题？基于我的小部件构建（MVC）的方式，我无法创建JSFIDLE