Web标准是W3C发布的关于Web站点建设的一系列标准规范,提倡使用统一的技术规范建设兼容各种访问终端的Web站点。遵循Web标准的页面主要由三部分组成:结构、表现和行为,相应地将Web标准规范分为结构标准、表现标准和行为标准,每一类标准包含多种标准规范语言。

(1)描述结构的标准语言,主要包括XML^{[ 3]}和XHTML^{[ 4]}。在HTML4.0的基础上,发布了XHTML,建立XHTML的目的是为了实现HTML向XML的过渡。

(2)描述表现的标准语言,主要包括CSS^{[ 5]}和XSL^{[ 6]}。创建CSS标准的目的是用CSS取代HTML表格式布局、帧和其他表现的语言。

(3)描述行为的标准语言,主要包括DOM^{[ 7]}和ECMAScript^{[ 8]}。

利用XML和XHTML开发页面结构,利用CSS和XSL开发页面表现,利用DOM和ECMAScript开发页面行为,实现页面结构、表现和行为相互分离。

网站的结构、表现和行为相分离,很大程度上提高了网站访问性能。主要原因有:

(1)页面标准化精简了网页代码,网络传输量减少,下载速度加快;

(2)用户第一次访问页面时,表现代码和行为代码下载后进行本地存储,用户再次访问该页面时不再需要下载相同代码,访问速度大幅度提升。

因此,Web标准化开发网站,不仅规范了开发流程,网站易于升级和维护,还可以提升网站的访问性能。

本文选择了15所数字图书馆网站,其中包括:3所国家级数字图书馆、10所省级数字图书馆、2所专业数字图书馆,覆盖全国西部、中部、东部地区,均于近5年完成建设并正式提供服务,在数字图书馆领域处于领先地位并具有一定的影响力,代表了我国数字图书馆建设和服务水平。对这15所数字图书馆网站的结构代码、表现代码和页面性能进行检测和分析,以便掌握数字图书馆网站的Web标准化和性能优化情况,检测结果如表1所示:

表1

表1

表1 数字图书馆门户网站标记验证、CSS验证、Page Speed性能测试结果 序号 数字图书馆及验证URL 标记验证 CSS验证 Page Speed性能测试 错误数 警告数 编码 页面 分离 错误数 警告数 CSS版本 优化建议 (条) 页面性能 综合评分 1 国家科技数字图书馆 http://www.nstl.gov.cn/ 90 43 GBK 是 17 510 CSS2.1 4 31 2 中国国家数字图书馆 http://www.nlc.gov.cn/ 311 1 UTF-8 否 4 0 CSS3 5 53 3 中国高等教育数字图书馆 http://www.calis.edu.cn/ 168 48 UTF-8 否 4 3 CSS3 2 73 4 中国残疾人数字图书馆 http://dlpwd.nlc.gov.cn/ 7 1 UTF-8 是 6 6 CSS2.1 4 51 5 中国盲人数字图书馆 http://www.cdlvi.org.cn/index/node_149889.htm 122 70 UTF-8 否 0 0 CSS2.1 4 48 6 北京高校网络图书馆 http://www.netlib.edu.cn/ 48 3 GB2312 否 8 0 CSS2.1 1 76 7 重庆数字图书馆 http://www.cqelib.cn/ 125 44 GB2312 否 28 132 CSS2.1 7 60 8 贵州数字图书馆 http://www.gzlib.org/ 56 58 UTF-8 是 1 26 CSS2.1 2 69 9 广东数字图书馆 http://eweb.zslib.com.cn/com/gdlsyj/main.php 41 16 UTF-8 否 21 1 CSS2.1 2 53 10 湖北省高等学校数字图书馆 http://www.hbdlib.cn/web/guest/ 275 147 UTF-8 否 23 86 CSS3 6 34 11 海南省教育科研数字图书馆 http://210.37.32.18/portal/index.jsp 194 7 UTF-8 否 3 6 CSS3 3 68 12 河北省高等学校数字图书馆 http://www.hbidl.com.cn/ 34 16 GB2312 否 2 0 CSS3 2 31 13 天津高等教育文献信息中心 http://www.tjdl.cn/index.jsp 536 69 UTF-8 否 53 6 CSS3 4 42 14 上海数字图书馆 http://dl.eastday.com/index.html 22 3 UTF-8 否 3 0 CSS2.1 2 52 15 浙江省高校数字图书馆 http://zadl.zj.edu.cn/wps/portal 209 203 UTF-8 是 77 335 CSS3 6 45 (注:以上数据取自2011年12月。)

