Web端性能优化技巧

第３０卷第ｌ２期　

２０１３年１２月　计算机应用与软件　

Ｃｏｍｐｕｔｅｒ　Ａｐｐｌｉｃａｔｉｏｎｓ　ａｎｄ　Ｓｏｆｔｗａｒｅ　Ｖｏ１．３０　Ｎｏ．１２　

Ｄｅｅ．２０１３　

一种针对浏览器并发连接限制的Ｗｅｂ前端性能优化算法　

李雨晨　张大方　张继　曾　彬　

（湖南大学信息科学与工程学院湖南长沙４１００８２）　

（中国移动湖南分公司湖南长沙４１００１５）　

摘要　当用户同时发起的连接请求数大于浏览器的并发连接限制数时，不同的请求发送顺序对应不同的用户等待时间。为了　

有效减少用户的等待时间，提出一种连接请求调度权值的计算模型，并在该模型的基础上提出一种请求调度算法ＳＡＣＣ。实验证明，　

该算法能够有效降低网页的ＴＤＤ、ＴＳＲ指标，在实验平台ＩＥ　７中，平均降幅分别达１３％、２５％。　

关键词　并发连接限制　性能优化　调度权值计算模型　Ｗｅｂ前端　

中图分类号ＴＰ３　文献标识码Ａ　ＤＯＩ：１０．３９６９／ｊ．ｉｓｓｎ．１０００－３８６ｘ．２０１３．１２．００２　

Ａ　ＷＥＢ　ＦＲｏＮＴ．ＥＮＤ　ＰＥＲＦｏＲＭＡＮＣＥ　ｏＰＴＩＭＩＳＡＴＩｏＮ　ＡＬＧｏＲＩＴＨＭ　ＦｏＲ　ＣｏＮＣＵＩｔＲＥＮＴ　

ＣＯＮＮＥＣＴＩＯＮＳ　ＬＩＭＩＴ　ＯＦ　ＢＲｏＷＳＥＲＳ　

Ｌｉ　Ｙｕｃｈｅｎ　－　Ｚｈａｎｇ　Ｄａｆａｎｇ　Ｚｈａｎｇ　Ｊｉ　Ｚｅｎｇ　Ｂｉｎ　

（Ｃｏｌｌｅｇｅ　ｏｆＩｎｆｏｒｍａｔｉｏｎ　ｓｃ　ｅ，　ａｎｄ　Ｅｎｇｉｎｅｅｒｉｎｇ，Ｈｕｎａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｃｈａｎｇｓｈａ　４１００８２，Ｈｕｎａｎ，Ｃｈｉｎａ）　

（Ｃｈｉｎａ　Ｍｏｂｉｌｅ　Ｇｒｏｕｐ　Ｈｕｎａｎ　Ｃｏｍｐａｎｙ　Ｌｉｍｉｔｅｄ，Ｃｈａｎｇｓｈａ　４１００１５，Ｈｕｎａｎ，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ　Ｗｈｅｎ　ｔｈｅ　ｎｕｍｂｅｒ　ｏｆ　ｃｏｎｎｅｃｔｉｏｎ　ｒｅｑｕｅｓｔｓ　ｉｎｉｔｉａｔｅｄ　ｓｉｍｕｌｔａｎｅｏｕｓｌｙ　ｂｙ　ｔｈｅ　ｕｓｅｒｓ　ｅｘｃｅｅｄｓ　ｔｈｅ　ｌｉｍｉｔｅｄ　ｎｕｍｂｅｒ　ｏｆ　ｃｏｎｃｕｒｒｅｎｔ　

龙源期刊网

基于前端的Web性能优化

作者：彭玲玲 李诗莹 冯爽

来源：《电子技术与软件工程》2017年第24期

摘 要

互联网的高速发展极大增强了用户与页面的交互，网站性能逐渐成为Web产品市场成败和评测网站用户体验的重要指标。文中基于Web前端，提出一种前端优化方案，在保持后台的代码及数据库不变的前提上，极大程度提升了Web站点的性能。

【关键词】前端 Web HTTP 性能优化

1 前言

信息技术的快速发展极大提高了用户对网站的期望值。对于用户而言，如何从站点中以最快速度获取所需内容是其评价Web前端性能的重要指标；对于网站提供者，如何在同一时间允许多用户访问并获得良好的用户体验是其工作中的一大痛点。因此，Web前端性能优化是一个重要研究课题。国外雅虎、微软、Google等公司对Web的优化都有不同的见解。国内腾讯、阿里巴巴等企业在这方面做了相关研究，比如网络协议本身的研究与优化及应用系统性能优化的研究。针对Web站点的性能优化，分为前端优化以及优化。本文提出了一种基于Web前端性能的优化方案，包括页面元素优化、缓存优化、以及HTTP请求优化。

