Web应用性能提升总结

Web应用性能提升总结1Web请求数减少请求数量可以显著的提升Web系统的性能1.1http请求头的数据量对于每一个请求，都附带了额外的请求头数据。如下图：打开google主页，其中的HTML文档请求，附加了请求头（大概420B）和响应头（大概600B），每个HTTP请求都会附加一定数据流量的额外信息。当我们请求的资源很小时，HTTP头的数据流量甚至会大于资源下载的数据流量。也许你觉得1KB的流量可以忽略不计，但是当大型系统中请求数量太多的时候，这些HTTP头带来的额外数据流量让你无法忽略！1.2http请求连接的开销如果你觉得http请求头信息多余的数据流量可以忽略，那么http请求连接的开销则绝对不能忽略！用户通过URL下载资源至客户端主要经过以下几个过程：1.域名解析2.开启TCP连接3.发送请求4.等待（主要包括网络延迟和服务器处理时间）5.下载资源很多开发人员觉得每次请求的时间是由下载资源的时间决定的，下面我们来观察Firebug上的资源下载时间图：可以发现，在等待响应阶段所花费的时间远远大于下载资源的时间。如果你仔细的查看资源下载瀑布树（可以通过Firebug查看），可以发现：1.每次请求花费的时间大部分都是在其他阶段，而不是下载资源阶段2.很小的资源照样会在非下载阶段花费很多时间，只是下载资源阶段所消耗的时间非常短而已通过以上两点，我们知道减少http请求的重要性和必要性，但是在系统中我们怎么减少http请求数量呢？1.合并文件合并文件就是把JS文件、CSS文件合并成一个文件。很多开发人员觉得单个JS、CSS文件中大量的代码难以维护并且不具有模块化思想，的确如此，开发阶段完全可以把文件分成多个文件，但是生产环境必须合并成一个。2.合并图片把系统中的单独图片一起制作成一个大图片，再利用CSS的图片定位技术来显示不同的图片。如果我们把系统中的30个图片合并为一个，就相当于把30次请求变成了1次请求。结论：这一部分主要介绍减少http请求的重要性，让大家认识到合并JS文件、CSS文件、大图片等的必要性，并且使大家在前端开发过程中有这样的一个认知。2Javascript代码执行效率提升Javascript代码的执行效率往往直接影响了Web应用的性能。很多时候，相同的功能使用不同的Javascript代码编写方式，执行效率可能会有数倍的差异。2.1字符串拼接字符串的拼接在我们开发中会经常遇到，我们往往习惯直接用‘+=’的方式来拼接字符串，其实还可以利用数组的join方法。当然最新的浏览器（Chrome、Firefox3+、IE8+等）对字符串拼接做了优化，上述两种方式的效率没有差别（万次以上字符串拼接测试，效率差别在2ms以内）。但是在以IE6为主的老式浏览器下，两者之间的效率差别非常大（万次以上字符串拼接测试，效率差别在2s以上）。使用‘+=’进行拼接字符串的方式效率非常低，而使用数组的join方法来进行拼接，效率依然相当高。利用‘+=’进行拼接字符串varnow=newDate();varstr=”;for(vari=0;i10000;i++){str+='123456789';}alert(newDate()-now);利用数组的join方法进行拼接字符串varnow=newDate();varstrBuffer=[];for(vari=0;i10000;i++){strBuffer[i]='123456789';}varstr=strBuffer.join(”);alert(newDate()-now);总结：在中国国内浏览器市场中，IE6仍然为主流浏览器，因此我们在进行字符串拼接操作的时候，应该尽量使用数组的join方法。2.2循环语句我们使用for循环的时候，特别是需要计算长度的情况，我们应该将其保存到一个变量中，避免在循环的每一步重复取值。虽然通常这种方式的效率可以忽略不计，但是对于大次数循环、运行在诸如IE6等低版本浏览器上等情况的时候，采用上述方法所带来的循环效率就会比较明显。低效率的for循环方式vararr=[],start=newDate().getTime();for(vari=0;i10000;i++){arr[i]=i;};for(vari=0;iarr.length;i++){//效率低};varend=newDate().getTime();alert(用时：+(end-start)+毫秒);高效率的for循环方式vararr=[],start=newDate().getTime();for(vari=0;i10000;i++){arr[i]=i;};for(vari=0,len=arr.length;ilen;i++){//效率高};varend=newDate().getTime();alert(用时：+(end-start)+毫秒);总结：在非IE浏览器下两种for循环写法的执行效率相差非常小，但是在IE6、IE7、IE8上，执行效率的差距还有很明显的。因此，当我们在写for循环的时候，应该使用保存长度的方式。2.3js减少页面的重绘页面重绘是指页面元素的属性的更新，这些属性只影响元素的外观和风格，不会影响整体布局。通常情况下，我们使用js主要会引起页面的重绘，而重绘的情况往往是严重影响页面性能的；减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的。效率低的页面重绘functiontest(){varobj=document.getElementById(foss);varstart=newDate().getTime();for(vari=0;i100;i++){obj.innerHTML+=str+i;}varend=newDate().getTime();alert(用时+(end-start)+毫秒);}效率高的页面重绘functiontest(){varobj=document.getElementById(foss);varstart=newDate().getTime();vararr=[];for(vari=0;i100;i++){arr[i]=str+i;}obj.innerHTML=arr.join();varend=newDate().getTime();alert(用时+(end-start)+毫秒);}以上实例我们通过更改DOM元素的innerHTML值来实现页面重绘（没有影响页面布局）。第一个经过100次重绘，第二个经过1次重绘。执行后，我们会发现两种方法不论在何种浏览器下所消耗的时间都会是巨大的、惊人的差别。因此，在前台开发过程中，我们必须有意识的来减少页面重绘的次数。2.4重复使用的调用结果，事先保存到局部变量中避免多次取值的调用开销低效率的调用varmyHeight=entity.dataSet.clientHeight+100;varmyWidth=entity.dataSet.clientWidth+100;高效率的调用varmyDataSet=entity.dataSet;varmyHeight=myDataSet.clientHeight+100;varmyWidth=myDataSet.clientWidth+100;2.5清空数组的优化多数开发人员在使用JS清空数组的时候，会使用以下方法：myArray=[];需要注意的是，这种方法又创建了一个新的空数组对象，并且将原来myArray所指向的数组对象变成了一片内存垃圾。实际上，将数组的长度赋值为0，也能达到清空数组的目的，此方法不但能实现数组对象的重用，还能减少内存垃圾的产生。代码如下：myArray.length=0;3Extjs的应用优化3.1使用container代替panelExtjs中panel的功能很强大，具有标题栏、工具栏等很多部件，因此实例化时需要创建很多部件实例，并且做很多的布局计算；而container只是一个div，实例化时所带来的系统开销非常小。因为在非必要情况下使用container可以大幅改善应用的性能，这一点开发人员必须切记！注：最好指定xtype为container，避免应用使用默认的panel。{xtype:'container',//defaultTypeis'panel'items:[...]}3.2减少容器嵌套经常看到系统中过多嵌套容器的应用。例如，一个容器内嵌套有一个容器，而这个嵌套的容器内又有多个组件。这时候，可以取消外层容器，只使用一个容器完成同样的工作。很重要的一点，每个容器的初始化、渲染和布局都需要花费时间，因而必须排除这些不必要的嵌套容器。这样，应用将运行得更快。效率低的用法{id:'container1',items:[{id:'container2',items:[{id:'component3'}]}]}效率高的用法{id:'container1',items:[{id:'component3'}]}3.3消除额外的布局操作ExtJS4.0提供了Ext.suspendLayouts（暂停布局）和Ext.resumeLayouts（重新布局）两个新方法来协调多个组件和容器的更新。例如，要迅速增加两个组件到两个连续容器，会导致多个布局和渲染操作被执行。如果在添加这些组件之前调用Ext.suspendLayouts方法，将不再单独执行个别组件的布局操作，添加完成后，调用Ext.resumeLayouts方法，框架将只执行一次渲染和布局操作。谨记，不单添加组件会触发容器的布局操作，组件的其它操作或改变也会触发容器的布局操作。重要的是针对在应用中的性能问题进行具体情况具体分析，以确保没有多余的布局操作被执行。{Ext.suspendLayouts();//一系列添加组件操作//或者一系列影响容器的布局操作Ext.resumeLayouts(true);}3.4某些情况下使用Ext.fly代替Ext.getExt.fly方法和Ext.get方法的用法一样，都是通过元素的id、HTMLDom、ExtElement获取该元素的ExtElement对象（Ext中对HTMLDom对象的封装）。他们之间的唯一区别就是：Ext.fly方法采用享元模式，利用一个公共的内存区域来保存对象，每次引用都会覆盖上一个对象，即建立单个全体对象而不断重复使用它；而Ext.get方法每次引用都会生成一个ExtElement对象（创建ExtElement相对是比较消耗内存的，属于重量级的操作）。由于Ext.fly方法的操作原理，我们不能将Ext.fly方法的返回结果保存在变量中以便重用，因为每次Ext.fly方法的操作都将可能改变该变量的dom指向。varmy_id=Ext.fly('my_id');Ext.fly('another_id');//此时my_id的dom引用已经变为another_idmy_id.highlight('FF0000',{//此处的操作将是对another_id元素的操作endColor:'0000FF',duration:3});了解两者原理后，合理的使用，可以大幅的节省内存。3.5合理利用懒加载（xtype）当用户打开一个页面的时候，通常只需要使用特定的功能，其他的功能模块似乎和用户没有关系，如果没有使用这些功能模块，那么肯定没有必要初始化这些功能模块里的组件，这种情况就可以使用Ext提供的懒加载机制（通过xtype来给父容器添加组件）。例如：一个功能模块由若干tab（标签页）组成，通常情况下用户只会使用默认tab里面的功能，其他的tab多数情况下不需要打开，这个时候就可以使用xtype来实现懒加载，而节省应用的性能。例如：{title:不经常使用的Tab,items:[{xtype:'form',title:查询Form},{xtype:'grid',title:Gird表格}]}}通过上述配置，此tab在初始化的时候，遇到xtype定义，只会把当前items当做两个对象