摘要：校园门户网站是一所学校对外的窗口，门户网站加载效率对网站访问者用户体验起着至关重要的作用，同时也影响学校对外形象。本文通过分析玉林师范学院官网首页前端设计源码，发现其设计存在div标签的频繁使用使HTML文档结构复杂化，未遵循“结构、表现、行为”分离原则，图片过多导致请求次数过多等问题，并针对存在问题提出采用HTML5语义化标签、CSS置于顶部/JS放在底部优化和使用精灵图方式的Web前端优化方案，并设计出优化源码，优化后经测试数据结果显示，优化后的网站效率明显提升，达到改善网站的用户体验和节省相当的资源利用的优化目的。
　　关键词：Web前端；性能优化；页面结构优化；HTML
　　★基金项目：广西壮族自治区教育厅2019年度广西高校中青年教师科研基础能力提升项目，项目名称：共享经济模式下农村电商物流终端配送模式发展的对策研究，编号：2019KY0593。
　　校园门户网站是一所学校对外的窗口，门户网站加载效率对网站访问者的用户体验起着至关重要的作用，同时也影响学校对外形象。研究指出，如果用户等待下载网页的时间超过8秒，将有30%的用户选择停止浏览该网页，同样的研究表明，如果下载网页的时间缩短1秒，则这个数字将从30%降低到8%。因此，如何有效地减少用户的等待时间进而提高Web应用的性能成为了企业界以及学术界的研究热点。通过分析玉林师范学院官网首页前端设计源码，发现其设计不完善之处，并提出网站首页Web网页优化方案和修改源码，修改后，经过测试数据结果显示，优化后的网站效率明显提升，以此丰富了国内前端性能优化相关研究，为其他相关研究者提供参考，也可以为Web应用的前端优化提供一些指导和建议，为服务商减少优化费用，并且给予用户更良好的使用体验。
　　1、研究综述
　　Web前端性能优化，企业、学术研究工作者纷纷从行业角度对其进行研究。雅虎公司性能团队提出了著名的34条性能优化法则，开发的YSlow插件工具可以对网页进行分析，并给出优化建议。微软公司对Web前端性能优化也有着非常深入的研究。他们认为Web系统设计应该以用户为中心，强调用户的接受程度。在设计早期，应该尽可能充分的明确用户需求。Google提出Web性能优化方法Diffable方法，开发了Web前端性能的分析工具Page Speed，该工具是从页面加载时间（page laod time）来衡量性能。页面加载时间优化的最佳实践涉及到多个步骤，包括解析DNS名称、建立TCP连接、发送HTTP请求、下载资源、从缓存获取资源、解析和执行脚本和在页面上渲染对象。Google还开发了优化工具TimeLine[1]。国内部分领先的互联网企业，在实践中也总结了优化Web前端的性能的方案。腾讯、阿里巴巴等企业已经在这个方面做了相关的研究。学术研究者在Web前端性能优化领域研究，缺乏对Web前端性能优化的分析。杜艳美、张翔、戴志誠和程劲草[2][3]等众多学者均有对前端性能优化方面有理论研究。
　　2、Web前端性能优化方案
　　针对上述存在的问题，从HTML、CSS、JavaScript三个方面进行页面结构优化、代码优化、图片优化以及减少HTTP请求优化。
　　2.1 Web前端页面源码分析
　　研究使用玉林师范学院官方网站首页为例，通过研究其网站Web前端页面源码，分析其目前存在的问题，并据此提出有方案和改进方案。玉林师范学院官方网站首页页面如下图1所示。


　　通过对网站源码分析，玉林师范学院官方网站首页页面可优化的内容如下：