表1 数字图书馆门户网站标记验证、CSS验证、Page Speed性能测试结果

遵循Web标准的站点,应实现页面内容与形式相分离,页面内容代码应遵循W3C推荐的HTML4.01或XHTML1.0标准,在不改动内容页面的情况下,可根据需要实现多种不同的展现形式。标记验证用来检查内容代码是否遵循Web标准,访问校验平台为http://validator.w3.org/,提交页面的URL即可对该页面执行标记验证。笔者选取15个数字图书馆网站的首页作为验证URL,逐一提交到校验平台,校验完成后一般显示三类信息:是否通过标记验证、页面编码和代码类型。错误信息表示违背Web标准而必须修改;警告信息表示虽然不违背Web标准,但Web标准不建议这样使用;当没有错误信息时则显示验证通过。同时,对每个页面源代码进行人工分析,以判断页面内容与展现是否分离。依次记录15个页面验证结果中的错误数、警告数、页面编码和页面是否分离等信息,详见表1中“标记验证”数据。

从三个方面分析结构代码遵循Web标准的情况:

(1)页面内容与表现代码分离情况:实现页面内容与表现相分离的网站有4家,只占约四分之一;

(2)页面编码情况:采用GBK编码1家、GB2312编码3家、UTF-8编码11家,即四分之三的网站使用国际通用编码方式,验证过程中,系统推荐将GBK编码转换为UTF-8编码,以适应多平台的互操作性;

(3)结构代码校验情况:所有页面全部存在标记验证错误和警告,无一通过W3C的标记验证。

可见,15家数字图书馆门户网站页面内容与表现代码分离程度差,少数网站尚未使用国际通用编码,全部页面未通过W3C标记验证,页面结构代码基本未遵循Web标准。

进一步分析15个页面标记验证结果的错误信息,了解未通过标记验证的原因,以利于数字图书馆网站页面重构。由于“警告”不引起Web标准问题,这里暂不讨论。根据标记验证错误提示,15个校验页面共产生2 238条错误提示,每条错误提示由W3C网站定义并解释^{[ 9]}。笔者将2 238条错误提示归纳为6大类、24小类,如表2所示:

表2

表2

表2 标记验证错误信息来源分类 序号 大类 小类 1 XML解析错误 ①标签嵌套不合理 ②URL地址中直接使用字符“&” 2 标签嵌套错误 ①结束了未打开的标签 ②结束了未完成的标签 ③忘记关闭标签 ④标签中使用了非法代码 3 标签错误 ①标签未定义 ②标签未加“/”关闭 ③缺少开始标签 ④标签中缺少必要的属性 ⑤文档类型不允许该标签 4 属性名错误 ①该属性不存在 ②属性名含有非法字符 ③在同一标签中重复使用属性名 ④ID重定义 ⑤文档类型不允许该属性 5 属性值错误 ①属性值必须加引号 ②属性值含有非法字符 ③未使用命名字符 6 其他错误 ①无效注释 ②申明错误 ③使用了未定义实例参考 ④内容或URL中使用了“&”字符 ⑤非法字符数据

表2 标记验证错误信息来源分类

