HTML5网页的前端技术测试技巧
来源:互联网 发布:java判断题 编辑:程序博客网 时间:2024/05/22 02:47
如何测试并优化在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代码并且会执行。
- HTML5网页的前端技术测试技巧
- HTML5学堂 全新的HTML5/前端技术分享平台
- 网页前端的相关技术整理
- HTML5 网页制作技巧
- Html5 前端 网页滚动条样式的设置
- 网页前端工程师必备技术
- 网页前端的Tribon三维模型展示技术分析
- 【猪猪-前端】HTML5+CSS3技术制作的计算器,下载即可使用,学习HTML5必备DEMO
- 动态网页制作技术PHP的十个应用技巧
- 实用:动态网页制作技术PHP的十个应用技巧
- 动态网页PHP程序员的优化调试技术和技巧
- WebSocket 网页聊天室的实现(服务器端:.net + windows服务,前端:Html5)
- [Web前端技术教学]网页布局-float及负margin技术的再认识-1
- [Web前端技术教学]网页布局-float及负margin技术的再认识-2
- 不要急于用HTML5 技术网页编码
- HTML5的初级技巧
- 企业HTML5前端开发最需要的技能及技术难点分析
- 企业HTML5前端开发最需要的技能及技术难点分析
- 我出现的内存泄露问题
- “textField.placeholder属性中的文字设置后在ios7下在textfield的中间。在ios6下字会往上偏”解决办法
- 滚动到底部加载内容
- 设计模式C++实现(12)——备忘录模式
- iOS开发中防止键盘挡住UITextField解决方案
- HTML5网页的前端技术测试技巧
- 关于yii的AR类的save使用
- 设计模式C++实现(13)——中介者模式
- Oracle使用PL/SQL脚本给表结构相同的动态表添加字段
- 设计模式C++实现(14)——职责链模式
- jQuery向匹配元素中插入新元素
- js 判断字符长度
- Loadrunner安装完毕需要配置的环境
- 设计模式C++实现(15)——观察者模式