提升Web应用程序性能的最佳实践
2019独角兽企业重金招聘Python工程师标准>>>
导读:作为开发人员,Web页面加载或刷新的速度对其网站至关重要。在浏览器中调整性能问题比在Java应用程 序中更难。开发人员在各种浏览器中调试JavaScript的方法要少得多。比如,在Mozilla Firefox中,可以使用Firebug调试JavaScript,但仍然不能调整很多性能问题,如浏览器呈现消耗时间。为了解决这些问题,有必要开发 浏览器插件来监控时间响应,以及确定其他对应解决方案如部分呈现或延时加载。
本文节选自IBM developerWorks 提升Web应用程序的性能的系列文章,该文通过Web应用程序性能的最佳实践案例,帮助开发者更好地理解影响Web应用程序性能的因素,学习如何诊断Web应用程序中的性能问题,找到客户端内容中的瓶颈,并确定解决方案。
一、提升Web应用程序性能的6种基本方式
1.减少HTTP请求数
每个HTTP请求都有开销,包括查找DNS、创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销。要减少请求数:
- 合并文件。将总是同时使用的脚本合并到同一个文件中,不会减小总大小,但将会减少请求数。还可以同样方法合并CSS文件和图片。可以实现文件自动合并:
- 在构建阶段。用<concat>标记,通过运行Ant合并文件。
- 在运行时阶段。启用mod_concat模块。如果httpServer是Apache,用 pack:Tag作为JSP标签库来合并JavaScript和样式表文件。(pack:Tag是一个JSP-Taglib,可缩减、压缩及合并资源,如 JavaScript和CSS,并将它们在内容或普通文件中缓存。)
- 使用CSS Sprites。将背景图片合并成一个图片,并使用CSS background-image和background-position属性来显示所需图片部分。还可使用内联图片减少请求数。
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在企业开发领域更强大,这是由于:
- Object-oriented programming(OOP)编码
- 跨平台
- 本地数据存储的Dojo离线API支持
- DataGrid、2D和3D图形(图表组件提供了在浏览器展示报表更简单的方法)
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%:
- 尽量减少HTTP请求数。
- 使用内容发布网络(CDN)。
- 添加Expires或Cache-Control头部。
- 用Gzip压缩内容。
- 将样式表放在顶部。
- 将脚本放在底部。
- 避免使用CSS表达式。
- 将JavaScript和CSS放在外部。
- 减少DNS搜索。
- 精简JavaScript和CSS。
- 避免使用重定向。
- 删除重复的脚本。
- 配置ETags。
- 使Ajax可缓存。
- 使用GET进行Ajax请求。
- 减少DOM元素数。
- 消除404错误。
- 减小cookie大小。
- 对组件使用无cookie的域。
- 避免使用过滤器。
- 不在HTML中测量图片大小。
- 使favicon.ico尽可能小,可缓存。
如图:图中的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代码的性能非常有用,样例显示:
var timeName = 'measuringTime'; console.time(timeName); //start of the timer for(var i=;i<1000;i++){ //do something console.timeEnd(timeName); //end of the timer
measuringTime:xxms将显示在控制台。
结束语
文中,开发者学习了如何识别Web应用程序中的一些问题或瓶颈。开发者们应了解一些工具、窍门和技巧,以用于调整和改善对用户的性能。
转载于:https://my.oschina.net/Dustleon/blog/41043
提升Web应用程序性能的最佳实践相关推荐
- 前端性能优化最佳实践(转)
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版
高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中, ...
- 提高 Web 站点性能的最佳实践
原文地址:http://developer.yahoo.com/performance/rules.html 本文在尊重原文基础上,尽量翻译得通俗易懂一些. 本文内容 提高 Web 站点性能的最佳实践 ...
- Java Web应用的代码分层最佳实践
转载自 Java Web应用的代码分层最佳实践 代码分层,对于任何一个Java Web开发来说应该都不陌生.一个好的层次划分不仅可以能使代码结构更加清楚,还可以使项目分工更加明确,可读性大大提升,更加 ...
- Android应用性能优化最佳实践.
移动开发 Android应用性能优化最佳实践 罗彧成 著 图书在版编目(CIP)数据 Android应用性能优化最佳实践 / 罗彧成著. -北京:机械工业出版社,2017.1 (移动开发) ISBN ...
- eBCC性能分析最佳实践(1) - 线上lstat, vfs_fstatat 开销高情景分析...
Guide: eBCC性能分析最佳实践(0) - 开启性能分析新篇章 eBCC性能分析最佳实践(1) - 线上lstat, vfs_fstatat 开销高情景分析 eBCC性能分析最佳实践(2) - ...
- 智能SQL优化工具--SQL Optimizer for SQL Server(帮助提升数据库应用程序性能,最大程度地自动优化你的SQL语句 )...
SQL Optimizer for SQL Server 帮助提升数据库应用程序性能,最大程度地自动优化你的SQL语句 SQL Optimizer for SQL Server 让 SQL Serve ...
- 前端性能优化最佳实践
本文主要考量客户端性能.服务器端和网络性能,内容框架来自 Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的 ...
- 用Microsoft Application Center Test测试Web应用程序性能
在看微软的在线讲座时,专家展示了一个软件,Microsoft Application Center Test,能够测试Web应用程序性能,这一直是我想要的软件,没想到在VS.Net企业版里就有,赶紧装 ...
最新文章
- 二叉树的非递归遍历(统一的模板)
- Pandas库学习笔记
- navicat10.1.7英文版_【纯干货】风险评估和管理(PDA TR 49内容节选11 中英文版)...
- java学习(57):内部类
- Linq中常用的方法
- python同花顺交易接口_开启量化第一步!同花顺iFinD数据接口免费版简易操作教程...
- [转]asp 没有权限: 'CreateObject'的解决方法
- 我的chrome插件
- 国外开放的硕博论文、期刊、数据库下载网站
- 定积分,二重积分,三重积分
- mac 绑定阿里企业邮箱
- cfg格式文件在服务器哪里,cfg文件,小编教你怎么打开cfg文件
- 【AI达人创造营三期】在地平线X3上部署车牌识别系统
- [系统安全] 虚拟化安全之虚拟化概述
- 【raspberrypi】retropie街机模拟器
- Excel刷新数据时出现“查询XXX(步骤”XXX“)将引用其他查询或步骤,因此可能不会直接访问数据源。请重新生成此数据组合。”的解决办法
- CSDN博客 - 分类专栏:如何在一级专栏下建立二级专栏(子专栏)
- 联想魔改BIOS详细最优设置
- 卷积法求解系统的零状态响应_连续LTI系统零状态响应求解方法的分析
- 安装vivado时安装vc遇到e000: Error 0x80070666: Cannot install a product when a newer version is installed.
热门文章
- php如何查询数据是否存在,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程...
- 归并排序 java实现_归并排序的java实现
- SqlTransaction——事务详解
- 密钥生成并配置_基于密钥的SSH认证流程
- python中in_python中的min和in用代码实现
- Jmeter Loadrunner高级性能测试真实曝光
- php artisan实现机制,laravel 原理机制及几个重要功能
- linux密码加密文件,Linux下加密/解密及用密码保护文件的七把利器
- php 数组转目录树,PHP根据路径数组转成一个目录树
- mysql修改配置文件内存后无法启动_记一次Oracle实例在修改内存大小后无法启动的惊悚经历...