javascript之location详解

window.location.hash 使用表明

CSS vs. JS Animation: 哪个更快?

CSS vs. JS Animation: 哪个更快?

基于JavaScript的卡通片竟然一度默默地比CSS的transition动画快了?而且,Adobe和
谷歌(Google)竟然直接在公布可以匹敌原生应用的富媒体移动站点?

那篇小说将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是怎么样比jQuery和依据CSS的动画库高效的。

明天给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,极度的实用,并附着了例子,有必要的伙伴可以参见下。

jQuery

让我们先从那几个谜底初阶:JavaScript和jQuery被似是而非的模糊了。JavaScript的动画片是快的,不过jQuery的卡通慢。为何?因为即使jQuery很强大,不过它的目标并未是为着成为一个迅速的动画片引擎。

  • jQuery无法防止布局震荡因为它的代码除了动画还提供了许多职能。

  • jQuery的内存消耗日常接触垃圾回收,导致卡通卡住

  • jQuery使用setInterval而不是requestAnimationFrame
    (RAF)为了幸免有个别bug

留意,布局震荡引起了动画片开始处的卡顿,垃圾回收导致了动画进行中的卡顿,RAF的不到导致了帧率低。

location是javascript里边管理地址栏的松手对象,比如location.href就管理页面的url,用location.href=url就足以直接将页面重定向url。而location.hash则足以用来收获或设置页面的标签值。比如http://domain/\#admin的location.hash=”#admin”,利用这些属性值可以做二个可怜有意义的事体。

贯彻的例证

幸免布局震荡,包蕴简单地联合DOM查询和DOM更新:

var currentTop,
  currentLeft;

/* 有布局震荡 */
currentTop = element.style.top; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */

currentLeft = element.style.left; /* QUERY */
element.style.left = currentLeft + 1; /* UPDATE */

/* 没有布局震荡 */
currentTop = element.style.top; /* QUERY */
currentLeft = element.style.left; /* QUERY */

element.style.top = currentTop + 1; /* UPDATE */
element.style.left = currentLeft + 1; /* UPDATE */

爆发在创新之后的查询会强制浏览器立马重新布局,并盘算给出页面样式的总括值(把立异的熏陶考虑在内)。那对于运维于16ms间隔的卡通片来讲,会暴发巨大的支出。

同等,已毕RAF并不需求对既有代码改动十分大。让大家来对待一下RAF的落到实处和setInterval的落到实处:

var startingTop = 0;

/* setInterval: 每16ms运行一次来达到60fps (1000ms/60 ~= 16ms). */
setInterval(function() {
  /* 由于这里的代码会在1s内执行60次,所以我们把top属性每秒1单位的增长分成60份 */
    element.style.top = (startingTop += 1/60);
}, 16);

/* requestAnimationFrame: 不管浏览器是否处于最优状态,都试图运行在60fps */
function tick () {
    element.style.top = (startingTop += 1/60);
}

window.requestAnimationFrame(tick);

RAF极大限度地狠抓了动画片的个性。而你只需求修改为数不多的代码。

 

CSS Transitions

CSS
transitions的动画品质优于jQuery,它把动画的逻辑交给了浏览器本人。那会促进:1)优化DOM交互和内存消耗以避免卡顿,2)在底部借助RAF的特点,3)强制硬件加快(借助GPU的能力来增进动画质量)。

而是,实际意况是,这个优化可以一贯通过JavaScript来已毕,GSAP早已致力于此多年。Velocity.js,3个新的动画片引擎,不止借助于上述技术,还利用了其余措施–大家将便捷探讨。

了然JavaScript动画可以比美CSS动画库这一事实,只是大家安排的率先步。第叁步是我们要领悟JavaScript动画可以比CSS动画还快。

让大家从检查CSS动画库的缺点先河:

  • Transitions的胁制硬件加快是使GPU加快,然则那反而会造成GPU强压景况下动画的卡顿。那么些影响在活动设备上更为严重。(特别地,那些卡顿是由于数量在浏览器的主线程和排序线程间传递的开支导致的。一些CSS属性,比如transforms和opacity,是不受那几个费用影响的。)Adobe在这里演说了这些难题。

  • Transitions在IE10以下有包容难题,
    那在PC端站点会很简单造成难点发出,因为IE8和IE9还是很流行

  • 因为transitions并不是被JavaScript控制(它们只是被JavaScript触发),浏览器并不知道如何共同地使用JavaScript代码来操控优化transitions。

