手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:javascript

Javascript堵塞问题的解决[转]

本文来自:Thinking in LAMP - 老王的技术手册,网址是在baidu上面的,文章URL是:http://hi.baidu.com/thinkinginlamp/blog/item/1ebc2e730600891b8601b049.html

原文内容如下:(为了方便,我将图片COPY过来了,而并非是引用,不好意思老王)

所谓“Javascript堵塞问题”,指的是浏览器在下载javascript文件的时候,会堵塞其他下载进程,并且多个javascript文件之 间,只能一个一个下载,不能并行下载。浏览器之所以要这么干,一来是因为javascript里可能会有一些涉及页面渲染的操作,比如 document.write,所以要先把他们加载完,以免影响用户体验,二来是如果并发下载javascript文件,代码执行的先后顺序会错乱,从而 引起逻辑错误。为了规避上述弊端,YSlow建议如果有多个javascript文件,并且这些文件里没有类似document.write等页面渲染的 操作,那么应该尽可能把他们合并成一个文件,并放到页面的尾部。不过很多时候,合并javascript文件是个浩大的工程,不仅破坏了模块化结构,而且 还可能会给代码维护带来不必要的麻烦,今天说说另一个方法,以期避免对现有代码的大规模修改。

先做两个javascript文件,他们是a.php,b.php,之所以用php文件是因为我只会这个,内容如下:

PHP代码
  1. <?php sleep(1); ?>  

 

可以看到a.php和b.php的内容是一样的,其中之所以sleep一秒钟,是为了让演示的效果更明显。

现在让我们来做一个页面(x.htm),看看javascript堵塞问题是如何产生的:

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script type="text/javascript" src="a.php"></script>  
  5. <script type="text/javascript" src="b.php"></script>  
  6. </head>  
  7. <body>  
  8. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  9. </body>  
  10. </html>  

浏览这个页面的时候,通过Pagetest软件,我们可以看到类似下面的结果:

大小: 3.2 K
尺寸: 500 x 69
浏览: 2220 次
点击打开新窗口浏览全图

我们可以看到,logo.gif图片的下载进程被堵塞了,并且a.php和b.php是分别下载的。

下面让我们再来做一个页面(y.htm),看看是怎么解决这个问题的:
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script>  
  5. var load = function(file) {  
  6.     var scriptElement = document.createElement("script");  
  7.     scriptElement.src = file;  
  8.     document.getElementsByTagName("head")[0].appendChild(scriptElement);  
  9. }  
  10. load('a.php');  
  11. load('b.php');  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  16. </body>  
  17. </html>  
浏览这个页面的时候,通过Pagetest软件,我们可以看到类似下面的结果:
大小: 3.23 K
尺寸: 500 x 69
浏览: 2133 次
点击打开新窗口浏览全图
结论显而易见,logo.gif图片的下载进程并没有被堵塞,并且a.php和b.php是并行下载的。

参考资料:http://stevesouders.com/docs/web20expo-20080425.ppt


膘叔:虽然从我个人而言,我会考虑将js换到其他的域名下面,以防止堵塞(所谓的YAHOO设计网页14条军规中的),然后通过一个程序minify来进行引用。关于minify我会单独介绍。(其实也是COPY别人的文章而来,最近是很懒了。一是要考试,二是单位太忙,只能做到天天更新,但无法原创了)

 

Tags: javascript, load, block

利用PHP裁剪图片

其实,用PHP裁剪图片的原理是很简单的,无非就是用javascript画出一个方块,计算一下四个角的顶点,然后从原图中按照这四个点的坐标把当中的图切出来。

网上有现成的例子:http://www.coderhome.net/zifa/?p=351,不过里面的JS库用的是mootools的,如果要看,请直接到该网上去看,以后,等有空了,用jQuery的模拟一下,呵呵。
jQuery的插件还是很好开发的

Tags: php, 裁剪, mootools, javascript

JavaScript---Web流程定义工具

