70摘要：校园门户网站是一所学校对外的窗口，门户网站加
载效率对网站访问者用户体验起着至关重要的作用，同时也影响学校对外形象。本文通过分析玉林师范学院首页前端设计源码，发现其设计存在div标签的频繁使用使HTML文档结构复杂化，未遵循“结构、表现、行为”分离原则，图片过多导致请求次数过多等问题，并针对存在问题提出采用HTML5语义化标签、CSS置于顶部/JS放在底部优化和使用精灵图方式的Web前端优化方案，并设计出优化源码，优化后经测试数据结果显示，优化后的网站效率明显提升，达到改善网站的用户体验和节省相当的资源利用的优化目的。
关键词：Web前端；性能优化；页面结构优化；HTML
校园门户网站是一所学校对外的窗口，门户网站加载效率对网站访问者的用户体验起着至关重要的作用，同时也影响学校对外形象。研究指出，如果用户等待下载网页的时间超过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所示。
图1  玉林师范学院首页
通过对网站源码分析，玉林师范学院首页页面可优化的内容如下：
<div>标签是原网站首页使用最多的标签，<div>标签使HTML文档看起来比较繁杂无序，其次使用较多是<ul>、<a>、<li>等标签。
原页面结构布局采用传统的“DIV+CSS”布局，这种方式对于CSS的高度依赖使得网页设计变得比较复杂，代码设计不够简洁。
针对首页底部超链接图片的布局设计中，每一张图片放在<li>标签下的<a>标签里，有多少张图片就需要请求多少次，请求次数多造成加载时间延长。
校园门户网站的Web前端性能优化
——以玉林师范学院首页为例
文／唐微  杨椀萍
学校网站首页代码html★基金项目：广西壮族自治区教育厅2019年度广西高校中青年教师科研基础能力提升项目，项目名称：共享经济模式下农村电商物流终端
配送模式发展的对策研究，编号：2019KY0593。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。