【IT168 专稿】
让UI加载速度更快
在无需回传的情况下,基于AJAX的网站几乎都是尽可能地加载很多特性到浏览器内。如果你看下Pageflakes站点的起始页,就会发现在不发生回传的情况下,仅仅一个单一的页面就加载整个应用程序的所有特性。
第一篇:ASP.NET性能提升秘诀之管道与进程优化
第二篇:ASP.NET性能提升之站点部署与内容传输
第三篇:ASP.NET性能提升之浏览器缓存的调用
实现这一功能的一个快速方法就是在页面加载期间,传递尽可能多的HTML片段到隐藏的DIVs中,然后在需要的时候使这些DIVs可见。但是这会使得第一次加载变得非常慢并且会导致浏览器处理大量信息而降低性能。因此,一个较好的方法就是按需加载HTML片段以及一些必须的JavaScript代码。在我的dropthings工程中,我展示了一个如何实现这一功能的示例。
当你点击“帮助”链接时,系统会动态地加载帮助内容。这段HTML并不是从default.aspx 页面的一部分派生而来呈现第一个页面的。因此,在站点加载性能上,大量的HTML和相关的图像对于帮助节没有影响。仅当用户点击“帮助”链接时进行加载。此外,内容会缓存到浏览器上,因此仅仅加载一次即可。当用户再次点击“帮助”链接时,系统会直接从浏览器缓存中提取内容,而不是再次从源服务器上去读取数据。
其原理就是对调用的*.aspx 页面发出XMLHTTP,再获得响应的HTML,将响应的HTML放置到一个DIV容器中,使得DIV可见。
AJAX框架有一个 Sys.Net.WebRequest类,你可以使用它进行规则的HTTP调用。你可以定义HTTP方法,URI,调用的头和主体。通过XMLHTTP直接调用适合于一些低级别的功能。一旦你构建了一个Web请求,你就可以使用Sys.Net.XMLHttpExecutor执行。
{
var request = new Sys.Net.WebRequest();
request.set_httpVerb("GET");
request.set_url('help.aspx');
request.add_completed( function( executor )
{
if (executor.get_responseAvailable())
{
var helpDiv = $get('HelpDiv');
var helpLink = $get('HelpLink');
var helpLinkBounds = Sys.UI.DomElement.getBounds(helpLink);
helpDiv.style.top = (helpLinkBounds.y + helpLinkBounds.height) + "px";
var content = executor.get_responseData();
helpDiv.innerHTML = content;
helpDiv.style.display = "block";
}
});
var executor = new Sys.Net.XMLHttpExecutor();
request.set_executor(executor);
executor.executeRequest();
}