Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们会经常使用 iframes 来加载第三方的内容、广告或者插件。使用 iframe 是因为他可以和主页面并行加载,不会阻塞主页面。
我们会经常使用 iframes 来加载第三方的内容、广告或者插件。使用 iframe 是因为他可以和主页面并行加载,不会阻塞主页面。当然使用 iframe 也是有利有弊的:Steve Souders 在他的 blog 里面有阐述:Using Iframes Sparingly:
阻塞主页面的 onload 是这两个问题中最影响性能的方面。一般都是想让 onload 时间越早触发越好,一方面是用户体验过更重要的是 google 给网站的加载速度的打分:用户可以用 IE 和 FF 中 Google 工具栏来计时。
那么为了提高页面性能,怎样才能不阻塞主页面的 onload 事件的来加载 iframe 呢?
这篇讲了四种加载 iframe 的方法:普通 iframe,onload 之后加载 iframe,setTimeout() iframe 和异步加载 iframe。每种方法的加载结果我都用 IE8 的时间线来展示。我建议多注意下动态异步加载这个方法,因为这是性能表现最佳的。另外,还有一种友好 iframe(friendly iframe) 技术。他可能算不上是 iframe 加载的技术,但是必须使用 iframe,他是无阻塞加载的。
普通方法加载 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 加载的时候,浏览器会标识正在加载
这是是一个测试页面,时间线图如下
在除了 IE8 以外的所有浏览器中会有如下表现:
- <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>
- <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>
来源: http://www.phperz.com/article/17/0714/282907.html