Web前端性能优化方案与实践

2018-04-26霍福华

安徽电子信息职业技术学院学报 2018年2期

霍福华

（山西省财政税务专科学校，山西太原 030024）

据CNNIC统计，截至2017年6月，中国网民规模达到7.51亿，占全球网民总数的五分之一。互联网普及率为54.3%，超过全球平均水平4.6个百分点。随着互联网规模的不断扩大、前端的崛起以及移动化的大趋势，WEB前端性能优化成为了热点，但与发达国家相比，我国依然十分落后。

在Yahoo的性能团队开始对Web前端优化开始实践，并相继提出了著名的“Yslow-23条规则”和Yslow性能优化工具开始，web前端性能的优化就拉开了帷幕。而在国内，很多学者通过分析浏览器和服务器通讯过程，提出了一系列优化方案，为我国互联网行业发展提供坚实基础。但前端优化是复杂的，涉及客户端、服务器端以及相互间的通信各个方面，包括 HTML、CSS、Javascript、Image 等各类资源。WEB前端优化既能给用户提供及时、便捷和友好的使用体验，又能为服务商减少请求、节约带宽从而节省资源。

WEB前端优化按构成可分为客户端、服务器端和通信过程三方面的优化，按粒度大小可分为页面级和代码级的优化[1]。

一、Web性能优化理论

（一）减少HTTP请求

浏览器和服务器之间通过HTTP协议来实现通信功能，其中，HTTP中包含了大量信息，而HTTP请求的减少可以提高Web性能。另外，图片地图、CSS Sprites、内联图片和脚本、样式表的合并等技术的使用，不仅可以使HTTP请求有效减少，还能有效回避性能和设计之间的彼此制约问题。客户端与服务器端之间HTTP的工作过程，如下图1所示。

图1 服务器端并行处理HTTP请求流程

（二）HTML的优化

首先是HTML文档优化，通过HTML Tidy，可以有效降低HTML的文件大小，将文件中的空格全部除去。使用“DIV+CSS”格式，还可以有效降低文件中的代码数量，使编码出来的语义变得更加清晰，在此过程中很多企业运用了HTML5之中的header、nav等语义化标签对其进行标注。其次是Cookie的设置。当对服务器做出浏览器请求时，在相同域名影响之下，HTTP请求指令会在用一个域名之下统计Cookie数据，将可能将Cookie所产生的数据降低，这样可以将Cookie对页面的影响降到最低[2]。

（三）CSS的优化

第一，CSS的精简。相关设计人员通过Collect以及CSS Selector等来进行代码检测，将CSS无效代码去除出去。根据相关领域对CSS的规范，在样式系统中的匹配规则可从右边选择符向左边进行匹配。在CSS代码使用过程中，应该尽量避免使用免属性选择器、兄弟选择器等。当CSS窗口出现变化时，将会导致CSS的表达式求值出现一定变化，如果操作不当，将会对整个Web带来严重影响。因此，在使用过程中，尽量对CSS表达式进行特殊处理。

第二，CSS的外联。一般来说，在页面中使用CSS或者其他相关文件类型，可以赋予页面更加生动的形象。HTML页面可以通过内嵌和外联等方式将CSS文件引入到系统中，而且这种方式可以有效提升文件维护效果和文件的组件化。另外，CSS文件的加载可以对页面产生一定影响，尤其是在Web解析过程中，如果对CSS进行有效加载，便可以实现页面效果的持续优化。

（四）JavaScript的优化

首先，JavaScript会被置于底部。有关于Java Script脚本的存在，将会对浏览器的下载造成严重影响，并且会影响HTML文档和相关资源的加载速度和加载情况，如果将Java Script脚本移到HTML文档底部，便可以将页面阻塞情况有效避免，实现加载效果和加载速度的有效提升。另外，如果设计人员在设计过程中加入无阻赛的JavaScript，在资源加载指令下达之后，通过JavaScript之中建立DOM等相关元素，可实现src的成功设置，并将设置好的文件附加到HTML程序中。

其次，是对JavaScript进行压缩，在压缩过程中，可以使用JSmin对其进行处理，删除脚本中无用文件和空格，实现文件大小的有效降低，还可以通过JavaScript函数转变，将复杂的文件转化成较短的字符串，最终实现代码数量的降低[3]。

（五）图片的优化

根据HTTP Archieve统计，WEB页面的平均大小在逐年增大，图片内容占已比已连续多年超过50%，也就是说我们浏览一个普通网页时，超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一[1]。图片格式的选择是优化的第一步，常用的图片格式包括：矢量图、标量图、SVG、有损压缩、无损压缩等等。图片格式选择过程如下图2所示。

图2 图片格式选择过程

二、Web前端技术的具体实践应用

（一）指间点餐系统

所谓指间点餐系统，主要指的是在信息化生活中，可以将一些智能技术应用到点餐系统中，如HTML5技术等，通过这些技术的应用，不仅节省了大量人力物力，还可以有效提升相关领域的工作效率，提供店面收益和顾客满意程度。指间点餐系统的发展，有赖于Web技术发展和HTML5的技术搭建，不仅取代了传统的本地应用，而且将开发时间有效缩短，降低系统的更新周期，使整个系统更加便于维护。但在Web前端性能实践过程中，如果网速降低，便会使网页的加载速度变慢，这样便降低了上述系统的使用的有效性，这种现象已经成为该应用最大的劣势。

（二）性能检测工具以及测试环境

在浏览器使用过程中，可将CSS利用率、CPU监测等当做某种开发工具，并利用JavaScript作为一种性能监测工具对浏览器在运行过程中的渲染布局以及排版等进行有效优化。在性能测试工具选择过程中，主要以响应时间、待测系统的资源利用率等为主要评测指标，对Web的软件性能进行综合评定，并找到Web系统的最终设计瓶颈。在环境测试过程中，首先需要将浏览器中的缓存全部清空，其次在慢网速状态下对UI Thread进行测试。最后，在测试过程中，应该将不相关的网页全部关闭，并将监测工具开启[4]。

（三）性能评测系统的设计和实现

1.Web的应用评测过程

在每个Web应用评测过程中，都要针对于特殊场景进行目标设计，还可以通过Spirent进行负载测试，并将测试后的各项指标进行合理统计，并生成指标统计报告。根据报告，可以将系统中的性能瓶颈显示出来，并对其进行适当优化。另外，相关设计人员可以根据具体需求对相关测试程序进行选择，并确定好迭代次数，根据使用者需求选择正确的迭代方案。

2.测试场景的选择和设计

性能测试应该属于一种全面测试环节，对系统中的各项能力指标以及系统问题等进行评测。在此过程中，可为设计测试提供有效依据和指导，将系统中的最大瓶颈突破。因此，相关设计人员在设计过程中，可以将具有代表性的业务进行单独测试，还要对综合性业务进行全面测定，防止各个业务之间或者相关性读写锁出现长时间等待，降低测试中的重叠时间，同时保证各个测试无遗漏过程。在指间点餐系统使用过程中，点餐页面的设计最为复杂，而且在工作过程中，该页面的使用最为频繁，而且页面操作较多，UI交互性较强。因此，在对点餐系统页面进行优化时，可以根据Web前端性能优化方案，制定出最合适的实践计划，将系统的意义有效突显出来。最后便是负载流程测试，Spirent负载测试的核心在于参数的有效配置，通过对测试目标和日志的有效分析，将系统瓶颈找出[5]。