基于HTML5网页的前端技术测试技巧
上一篇 /
下一篇 2012-08-30 10:03:25
/ 个人分类:杂谈
Sy&M&?4R~;k0V(W0 HTML5是一种最新发布网页构架的普遍模型,是构建对程序、对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上。近日,中国一批著名的互联网企业百度、腾讯、UC优视、360等加入万维网联盟,并率先成为W3C 联盟最重要的HTML工作组
成员。这意味着中国企业将全面参与制定和推行世界互联网标准,中国企业在浏览器领域的地位已经从国内上升至国际范畴,HTML5
标志着未来互联网技术的发展方向。HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少。所谓前端是指在客户端通过
浏览器发送了一个请求,除去后台系统用户请求、执行数据查询并对结果进行组织所需要处理消耗的时间。在涌现的新技术中,JavaScript和一套新的
API纯脚本技术,是HTML 5核心,需要通过JavaScript有许多方法可以用来检测HTML5的支持能力。
~_l
Xfb0%Hk,R%if$}e0 如何测试并优化在HTML5框架下的网页前端性能?51Testing软件测试网
g5pT2QL)Y5|2o
51Testing软件测试网%\%W't
NO 1、利用自动化工具,目前主流的前端性能评测工具包括dynaTrace Ajax Edition、yslow及page speed,这些工具可以做到:支持各种IE浏览器,支持JS函数级的性能分析,帮助开发和测试人员有针对性地提出优化改进网页的前端性能。
F{;`Di%JS051Testing软件测试网M/B"t)e1Q
2、熟悉HTML网页构架语言,如一些网页标签的运用。HTML5的video标签的运用,通过增加一个<video>元素到您的网页,就
可以轻松地在网页上播放视频,并且不需要其它插件。可以使用<video>和<source>同时提供三种视频文
件。<canvas>,它是HTML 5一个强大的新功能,可以用于各种图形应用,
在现代的浏览器中的JavaScrip的性能提升也足以应付图像和视频处理需求。<canvas>为HTML添加了一个二维的绘图区域。乍一
看,<canvas>适于创建一个简单的绘图程序,可以使用线,弧,和矩形。通过CSS3,我们可以轻松实现以前只能通过
JavaScript实现的网页效果。例如,当鼠标划过时,需要组件可以淡入淡出,以前必须写复杂的JavaScript代码或者使用一个UI库
(jQuery,scriptaculous)。而通过CSS3,你就不再需要写代码了。例如,大量图片显示在网页上,会使网页的响应速度变慢,甚至难以
忍受。在HTML5标准之前,服务器端加载页面时用js和flsh代码来完成,这不仅要优化js脚本代码来保证响应速度,还需要选择或者制作适合网站规模
的相应flsh文本。从开发角度来说比较复杂,从测试角度来说,会影响前端性能。
os*N"H"Z*A*d0hDK#KZe&r,W/|@0 3、测试并优化页面代码封装,在打开一个新页面时候,服务器端首先会加载页面上各种脚本程序,脚本程序的多少、排列顺序、复杂程度、脚本文件或者代码中无重复脚本都会影响页面的打开速度,进而影响用户的浏览心情。
所以对脚本代码的规范和页面代码的是否封装是很重要的。如下图,代码示例,尽量不要在页面出现散乱的脚本代码,如定义css
的<style></style>,定义<script. type="text/javascript">
function()
{}</script>。应该把他们统一封装在不同路径文件下,在使用时候直接调用即可。css文件后缀为.css,<link
href="/Style/default.css" rel=" " type=" "
/>。Javascript文件后缀为.js,<script. src="/Javascript/main.js" type="
"></script>。
8N:Q;WG[3qb
a4^!bq0G7_.s9tD[0 这样做可以对资源文件进行优化,可以使服务器文件内容的物理容量变小,在目前电子商务和电
子政务中,主要流行的绝大部分业务依旧是web pages
(脱机浏览文件的存放位置。当某个站点被设成允许脱机使用时,就会在该文件夹中生成对应的文件)。这样可以降低在客户端访问服务器端时,文件的物理容量
小,加快传输时间和加载时间。51Testing软件测试网.B_/w#Tn2ZO
?6{,v
51Testing软件测试网y^-o0mR1F*z 整体代码如下:51Testing软件测试网A
e7g5E]*\3Y
<html> q-zvC
I(M8x0<head>51Testing软件测试网e~W(uH? <title>阅读</title>51Testing软件测试网^5\QTvp[#BF <link href="/Style/default.css" rel="" type=" " /> GB;Tt|J5nQ0<script. src="/Javascript/main.js" type=""></script>51Testing软件测试网ku/?8Q hd4h*|7X </head> %JrPR9jn#G0<style></style>51Testing软件测试网r-Ft6Y8W6I <script. type="text/javascript"> &o8o^4`1Th7mP0function() {}51Testing软件测试网.U"s2N5G+}*Cj KY8a </script>51Testing软件测试网ik D0HU <body>51Testing软件测试网-`C/d(Y m*YF <table><tr><td></td></tr></table>51Testing软件测试网
bV?g]o
x </body>51Testing软件测试网 oH
z_x7RI'c n5W </html> |
$?%GhS9E5SWEeB0 4、测试XSS(Cross Site Script),跨站脚本攻击。它指的是不怀好意的攻击者向Web页面里插入恶意html代码,当用户浏览该页之时,已经嵌入的恶意html代码会被执行,从而达到恶意用户的特殊目的。
-~8c? z#c+gGQ x051Testing软件测试网!ro7cMg)L)I
示例:假如你可以发布信息的功能存在漏洞,并可以执行脚本中加入一个恶意脚本,那么目前看到发布信息人的浏览器都会执行这个脚本弹出提示框,恶意脚本就
会被作为某一标签的内容显示。如果你正在页面进行数据输入操作,比如输入用户名、密码等,更新后输入位置会显示到页面中的某一个标签代码,如果输入的是
nihao<script. src="hack.js" type="text/javajscript"></script>
)Z-phu+Y&~6y051Testing软件测试网4FT[|8Hq+q 那么如果不做过滤直接显示到页面,会引进一个第三方的js代码并且会执行。51Testing软件测试网5~5|4_n-O\
51Testing软件测试网.N'U^\4L:h 测试技巧:对于陌生人发布的链接和信息,最好是复制后,在新开的窗口中打开,当然最好的办法就是无视。在输入的地方对html标签及一些特殊字符( ”<>&等等)做过滤,将其转化为不被浏览器解释执行的字符。
A:T DXOe0
收藏
举报
TAG: