iframe异步加载测试篇
谈到Transformers,顾名思义“变形金刚”,卖家中心首页由各模块组成,模块可移动、删除等,大部分模块实现Iframe的异步加载。
如何进行iframe异步加载的测试,首先需要清楚,何为iframe异步加载?
iframe可在主页面的onload之前加载,也可在主页面载入之后加载。
若采用普通方法加载iframe,主页面的onload会在iframes的onload触发之后触发,所以iframe会阻塞主页面的加载。若采用异步加载iframe,主页面的onload事件触发与iframe无关,所以iframe不会阻塞加载。
普通方法加载iframe如下:
<iframe src="/path/to/file" frameborder="0" width="500" height="50" scrolling="auto"> </iframe>
异步加载iframe如下:
createIfr: function (id, url, height) {
var ifr = document.createElement('iframe');
ifr.id = id;
ifr.src = url;
ifr.width = '100%';
if(height){
ifr.height = height + 'px';
}
ifr.scrolling = 'no';
ifr.frameBorder = 0;
return ifr;
}
掌握iframe异步加载的原理后,接下来,我们需要掌握iframe异步加载的测试并知晓iframe异步加载带来的问题。
Iframe的异步加载测试不可忽略,最重要的是会影响页面的整体加载速度,性能指标需考虑其中。
前端页面性能测试的进行不可避免。测试页面性能的工具,主要用YSlow、Dynatrace和PageSpeed。
YSlow下载及详情见http://developer.yahoo.com/yslow/
Dynatrace下载及详情见http://www.dynatrace.com/en/
Page Speed下载及详情见
http://code.google.com/intl/zh-CN/speed/page-speed/download.html
使用这几个工具进行前端页面性能测试时,性能通过指标也是因项目自身特点而定,操作详情在此不累述。
Iframe的异步加载在影响页面加载性能的同时,也给功能测试带来思考。
虽然暂时不可避免,但是发生的概率极小。
1、 异步加载在发送数据环节,有极小的可能性是会造成数据丢失,用户获得数据不完整,页面显示不正确
2、 两个用户在操作同一个页面iframe异步加载的模块,会造成用户数据在某个时刻不一致,报错“数据保存失败”
针对1,有效的手段是让客户端重新发送请求,服务端reload客户端的数据,保证数据发送的完整性。
针对2,我们无法断定这就是bug,只能说是潜在的问题。如果用户A和用户B同时操作模块,iframe异步加载发送数据,后台会对操作前和操作后的数据进行比较,判断是否一致,例如:若用户A和B操作前的数据是100,用户A操作后的数据是200,此时已经发送到后台的数据是100和200,用户B操作后的数据是300,此时发送到后台的数据是100和300,但是因为用户A操作了,造成用户B操作前的数据为200,但之前后台查询出来的是100,造成数据紊乱,后台报错,前端页面展示“数据保存失败”。
面对iframe异步加载所带来的问题,作为测试方,需综合考虑各方因素,尽量测试到位,全方位出击。
- 大小: 18.6 KB
- 大小: 23.5 KB
分享到:
相关推荐
【iframe异步加载技术】 在Web开发中,`iframe`(Inline Frame)常用于加载第三方内容,如广告、插件等。它的主要优点是能够与主页面并行加载,不阻塞主页面的渲染。然而,`iframe`的使用并非没有代价。正如Steve ...
但同样,这并不一定适用于所有情况,尤其是当页面有异步加载内容时。 5. **超时机制**:设定一个合理的超时时间,如果在此时间内没有其他条件满足,就假设页面已经加载完成。这种方法用于处理那些可能出现无限加载...
- **异步加载**:若IFrame的内容是异步加载的,可能需要监听`load`事件来确保内容已完全加载。 - **同步问题**:跨域时,`postMessage`和`message`事件的同步问题需要特别注意,避免因为异步导致的数据丢失或错误。 ...
在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery插件正是为了解决这个问题而设计的,它提供了一种...
文章中提及,虽然存在有人反馈在IE6环境下,如果iframe的src属性紧靠iframe标签时也会出现空白,但作者测试后并未发现此问题。 再者,本文提供了另一种方法,即通过点击按钮触发提交表单时,使用`setTimeout`方法...
- 可以通过异步加载等方式优化加载性能。 4. **安全问题**: - 需要确保嵌入的内容来自可信任的源,避免潜在的安全风险。 - 使用`sandbox`属性可以增强安全性,限制`<iframe>`的内容执行脚本、提交表单等操作的...
3. **Firefox**:Firefox通常能较好地处理`iframe`,但在某些情况下可能需要处理异步加载的内容,这时可以使用`MutationObserver`来监听`iframe`内容的变化。 4. **Chrome/Safari**:现代浏览器一般都能很好地支持`...
当`iframe`中的内容动态加载或变化时,如用户滚动、数据异步加载等,原始设定的固定高度可能无法满足需求。因此,我们需要一个机制来实时检测`iframe`内部页面的高度,并动态调整`iframe`及父页面的高度,以实现...
IFrame(Inline Frame)是一种HTML元素,它允许在网页上嵌入另一个完整的HTML文档,从而实现页面的分层和异步加载。 在ExtJS中,IFrame通常用于实现一些特殊的需求,比如加载外部网页、嵌入表格或其他动态内容,...
6. **性能优化**:由于IFrame的加载和通信可能对页面性能产生影响,因此优化这部分代码显得尤为关键。合理使用缓存策略,避免不必要的数据传输,以及使用异步处理来防止阻塞主线程,都是提高性能的有效手段。 7. **...
IFrame(Inline Frame)则是一个HTML元素,常用于在一个页面中嵌入另一个页面,比如用于加载外部资源或者实现部分页面的异步更新。 当使用IFrame在SuperTabNavigator中承载内容时,每个Tab页可能包含一个独立的...
合理使用延迟加载、异步处理等技术可以提高用户体验。 ### 6. 结论 jQuery 网页打印组件升级版是一个强大的工具,尤其对于处理iframe打印需求的开发者来说,它简化了工作流程,提高了代码的可维护性。通过理解和...
`iframe`(Inline Frame)是HTML中的一个元素,可以用来在一个网页中嵌入另一个网页,常用于实现页面部分刷新或加载外部资源。而`AJAX`(Asynchronous JavaScript and XML)则是一种让网页异步更新的技术,通过...
- 使用`async`或`defer`属性可以异步加载`iframe`,提高页面加载速度。 - `srcdoc`属性允许直接在`iframe`内定义内容,避免了额外的HTTP请求。 以上就是关于`iframe`和CSS的一些关键知识点,这些知识对于理解如何...
总之,iframe下页面传参数出现乱码问题可能由多种因素造成,需要仔细检查和测试每个环节的编码设置是否一致,并确保在获取参数时iframe内容已正确加载。通过逐步排查和调整,往往能够找到问题的症结所在并解决它。
3. 在执行某些异步操作后,如AJAX请求,需要刷新父页面中的iframe以加载新的内容。 二、实现思路 实现iframe控制父页面刷新的思路主要包括以下步骤: 1. 在子页面中编写JavaScript代码,获取父页面中的iframe元素...
2. **异步加载**:Iframe内的内容可能异步加载,这可能导致测试脚本在内容未完全加载时尝试操作元素,从而导致测试失败。 3. **跨域问题**:如果Iframe加载的内容来源于不同的域名,可能会受到浏览器的安全限制,这...
- **处理动态加载内容**: 许多现代 Web 应用程序使用 AJAX 技术异步加载数据,了解如何处理这类动态内容对于编写稳定的测试脚本至关重要。 #### 五、自动化测试实战 - **编写测试用例**: 学习如何根据需求文档编写...