GWT自定义小部件创建时间过长

我有一个视图，它显示了一个自定义tweer提要类小部件的列表。以下是小部件的模板：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
            xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style type="com.ziplly.app.client.widget.TweetWidget.Style"
            src="tweetwidget.css">
    </ui:style>
    <ui:with type="com.ziplly.app.client.resource.ZResources" field="resources"/>

    <g:HTMLPanel ui:field="tweetPanel" addStyleNames="{style.tweetPanel}">
            <div class='{style.tweet_block}'>
                    <div class='{style.tweet_image}'>
                            <b:Image ui:field="authorImage" />
                    </div>
                    <div class='{style.tweet_content_section}'>
                            <div class="{style.tweetActionDropdown}">
                                    <b:Dropdown text="edit">
                                            <b:NavLink ui:field="editTweetLink">Edit</b:NavLink>
                                            <b:NavLink ui:field="deleteTweetLink">Delete</b:NavLink>
                                            <b:NavLink ui:field="reportSpamLink">Report Spam</b:NavLink>
                                    </b:Dropdown>
                            </div>
                            <div class="{style.tweet_content}">
                                    <span class='{style.tweet_text}' ui:field="tweetContentSpan" />
                                    <b:TextArea ui:field="tweetContentTextArea"
                                            addStyleNames="{style.tweetContentTextArea}" />
                                    <g:HTMLPanel ui:field="tweetEditButtonPanel">
                                            <b:Button type="PRIMARY" size="SMALL" ui:field="saveBtn">save</b:Button>
                                            <b:Button size="SMALL" ui:field="cancelBtn">cancel</b:Button>
                                    </g:HTMLPanel>
                            </div>
                            <div class='tweet_actions'>
                                    <div>
                                            <div class='{style.tweet_action_link}'>
                                                    <g:Anchor ui:field="likeTweetLink" addStyleNames="{style.smalltext}">Like</g:Anchor>
                                            </div>
                                            <div class='{style.tweet_action_link}'>
                                                    <g:Anchor ui:field="commentLink" addStyleNames="{style.smalltext}">Comment</g:Anchor>
                                            </div>
                                            <div class='{style.tweet_sender_link}'>
                                                    posted by
                                                    <g:Anchor ui:field="authorProfileLink">
                                                            <span class="smalltext" ui:field="authorName" />
                                                    </g:Anchor>
                                                    on
                                                    <span ui:field="timeCreated" />
                                            </div>
                                    </div>
                            </div>
                    </div>
            </div>
            <g:HTMLPanel addStyleNames="{style.people_liked_section}" ui:field="tweetLikePanel">
            </g:HTMLPanel>
            <div class="{style.commentSectionDiv}">
                    <g:HTMLPanel addStyleNames="{style.tweetCommentSection}" ui:field="tweetCommentSection">
                    </g:HTMLPanel>
                    <g:HTMLPanel>
                            <b:TextArea ui:field="commentInputTextBox" addStyleNames="{style.commentInputTextBox}" />
                            <div class="{style.commentInputActionSection}">
                                    <b:Button type="PRIMARY" size="SMALL" ui:field="commentBtn">comment</b:Button>
                                    <b:Button size="SMALL" ui:field="cancelCommentBtn">cancel</b:Button>
                            </div>
                    </g:HTMLPanel>
            </div>
    </g:HTMLPanel>
</ui:UiBinder> 

---

平均来说，我看到在页面上呈现每个小部件大约需要300多毫秒。在300毫秒中，需要280+来创建该模板。从模板创建小部件的时间似乎太长了。任何帮助都将不胜感激。

不要在开发模式下衡量性能，尤其是在Chrome中！Dev模式完成了生产代码中永远不会发生的所有工作。只测量已编译的Javascript以获得良好的计时。感谢您的提示，我将在外部服务器中评测该应用程序。不需要外部服务器，只需编译为JS并在本地运行，无需开发模式。要使用浏览器自己的探查器，请使用style=PRETTY进行编译，以查看哪些函数调用很慢（如果有）。

final long time1 = System.currentTimeMillis();
for (final TweetDTO tweet : tweets) {
    final long time11 = System.currentTimeMillis();
    final TweetWidget tw = new TweetWidget();
    tw.setWidth(tweetWidth);
    final long time12 = System.currentTimeMillis();
    tw.setPresenter(presenter);
    tw.displayTweet(tweet);
    final long time13 = System.currentTimeMillis();
    communityWallPanel.add(tw);
    final long time14 = System.currentTimeMillis();

    System.out.println("Time to create tweet widget: " + (time12 - time11) + " to render: " + (time13 - time12) + " to addToPanel: " + (time14 - time13));
    tweetWidgetMap.put(tweet.getTweetId(), tw);
}

final long time2 = System.currentTimeMillis();
System.out.println("Time to render wall: " + (time2 - time1));