用javascript+vml来做工作流,确实是第一次看到,所以我在看到有这个新闻的时候,就觉得特别的吃惊。当年的TRS就是因为有一个activex版的工作流控件的CMS,导致他的价格非常的高,今天能够看到有javascript版的,惊讶是难免的。。。

只是并非所有的机器都支持VML,所以它的适用范围还是有限的,不过,话又说回来,activex也只支持IE,但仍然有那么多人在用。看来,只要是好东西,即使你不跨平台,照样有人用的起劲。

闲话不说了,附上原文网址和他的说明,原文:http://www.cssrain.cn/article.asp?id=1192

开发语言;javascript,html,vml,json,css
功能:
1.环节可用鼠标拖拽
鼠标选中环节后不释放,拖拽鼠标,环节将随鼠标移动,释放鼠标后,环节不再移动。
2.路径的两个端点可以通过鼠标拖拽,改变路径指向的环节
鼠标选中路径的端点后不释放,拖拽鼠标,路径被选中的端点将鼠标移动,在选中的环节释放鼠标后,路径被选中的端点将指向该选中的环节。
3.ctrl+a,全选。
4.按住ctrl,鼠标选中对象,可以多选。
5.delete,删除选中对象。
6.使用鼠标多选
鼠标点击空白处不释放,拖拽鼠标,会出现一个长方形虚框,虚框的范围随着鼠标移动而变化,虚框范围内的对象将被选中。
7.动态添加环节和路径的属性

大小: 38.19 K
尺寸: 458 x 376
浏览: 2170 次
点击打开新窗口浏览全图

由于对这个东西很吃惊,所以,把图片和附件保存到了本地。需要的朋友可以点上面那个网址或者点本文的附件进行下载

不好意思,刚发现附件有密码,我也不知道是什么密码,有破解软件的朋友只能辛苦一下了,或者去上面的cssrain.cn问站长去吧,我这里仅仅是作个备份

附件: i200812491011.rar (66.99 K, 下载次数:3230)

Tags: javascript, 工作流, web, vml

深入理解Javascript闭包(closure)

經過指點,獲悉原文為:http://www.felixwoo.com/archives/247

我轉貼的文章來源:http://www.knowsky.com/442121.html

PS:虽然我是从上面拷来的,但我并不建议打开这个网页看,因为,上面全是广告。个人猜测,代码也是他拷来的,但没有亲自验证,我也没法打包票。不过东西有点用,所以我也就COPY过来了。

内容如下:

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

一、什么是闭包?
“官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码:

JavaScript代码
  1. function a(){  
  2.  var i=0;  
  3.  function b(){  
  4.  alert(++i);  
  5.  }  
  6.  return b;  
  7. }  
  8. var c = a();  
  9. c();  

这段代码有两个特点:
1、函数b嵌套在函数a内部;
2、函数a返回函数b。
这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

我猜想你一定还是不理解闭包,因为你不知道闭包有什么作用,下面让我们继续探索。

二、闭包有什么作用?
简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。
在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界
如 果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1、当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”,如果a是一个全局函数,则scope chain中只有window对象。
2、当函数a执行的时候,a会进入相应的执行环境(excution context)。
3、在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。
4、 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a 的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。
5、下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。
6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。

到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象,如下图所示:(这里看了一下,确实没有图,看来果然是拷贝过来的,稍稍验证了我的说法,呵呵。。。。唉。可惜我确实不知道原文在哪里,不过,我是从他的网站拷来的,还是给他一个链接,毕竟我的资料来源是该网站)

大小: 56.19 K
尺寸: 500 x 180
浏览: 1745 次
点击打开新窗口浏览全图

(附上原文圖片)

如图所示,当在函数b中访问一个变量的时候,搜索顺序是先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依 次查找,直到找到为止。如果整个作用域链上都无法找到,则返回undefined。如果函数b存在prototype原型对象,则在查找完自身的活动对象 后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。

四、闭包的应用场景
1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
以上两点是闭包最基本的应用场景,很多经典案例都源于此。

五、Javascript的垃圾回收机制
在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

 

Tags: 闭包, closure, javascript, archive