代码中的错误往往是相关的,比如标签嵌套不合理可能引起XML解析错误和标签嵌套错误,非法字符可能引起6类错误中的任何一类。因此,一处代码出错可能引起多处不同的错误信息提示,修改一处代码错误后,也就同时减少了许多错误信息。浏览器在解读页面时是从前到后顺序解读的,修正了前面的错误,同时也会减少后面代码的关联错误。

遵循Web标准的站点,除内容代码应遵循Web标准外,用于控制显示内容的样式代码也应遵循W3C推荐的CSS2.0、CSS2.1或CSS3.0标准。CSS验证可用来检查CSS代码是否遵循Web标准,访问CSS验证平台http://jigsaw.w3.org/css-validator/,提交页面URL,即可对该页面包含的CSS代码或CSS文件进行验证。笔者逐一对15个数字图书馆的首页进行CSS验证,CSS验证时未指定CSS版本配置文件,由验证程序根据CSS代码自动识别CSS版本。验证完成后如果没有错误提示,则通过CSS验证;如果未通过CSS验证,则显示错误信息和警告信息条数;验证结果中还会显示当前页面所使用的CSS版本,详见表1中“CSS验证”数据。

从使用的CSS版本看,8家站点使用CSS2.1标准,7家站点使用CSS3标准,CSS3不一定比CSS2.1技术先进,但代表较好的页面效果和较精简的实现方式。CSS3将CSS划分为更小的模块,以前需要使用图片和脚本来实现的效果,现可用CSS代码实现,如圆角、图片边框、文字阴影和盒阴影等,CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。从CSS验证结果看,15家站点只有中国盲人数字图书馆1家通过CSS2.1验证,遵照CSS标准的情况同样不容乐观。

15个站点CSS验证错误信息总计250条,其中绝大部分由以下三类原因造成:

(1)无效数字106处,占42.4%,主要是由无效的颜色属性值(6位16进制前不带#号,或者只有5位16进制)和无效像素值造成;

(2)语法错误68处,占27.2%;

(3)属性不存在45处,占18%。

这三类错误共219项,占总错误87.6%。浙江省高校数字图书馆错误数高达77项,仔细分析后发现:无效数字13处、语法错误44处、属性不存在15处,这三类错误信息占总错误数93.5%。如果能很好地规避这三类错误,大部分站点都能通过CSS验证。

遵循Web标准的站点,不但规范了建站流程和代码标准,便于升级和维护,还可精简页面代码,减少网页文件大小和浏览器请求网络连接次数,提升页面的访问性能。Page Speed^{[ 10]}是开源Firefox/Firebug插件,可以对网站的服务器配置和前端代码执行多项测试,以用来评估网页的性能,并提供性能改进建议。

在Firefox中安装扩展插件Page Speed(最新版本1.12),安装完成后Page Speed集成在Firebug工具中。分析页面时,先在Firefox中打开页面并等待加载完成,然后在Firebug中的Page Speed标签页执行性能分析。分析结果以红色圆点、黄色三角和绿色勾从高到低表示页面性能提升空间:红色圆点代表高优先级,较小的开发成本即能大幅度提升页面性能,应特别关注;黄色三角代表中优先级,较小的性能提升或者较大的实施难度,可一般关注;绿色勾代表低优先级或状况良好,可暂不做代码优化。15个站点首页经Page Speed的性能测试结果,详见表1中“Page Speed性能测试”数据。

测试结果中,将红色圆点和黄色三角表示的对提升页面性能有帮助的规则合并为优化建议,页面性能的评分是综合各条规则后的综合评分,评分低于60分一般都显示有较大性能提升空间;评分高于60分表示页面性能还不错,但还有小幅度提升空间。

经统计,15家站点不同程度地存在12类规则问题,主要集中于以下4类:

(1)未使用浏览器缓存,14家存在这个问题。建议在HTTP头中为静态资源(CSS文件、背景图片、按钮图片、导航图片、JS文件)指定至少为期一周的有效期,以指示浏览器从本地硬盘装载先前下载的资源,而不用通过网络下载,节约带宽。实现浏览器缓存需要通过程序代码设置HTTP头,不同程序语言、不同服务器平台设置方法不同,不再做详细介绍。

(2)未将图片组合为 CSS 贴图定位,13家存在这个问题。建议应用CSS贴图定位(CSS Sprites)技术,尽可能将多个小图片合并在一张大图片上,减小图片文件的数量,减小资源下载量和网络请求次数。

(3)未启用压缩,8家存在这个问题。建议使用GZip工具压缩JS文件、CSS文件,可减小数据传输量。GZip压缩是一种开发的压缩算法,主流浏览器和服务器对其均有很好的支持,GZip压缩是通过HTTP1.1协议中的Content-Encoding:gzip来进行标记说明,可明显减少代码文件的大小,从而节省带宽和加载时间。

(4)未优化图片,8家存在这个问题。建议去除不必要的空间、减少颜色数、去除注释、压缩JPEG或PNG图片文件,缩减图片大小。

15家数字图书馆门户网站,几乎全部站点未使用浏览器缓存、未使用CSS贴图定位技术,一半站点未启用GZip压缩、未优化图片文件,导致三分之二的站点页面性能结合评分低于60分,即三分之二的站点页面性能有待大幅度提升;三分之一页面虽然高于60分,但最高仅为76分,页面性能也有小幅提升空间,有必要进行页面代码优化。

虽然仅对网站首页进行测试与验证,但同一站点页面架构存在相似性,站点使用的样式代码、图片文件在全站中基本一致,因此,对站点首页的测试结果可较客观地反映整站情况。测试和分析结果表明,绝大多数数字图书馆门户网站在建设过程中尚未有Web标准化的概念和意识、未系统使用标准化流程和技术、未在开发过程中密切关注站点的访问性能,投入使用后难免给用户和管理人员带来诸多麻烦和障碍。

笔者建议遵循HTML4.01或XHTML1.0标准促进页面内容结构化,遵循CSS2.1或CSS3.0标准利用CSS表现内容,实现页面内容与显示样式相分离;借鉴Page Speed优化建议,提高数字图书馆门户网站性能;对现有数字图书馆网站进行重构,加快页面访问速度、方便平台维护和页面改版、支持多种浏览器和访问设备、提升平台易用性。

数字图书馆门户网站重构的重点对象是页面代码、样式代码、图片和JS文件,以下重构措施可供借鉴:

(1)重新规划并整理站点页面内容和表现方式。清理内容代码中的表现代码,清理表现代码中的内容代码,彻底分离页面内容和表现方式,这是进行站点重构最重要的一环。

(2)采用纯结构化的XHTML标签重构页面内容,并提交W3C标记验证,从前到后逐条修正校验错误,直至通过校验。特别注意以下事项:为页面添加正确的文档类型DOCTYPE,XHTML1.0提供了三种DOCTYPE类型:严谨型(Strict)、过渡型(Transitional)和框架型(Frameset),建议选择Strict;声明页面编码语言,建议统一使用UTF-8编码;遵守XHTML1.0规范正确书写页面标记代码。

(3)遵循CSS2.1或CSS3标准重构样式代码,并提交CSS验证,逐条修正验证错误,直至校验通过。特别注意以下事项:整体规划站点各个页面风格及样式元素,最大程度统一页面样式并实现CSS代码重用;尽量合并同一站点的CSS代码至同一文件,尽量精简CSS代码文件;提倡使用CSS贴图定位技术,将多张小图片合并为一张大图片;遵守规范正确书写CSS代码。

(4)将站点所有网页文件逐一提交Page Speed性能测试,根据测试结果调整页面代码、样式代码、图片和JS文件。特别关注使用浏览器缓存技术、启用GZip压缩技术、优化图片颜色数和使用JPEG或PNG图片文件。

(5)在优化或书写标准XHTML和CSS代码时,建议使用带有智能标签提示功能的编辑软件,比如Dreamweaver8/CC3或Express Web软件,以减少代码书写过程中的人为错误。