`
tbxialan
  • 浏览: 12216 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

iframe异步加载测试篇

阅读更多
                                                                                       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 异步加载技术及性能分析

    【iframe异步加载技术】 在Web开发中,`iframe`(Inline Frame)常用于加载第三方内容,如广告、插件等。它的主要优点是能够与主页面并行加载,不阻塞主页面的渲染。然而,`iframe`的使用并非没有代价。正如Steve ...

    C#判断webbrowser页面最终加载完成

    但同样,这并不一定适用于所有情况,尤其是当页面有异步加载内容时。 5. **超时机制**:设定一个合理的超时时间,如果在此时间内没有其他条件满足,就假设页面已经加载完成。这种方法用于处理那些可能出现无限加载...

    js调用-嵌入iframe

    - **异步加载**:若IFrame的内容是异步加载的,可能需要监听`load`事件来确保内容已完全加载。 - **同步问题**:跨域时,`postMessage`和`message`事件的同步问题需要特别注意,避免因为异步导致的数据丢失或错误。 ...

    jquery插件:ajax和iframe加载提示效果

    在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery插件正是为了解决这个问题而设计的,它提供了一种...

    JS加载iFrame出现空白问题的解决办法

    文章中提及,虽然存在有人反馈在IE6环境下,如果iframe的src属性紧靠iframe标签时也会出现空白,但作者测试后并未发现此问题。 再者,本文提供了另一种方法,即通过点击按钮触发提交表单时,使用`setTimeout`方法...

    html 网页加载

    - 可以通过异步加载等方式优化加载性能。 4. **安全问题**: - 需要确保嵌入的内容来自可信任的源,避免潜在的安全风险。 - 使用`sandbox`属性可以增强安全性,限制`&lt;iframe&gt;`的内容执行脚本、提交表单等操作的...

    iframe高度自适应,多浏览器兼容

    3. **Firefox**:Firefox通常能较好地处理`iframe`,但在某些情况下可能需要处理异步加载的内容,这时可以使用`MutationObserver`来监听`iframe`内容的变化。 4. **Chrome/Safari**:现代浏览器一般都能很好地支持`...

    iframe实时高度检测

    当`iframe`中的内容动态加载或变化时,如用户滚动、数据异步加载等,原始设定的固定高度可能无法满足需求。因此,我们需要一个机制来实时检测`iframe`内部页面的高度,并动态调整`iframe`及父页面的高度,以实现...

    extjsIframe例子

    IFrame(Inline Frame)是一种HTML元素,它允许在网页上嵌入另一个完整的HTML文档,从而实现页面的分层和异步加载。 在ExtJS中,IFrame通常用于实现一些特殊的需求,比如加载外部网页、嵌入表格或其他动态内容,...

    unigui_网页iframe交互_完善_03

    6. **性能优化**:由于IFrame的加载和通信可能对页面性能产生影响,因此优化这部分代码显得尤为关键。合理使用缓存策略,避免不必要的数据传输,以及使用异步处理来防止阻塞主线程,都是提高性能的有效手段。 7. **...

    SuperTabNavigator关闭 IFrame 错位

    IFrame(Inline Frame)则是一个HTML元素,常用于在一个页面中嵌入另一个页面,比如用于加载外部资源或者实现部分页面的异步更新。 当使用IFrame在SuperTabNavigator中承载内容时,每个Tab页可能包含一个独立的...

    jQuery 网页打印组件升级版(支持打印 iframe 内的内容)

    合理使用延迟加载、异步处理等技术可以提高用户体验。 ### 6. 结论 jQuery 网页打印组件升级版是一个强大的工具,尤其对于处理iframe打印需求的开发者来说,它简化了工作流程,提高了代码的可维护性。通过理解和...

    iframe ajax前端框架

    `iframe`(Inline Frame)是HTML中的一个元素,可以用来在一个网页中嵌入另一个网页,常用于实现页面部分刷新或加载外部资源。而`AJAX`(Asynchronous JavaScript and XML)则是一种让网页异步更新的技术,通过...

    ansancho88.github.io:测试-iframe

    - 使用`async`或`defer`属性可以异步加载`iframe`,提高页面加载速度。 - `srcdoc`属性允许直接在`iframe`内定义内容,避免了额外的HTTP请求。 以上就是关于`iframe`和CSS的一些关键知识点,这些知识对于理解如何...

    iframe下页面传参数为乱码问题探讨

    总之,iframe下页面传参数出现乱码问题可能由多种因素造成,需要仔细检查和测试每个环节的编码设置是否一致,并确保在获取参数时iframe内容已正确加载。通过逐步排查和调整,往往能够找到问题的症结所在并解决它。

    html中iframe控制父页面刷新实现思路及代码

    3. 在执行某些异步操作后,如AJAX请求,需要刷新父页面中的iframe以加载新的内容。 二、实现思路 实现iframe控制父页面刷新的思路主要包括以下步骤: 1. 在子页面中编写JavaScript代码,获取父页面中的iframe元素...

    IframeTestingAutomation

    2. **异步加载**:Iframe内的内容可能异步加载,这可能导致测试脚本在内容未完全加载时尝试操作元素,从而导致测试失败。 3. **跨域问题**:如果Iframe加载的内容来源于不同的域名,可能会受到浏览器的安全限制,这...

    Selenium课程体系介绍.docx

    - **处理动态加载内容**: 许多现代 Web 应用程序使用 AJAX 技术异步加载数据,了解如何处理这类动态内容对于编写稳定的测试脚本至关重要。 #### 五、自动化测试实战 - **编写测试用例**: 学习如何根据需求文档编写...

Global site tag (gtag.js) - Google Analytics