iframe异步加载性能优化及无阻塞加载

最新推荐文章于 2024-07-09 15:37:14 发布
最新推荐文章于 2024-07-09 15:37:14 发布
阅读量2.7w 收藏 13
点赞数 2
分类专栏： 前端日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fs821031547/article/details/51821095
版权
本文探讨了iframe在加载第三方内容时可能对主页面onload事件产生的阻塞问题，以及如何通过创新方法实现iframe的无阻塞加载，以提升网页性能和用户体验。Meebo的工程师分享了他们的Meebo Bar无阻塞加载iframe内容的技术，通过在中创建和添加script元素来异步加载iframe内容。
摘要由CSDN通过智能技术生成

我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。

  • iframe会阻塞主页面的onload事件
  • 主页面和iframe共享同一个连接池

　　阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。

怎样做到iframe无阻塞加载onload？

最低0.47元/天 解锁文章
PRO-D
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe懒加载_前端性能优化方案索引
weixin_34495151的博客
12-30 1197
作者：HaoyCn网址：http://segmentfault.com/a/1190000003821219陆续整理和不断更新网络上给出的前端性能的优化方案。这里只是做一个总概括式的索引，每一个方案都十分值得推敲和细说。1 请求和响应缓存控制请求头里，可以发送 If-Modified-Since 以及 If-None-Match 等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，...
iframe 异步加载技术及性能分析
12-04
这是一篇原创翻译文章。原文地址。 我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly: iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。 那么为了
iframe异步加载和延迟加载
php-yyds
12-15 1449
iframe异步加载：通常情况下，浏览器会按照HTML文档的顺序加载页面中的元素，而iframe标签内的内容会阻塞主页面的加载。为了解决这个问题，可以将iframe的src属性设置为空，而将实际需要加载的内容放在一个data-src属性中，然后使用JavaScript动态加载iframe内容。这样，主页面会先加载完成，用户可以先看到主页面的内容，然后再加载iframe内容，提升了页面的加载速度和用户体验。延迟加载：延迟加载是指将页面中的某些资源（如图片、脚本等）推迟到页面其他内容加载完成后再加载。
性能优化--- iframe阻塞页面渲染的问题，如何优化？
COCOLI_BK的博客
07-09 705
提前加载iframe的内容，可以通过设置iframe元素的src属性为一个空白页面或一个预加载页面，当需要显示iframe时再修改src属性为真正需要加载的页面。将iframe的内容分成多个片段，可以将每个片段作为独立的iframe加载，这样即使其中一个片段加载慢或发生错误，不会影响其他片段的加载。中的内容在父页面的其他内容之前下载完成，这将导致父页面的其他内容被延迟显示，从而阻塞页面的加载。的内容同时加载可能会对用户的设备产生显著的性能影响，从而阻塞页面的加载。的内容完全加载，父页面的渲染才能继续。
优化方案——用iframe嵌套网页进项目里面加载特别慢
weixin_44867717的博客
03-27 2444
嵌套网页时，加载速度可能会受到影响，特别是当嵌套的网页与项目处于不同的域名或子域名时。嵌套网页加载缓慢的问题，提高项目的性能和用户体验。通过以上方法，你可以尝试解决。
Web前端，高性能优化
weixin_30873847的博客
06-13 173
高性能HTML 一、避免使用iframe　　iframe也叫内联frame，可将一个HTML文档嵌入另一个HTML文档中。　　iframe的好处是，嵌入的文档独立于父文档，通常也借此使浏览器模拟多线程。缺点是： 　　①虽然iframe能模拟多线程，但主流浏览器的同域名并行下载数是不变的，浏览器对同域名的链接总是共享浏览器级别的连接池，　　 即使是不同窗口或标签页的同域名网页。　　②在页...
iframe异步加载（点击左边菜单加载右边内容）
weixin_30340745的博客
03-03 530
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。 话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2、在Default页面引入jquery文件并在body中加入也下代码： View Code 1 <div style="width: 20%; float...
优化iFrame体验：iframe-resizer-react
gitblog_00017的博客
05-23 573
优化iFrame体验：iframe-resizer-react iframe-resizer-reactThe official React interface for Iframe-Resizer项目地址:https://gitcode.com/gh_mirrors/if/iframe-resizer-react 【项目介绍】 在Web开发中，iFrame经常被用来嵌入外部内容或实现组件的独立...
iframe的优缺点及改进方法(有实例代码)
web前端开发博客
05-31 2527
iframe是用来内嵌网页的，使用起来很方便，但也有优缺点，比如iframe能原封不动地把嵌入的网页展现出来，如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷，iframe缺点会阻塞主页面的Onload事件，但有针对iframe的优缺点及改进方法。 一、iframe内嵌网页使用实例代码： <iframe width="100%" height="100%" frameborder="0" scrolling="auto" allow.
[转]iframe异步加载
weixin_30372371的博客
03-14 127
(function(d) { var iframe = d.body.appendChild(d.createElement('iframe')), doc = iframe.contentWindow.document; // style the iframe with some CSS iframe.style.cssText = "posit...
Iframe 加载技术和性能问题
热门推荐
笑飞雁的网络之家
09-11 1万+
前提话： 搞性能的人都知道高性能网站建设指南的作者steve讲了很多怎么处理代码，使你的网站速度很快。也包括讲了Iframe 的blocking问题，今天在网上看了Aaron的关于讲Iframe的性能提出了新的思路。好的东东要分享，决定做个翻译（虽然英文很差但好东东就要说出来）。在性能方面的东东国内确实讲得很少。 Iframe setTimeout() does not work in I
iframe异步加载实现点击左边菜单加载右边内容实例讲解
12-12
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。 话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2、在Default页面引入jquery文件并在body中加入也下代码： 代码如下: 局部刷新(框架加载页面) 我是隐藏的，点击局部刷新
不使用XMLHttpRequest实现异步加载 Iframe和script
09-05
运用Iframe和script可以实现简单的异步加载,没有使用XMLHttpRequest，需要的朋友可以参考下
异步加载script的代码
09-05
在网页开发中，异步加载（Asynchronous...总的来说，异步加载script是优化网页性能的关键技术之一，特别是在处理大量脚本时。开发者应根据项目需求和浏览器兼容性选择合适的方法来实现异步加载，以确保最佳的用户体验。
iframe 实现异步加载
今天最成功
08-09 1567
   &lt;div&gt; &lt;a target="memberListInfo" onclick="loadMemberList();" href="${pageContext.request.contextPath }/person.do?method=familymemberList&amp;personid=${person.family.jtid }"&gt; ...
性能优化之-------少用iframe
weixin_34342207的博客
10-07 105
1、DOM开销高 使用iframe的开销是很高的，在主页面中加载同等数量的div和iframe（标签内容都是空），iframe的耗时会比div的高1~2个数量级。 2、阻塞onload事件 在典型方式下（<iframe src=url></iframe>）使用iframe时，会阻塞onload事件。 解决方法：1、使用js动态设置iframe的src属性。只对...
elk或efk日志报警elastalert-docker安装
最新发布
08-28
elk或efk日志报警elastalert-docker安装
iframe异步加载
08-25
异步加载iframe是一种在页面加载过程中，通过延迟加载iframe内容的方法，以提高页面性能和用户体验。一种常见的异步加载iframe的方法是使用JavaScript的setTimeout()函数来延时加载iframe的内容。在代码中，我们可以使用setTimeout()函数来延迟执行设置iframe的src属性的函数，以便在页面加载完成后再加载iframe的内容。这种方法可以避免阻塞主页面的加载，并提高页面加载速度。另外，还有一种友好iframe(friendly iframe)技术，它也是一种无阻塞加载的方法，不过它可能不算是iframe加载的技术，但是必须使用iframe。 下面是一个示例代码，演示了如何使用setTimeout()函数来实现异步加载iframe: <iframe id="iframe1" src="" width="200" height="100" border="2"></iframe> <script> function setIframeSrc() { var s = "path/to/file"; var iframe1 = document.getElementById('iframe1'); if (-1 == navigator.userAgent.indexOf("MSIE")) { iframe1.src = s; } else { iframe1.location = s; } } setTimeout(setIframeSrc, 5); </script> 在这个示例中，我们使用了setTimeout()函数将setIframeSrc函数延迟执行了5毫秒，以便在页面加载完成后再加载iframe的内容。当setTimeout()函数执行后，setIframeSrc函数会根据浏览器类型设置iframe的src属性或location属性来加载指定的文件。这样就实现了异步加载iframe的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [iframe异步加载技术及性能](https://blog.csdn.net/shadow_zed/article/details/86682331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值