仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 587|回复: 11
打印 上一主题 下一主题

[学习教程] JAVA网页编程之浅谈DOM事务的优化仓酷云

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-18 11:17:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
net网页编程程序员的大部门代码都靠控件拖拽完成的,虽然java也有,但是无论从美观和速度上都没发和.net网页编程比。java程序员都是代码完成的,所以java程序员常戏称.net网页编程程序员是操作员,呵呵。浅谈DOM事务的优化
在JavaScript程序的开辟中,常常会用到一些频仍触发的DOM事务,如mousemove、resize,另有不是那末经常使用的鼠标滚轮事务:mousewheel(在Firefox中,滚轮事务为DOMMouseScroll)。
扫瞄器为了确保这些事务可以实时呼应,触发的频次会对照高,详细的触发频次各扫瞄器固然有收支,但收支不年夜。良多时分在必要注意功能的场景下利用这些事务会想各类举措对事务的触发频次举行优化,上面说说我的一些优化办法。
mousemove在拖拽中的优化

拖拽(Drag)是很罕见的一个功效,在扫瞄器还没完成原生的拖拽之前,经由过程mousedown、mousemove、mouseup3种事务范例就能够摹拟出拖拽效果来,固然这里不谈怎样往完成一个拖拽功效。
mousemove事务在拖拽的使用中既要确保拖拽的流利度,又要确保拖拽时的功能,怎样坚持二者的均衡呢?
能够经由过程设置一个计数器往复失落一半的mousemove事务的触发,代码以下:
01varcount=0;
02
03elem.onmousemove=function(){
04count++;
05
06//当计数器为偶数的时分不实行mousemove
07if(count%2===0){
08return;
09}
10
11//完成拖拽功效的代码...
12};
下面只是增添了很少的几行代码,经由过程判别计数器是不是为偶数,就能够往失落一半的mousemove事务实行的次数,同时拖拽功效的流利度基础不受影响。
mousemove摹拟mouseenter效果

比来碰着这么一个需求,必要在图片上绑定一个事务,当鼠标挪动到图片上时对图片举行缩小,尽年夜多半人的第一反响就是间接利用mouseenter事务来处置。可是利用mouseenter事务会带来误触发,只管可使用准时器来共同也仍是会有误触发,由于图片关于mouseenter的触发地区是对照年夜的,当鼠标划过一张200*200尺寸的图片时,此时给mouseenter设置一个500毫秒的延时,效果大概达不到预期。对交互体例做进一步的优化,当鼠标疾速划过图片时不触发事务,只要鼠标长久的停止在图片上时才触发事务。经由过程对mousemove增加一个准时器就能够完成该效果。代码以下:
01vartimer,
02move=function(){
03clearTimeout(timer);
04//设置一个较短的准时器
05timer=setTimeout(function(){
06//这里是完成图片缩小的代码...
07},200);
08};
09
10img.onmousemove=move;
11img.onmou搜索引擎优化ut=function(){
12clearTimeout(timer);
13};
鼠标频仍的挪动触发的mousemove事务会扫除失落上一次增加的准时器,只要当鼠标停止工夫凌驾设置的200毫秒才会触发事务,固然在鼠标移开的时分必定要记得扫除失落准时器。360图片搜刮就接纳了这类触发体例,如许就不会再有误触发了。
resize事务的优化

resize是在扫瞄器窗口巨细改动的时分触发的事务,一般改动一次会触发2、3次resize事务,关于IE6/7resize更简单被触发。resize事务一般用于当窗口改动巨细时,网页的结构也会依据窗口巨细举行自顺应结构。自顺应结构假如对功能的损耗对照年夜,那末就要尤其注重resize触发的频次。一样利用准时器来完成。
01varthrottle=function(fn,timeout){
02vartimer;
03
04returnfunction(){
05varself=this,
06args=arguments;
07
08clearTimeout(timer);
09
10timer=setTimeout(function(){
11fn.apply(self,args);
12},timeout);
13};
14};
15
16window.onresize=throttle(function(){
17//自顺应结构的代码...
18},100);
经由过程重复的调试,觉察给resize增加一个100毫秒的提早的效果会对照幻想,既能包管事务的实时性,又能到达优化的目标。

