目前我们开发的产品涉及到大量的JavaScript,特别是前台的网页插件部分。因为这部分是一个网页中的第三方插件,是用户(站长或者blogger)通过在其网页上加入<script>标签来载入,所以和其他的JavaScript略有不同。
我总结一下,这部分功能有如下需求:
-
不影响网页加载。这个很关键,因为很多站长特别关心网页的载入速度。
-
不影响网页原有的内容。意味着插件里的HTML元素不能和网页里原有的冲突,JavaScript的命名空间也不能有冲突。
-
支持参数和用户自定义。如果使用普通的HTTP请求并动态生成JavaScript的话,必然增大对服务器的压力并大大降低Cache的效率。必须有一种方法使用普通的客户端JavaScript来处理参数。
-
支持IE6。这个很让人痛苦。国外的调查显示IE6使用率只有10%多点,但我们网站的数据显示有大约1/3的人还在使用IE6访问。
-
代码应该是可维护、可扩展的,最好能像jQuery一样支持自定义组件。这样至少我们自己添加新功能时就很方便,以后还能开放支持第三方应用。
这部分的代码是我从去年下半年开始写的,到目前经过多次调整,目前结构已经基本稳定。对于上面提到的1、3、4已经很好的解决,而2和5则只是部分解决,至少我对目前的方案还不是很满意 。
(一)提高加载速度
在论坛里经常有站长提到使用了某个网页插件,功能很不错,但因为影响了网页加载,所以又删掉了。或者有人干脆就从来不用插件,怕影响加载速度。所以对我们来说,这是不得不考虑的头等大事。
最开始我们插件的JS代码是一次性全部加载到浏览器,然后所有的逻辑都在浏览器完成。这样的好处是,一旦代码全部加载完,客户端的响应非常快,除了特定情况不会再有更多的HTTP请求。缺点也非常明显,即一次性要加载大量代码,而大部分情况下,用户浏览网页时并不会去使用插件,造成很大浪费。另一个问题是,加载到第三方网页上的JavaScript无法直接操作Cookie,从而无法进行用户相关的操作(其实应该是可以的,不过比较麻烦)。不过那时候功能本来就不多,用户也很少,因此并没有什么影响。
但那时我们就意识到这样的结构是不行的,很快就进行了调整,使用了Iframe。这样,Iframe内的内容其实就相当于独立的网页了,和当前的网页完全没有关系,也不会影响加载。并且Iframe内是我们自己的domain,可以直接使用Cookie。当然用户使用时的响应速度就没有原来快了,但还在可接受范围内。
另外一个加快网页加载的方法是,在<script>标签处只加载一些基本的代码,其他的代码包括CSS式样则等到全部网页加载结束后再去加载。这样做的另外一个很好的副作用就是,只要处理得好,独立出来的代码还可以被重用。
这种方法里面要解决两个问题。第一个是动态加载JS代码。这个很好解决,动态生成一个<script>元素,设置好后放到head元素里就好了。只不过设置callback时必须兼容IE。代码如下
loadModule: function(url, callback) {
var script = d.createElement('script');
script.setAttribute('src', url);
script.setAttribute('charset', "utf-8");
script.setAttribute('type','text/javascript');
if (callback) {
script.onload = callback;
script.onreadystatechange = function() {
if (this.readyState == 'complete' || this.readyState == 'loaded') {
callback();
}
};
}
d.getElementsByTagName("head")[0].appendChild(script);
}
另外一个问题是,如何等到页面全部加载完成再进行某个动作。如果有jQuery,用$(document).ready()就行了。但jQuery库即使压缩的也有50多k,我们是不可能用的。所以我从jQuery的源代码里参考实现了这个函数,可以替代$(document).ready()使用:
function onDocumentReady(callback){
// Mozilla, Opera and webkit
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function(){
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
callback.call(this);
}, false );
// If IE event model is used
} else if (document.attachEvent) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
callback.call(this);
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if (document. documentElement.doScroll && window == window.top) (function(){
if (isReady) return;
try {
// http://javascript.nwbox.com/IEContentLoaded/
document. documentElement.doScroll("left");
} catch( error ) {
setTimeout(arguments.callee, 0);
return;
}
callback.call(this);
})();
}
window.onload = callback;
};
目前我们的插件一开始只加载7k左右的代码,现在的网页动辄百来k,其影响基本可以忽略。网页加载结束后,再加载15k代码,另外根据参数还可能加载另外的模块。目前插件运行效果非常好,还没有用户抱怨过加载速度的问题。
分享到:
相关推荐
Chrome 插件开发概述 Chrome 插件开发是指在 Google Chrome 浏览器上开发小程序的过程,这些小程序可以增强浏览器的功能,提供更多的功能和服务。下面是 Chrome 插件开发的基本概念和步骤: 一、基本概念 * ...
总结来说,"精伦电子开发包最新开发包带网页插件"是一个专注于身份证读卡功能的开发工具,它提供了全面的SDK和二次开发资源,支持网页端应用,有助于开发者高效、安全地实现身份证信息读取功能。通过深入理解和应用...
总结,360浏览器插件开发涉及到的技术和流程相当广泛,需要开发者具备良好的JavaScript基础,对HTML和CSS也有一定的理解。通过深入研究提供的文档和范例,开发者可以逐步掌握插件开发技能,创造出独具特色的浏览器...
总结,"asp 网站插件开发demo"是一个使用ASP技术和System.Addin框架构建的插件系统实例,它展示了如何在ASP网站中创建可扩展、独立的插件,以提升网站的功能性和用户体验。通过学习这个DEMO,开发者可以掌握ASP插件...
总结起来,这个"免费发短信网页插件 简单"涉及到的技术和知识点包括JavaScript编程、网页插件开发、HTTP通信、可能的API集成、短信服务的使用,以及前端验证和用户体验设计。对于想要学习如何在网页上实现短信功能的...
**标题与描述解析** 标题"opera插件开发例子,...总结,这个压缩包提供了一个开发Opera浏览器插件的实例,涉及DLL文件的生成和Opera的插件API使用,对于想要学习或实践Opera插件开发的人员来说,这是一个宝贵的资源。
总结来说,开发华视电子身份证读卡器的网页版应用,不仅需要前端开发的基本技能,还需要对浏览器与硬件交互的机制有一定了解。通过提供的网页版开发包,开发者可以构建一个安全、高效、用户体验良好的在线身份证信息...
基于FFMPEG的通用视频插件开发,是一个深入探索多媒体技术及其应用的课题,由高睿鹏和刘佳玲在《电脑知识与技术》杂志上发表。这篇文章详细介绍了如何在Windows环境下,使用FFMPEG这一强大的开源多媒体框架,设计并...
总结来说,这个案例涵盖了Chrome扩展插件开发的多个核心知识点,包括Manifest V3的新特性、Service Worker的使用、网页数据抓取、数据处理以及文件导出。通过实践这个案例,开发者不仅可以掌握基本的插件开发技能,...
### IE插件开发详解——基于C#与ATL #### 一、引言 随着互联网技术的发展,浏览器作为用户访问网络资源的主要工具之一,其功能的扩展性变得尤为重要。通过开发浏览器插件,开发者可以为用户提供更加丰富的交互体验...
在IT领域,尤其是在Web开发和数据抓取方面,"谷歌获取网页DOM的插件"是一种非常实用的工具。DOM(Document Object Model)是HTML和XML文档的结构化表示,它将网页内容作为树形结构处理,使得我们可以方便地通过...
总结来说,"VS.NET插件开发大全"涵盖了C#、AJAX、Java和Struts等多方面的知识,旨在帮助开发者充分利用VS.NET的扩展性,创建符合自身业务需求的定制工具。无论是为了优化开发流程,还是为了提高产品功能,掌握VS.NET...
《uniwebview_2.9.1在Unity中开发网页插件详解》 Unity是一款强大的跨平台游戏开发引擎,广泛应用于游戏、VR/AR、3D应用等领域。然而,有时我们不仅需要创建交互式3D场景,还需要在其中集成网页内容,这时就涉及到...
总结来说,"谷歌插件-打开网页修改网页标题"是一个利用Chrome API来改变浏览器中打开网页标题的工具。它通过JavaScript代码实现功能,并且可能包含多个文件,如manifest.json、JavaScript脚本、HTML和CSS样式文件等...
**BHO插件开发的VB示例源代码详解** BHO(Browser Helper Object)是微软Internet Explorer浏览器的一种扩展机制,允许开发者创建自定义的浏览器组件,以增强或修改浏览器的功能。VB(Visual Basic)是一种流行的...
总结,jQuery插件开发是前端开发中的一个重要技能,它可以帮助我们构建功能丰富的交互式网页。通过对插件的深入理解和实践,开发者可以更好地满足用户需求,提升网站或应用的性能和用户体验。而“clip-图片剪裁”这...
在网页开发中,日期插件是一种非常常见的工具,它能够帮助用户方便地选择或输入日期,提高用户体验。本文将深入探讨“日期插件 万年历 网页日期插件”的相关知识点,并以“自制简单的网页日期插件”为例进行讲解。 ...
### IBM Sametime插件开发指南知识点详述 #### 一、引言 - **术语介绍**:本章节简要介绍了在进行IBM Sametime插件开发过程中可能会遇到的一些基础概念及专业术语,为后续深入学习打下理论基础。 - **推荐阅读**:...