iframe异步加载技术及性能

这是一篇原创翻译文章。原文地址。

 

我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:

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

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

那么为了提高页面性能，怎样才能不阻塞主页面的onload事件的来加载iframe呢？

这篇讲了四种加载iframe的方法：普通iframe，onload之后加载iframe，setTimeout() iframe和异步加载iframe。每种方法的加载结果我都用IE8的时间线来展示。我建议多注意下动态异步加载这个方法，因为这是性能表现最佳的。另外，还有一种友好iframe(friendly iframe)技术。他可能算不上是iframe加载的技术，但是必须使用iframe，他是无阻塞加载的。

 

普通方法加载iframe

 

这是一种人尽皆知的普通加载方法，它没有浏览器的兼容性问题。

1 <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。 
 1 <script>
 2 
 3 //doesn't block the load event
 4 function createIframe() {
 5     var i = document.createElement("iframe");
 6     i.src = "path/to/file";
 7     i.scrolling = "auto";
 8     i.frameborder = "0";
 9     i.width = "200px";
10     i.height = "100px";
11     document.getElementById("div-that-holds-the-iframe").appendChild(i);
12 };
13 // Check for browser support of event handling capability
14 if (window.addEventListener) window.addEventListener("load", createIframe, false);
15 else if (window.attachEvent) window.attachEvent("onload", createIframe);
16 else window.onload = createIframe;
17 </script>

这种加载方法也是没有浏览器的兼容性问题的：

  • iframe会在主页面onload之后开始加载
  • 主页面的onload事件触发与iframe无关，所以iframe不会阻塞加载
  • 当iframe加载的时候，浏览器会标识正在加载

这是是一个测试页面，时间线图如下

iframe异步加载技术及性能_第1张图片
这种方法比普通方法有什么好处呢？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加载的时候，浏览器会显示忙碌状态
下面是时间线图
iframe异步加载技术及性能_第2张图片
因为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异步加载技术及性能_第3张图片
转义字符让代码看着有些难受，这都不是问题。试试吧。

友好型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事件还是会被阻塞。
转载请注明：
作者： BeiYuu
本文地址： iframe异步加载技术及性能