自己的整个学习思路完全被老师的讲课思路所牵制,这样几节课听下来,恐怕自己的见解都应该是书里的知识点了,根本谈不上自身发现问题,分析问题,和解决问题能力的切实提高。
再见西城 该用户已被删除
沙发
发表于 2015-1-19 22:36:21 | 只看该作者
如果你学过HTML,那么事情要好办的多,如果没有,那你快去补一补HTML基础吧。其实JSP中的Java语法也不多,它更象一个脚本语言,有点象ASP。
分手快乐 该用户已被删除
板凳
发表于 2015-1-25 05:56:21 | 只看该作者
《JAVA语言程序设计》或《JAVA从入门到精通》这两本书开始学,等你编程有感觉的时候也可以回看一下。《JAVA读书笔记》这本书,因为讲的代码很多,也很容易看懂,涉及到面也到位。是你学习技术巩固的好书,学完后就看看《JAVA编程思想》这本书,找找一个自己写的代码跟书上的代码有什么不一样。
精灵巫婆 该用户已被删除
地板
发表于 2015-1-26 22:36:25 | 只看该作者
接着就是EJB了,EJB就是Enterprise JavaBean, 看名字好象它是Javabean,可是它和Javabean还是有区别的。它是一个体系结构,你可以搭建更安全、更稳定的企业应用。它的大量代码已由中间件(也就是我们常听到的 Weblogic,Websphere这些J2EE服务器)完成了,所以我们要做的程序代码量很少,大部分工作都在设计和配置中间件上。
飘灵儿 该用户已被删除
5#
发表于 2015-1-30 17:45:23 | 只看该作者
Java 编程语言的风格十分接近C、C++语言。
山那边是海 该用户已被删除
6#
发表于 2015-2-6 14:40:47 | 只看该作者
关于设计模式的资料,还是向大家推荐banq的网站 [url]http://www.jdon.com/[/url],他把GOF的23种模式以通俗易懂的方式诠释出来,纯Java描述,真是经典中的经典。
变相怪杰 该用户已被删除
7#
发表于 2015-2-16 15:45:35 | 只看该作者
不过,每次的执行编译后的字节码需要消耗一定的时间,这同时也在一定程度上降低了 Java 程序的运行效率。
若天明 该用户已被删除
8#
发表于 2015-3-5 06:34:54 | 只看该作者
任职于太阳微系统的詹姆斯·高斯林等人于1990年代初开发Java语言的雏形,最初被命名为Oak,目标设置在家用电器等小型系统的程序语言
第二个灵魂 该用户已被删除
9#
发表于 2015-3-8 17:31:23 | 只看该作者
如果要向java web方向发展也要吧看看《Java web从入门到精通》学完再到《Struts2.0入门到精通》这样你差不多就把代码给学完了。有兴趣可以看一些设计模块和框架的包等等。
蒙在股里 该用户已被删除
10#
发表于 2015-3-16 07:41:40 | 只看该作者
你一定会高兴地说,哈哈,原来成为Java高手就这么简单啊!记得Tomjava也曾碰到过一个项目经理,号称Java很简单,只要三个月就可以学会。
只想知道 该用户已被删除
11#
发表于 2015-3-22 21:09:46 | 只看该作者
有时间再研究一下MVC结构(把Model-View-Control分离开的设计思想)
冷月葬花魂 该用户已被删除
12#
发表于 2015-3-22 21:09:48 | 只看该作者
另外编写和运行Java程序需要JDK(包括JRE),在sun的官方网站上有下载,thinking in java第三版用的JDK版本是1.4,现在流行的版本1.5(sun称作J2SE 5.0,汗),不过听说Bruce的TIJ第四版国外已经出来了,是专门为J2SE 5.0而写的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-9-28 15:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表