tag:blogger.com,1999:blog-34704862939155330832024-03-13T06:27:49.584-07:00Java Web developmentthis blog is about java web development, web optimization and java hosting.Anonymoushttp://www.blogger.com/profile/03135694050403488903noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-3470486293915533083.post-30119334123194616062011-12-29T03:30:00.000-08:002011-12-29T13:50:20.235-08:00Spring 3 mvc, web page resource loading optimization<div dir="ltr" style="text-align: left;" trbidi="on">
I was working on page loading optimization and found good tools and code to improve page loading speed.<br />
<br />
Tools: Firefox YSlow, FireBug, Chrom, Chrom plugin PageSpeed
this is how usually looks web page loading in chrom or firefox for java web application. It is because we render page after servlet or action processed request.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-XUdpqN-RrB4/TvxL7O1phYI/AAAAAAAACDc/VMM6iyJ6kgY/s1600/google-not-good-page-loading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="http://3.bp.blogspot.com/-XUdpqN-RrB4/TvxL7O1phYI/AAAAAAAACDc/VMM6iyJ6kgY/s320/google-not-good-page-loading.png" width="320" /></a></div>
<br />
That means browser will spend some time on loading resources from your html. It could be 200 ms or it could 500 ms.<br />
<br />
Solution is to send send html header part to browser as early as possible.
In Spring 3 mvc xml add interceptor for all your pages.
<br />
<b>Spring 3 MVC xml changes:
</b><br />
<pre class="brush: xml">
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/word/*">
<bean class="com.wdict.web.controller.HeaderInterceptor" id="interceptor.header"></bean>
</mvc:interceptor>
</mvc:interceptors>
</pre>
<br />
<b>Interceptor code:</b>
<br />
<pre class="brush: java; ">
public class HeaderInterceptor implements HandlerInterceptor{
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
ServletContext context = request.getSession().getServletContext();
String url = response.encodeRedirectURL("/WEB-INF/tags/header.jsp");
RequestDispatcher dispatcher = context.getRequestDispatcher(url);
/* must use include. With forward the RequestDispatcher seems to hold an internal state
which prevents to do a forward after this to return to the webclient */
response.setContentType("text/html; charset=UTF-8");
dispatcher.include(request, response);
response.flushBuffer();
return true;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
}
}
</pre>
After this coding page loading will look like this
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-YOqMuhRP-1w/TvxJsBEq10I/AAAAAAAACDQ/TQCrX35BxDY/s1600/google-page-loading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="274" src="http://3.bp.blogspot.com/-YOqMuhRP-1w/TvxJsBEq10I/AAAAAAAACDQ/TQCrX35BxDY/s320/google-page-loading.png" width="320" /></a></div>
</div>Anonymoushttp://www.blogger.com/profile/03135694050403488903noreply@blogger.com5