反倒地:基于JavaScript的卡通库,可以友善决定如几时候使用硬件加快,能够合营全部版本的IE,并且它们分外适合批量动画片优化。

自身的提议是,当你只是支付活动站点,并且您的动画只包罗简单的情事变化时,可以接纳原生CSS
transitions。在那种情景下,transitions算是一种高效并且原生的消除方案,并且可以把装有的卡通片逻辑只放在css中,幸免了因为引入JavaScript库而导致页面臃肿。但是,若是您正在规划复杂的UI,可能正在开发具有状态UI的应用程序,请使用JavaScript动画库,它可以使您的卡通保持高质量,使你的劳作流程保持可控。尤其是在管理CSStransitions方面做得很棒的四个库是

Transit

window.location.hash简单应用

JavaScript Animation

Okay,所以JavaScript在质量上可以占上风。不过JavaScript终究可以快多少呢?其实,它曾经快到可以创造复杂的,日常只好用WebGL营造的3D
animation
demo
。已经快到可以创制平时只可以用Flash恐怕影效处理完了的multimedia
teaser
。已经快到可以创立寻常只好用canvas创设的virtual
world

为了直观相比较动画库的超过品质,包含Transit(内部使用CSS
transitions),请查阅Velocity的文档,在VelocityJS.org

照旧存在难题:JavaScript毕竟什么样达到高品质?上面是基于JavaScript的动画库能达成的优化列表:

  • 为了裁减布局震荡,将全部动画中提到到DOM同步化到库房中。

  • 缓存链式调用中的属性值,以尽量收缩DOM查询(它是震慑DOM动画品质的致命缺陷)的发生。

  • 在同二个跨同级成分调用中缓存单位转换比率(例如PX到%、em等)。

  • 当样式更新在视觉上不明朗时,跳过更新。

抚今追昔此前讲的布局震荡,Velocity.js利用那些一流实践来缓存动画的落成值,那一个值会被录用为其后动画的初步值,从而避免再度询问DOM成分的初阶值:

$element
  /* 将元素向下滑动到视图中。 */
  .velocity({ opacity: 1, top: "50%" })
  /* 延迟1000ms,元素滑动出视图 */
  .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

在上边的例子中,第2个Velocity自动知道它应有从opacity为1,top为百分之五十上马。

浏览器最后可以协调实施很多均等的优化,但这么做将必要庞大地范围开发人士编写动画代码的主意。由此,同样的缘由,jQuery不使用RAF(见上文),浏览器也永远不会强加优化,即便这个优化惟有充裕小的恐怕会打破业内或离开预期的一言一动。

说到底,让大家来相比一下那八个JavaScript动画库(Velocity.js和GSAP)。

  • GSAP是一种高效、功效充分的卡通平台。Velocit是3个轻量级工具,可以极大地升高UI动画品质和工作流程。

  • GSAP需要许可费。Velocity是透过许MIT开源的。

  • 质量都很可观,GSAP和Velocity在实际项目中一贯不分化。

本人的提出是:当您需求规范的控制(例如重映,暂停/復苏/搜索)、运动(例如Bezier曲线路径),或复杂的分组/排序时,使用GSAP。这个特色对于游戏支付和少数niche应用尤其首要,但在Web应用程序的UI中并不普遍。

一、#的涵义

Velocity.js

定点GSAP成效丰裕,并不意味着Velocity功用单一。相反地,在削减后唯有7Kb的文书中,Velocity不仅提供了jQuery$.animate()的有所机能,而且提供了color
animation,transforms,loops,easings,class animation和scrolling。

简单来讲,Velocity是jQuery、jQuery UI和CSStransitions的特等结合。

愈来愈,从福利的角度,Velocity在底层使用jQuery的$.queue()办法,因而得以无缝地与jQuery的$.animate(),
$.fade()$.delay()函数交互。并且,由于Velocity的语法和$.animate()一致,您页面的代码不需求修改

让大家火速看一下Velocity.js。在基础动画上,Velocity和$.animate()一样:

