英文原文：Iframe loading techniques and performance
我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。当然使用
iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:
1. iframe会阻塞主页面的onload事件
2. 主页面和iframe共享同一个连接池
阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是
google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。
那么为了提高页面性能，怎样才能不阻塞主页面的onload事件的来加载iframe呢？
这篇讲了四种加载iframe的方法：普通iframe，onload之后加载iframe，setTimeout() iframe和异步加载iframe。每种方法的加载结果我都
用IE8的时间线来展示。我建议多注意下动态异步加载这个方法，因为这是性能表现最佳的。另外，还有一种友好iframe(friendly iframe)技
术。它可能算不上是iframe加载的技术，但是必须使用iframe，它是无阻塞加载的。
普通方法加载iframe
这是一种人尽皆知的普通加载方法，它没有浏览器的兼容性问题。
<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"></iframe>
使用这种加载方法会在各浏览器中有如下表现：
**iframe会在主页面的onload之前加载
**iframe会在所有iframe的内容都加载完毕之后触发iframe的onload
**主页面的onload会在iframes的onload触发之后触发，所以iframe会阻塞主页面的加载。
**当iframe在加载的过程中，浏览器会标识正在加载东西，处于忙碌状态。
这里是一个演示页面，时间线图显示出iframe会阻塞主页面的加载：
我的建议：注意onload阻塞。如果iframe的内容只需要很短的时间来加载和执行，那么也不是个大问题，而且使用这种方法还有个好处
是可以和主页面并行加载。但是如果加载这个iframe需要很长时间，用户体验就很差了。你得自己测试一下，然后在
http://www.webpagetest.org/ 也做些测试，根据onload的时间看看是否需要其他加载方法。
在onload之后加载iframe
如果你想在iframe中加载一些内容，但是这些内容对于页面来说不是那么的重要。或者这些内容不需要马上展现给用户的，需要点击触
发之类的。那么可以考虑在主页面载入之后加载iframe。
<script>
//doesn't block the load event
function createIframe() {
var i = document.createElement("iframe");
i.src ="path/to/file";
i.scrolling ="auto";
i.frameborder ="0";
i.width ="200px";
i.height ="100px";
document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
// Check for browser support of event handling capability
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;
</script>
这种加载方法也是没有浏览器的兼容性问题的：
**iframe会在主页面onload之后开始加载
**主页面的onload事件触发与iframe无关，所以iframe不会阻塞加载。
**当iframe加载的时候，浏览器会标识正在加载。
这是是一个测试页面，时间线图如下：
这种方法比普通方法有什么好处呢？load事件会马上触发，有两个好处：
**其他等待主页面onload事件的代码可以尽早执行
**Google Toolbar计算你页面加载的时间会大大减少
但是，当iframe加载的时候，还是会看到浏览器的忙碌状态，相对于普通加载方法，用户看到忙碌状态的时间更长。还有就是用户还没
等到页面完全加载完的时候就已经离开了。有些情况下这是个问题，比如广告。
setTimeout()来加载iframe
这种方法的目的是不阻塞onload事件。
Steve Souders(又是他？)有一个这种方法的测试页面(http://stevesouders.com/efws/iframe-onload-nonblocking.php)。他写道：“src通
过setTimeout动态的设置，这种方法可以在所有的浏览器中避免阻塞”。
<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>
在除了IE8以外的所有浏览器中会有如下表现：
**iframe会在主页面onload之前开始加载
**iframe的onload事件会在iframe的内容都加载完毕之后触发
**iframe不会阻塞主页面的onload事件(IE8除外)
**为什么不会阻塞主页面的onload呢(IE8除外)？因为setTimeout()
**当iframe加载的时候，浏览器会显示忙碌状态。
下面是时间线图：
因为IE8的问题，这种技术就不适合很多网站了。如果有超过10%的用户使用IE8, 十分之一的用户体验就会差。你会说那也只是比普通
加载差一点点，其实普通加载性能上也不差。onload事件对于10%的用户来说都更长。。。。额，你自己考虑吧。但是最好在看了下面这个
很赞的异步加载方法之后再决定吧。
我在参加Velocity 2010的时候，Meebo的两个工程师(@marcuswestin and Martin Hunt)做了一个关于他们的Meebo Bar的演讲。他们使用
iframe来加载一些插件，并且真正做到了无阻塞加载。对于有的开发者来说，他们的做法还比较新鲜。很赞，超级赞。但是一些原因导致这
种技术没有得到相应的关注，我希望这篇blog能把它发扬光大。
<script>
(function(d) {
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText ="position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="'+
'var d = document;d.getElementsByTagName(\'head\')[0].'+
'appendChild(d.createElement(\'script\')).src'+'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
神奇的地方就在<body onload="">:这个iframe一开始没有内容，所以onload会立即触发。然后你创建一个script元素，用他来加载内
容、广告、插件什么的，然后再把这个script添加到HEAD中去，这样iframe内容的加载就不会阻塞主页面的onload！你应该看看他在个浏览器
中的表现：
**iframe会在主页面onload之前开始加载
**iframe的onload会立即触发，因为iframe的内容一开始为空。
**主页面的onload不会被阻塞
**为什么这个iframe不会阻塞主页面的onload？因为<body onload="">
**如果你不在iframe使用onload监听，那么iframe的加载就会阻塞主页面的onload。
**当iframe加载的时候，浏览器终于不显示忙碌状态了（非常好）
我的测试页给出下面的时间线：
转义字符让代码看着有些难受，这都不是问题。试试吧。
友好型iframe加载
这是用来加载广告的。虽然这不是一种iframe的加载技术，但是是用iframe来盛放广告的。他的亮点不在于iframe如何加载，而是主页
面、iframe、广告如何协同工作的。如下：
**先创建一个iframe，设置他的src为一个相同域名下的静态html文件。
**在这个iframe里面，设置js变量inDapIF=true来告诉广告它已经加载在这个iframe里面了。
**在这个iframe里面，创建一个script元素加上广告的url作为src，然后像普通广告代码一样加载。
**当广告加载完成，重置iframe大小来适应广告。
**这种方法也没有浏览器的兼容性问题。
Ad Ops Council推荐过这个方法，AOL也是用这种方法。想看看源码：这里有一个。一家瑞典的出版社Aftonbladet对于这种加载有很不
错的结论：在他们的主页上，加载时间减少30%，用户每周增加7%，新闻部分的点击量增加35%。我建议可以看看他们的资料：High
Performance Web Sites, With Ads: Don’t let third parties make you slow
我没有创建相关的测试页，所以也没有第一首的资料。从我调研的结果来说：
如果你只想在你的网页上调用一个确定的src地址的iframe的话这个方法不是很有用。
如果你想在网页上展示多个广告，比较灵活的方法的是：加载一个广告，然后更新iframe加载另一个主页面的DOMContentLoaded时间
不会被阻塞，页面渲染也不会被阻塞，当然，主页面的onload事件还是会被阻塞。
相关推荐
雷达驱动 rplidar-ros 与建图算法 hector-slam 资源包
内容概要：本文详细介绍了威纶通触摸屏与汇川SV660P伺服之间的Modbus RTU通讯实现方法，涵盖硬件接线、通讯参数配置、控制逻辑脚本编写以及状态监控等方面的内容。具体来说，文章首先讲解了硬件接线注意事项，如终端电阻设置和双绞线连接方式；接着深入探讨了通讯参数配置，包括波特率、数据位、停止位和校验方式等；然后展示了如何通过宏指令和Lua脚本实现正反转控制、速度设定等功能；最后讨论了状态监控部分，如母线电压和温度监测，并提供了相应的代码示例。此外，还分享了一些调试经验和常见问题解决方案。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对Modbus RTU通讯有一定了解的人群。 使用场景及目标：适用于需要通过触摸屏控制多台伺服电机并进行实时数据监控的场合，旨在帮助技术人员快速掌握具体的实现步骤和技巧，提高工作效率。 其他说明：文中提供的代码片段可以直接应用于实际项目中，但需要注意根据实际情况调整相关参数。同时，在调试过程中可能会遇到一些问题，如通讯不稳定或数据异常等，此时可以根据文中提到的经验进行排查和解决。
矢量边界，行政区域边界，精确到区县，可直接导入arcgis使用
内容概要：本文详细探讨了利用机器学习技术进行锂离子电池容量估计和健康状态预测的方法。首先介绍了充电数据的获取和预处理步骤，包括电压、电流、温度等多通道时序数据的采集和归一化处理。接着分别尝试了三种不同的神经网络模型：前馈神经网络（FNN）、卷积神经网络（CNN）和长短时记忆网络（LSTM），并分析了各自的优缺点。实验结果显示，FNN适用于结构化特征，CNN擅长捕捉局部模式，LSTM则在处理时序依赖方面表现出色。最终提出了一种融合模型，结合CNN和LSTM的优势，实现了更高的预测精度。此外，文中还讨论了数据预处理、模型优化以及实际应用中的注意事项。 适合人群：从事电池管理系统、机器学习、数据分析等相关领域的研究人员和技术人员。 使用场景及目标：①用于电池健康状态监测系统的设计与开发；②提高电池容量估计的准确性，延长设备使用寿命；③优化电池管理系统的性能，确保设备安全运行。 其他说明：文中提供了详细的代码示例，帮助读者更好地理解和复现实验结果。同时强调了数据预处理和特征工程的重要性，指出合理的数据处理方式能够显著提升模型的表现。
本研究利用Sen+MK方法分析了特定区域内的ET（蒸散发）趋势，重点评估了使用遥感数据的ET空间变化。该方法结合了Sen斜率估算器和Mann-Kendall（MK）检验，为评估长期趋势提供了稳健的框架，同时考虑了时间变化和统计显著性。 主要过程与结果： 1.ET趋势可视化：研究利用ET数据，通过ET-MK和ET趋势图展示了蒸散发在不同区域的空间和时间变化。这些图通过颜色渐变表示不同的ET水平及其趋势。 2.Mann-Kendall检验：应用MK检验来评估ET趋势的统计显著性。检验结果以二元分类图呈现，标明ET变化的显著性，帮助识别出有显著变化的区域。 3.重分类结果：通过重分类处理，将区域根据ET变化的显著性进行分类，从而聚焦于具有显著变化的区域。这一过程确保分析集中在具有实际意义的发现上。 4.最终输出：最终结果以栅格图和png图的形式呈现，支持各种应用，包括政策规划、水资源管理和土地利用变化分析，这些都是基于详细的时空分析。 ------------------------------------------------------------------- 文件夹构造： data文件夹：原始数据，支持分析的基础数据（MOD16A2H ET数据 宁夏部分）。 results文件夹：分析结果与可视化，展示研究成果。 Sen+MK_optimized.py：主分析脚本，适合批量数据处理和自动化分析。 Sen+MK.ipynb：Jupyter Notebook，复现可视化地图。
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性，重塑编程体验。无需垃圾回收，却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建，从物联网设备到高性能区块链，它凭借出色的性能和可靠性，成为开发者的全能利器。拥抱 Rust，解锁高效、安全编程新境界！
内容概要：本文详细介绍了使用C#实现与三菱FX3U系列PLC基于以太网MC协议通信的客户端设计。首先，文中讲解了前期准备工作，如引入必要的网络通信库。接下来，深入探讨了关键代码，包括创建TCP连接、发送MC协议指令、构建命令帧、解析位元件状态等。此外，还提到了数据解析过程中的一些注意事项，如ASCII码转换和字节序处理。为了提高可靠性，实现了重试机制，采用指数退避算法应对网络波动。文中提供了开源的DLL文件，封装了所有协议细节，使调用方只需关注业务逻辑。同时，给出了打包好的安装包，便于快速部署。最后，强调了项目的实用性，展示了在工业自动化项目中的应用实例。 适合人群：从事工业自动化领域的研发人员，尤其是有一定C#编程基础并对PLC通信感兴趣的工程师。 使用场景及目标：适用于需要与三菱FX3U系列PLC进行以太网通信的工业自动化项目。主要目标是帮助开发者快速搭建稳定的通信客户端，减少重复开发的工作量，提升开发效率。 其他说明：项目已在GitHub上开源，包含详细的注释文档和应急调试手册，有助于开发者更好地理解和维护代码。
内容概要：本文详细介绍了基于Spring Boot框架构建的资源共享管理系统的用户端和管理端功能。用户端涵盖资源发布、评论、用户注册登录等功能，通过Spring MVC和Spring Security实现。管理端提供会员信息管理和资源信息管理等功能，采用Spring Data JPA、Redis、JPA Criteria API等技术实现动态查询和缓存优化。此外，文章还探讨了文件上传、异步通知、权限控制等具体技术实现细节，如使用UUID重命名文件、Redis存储关注关系、@Async实现异步任务等。 适合人群：具备一定Java开发经验，特别是熟悉Spring Boot框架的研发人员。 使用场景及目标：适用于需要构建资源共享管理系统的开发者，帮助他们理解和掌握Spring Boot在实际项目中的应用，包括前后端交互、安全管理、数据处理等方面的具体实现。 其他说明：文中提供了大量代码片段，展示了各个功能模块的具体实现方式，有助于读者深入理解Spring Boot的开发流程和技术细节。
少儿编程scratch项目源代码文件案例素材-海盗预告片.zip
内容概要：本文详细介绍了如何利用遗传算法（GA）和粒子群算法（PSO）对极限学习机（ELM）进行优化，以提高其预测性能。首先构建了一个基础ELM模型，然后分别实现了GA-ELM和PSO-ELM两个优化版本。文中不仅提供了完整的代码实现，还解释了各算法的工作原理及其在优化过程中所起的作用。通过实验对比，展示了不同优化方法在预测精度和收敛速度方面的差异，并给出了具体的应用建议。 适合人群：具有一定机器学习基础的研究人员和技术开发者，尤其是对进化算法和神经网络感兴趣的从业者。 使用场景及目标：适用于需要提升ELM预测能力的实际项目中，如金融预测、天气预报等领域。主要目标是通过引入GA和PSO优化ELM的连接权值与隐含层神经元阈值，从而获得更好的泛化能力和更高的预测准确性。 其他说明：文中提供的代码可以直接运行并用于测试不同的优化策略。对于特定应用，可以根据实际情况调整相关参数，如种群大小、最大迭代次数等。此外，作者还提到了一些调参技巧以及不同算法之间的优缺点对比，帮助读者更好地理解和应用这些优化方法。
内容概要：本文详细介绍了如何利用深度强化学习（特别是分布式近端策略优化，DPPO）来解决热电联产系统（CHP）中的经济调度难题。传统方法由于线性化处理，无法充分考虑设备之间的非线性关系，导致优化效果不佳。而采用马尔可夫决策过程（MDP）建模和DPPO算法，可以更好地适应复杂的调度环境，提高系统的经济性和效率。文中展示了具体的算法实现步骤，包括策略网络和价值网络的设计、训练过程以及最终的策略生成。此外，还讨论了实际应用中的挑战和解决方案，如设备安全限制、奖励函数设计等。 适合人群：从事热电联产系统研究的技术人员、研究人员以及对深度强化学习应用于工业控制系统感兴趣的开发者。 使用场景及目标：适用于需要优化热电联产系统经济调度的场合，旨在提高能源利用率、降低成本、提升系统响应速度。具体目标包括：① 实现高效的热电联产系统调度；② 提供快速响应机制以应对突发事件；③ 发现并利用非线性耦合效应带来的潜在效益。 其他说明：尽管深度强化学习带来了显著的优势，但在实际应用中仍需注意一些细节问题，如设备启停损耗、极端天气的影响等。通过不断迭代和优化，该方法有望在未来进一步改善能源领域的智能化水平。
内容概要：本文详细介绍了基于STM32F103C8T6的智能水位水温控制系统的设计与实现。系统集成了超声波模块用于精确测量水位，DS18B20传感器用于监测水温，并通过继电器控制水泵进行自动补水或排水。此外，系统还利用ESP8266将数据传输至阿里云，配合自定义的安卓APP实现远程监控和管理。文中不仅提供了详细的硬件搭建步骤，还分享了关键代码片段，如超声波模块的驱动、温度补偿算法以及水泵控制逻辑等。同时，作者针对调试过程中遇到的问题进行了深入探讨，提出了有效的解决方案。 适合人群：具有一定嵌入式开发经验的技术爱好者、电子工程师及物联网开发者。 使用场景及目标：适用于家庭鱼缸、农业灌溉等领域，旨在实现智能化的水位和水温管理，提高系统的可靠性和用户体验。 其他说明：文中提到的完整工程代码和PCB设计文件均已公开，方便读者进一步研究和改进。
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性，重塑编程体验。无需垃圾回收，却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建，从物联网设备到高性能区块链，它凭借出色的性能和可靠性，成为开发者的全能利器。拥抱 Rust，解锁高效、安全编程新境界！
内容概要：本文详细介绍了使用Maxwell 16.0软件进行12槽11极永磁同步直线电机的仿真建模步骤和优化技巧。主要内容涵盖模型搭建、材料设置、网格划分、运动设置、激励源配置以及后处理分析等方面。文中提供了具体的参数设置和代码片段，帮助用户避免常见的错误并提高仿真效率。同时，针对可能出现的问题给出了详细的解决方案，如调整求解器参数、优化网格划分等。 适合人群：具有一定电磁仿真基础的技术人员，尤其是从事直线电机研究和开发的专业人士。 使用场景及目标：适用于需要精确仿真和优化永磁同步直线电机性能的研究项目，旨在降低推力波动、提高定位精度，并减少仿真时间和错误发生率。 其他说明：文中提到的一些技巧和经验来自于实际操作中的积累，能够有效提升仿真的稳定性和准确性。建议读者在实践中结合自身情况进行适当调整。
内容概要：本文详细介绍了基于LabVIEW的转子动平衡采集与分析系统的源码实现。该系统支持NI采集卡、串口采集卡及仿真信号源，涵盖了硬件配置、信号采集、数据处理、仿真功能、核心算法等多个方面。文中提供了具体的代码示例，如NI采集卡的模拟电压信号采集、串口采集卡的状态机处理、仿真信号生成等。此外，还讨论了滤波处理、动平衡计算方法、异常处理等内容，并分享了一些实践经验和技术细节。 适合人群：从事机械工程、自动化控制领域的工程师，尤其是那些需要进行转子动平衡采集与分析工作的技术人员。 使用场景及目标：适用于实验室研究、工业现场应用等多种场合，旨在帮助工程师实现高效稳定的转子动平衡数据采集与分析，优化机械设备性能，减少故障发生。 其他说明：文中提到的系统已经在实际工程项目中得到应用，经过长期测试和改进，能够应对复杂的工况环境。同时，作者也强调了在现场实施过程中需要注意的一些问题，如硬件接线、信号处理等。
少儿编程scratch项目源代码文件案例素材-厄运洞穴.zip
【云南省DEM（30米分辨率）】是一款地理信息数据产品，主要涵盖了云南省的地形高程信息。这款数据基于2019年8月5日发布的ASTER GDEM V3（Advanced Spaceborne Thermal Emission and Reflection Radiometer Global Digital Elevation Model Version 3）版本，是一个全球数字高程模型，提供的是30米的高分辨率。ASTER GDEM V3是通过日本航空航天探索局（JAXA）和美国国家航空航天局（NASA）合作的ASTER卫星获取的数据，它提供了全球范围内的高精度地表地形信息。 1. ASTER GDEM V3：ASTER GDEM V3是目前广泛使用的公开全球高程数据之一，其数据源自ASTER卫星的多光谱遥感图像。该数据集通过分析不同波段的反射和热发射来构建地表的三维模型，从而得出高程信息。V3版本是对之前版本的更新和改进，具有更高的数据质量和更少的错误。 2. GeoTIFF格式：这份数据采用GeoTIFF（Georeferenced Tagged Image File Format）格式，这是一种特殊的TIFF图像文件，包含了地理坐标系统信息。这意味着每张图像的每个像素都与地球表面的特定位置对应，方便在GIS软件中进行空间分析和地图制作。 3. WGS84坐标系：WGS84（World Geodetic System 1984）是全球最常用的地心地固坐标系统，广泛应用于GPS定位和其他全球导航系统。在云南省DEM数据中，使用WGS84坐标系可以确保与其他全球地理数据的一致性和兼容性。 4. DEM（Digital Elevation Model）：DEM是一种表示地面高程信息的数字模型，由等间距的高程点构成，用于描述地表地形特征。它在地理信息系统
内容概要：本文详细介绍了基于UDS（Unified Diagnostic Services）协议的Bootloader的设计与实现，涵盖其多协议支持（XCP、CCP、UDS）、AUTOSAR兼容性、多版本选择（ILLD和MCAL）、广泛硬件平台支持（如TC系列芯片）以及CAN FD的支持。文中不仅提供了上位机和下位机的代码示例，还展示了具体的测试用例，确保Bootloader的功能正确性和稳定性。此外，文章探讨了Bootloader在汽车电子和工业控制系统中的应用场景，强调了其重要性和灵活性。 适合人群：从事汽车电子、嵌入式系统开发的技术人员，尤其是那些需要深入了解Bootloader工作机制和实现细节的人群。 使用场景及目标：适用于需要开发或维护汽车电子控制单元（ECU）的团队，旨在提高系统的可靠性和性能。目标包括但不限于：实现高效的数据传输、确保诊断服务的准确性、优化刷写速度、增强系统的安全性等。 其他说明：文章提供了丰富的代码示例和技术细节，帮助读者更好地理解和应用基于UDS的Bootloader。同时，针对不同硬件平台和应用场景，给出了具体的配置建议和注意事项。
少儿编程scratch项目源代码文件案例素材-滑溜地板 v1.41.zip
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性，重塑编程体验。无需垃圾回收，却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建，从物联网设备到高性能区块链，它凭借出色的性能和可靠性，成为开发者的全能利器。拥抱 Rust，解锁高效、安全编程新境界！