我有一个显示自定义tweeter Feed列表的视图,例如小部件。以下是小部件的模板:
<!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>
我正在使用以下内容来填充视图:
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));
平均而言,我看到在页面上呈现每个小部件大约300多毫秒。在300毫秒中,280+用于创建该模板。从模板创建窗口小部件似乎太长时间了。任何帮助将不胜感激。