你可能感兴趣的:(iframe)

  • FastD：高性能PHP API框架 钟冶妙Tilda
    FastD：高性能PHPAPI框架fastD:rocket:AhighperformancePHPAPIframework.项目地址:https://gitcode.com/gh_mirrors/fa/fastD项目介绍FastD是一个专为高性能API场景设计的PHP框架，它充分利用了Swoole的高性能特性，为开发者提供了一个轻量级且易于扩展的开发环境。FastD不仅支持快速构建API服务，还提
  • 低成本·无任何依赖·实现大文件pdf预览功能-带下载进度
    经常做pdf预览的小伙伴都知道，如pdfjs,pdfjs-dist,react-pdf等等，各种库，但是其实就是为了预览一下pdf内容。而且pdfjs-dist还会依赖node-pre-gyp,做前端的都知道，这个gpy是有多恶心。好了，为了不用任何库，就可以预览pdf，你可以如下操作：1.新窗口打开或将pdf地址放在iframe的src里预览写法如下：这么做有一个问题，如果pdf的地址请求头是a
  • BroadcastChannel 通讯原理 A-Kamen 前端前端javascript开发语言
    BroadcastChannel是一种用于在同一来源（同一协议、主机名和端口号）下不同浏览器上下文（如标签页、iframe、Worker、ServiceWorker）之间进行消息广播的API。它提供了一种简便、可靠的方法来实现跨上下文的实时通讯。BroadcastChannel的基本概念广播频道：BroadcastChannel创建的实例代表一个特定的广播频道，所有监听该频道的上下文都能接收该频道
  • Manus平替来了！CAMEL-AI开源OWL，开源框架中排名第一,上线一天获得3.3K stars！ AIGC Studio AIGCAIGC前沿人工智能自然语言处理AIGC计算机视觉语言模型
    OWL在GAIA基准测试中取得58.18平均分，在开源框架中排名第一！OWL是一个前沿的多智能体协作框架，推动任务自动化的边界，构建在CAMEL-AIFramework。具体可以看公众号今天推送的第二篇文章~OWL的愿景是彻底变革AI智能体协作解决现实任务的方式。通过利用动态智能体交互，OWL实现了跨多领域更自然、高效且稳健的任务自动化。3月7号OWL在GitHub上开源了代码，一天就获得3.3k
  • html5 iframe实现页面预览pdf 十年 lius web前端html5
    一个可以把上传文件的绝对地址拿到的方法：//建立一个可存取到该file的urlfunctiongetObjectURL(file){varurl=null;//下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的js函数而已if(window.createObjectURL!=undefined){//basicurl=window.createObjectURL(file);}else
  • [转]iframe嵌入网页的用法（实用） weixin_30855099
    [转]iframe嵌入网页的用法（实用）iframe嵌入网页的用法作者：自由勇点击：MT-8000最后更新2003-10-12iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。也应该是框架的一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。我们举第一个例子，具体代码如：，这里的URL可
  • 【同源战略下的暗网通道：BroadcastChannel 拆解与跨维度攻防实战】 Gazer_S 前端javascript缓存chrome
    BroadcastChannel诞生的技术背景BroadcastChannel的背景故事，前世今生️前BroadcastChannel时代的通信困局postMessage的繁琐性需维护窗口引用链：父窗口↔iframe↔子iframe消息路由需手动管理，复杂度O(n²)//传统多级通信parent.window.frames[0].postMessage(data,origin);localStor
  • 一文掌握Selenium的详细使用 数据知道 2025年爬虫和逆向教程selenium测试工具爬虫数据采集
    文章目录1.安装Selenium1.1安装Selenium库1.2下载浏览器驱动2.基础用法2.1启动浏览器2.2查找元素2.3操作元素3.高级功能3.1等待机制3.2处理弹窗3.3执行JavaScript3.4切换窗口或iframe3.5处理Cookies3.6截图3.7处理下拉菜单4.浏览器选项4.1无头模式（Headless）4.2禁用图片加载4.3设置代理5.常见应用场景5.1自动化登录5
  • 日期时间选择(设置禁用状态) 柠檬树^-^ vue.jselementuijavascript
    目录1.element文档需要2.禁用所有过去的时间3.设置指定日期的禁用时间起始日期时刻为12:00:00exportdefault{data(){return{value1:''};}};1.element文档需要Element-Theworld'smostpopularVueUIframeworkpicker-options起始日期时刻为12:00:00exportdefault{data(
  • 【网络安全 | 漏洞挖掘】Zoho 账户接管：一次点击就能完全控制你的Zoho账户 秋说 web安全漏洞挖掘
    未经许可，不得转载。本文涉及的所有漏洞均已修复。文章目录1、DOMXSS2、PostMessage配置错误3、升级至账户接管（ATO）IFRAME读取邮件CORSOTP（一次性密码）XSSPoC->账户接管（ATO）Post-MessagePoC->ATO在这篇文章中，我将讨论我是如何发现DOMXSS和Postmessage配置错误，并利用它们升级为Zoho账户接管的。本文将分为三个部分：DOMX
  • layui弹出框 来干了这碗代码 layui笔记layuihtmlhtml5
    layui弹出框文章目录layui弹出框第一步:引用文件第二步：编写脚本第一步:引用文件layui弹出框第二步：编写脚本//iframe窗//layer.open({//type:2,//title:false,//closeBtn:0,//不显示关闭按钮//shade:[0],//area:['340px','215px'],//offset:'rb',//右下角弹出//time:2000,//
  • java代码走查_java代码开发完成后，代码走查规范 游凯超 java代码走查
    代码走查注意事项：1、不变的值，尽量写个常量类2、尽量使用if{}else，不要一直if去判断3、减少循环调用方法查询数据库4、dao层尽量不要用逻辑，尽量在service里写业务逻辑5、金额使用Bigdecimal类型的，0.00这种格式靠右显示6、iframe的弹框，要放到js里，可以缓存，放到jsp里每次都需要加载。7、ajax对应success对应一个error异常，尽量用error，网络
  • YIUI Unity UI框架安装与使用教程 翟培任Lame
    YIUIUnityUI框架安装与使用教程YIUIUnity3DUGUIFramework项目地址:https://gitcode.com/gh_mirrors/yi/YIUI1.项目目录结构及介绍YIUI项目的目录结构如下：YIUI/├──YIUIFramework/│├──Assets/││├──Scripts/││├──Resources/││├──Scenes/││├──Shaders/││
  • Web组件适配网页中iframe
    场景描述：当使用web组件加载带有iframe的页面时，由于H5的iframe标签的几个限制条件，可能会出现以下问题：1.由于iframe也要遵守浏览器同源策略，也有对应的白名单限制，所以也会出现跨域或者无法加载的问题，大多出现在本地或沙箱中的H5资源内联iframe时，并且cookie有时候也设置不上2.在应用侧调用runJavascript方法调用不到iframe里面，且主frame和ifra
  • CTF-WEB: 利用iframe标签利用xss,waf过滤后再转换漏洞-- N1ctf Junior display A5rZ 网络安全
    核心逻辑//获取URL查询参数的值functiongetQueryParam(param){//使用URLSearchParams从URL查询字符串中提取参数consturlParams=newURLSearchParams(window.location.search);//返回查询参数的值returnurlParams.get(param);}//使用DOMPurify对内容进行清理（sani
  • pdf在页面中预览的方法 weixin_45907435 pdf
    1、iframe使用方法相关属性（属性间用&连接拼接到src中）：1、缩放比例：#zoom=120；（表示将文件放大120%）2、跳往特定页数：#page=33、工具栏：#toolbar=0（0隐藏、1显示）菜单栏：#menubar=0（0隐藏、1显示）4、页面自适应屏幕：#view=Fit页面自适应水平宽度：#view=FitH页面自适应垂直高度：#view=FitV5、侧边导航栏状态：#nav
  • chrome新版本中iframe嵌套禁止cookie跨域携带解决方案
    Google在2020年2月4号发布的Chrome80版本默认屏蔽所有第三方Cookie，即默认为所有Cookie加上SameSite=Lax属性，并且拒绝非Secure的Cookie设为SameSite=Non;SameSite的作用就是防止跨域传送cookie，从而防止CSRF攻击和用户追踪，从源头屏蔽CSRF漏洞。Secure属性仅当整站使用https协议时：发出请求，安全cookie才会发
  • Python神器！WEB自动化测试集成工具 DrissionPage 测试涛叔 自动化测试软件测试软件测试面试python开发语言职场和发展软件测试面试
    案例跟踪商品价格，降价自动推送消息到微信咱买不起还等不起吗？fromDrissionPageimport*importrefromtimeimportsleepimportcsvimportosimportdatetime#写入时间p=MixPage()p.get('http://xxxxxxx')#快快买网址p.to_iframe('iframeId')txt=p.ele('@class=cur
  • ubuntu 火狐浏览器5.0+隐藏标题栏方法 韶华 Linux相关浏览器ubuntufirefox扩展basicmenu
    很多同学都对ubuntu中火狐浏览器的标题栏无法去除感到深恶痛疾(请注意我说的是标题栏并不是菜单栏等等)，如今火狐浏览器都更新到5.0了ubuntu经典桌面中火狐的这个问题官方还是没有解决，对于我们这些用本本的同学来说显示器那是寸寸必争的，以前使用火狐4.0以前的时候我们可以用Compactmenu2和foxiFramebasic两款插件来去除可恶的标题栏，但是火狐升级到4.0以后这两款插件安装时
  • hexo添加_Hexo博客中插入音乐/视频/ 阿月Rebecca hexo添加
    Hexo插入音乐/视频/网易云音乐/bilibili视频，会让博客看起来很洋气(ง•̀_•́)ง。查看更多于本人博客：iii.runMarkdown通用的音乐视频插入方法iframe标签代码从网易云音乐获得网易云音乐因为简书不支持，可以在李飞阳看到效果。iframeembed标签因为简书不支持，可以在李飞阳看到效果。embedjavascript标签举例javascript使用Hexo插件插入音乐
  • vue 点击图片放大预览 Flyfish2058 vuevue.jsjavascript前端
    网上有很多关于vue点击图片放大的方法，我是根据自己使用的情况进行制作的，我这种情况是点击iframe标签中图片进行放大的。话不多说咱直接上代码，走你父组件：{{navigationTitle}}//此部分是你需要的代码importBigImgfrom"./BigImg.vue";//引入子组件exportdefault{name:"OutsideManualSub",components:{"b
  • DrissionPage：Python自动化测试的高效工具 傻啦嘿哟 关于python那些事儿python开发语言
    目录一、安装与初步了解二、WebDriver的基本使用三、浏览器操作四、元素定位与操作元素定位元素操作五、网络请求跟踪六、iFrame切换与动态内容处理七、异常处理与日志记录异常处理日志记录八、总结DrissionPage作为一款强大的Python自动化测试工具，凭借其简洁的API和丰富的功能，成为了众多开发者进行Web自动化任务的首选。本文将详细介绍DrissionPage的基本操作，并通过实例
  • python gui编程for mac_Python GUI framework for Mac OS X weixin_39897687 pythongui编程formac
    可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):问题:I'mtryingtofindagood"pythonGUIframework"forMacOSX,butIhaven'tfoundanythinggooduntilnow,onlywxWidgetswhichIdon'tlikeandit'salsounstable.Anysuggestions
  • 探索MVIKotlin：多平台MVI架构的强大框架 朱龙阔Philippa
    探索MVIKotlin：多平台MVI架构的强大框架MVIKotlinExtendableMVIframeworkforKotlinMultiplatformwithpowerfuldebuggingtools(loggingandtimetravel),inspiredbyBadooMVICorelibrary项目地址:https://gitcode.com/gh_mirrors/mv/MVIKo
  • python+playwright自动化测试(八)：iframe切换、多窗口切换 觅远 自动化测试python爬虫开发语言python自动化
    目录浏览器上下文context对象常用操作设置默认导航时间iframe切换窗口切换浏览器上下文context对象常用操作context.pages:获取context所有page对象context.new_page():生成一个新的page对象context.add_cookies()：将cookie添加到此浏览器上下文所在的所有页面中。context.clear_cookies()：清除cont
  • Selenium学习笔记--Webdriver API 2--常用方法 jiang_guo 自动化测试笔记selenium
    Webdriver重用方法浏览器控制控制浏览器窗口大小控制浏览器后退、前进切换标签页（窗口切换）switch方法获取url使用get方法模拟浏览器刷新关闭浏览器常用方法clearsend_keysclicksubmitsizetextget_attributeis_displayedtitlecurrent_url鼠标操作键盘操作元素等待显示等待隐式等待切换iframe单表单切换嵌套表单切换平行表
  • web自动化——前端知识 大哥喝阔落 前端自动化运维
    是HTML中的一个元素，用于在当前网页中嵌入另一个网页或文档。它就像一个“窗口”，可以在页面中显示其他内容。主要特点：嵌入外部内容：可以在网页中嵌入其他网页、视频、地图等。独立上下文：嵌入的内容与主页面相互独立，拥有自己的JavaScript和CSS环境。可定制：可以通过属性调整大小、边框等。常用属性：src：指定要嵌入内容的URL。width和height：设置iframe的宽度和高度。fram
  • 【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式 一二¬ 前端jqueryjavascript前端
    文章目录HTTP原生创建AjaxjQuery处理Ajax$.ajax()$().load()$.get()$.post()跨域CORSJSONPiframewebsocketsHTTP超文本传输协议（HTTP，HyperTextTransferProtocol)是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。一次HTTP操作称为一个事务，其工
  • 前端如何展示PDF文件内容 haughtyAndAnd 前端pdfjavascriptes6前端框架
    要在浏览器中直接展示一个PDF文件，你可以使用iframe或embed标签，或者使用专门的PDF查看器库，如PDF.js来展示PDF文件内容。这里我将分别介绍这几种方法。方法1：使用iframe标签展示PDFiframe标签可以嵌入一个PDF文件并直接在浏览器中展示。方法2：使用embed标签展示PDFembed标签也可以嵌入PDF文件进行展示，支持大多数现代浏览器。方法3：使用JavaScrip
  • phpyii框架倒叙_PHP的Yii框架入门使用教程 weixin_39851974 phpyii框架倒叙
    安装Yii的安装由如下两步组成：从yiiframework.com下载Yii框架。将Yii压缩包解压至一个Web可访问的目录。Tip|提示:安装在Web目录不是必须的，每个Yii应用都有一个入口脚本，只有它才必须暴露给Web用户。其它PHP脚本(包括Yii)应该保护起来不被Web访问，因为它们可能会被黑客利用。需求安装完Yii以后你也许想验证一下你的服务器是否满足使用Yii的要求，只需浏览器中输入
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他