Web应用性能提升总结.docx

Web应用性能提升总结Web请求数减少请求数量可以显著的提升Web系统的性能http请求头的数据量对于每一个请求，都附带了额外的请求头数据。如下图：打开google主页，其中的HTML文档请求，附加了请求头（大概420B）和响应头（大概600B），每个HTTP请求都会附加一定数据流量的额外信息。当我们请求的资源很小时，HTTP头的数据流量甚至会大于资源下载的数据流量。也许你觉得1KB的流量可以忽略不计，但是当大型系统中请求数量太多的时候，这些HTTP头带来的额外数据流量让你无法忽略！http请求连接的开销如果你觉得http请求头信息多余的数据流量可以忽略，那么http请求连接的开销则绝对不能忽略！用户通过URL下载资源至客户端主要经过以下几个过程：1. 域名解析 2. 开启TCP连接 3. 发送请求 4. 等待（主要包括网络延迟和服务器处理时间） 5. 下载资源很多开发人员觉得每次请求的时间是由下载资源的时间决定的，下面我们来观察Firebug上的资源下载时间图：可以发现，在等待响应阶段所花费的时间远远大于下载资源的时间。如果你仔细的查看资源下载瀑布树（可以通过Firebug查看），可以发现：每次请求花费的时间大部分都是在其他阶段，而不是下载资源阶段很小的资源照样会在非下载阶段花费很多时间，只是下载资源阶段所消耗的时间非常短而已通过以上两点，我们知道减少http请求的重要性和必要性，但是在系统中我们怎么减少http请求数量呢？合并文件合并文件就是把JS文件、CSS文件合并成一个文件。很多开发人员觉得单个JS、CSS文件中大量的代码难以维护并且不具有模块化思想，的确如此，开发阶段完全可以把文件分成多个文件，但是生产环境必须合并成一个。合并图片把系统中的单独图片一起制作成一个大图片，再利用CSS的图片定位技术来显示不同的图片。如果我们把系统中的30个图片合并为一个，就相当于把30次请求变成了1次请求。结论：这一部分主要介绍减少http请求的重要性，让大家认识到合并JS文件、CSS文件、大图片等的必要性，并且使大家在前端开发过程中有这样的一个认知。Javascript代码执行效率提升Javascript代码的执行效率往往直接影响了Web应用的性能。很多时候，相同的功能使用不同的Javascript代码编写方式，执行效率可能会有数倍的差异。字符串拼接字符串的拼接在我们开发中会经常遇到，我们往往习惯直接用‘+=’的方式来拼接字符串，其实还可以利用数组的join方法。当然必威体育精装版的浏览器（Chrome、Firefox3+、IE8+等）对字符串拼接做了优化，上述两种方式的效率没有差别（万次以上字符串拼接测试，效率差别在2ms以内）。但是在以IE6为主的老式浏览器下，两者之间的效率差别非常大（万次以上字符串拼接测试，效率差别在2s以上）。使用‘+=’进行拼接字符串的方式效率非常低，而使用数组的join方法来进行拼接，效率依然相当高。利用‘+=’进行拼接字符串var now = new Date(); var str = ”;for (var i = 0; i 10000; i++) { str += 123456789; } alert(new Date() - now);利用数组的join方法进行拼接字符串var now = new Date();var strBuffer = [];for (var i = 0; i 10000; i++) { strBuffer[i] = 123456789;}var str = strBuffer.join(”);alert(new Date() - now);总结：在中国国内浏览器市场中，IE6仍然为主流浏览器，因此我们在进行字符串拼接操作的时候，应该尽量使用数组的join方法。循环语句我们使用for循环的时候，特别是需要计算长度的情况，我们应该将其保存到一个变量中，避免在循环的每一步重复取值。虽然通常这种方式的效率可以忽略不计，但是对于大次数循环、运行在诸如IE6等低版本浏览器上等情况的时候，采用上述方法所带来的循环效率就会比较明显。低效率的for循环方式var arr = [],start = new Date().getTime(); for(var i = 0; i 10000; i++) { arr[i] = i;};for(var i = 0; i arr.length; i++) {//效率低};var end = new Date().getTime();alert(用时： + (end - start) + 毫秒);高效率的for循环方式var arr = [],start = new Date().getTime(); for(var i =