• 尚大品牌
    • 尚大网校|在线考试|证书查询|成绩查询
    登录   |   注册
     
     
        准考证打印   论文投票   报考指南   论文辅导   软考培训   郑重申明  
    您现在的位置：  首页 > 软考学苑 > 软件评测师 > 软评上午基础知识 >> 正文
    正文
    软件评测师之基于HTML5网页的前端技术测试
    来源：尚大教育-软考学院 作者：辉辉 时间;2013-05-08 11:11:35 点击数： 尚大软考交流群：376154208
    　　HTML5是一种最新发布网页构架的普遍模型，是构建对程序、对用户都更有价值的数据驱动的Web的前端技术框架，它的价值在于融合CSS/javaScript/flash等众多前端开发技术，更多的
    <尚大教育，教育至上，人才为大：sdedu.cc>

    　　HTML5是一种最新发布网页构架的普遍模型，是构建对程序、对用户都更有价值的数据驱动的Web的前端技术框架，它的价值在于融合CSS/javaScript/flash等众多前端开发技术，更多的体现在对交互的理解和视觉设计的还原上。近日，中国一批著名的互联网企业百度、腾讯、UC优视、360等加入万维网联盟，并率先成为W3C 联盟最重要的HTML 工作组成员。这意味着中国企业将全面参与制定和推行世界互联网标准，中国企业在浏览器领域的地位已经从国内上升至国际范畴，HTML5 标志着未来互联网技术的发展方向。HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等待时间减少。所谓前端是指在客户端通过浏览器发送了一个请求，除去后台系统用户请求、执行数据查询并对结果进行组织所需要处理消耗的时间。在涌现的新技术中，JavaScript和一套新的API纯脚本技术，是HTML 5核心，需要通过JavaScript有许多方法可以用来检测HTML5的支持能力。

    　　如何测试并优化在HTML5框架下的网页前端性能？

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

    　　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文本。从开发角度来说比较复杂，从测试角度来说，会影响前端性能。

    　　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>.

    　　这样做可以对资源文件进行优化，可以使服务器文件内容的物理容量变小，在目前电子商务和电子政务中，主要流行的绝大部分业务依旧是web pages （脱机浏览文件的存放位置。当某个站点被设成允许脱机使用时，就会在该文件夹中生成对应的文件）。这样可以降低在客户端访问服务器端时，文件的物理容量小，加快传输时间和加载时间。

    　　整体代码如下：

    　　<html>

    　　<head>

    　　<title>阅读</title>

    　　<link href=“/Style/default.css” rel=“” type=“ ” />

    　　<script src=“/Javascript/main.js” type=“”></script>

    　　</head>

    　　<style></style>

    　　<script type=“text/javascript”>

    　　function（） {}

    　　</script>

    　　<body>

    　　<table><tr><td></td></tr></table>

    　　</body>

    　　</html>

    　　4、测试XSS（Cross Site Script），跨站脚本攻击。它指的是不怀好意的攻击者向Web页面里插入恶意html代码，当用户浏览该页之时，已经嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的。

    　　示例：假如你可以发布信息的功能存在漏洞，并可以执行脚本中加入一个恶意脚本，那么目前看到发布信息人的浏览器都会执行这个脚本弹出提示框，恶意脚本就会被作为某一标签的内容显示。如果你正在页面进行数据输入操作，比如输入用户名、密码等，更新后输入位置会显示到页面中的某一个标签代码，如果输入的是nihao<script src=“hack.js” type=“text/javajscript”></script>

    　　那么如果不做过滤直接显示到页面，会引进一个第三方的js代码并且会执行。

    　　测试技巧：对于陌生人发布的链接和信息，最好是复制后，在新开的窗口中打开，当然最好的办法就是无视。在输入的地方对html标签及一些特殊字符（ “<>&等等）做过滤，将其转化为不被浏览器解释执行的字符。

    <尚大教育，教育至上，人才为大：sdedu.cc>
     
       各省软考办 
     
    来顶一下
    返回首页
    返回首页
    上一篇：软件评测师之浏览器刷新的逻辑和测试方法
    下一篇：软件评测师之Web容器测试的模型选择
     相关文章
     
     
    跟贴共条
    查看完整评论
    笔 名 ：   验证码：
    网友评论仅供其表达个人看法，并不表明尚大教育同意其观点或证实其描述
    距离2023年05月27-28日软考考试还有 天
    尚大软考交流群：376154208
    软考各地考务机构
    更多>>
    全国 北京 天津 河北 山西
    内蒙古 辽宁 吉林 黑龙江 上海
    江苏 浙江 安徽 福建 江西
    山东 河南 湖北 湖南 广东
    广西 海南 重庆 四川 贵州
    云南 西藏 陕西 甘肃 青海
    宁夏 新疆 香港 澳门 宁波
    大连 兵团 报名入口 联系方式
    历年真题汇总
    更多>>




    各省市软考报名简章
    软考动态
    更多>>
    PMI, PMP, Project Management Professional, PgMP, PfMP, PMI-ACP, PMI-PBA, PMBOK and the PMI Registered Education Provider logo are registered marks of the Project Management Institute, Inc.   京ICP备12019404号  Copyright© 2008-2021 北京翰林尚大教育科技有限公司