jQuery Plugins -- JQzoom

demo地址:http://www.51toria.cn/demo/JQplus/jqzoom/

 

使用的JS:

 

XML/HTML代码(用JS代码的时候居然卡住了。没办法,只能用XML代码来展示)
  1. //**************************************************************  
  2. // jQZoom allows you to realize a small magnifier window,close  
  3. // to the image or images on your web page easily.  
  4. //  
  5. // jqZoom version 1.0  
  6. // Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
  7. // Released on Dec 05 2007  
  8. // i'm searching for a job,pick me up!!!  
  9. // mail: renzi.mrc@gmail.com  
  10. //**************************************************************  
  11.   
  12. (function($){  
  13.   
  14.         $.fn.jqueryzoom = function(options){  
  15.   
  16.         var settings = {  
  17.                 xzoom: 200,     //zoomed width default width  
  18.                 yzoom: 200,     //zoomed div default width  
  19.                 offset: 10,     //zoomed div default offset  
  20.                 position: "right"  //zoomed div default position,offset position is to the right of the image  
  21.             };  
  22.   
  23.             if(options) {  
  24.                 $.extend(settings, options);  
  25.             }  
  26.   
  27.         $(this).hover(function(){  
  28.   
  29.   
  30.             var imageLeft = $(this).get(0).offsetLeft;  
  31.             var imageRight = $(this).get(0).offsetRight;  
  32.             var imageTop =  $(this).get(0).offsetTop;  
  33.             var imageWidth = $(this).get(0).offsetWidth;  
  34.             var imageHeight = $(this).get(0).offsetHeight;  
  35.   
  36.             var bigimage = $(this).attr("alt");  
  37.   
  38.             if($("div.zoomdiv").get().length == 0){  
  39.   
  40.             $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  41.   
  42.             }  
  43.   
  44.             if(settings.position == "right"){  
  45.   
  46.             leftpos = imageLeft + imageWidth + settings.offset;  
  47.   
  48.             }else{  
  49.   
  50.             leftpos = imageLeft - settings.xzoom - settings.offset;  
  51.   
  52.             }  
  53.   
  54.             $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  55.   
  56.             $("div.zoomdiv").width(settings.xzoom);  
  57.   
  58.             $("div.zoomdiv").height(settings.yzoom);  
  59.   
  60.             $("div.zoomdiv").show();  
  61.   
  62.   
  63.                     $(document.body).mousemove(function(e){  
  64.   
  65.                     var bigwidth = $(".bigimg").get(0).offsetWidth;  
  66.   
  67.                     var bigheight = $(".bigimg").get(0).offsetHeight;  
  68.   
  69.                     var scaley ='x';  
  70.   
  71.                     var scalex'y';  
  72.   
  73.   
  74.                     if(isNaN(scalex)|isNaN(scaley)){  
  75.   
  76.                     var scalex = Math.round(bigwidth/imageWidth) ;  
  77.   
  78.                     var scaley = Math.round(bigheight/imageHeight);  
  79.   
  80.                     }  
  81.   
  82.                     mouse = new MouseEvent(e);  
  83.   
  84.   
  85.   
  86.                     scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;  
  87.   
  88.                     $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;  
  89.   
  90.                     scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;  
  91.   
  92.                     $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  93.   
  94.   
  95.                     });  
  96.             },function(){  
  97.                $("div.zoomdiv").hide();  
  98.                $(document.body).unbind("mousemove");  
  99.                $(".lenszoom").remove();  
  100.                $("div.zoomdiv").remove();  
  101.             });  
  102.   
  103.         }  
  104.   
  105. })(jQuery);  
  106.   
  107. function MouseEvent(e) {  
  108. this.x = e.pageX  
  109. this.y = e.pageY  
  110. }  

 

页面调用方法:

JavaScript代码
  1. jQuery.noConflict();  
  2. jQuery(document).ready(function(){  
  3. $("img.jqzoom").jqueryzoom();  
  4. });  

 

Tags: jquery, plugins, jqzoom, javascript, demo

Records:341234567