$element
  .delay(1000)
  /* 使用Velocity的2000ms内改变元素top属性的动画*/
  .velocity({ top: "50%" }, 2000)
  /* 当上面Velocity动画执行完时,使用标准的jQuery方法来使元素淡出*/
  .fadeOut(1000);

在高级动画上,复杂的轮转场景和三维动画都得以成立——只要求两行简单的代码:

$element
  /* 在1000ms内,浏览器滚动到这个元素的顶部 */
  .velocity("scroll", 1000)
  /* 之后使元素绕着它的Y轴旋转360度。 */
  .velocity({ rotateY: "360deg" }, 1000);

#意味着网页中的二个职责。其右面的字符,就是该职位的标识符。比如,

结束语

Velocity的目的是保证超越的DOM动画品质和便利。本文的重中之重是前者。请去VelocityJS.org学学越来越多关于后世的知识。

在大家停止在此之前,记得_*1个高品质的UI不仅仅是选择相当的动画库_。页面的其他部分也相应优化。从上面那几个奇怪的谷歌(Google)话题中读书更加多:

  http://www.example.com/index.html\#print

就表示网页index.html的print地点。浏览器读取那么些U本田CR-VL后,会自行将print地点滚动至可视区域。

为网页地方钦点标识符,有七个艺术。

一是使用锚点,比如<a
name=”print”></a>,

二是运用id属性,比如<div id=”print” >。

二 、HTTP请求不包罗#

#是用来辅导浏览器动作的,对劳务器端完全没用。所以,HTTP请求中不包蕴#。

譬如,访问上边的网址,

  http://www.example.com/index.html\#print

浏览器实际爆发的请求是如此的:

  GET /index.html HTTP/1.1

  Host: www.example.com

可以见见,只是请求index.html,根本未曾”#print”的部分。

三、#后的字符

在首先个#末端现身的其他字符,都会被浏览器解读为地方标识符。那表示,这个字符都不会被发送到服务器端。

比如,上面UKoleosL的本意是点名三个颜色值:

  http://www.example.com/?color=\#fff

而是,浏览器实际暴发的呼吁是:

  GET /?color= HTTP/1.1

  Host: www.example.com

可以看出,”#fff”被不难了。唯有将#转码为%23,浏览器才会将其用作实义字符处理。也等于说,上边的网址应该被写成:

  http://example.com/?color=%23fff

四、改变#不触发网页重载

仅仅改变#后的一部分,浏览器只会滚动到相应地方,不会重复加载网页。比如,从

  http://www.example.com/index.html\#location1

改成

  http://www.example.com/index.html\#location2

浏览器不会再次向服务器请求index.html。

五、改变#会转移浏览器的访问历史

每3遍变动#后的某个,都会在浏览器的访问历史中加进一个记录,使用”后退”按钮,就可以重临上三个职位

那对于ajax应用程序尤其有用,能够用区其余#值,表示区其他走访状态,然后向用户给出能够访问有些状态的链接。

值得注意的是,上述规则对IE
6和IE 7不树立,它们不会因为#的更动而增添历史记录。

六、window.location.hash读取#值

window.location.hash那特性格可读可写。读取时,可以用来判定网页状态是还是不是改变;写入时,则会在不重载网页的前提下,成立一条访问历史记录。

七、onhashchange事件

那是3个HTML 5新增的轩然大波,当#值爆发变化时,就会接触那几个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+援救该事件。

它的运用办法有二种:

  window.onhashchange =
func;

  <body
onhashchange=”func();”>

  window.addEventListener(“hashchange”,
func, false);

对于不协助onhashchange的浏览器,可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

暗中认同情状下,谷歌(Google)的互连网蜘蛛忽视UPAJEROL的#部分。

只是,谷歌(Google)还规定,假若你愿意Ajax生成的始末被浏览引擎读取,那么U帕杰罗L中可以使用”#!”,谷歌(Google)会自动将其背后的内容转成查询字符串_escaped_fragment_的值。

譬如说,谷歌(Google)发现新版twitter的U奥迪Q5L如下:

  http://twitter.com/\#!/username

就会自行抓取另三个URAV4L:

  http://twitter.com/?\_escaped\_fragment\_=/username

透过那种机制,谷歌(Google)就足以索引动态的Ajax内容。东方之珠尚学堂Java培训原创,请多多关切,陆续有web前端技术相关文章奉上!

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注