锁定老帖子 主题:提升Web应用程序性能的最佳实践
精华帖 (5) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-03-06
本文节选自IBM developerWorks 提升Web应用程序的性能的系列文章,该文通过Web应用程序性能的最佳实践案例,帮助开发者更好地理解影响Web应用程序性能的因素,学习如何诊断Web应用程序中的性能问题,找到客户端内容中的瓶颈,并确定解决方案。 一、提升Web应用程序性能的6种基本方式 1.减少HTTP请求数 每个HTTP请求都有开销,包括查找DNS、创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销。要减少请求数: 2.后置加载组件 只呈现需要的组件;其余可等待。最好不要一次呈现太多组件。 某些情况下,可使用后置加载。由于浏览器可视区域外的组件可以后置加载,当这些组建进入可视区域不久后,初始呈现就会失效。 有些JavaScript可以在onload事件后后置加载,如JavaScript中初始呈现后拖动某个元素。 3.前置加载组件 通过前置加载组件,可以利用浏览器的空闲时间请求将来会用到的组件(如图像、样式和脚本)。当用户访问下个页面时,如果大多数组件都已在缓存中加载,那页面加载会快得多。 有两种前置加载: 无条件:一旦触发onload,就取得一些额外组件。 有条件:根据用户的动作,推测用户下一步的方向并进行相应的前置加载。 4.将脚本放在底部 脚本可能会产生问题,因为它们可能会阻碍并行下载。当下载脚本时,浏览器不会再启动其他下载,即使那些位于不同主机。将脚本,如样式表,放在底部,以保证它们在其他下载完成后再下载。 也可以使用延时脚本,这只有Internet Explorer支持。DEFER属性表示脚本不含document.write()。这就告诉浏览器他们可以持续呈现。 5.使用无cookie域组件 当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 6.将JavaScript和CSS放在外部 现实世界中使用外部文件通常会使页面运行更快,因为JavaScript和CSS文件被浏览器缓存。HTML文档内的JavaScript和CSS会在每次请求HTML文档时被下载。这减少了需要请求的HTTP的数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS在被浏览器缓存的外部文件中,就会减小HTML文档大小,而不会增加请求数。 二、改进RIA小部件性能方法 主流RIA Ajax框架,如ExtJS、YUI、Dojo及其他,都提供一些精巧的小部件库,以增强用户体验。与其他框架相比,Dojo在企业开发领域更强大,这是由于: Dojo在很多网站广泛使用。这里将使用Dojo举例,分析RIA小部件的性能。可根据具体情况使用Dojo小部件调整工具,有Page Speed、Rock Star Optimizer及Jiffy。强烈建议使用YSlow和Firebug。 YSlow YSlow根据一组高性能Web页面准则,通过检查页面上所有组件,包括由JavaScript创建的,来分析Web页面性能。YSlow是一个集成了Firebug Web开发工具的Firefox插件;它可提供提升页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。 图中显示的是YSlow Grade选项卡上的信息。 YSlow的Web页面建立在22条可测试的规则基础上,这些规则在下方按重要性和效果排列。研究显示,按照以下规则,Web页面响应时间可提升25%到50%: 如图:图中的YSlow Statistics,对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。 Components选项卡显示了每个组件及相关的性能信息。例如,如果组件被gzip压缩,或ETag有内容(如果的话),都能看到。组件大小和超期时间也显示在Components选项卡中,如图所示。 Firebug Firebug与Mozilla Firefox集成,在浏览网站时有大量开发工具随手可用。可以即时编辑、调试、监控Web页面中的CSS、HTML和JavaScript。 可以使用Firebug Net面板,如图所示,监控Web页面产生的HTTP流量。它向用户展示了所有收集到的和计算出的信息。每个条目表示页面的一个请求/响应来回。 Firebug Console面板,如图所示,提供了两种监控代码性能的方法。 Profile 对于某个特定的函数,使用Profiler。JavaScript Profiler是能用来测量每个JavaScript代码执行时间的Firebug特性。使用JavaScript Profiler来提升代码的性能,或是查看为什么某个函数运行时间过长。它与console.time();类似,但JavaScript Profiler能提供更多代码内部过程细节。 console.time() 对于特定代码段,使用console.time()。控制台会显示您输入到命令行的命令的结果。可以使用console.time(timeName)函数测量某个特定代码或函数执行多长时间。该特性对于提升JavaScript代码的性能非常有用,样例显示: measuringTime:xxms将显示在控制台。 结束语 文中,开发者学习了如何识别Web应用程序中的一些问题或瓶颈。开发者们应了解一些工具、窍门和技巧,以用于调整和改善对用户的性能。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-03-09
这么好的文章怎么没人看呢?
|
|
返回顶楼 | |
发表时间:2012-03-09
学习了,有些点深有体会
|
|
返回顶楼 | |
发表时间:2012-03-09
fengx 写道 5.使用无cookie域组件
当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 这个不懂,谁能解释一下 |
|
返回顶楼 | |
发表时间:2012-03-11
mazzystar 写道 fengx 写道 5.使用无cookie域组件
当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 这个不懂,谁能解释一下 我也不太懂 楼主解释下呗 |
|
返回顶楼 | |
发表时间:2012-03-12
13522312215 写道 mazzystar 写道 fengx 写道 5.使用无cookie域组件
当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 这个不懂,谁能解释一下 我也不太懂 楼主解释下呗 请求都带有cookie,cookie不能跨域访问,使用子域或者其他主机(其他的域名)减少请求参数传递 |
|
返回顶楼 | |
发表时间:2012-03-12
chenjunxt 写道 13522312215 写道 mazzystar 写道 fengx 写道 5.使用无cookie域组件
当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 这个不懂,谁能解释一下 我也不太懂 楼主解释下呗 请求都带有cookie,cookie不能跨域访问,使用子域或者其他主机(其他的域名)减少请求参数传递 |
|
返回顶楼 | |
发表时间:2012-03-13
太泛泛了,说点实际的东西吧,比如通过什么方式可以实现后置加载,或者怎么能减少首屏的HTML提升渲染速度
|
|
返回顶楼 | |
发表时间:2012-04-22
chenjunxt 写道 13522312215 写道 mazzystar 写道 fengx 写道 5.使用无cookie域组件
当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。 这个不懂,谁能解释一下 我也不太懂 楼主解释下呗 请求都带有cookie,cookie不能跨域访问,使用子域或者其他主机(其他的域名)减少请求参数传递 明白了。 |
|
返回顶楼 | |
浏览 6023 次