2 优化方案

2.1 HTTP的请求优化

减少页面的HTTP请求数目是HTTP的优化核心内容，其基本思想是以减少站点与服务器的连接次数为代价来降低网页相应的延迟。CSS、JavaScript及背景图片等外部文件，是构成一个设计良好的网页不可或缺的因素。丰富多彩的网页内容能够吸引更多的用户，同时良好的用户体验和交互性更能增加用户的粘性。由于HTTP协议的无状态性，用户每访问一次站点，客户端都将重新向服务器请求所有的文件。而每个组件都须向服务器重新发送一次HTTP请求才能保证呈现整个网页页面，如此大量的HTTP重复请求极大程度影响了网站速度。减少HTTP的请求次数可以增加网页的稳定性，提高网页的加载速度。

Web测试技巧

一. 目的：

web测试是测试组最频繁接触的工作类型，本文档会从测试案例的分析入手，通过一些比较常见的案例分析，达到了解web测试的基本思想。

分析的测试案例主要包括一下几个方面：普通注册页面，跳转注册页面，用户权限和安全性，碎片，cache，ie相关置对测试的影响。

二. 测试案例分析

1. 普通注册页面：

a. 不填写任何的信息，提交，查看提示信息

这个步骤是输入判断测试中第一个要写测案例，这个案例有几个方面的意义

a) 这个页面上所有的输入框有必填的选项，比如用户的名称，用户的验证码，用户密码等，这些信息在数据库中不能为空，如果为空可能会对相关的程序带来问题，比如

b) 不填写用户名和密码，这样就在数据库中存了一条空记录，导致在登陆的时候，不能正确的验证用户的身份。

c) 一些输入框在本页可以不填写不会出错，但是他的数据要被其他的程序调用，比如cms中的媒体管理，建立的媒体会在建立新闻的时候被调用，如果在媒体管理里没有做输入判断，那创建时就不能正确的取到数据（逻辑相关性）

d) webmail页面中，地址簿可以保存地址，发信页面也可以调用地址簿的信息进行发信，在测试的时候就需要注意测试相关性。

b. 依次只填写每一个框，提交，查看提示信息

1. 这个案例主要是考察非空判断的每一个框的提示信息是不是按顺序提示，比如三个必填输入框，不填写第一个和第二个输入框，提示应该是第一个输入框没有填写，不会提示第二个输入框没有填写。填写第二个，不填写一，三输入框，应该提示第一个没有填写，不会提示第三个输入框没有填写，这个提示一般以js check的方式表示

2. 也有例外的情况，就是所有的输入框在一起判断，在一个页面上对没有输入的必填框在一起显示提示信息，俱乐部的注册页就是这个模式，在每一个没有填写的输入框后面都有提示

c. 依次不填写每一个输入框，提交，查看提示信息

Web网站性能优化的相关技术

来源：站长网

2011-03-04 06:50:47

Web站点性能问题吸引或者迫使越来越多的人投入到这个问题的研究中来，产生了很多解决方案。下面是我根据自身的理解对这些技术进行了归类总结，如有不足之处欢迎拍砖。

一、提高服务器并发处理能力

我们总是希望一台服务器在单位时间内能处理的请求越多越好，这也成了web服务器的能力高低的关键所在。服务器之所以可以同时处理多个请求，在于操作系统通过多执行流体系设计，使得多个任务可以轮流使用系统资源，这些资源包括CPU、内存以及I/O等。这就需要选择一个合适的并发策略来合理利用这些资源，从而提高服务器的并发处理能力。这些并发策略更多的应用在apache、nginx、lighttpd等底层web server软件中。

二、Web组件分离

这里所说的web组件是指web服务器提供的所有基于URL访问的资源，包括动态内容，静态网页，图片，样式表，脚本，视频等等。这些资源在文件大小，文件数量，内容更新频率，预计并发用户数，是否需要脚本解释器等方面有着很大的差异，对不同特性资源采用能充分发挥其潜力的优化策略，能极大的提高web站点的性能。例如：将图片部署在独立的服务器上并为其分配独立的新域名，对静态网页使用epoll模型可以在大并发数情况下吞吐率保持稳定。

三、数据库性能优化和扩展。

Web服务器软件在数据库方面做的优化主要是减少访问数据库的次数，具体做法就是使用各种缓存方法。也可以从数据库本身入手提高其查询性能，这涉及到数据库性能优化方面的知识本文不作讨论。另外也可以通过主从复制，读写分离，使用反向代理，写操作分离等方式来扩展数据库规模，提升数据库服务能力。

四、Web负载均衡及相关技术

负载均衡是web站点规模水平扩展的一种手段，实现负载均衡的方法有好几种包括基于HTTP重定向的负载均衡，DNS负载均衡，反向代理负载均衡，四层负载均衡等等。