html5网站测试工具,基于HTML5网页的前端技术测试技巧

51Testing软件测试网)QTQ e-c

HTML5是一种最新发布网页构架的普遍模型，是构建对程序、对用户都更有价值的数据驱动的的前端技术框架，它的价值在于融合CSS/javaScript/flash等众多前端开发技术，更多的体现在对交互的理解和视觉设计的还原上。近日，中国一批著名的企业、、UC优视、等加入万维网联盟，并率先成为W3C 联盟最重要的HTML组

成员。这意味着中国企业将全面参与制定和推行世界互联网标准，中国企业在浏览器领域的地位已经从国内上升至国际范畴，HTML5

标志着未来互联网技术的发展方向。HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等待时间减少。所谓前端是指在客户端通过

浏览器发送了一个请求，除去后台系统用户请求、执行数据查询并对结果进行组织所需要处理消耗的时间。在涌现的新技术中，JavaScript和一套新的

API纯脚本技术，是HTML 5核心，需要通过JavaScript有许多方法可以用来检测HTML5的支持能力。51Testing软件测试网k;?7U$Z(Wv:Lip51Testing软件测试网!k8ft;J{kp

如何并优化在HTML5框架下的网页前端性能？Cg`0aPT~051Testing软件测试网-HCm}'P

1、利用自动化工具，目前主流的前端性能评测工具包括dynaTrace Ajax Edition、yslow及page speed，这些工具可以做到：支持各种IE浏览器，支持JS函数级的性能分析，帮助开发和测试人员有针对性地提出优化改进网页的前端性能。51Testing软件测试网;PV4Y5Qd'Z2\1_-j;|K3H

}(WdLT"cuC02、熟悉HTML网页构架语言，如一些网页标签的运用。HTML5的video标签的运用，通过增加一个元素到您的网页，就

可以轻松地在网页上播放视频，并且不需要其它插件。可以使用和同时提供三种视频文

件。，它是HTML 5一个强大的新功能，可以用于各种图形应用，

在现代的浏览器中的JavaScrip的性能提升也足以应付图像和视频处理需求。为HTML添加了一个二维的绘图区域。乍一

看，适于创建一个简单的绘图程序，可以使用线，弧，和矩形。通过CSS3，我们可以轻松实现以前只能通过

JavaScript实现的网页效果。例如，当鼠标划过时，需要组件可以淡入淡出，以前必须写复杂的JavaScript代码或者使用一个UI库

(jQuery，scriptaculous)。而通过CSS3，你就不再需要写代码了。例如，大量图片显示在网页上，会使网页的响应速度变慢，甚至难以

忍受。在HTML5标准之前，服务器端加载页面时用js和flsh代码来完成，这不仅要优化js脚本代码来保证响应速度，还需要选择或者制作适合网站规模

的相应flsh文本。从开发角度来说比较复杂，从测试角度来说，会影响前端性能。t4]G6}b1kpBX051Testing软件测试网"EAo7E(vJe

3、测试并优化页面代码封装，在打开一个新页面时候，服务器端首先会加载页面上各种脚本程序，脚本程序的多少、排列顺序、复杂程度、脚本文件或者代码中无重复脚本都会影响页面的打开速度，进而影响用户的浏览。

所以对脚本代码的规范和页面代码的是否封装是很重要的。如下图，代码示例，尽量不要在页面出现散乱的脚本代码，如定义css

的，定义

function()

{}。应该把他们统一封装在不同路径文件下，在使用时候直接调用即可。css文件后缀为.css，

href="/Style/default.css" rel=" " type=" "

/>。Javascript文件后缀为.js，。51Testing软件测试网&nX:sA3PfB51Testing软件测试网Ip!DiDba-W

这样做可以对资源文件进行优化，可以使服务器文件内容的物理容量变小，在目前电子商务和电

子政务中，主要流行的绝大部分业务依旧是web pages

(脱机浏览文件的存放位置。当某个站点被设成允许脱机使用时，就会在该文件夹中生成对应的文件)。这样可以降低在客户端访问服务器端时，文件的物理容量

小，加快传输时间和加载时间。51Testing软件测试网[K?0p;{5Q)xc2q

/{A(U6?i$T

x$o0整体代码如下：7Zr#np5v*D%@0

%Hi{ |2A(M#}0

)X P+zH1F

t"}K}nqZ1|0

阅读

;zUd$fR&Y