携程UED

建一间茅草屋和建一幢大楼有什么本质区别吗?可以说有,也可以说没有。

对于一个资深的建筑师,从一个小小的茅草屋的建造上也能看到各种工程学,也能看到各种设计。只不过应用场景比较简单,许多环节简化了。所以对他来说,两者没有本质区别,只是工程大小而已。

而对于一个没建过大楼只盖过茅草屋的人来说,他看到的、掌握的知识都受限,他一般是不懂得如何建造一幢大楼的。那么对于这样的人来说,两者有着本质的区别了。

回顾我们前面两篇连载,Canvas绘图基础、动画基础都已经讲述完毕,我们甚至也像模像样地画出了棋盘、棋子。让我们继续我们的事业吧。

我们本期目标是实现完整的行棋逻辑。因暂无AI,我们轮流拖拽两方棋子来行棋,每步棋要由程序判断是否合法。如果合法,则落子到目标位置,否则棋子返回原处。这中间使用前面讲过的动画效果。此外如果一个子被吃掉,动画过程结束后将其移出棋盘。

Read more »

我们常用的script标签,有两个和性能、js文件下载执行相关的属性:defer和async

defer的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

async的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.

 

Defer

对于defer,我们可以先思考一个情况。一个页面如果有N个外链的脚本,放在head中,那么,当加载脚本时会阻塞页面的渲染,也就是常说的空白。在简单的开发环境中,我们可能只要将源代码中的外链脚本位置换一下就ok了。可是面对越来越复杂的开发环境,前端同事如果要后台开发同事调整一下脚本的位置,可能会花费大量的沟通成本和开发成本。我在去年的一个项目中就遇到过此类情况,当然也很感谢当时的后台开发同事的配合,他们都辛辛苦苦的调整了脚本的位置,解决了空白的问题。

Read more »

原文:http://www.stevesouders.com/blog/2010/12/15/controljs-part-3/

关于ControlJs一共有三篇文章,这是第二部分。ControlJS是让脚本加载更快的一个模块(a javascript module for making scripts load faster). 三篇文章的结构分别为:

1. async loading [中文翻译:http://ued.ctrip.com/blog/?p=2964]
2. delayed execution
[中文翻译:http://ued.ctrip.com/blog/?p=3017]

3. overriding document.write [中文翻译:http://ued.ctrip.com/blog/?p=3111]

ControlJS的目标是让开发者更好的控制脚本的加载。其中的关键是意识到”loading”有两个步骤:下载[download](获取内容)和执行[execution](包括解析).在ControlJS part 1(中文翻译:http://ued.ctrip.com/blog/?p=2964)中,我主要阐述了如何用ControlJS来异步加载脚本。在 ControlJS part 2 (中文翻译:http://ued.ctrip.com/blog/?p=3017)中,我们展示了通过延缓脚本的执行使页面更快速的加载,尤其是Ajax的网络应用,下载了大量的脚本,而这些脚本不需要立刻使用到的。在本篇中,我们将讨论一下在脚本异步加载时,document.write引发的问题。

Read more »

编辑:S++小组

数据在很多网站都被看作是衡量一个产品或者一个设计好坏的基本指标之一。数据指标也曾经压的我很长一段时间喘不过气来。但是现在想想确实有时候数据能告诉你很多很多。它未必是衡量产品好坏的唯一标准,但是它也确实能告知你很多。

Read more »

编辑:S++小组

在前一篇的校验思考中,我们整体概括了一些校验出现的类型,出现的情况,以及校验设计的设计原则与经验。而在具体设计过程中,需要结合产品的业务逻辑,旅游机票预订的全流程,是我碰到过交互逻辑中,相对比较复杂的情况,它的搜索来说也囊括了比较多的输入项,和各种类别的表单控件,因此它的校验情况也相对比较多样化。

Read more »

编辑:S++小组

你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一大堆信息,之后点击按钮提交时,校验报错的同时,你发现你所填写的所有的信息都被清空;或者你还碰到过很多很多校验当中出现的问题,那么我们现在就开始进行表单校验设计的思考。

Read more »

原文:http://www.stevesouders.com/blog/2010/12/15/controljs-part-2/

关于ControlJs一共有三篇文章,这是第二部分。ControlJS是让脚本加载更快的一个模块(a javascript module for making scripts load faster). 三篇文章的结构分别为:

1. async loading [中文翻译:http://ued.ctrip.com/blog/?p=2964]
2. delayed execution
[中文翻译:http://ued.ctrip.com/blog/?p=3017]

3. overriding document.write [中文翻译:http://ued.ctrip.com/blog/?p=3111]

ControlJS的目标是让开发者更好的控制脚本的加载。其中的关键是意识到”loading”有两个步骤:下载[download](获取内容)和执行[execution](包括解析).在ControlJS part 1(中文翻译:http://ued.ctrip.com/blog/?p=2964)中,我主要阐述了如何用ControlJS来异步加载脚本。在本篇中,我将讲一讲ControlJS在脚本执行阶段[execution]能做些什么?

The issue with execution

执行阶段的问题关键是:浏览器在解析和执行脚本的时候,它其他什么都干不了。通常的表现就是浏览器的界面无响应,页面渲染被阻止,浏览器中新资源的下载被终止。

执行阶段花费的时间可能比你想象中要长。我无法获取这个阶段具体消耗了多少时间(当然你也可以用dynaTrace Ajax Edition or Speed Tracer来收集这些数据)。如果你进行了大量密集的DOM操作,很容易呈现这种阻塞的情况。如果页面中有大量的脚本,仅仅解析的时间就会消耗很长的时间了。

当然,如果所有的脚本都是必须立即执行来渲染页面的,那么我们能做的也只有停止操作,等待这些脚本执行完毕。不过,久而久之,我们会发现大部分下载的脚本并不是需要立刻执行的。通过Alexa US Top 10 ,你会发现在window load之前,仅有29%的脚本需要被调用。(我用Page Speed‘s的”defer Javascript”的功能来做的调查)。余下的71%的代码是什么情况呢?虽然它们对页面初始渲染没有任何帮助,但是它们仍然被解析并且执行了。在我调查的页面中,平均每个页面下载229kB的脚本。这229kB的是压缩的- 压缩前应该会超过500KB了。比起在页面下载的时候执行那71%的脚本,更好的办法是在页面渲染完毕之后再去执行那些脚本。但是开发者怎么做到呢?

Loading feature code

为了让我们接下去的讨论更简单一些,我们把那29%需要去渲染页面的代码称为”immediate-code”(IC),余下的71%称为”future-code”(FC).FC一般来说是DHTML或者Ajax的功能,例如下拉菜单、弹出对话框、好友邀请……这些代码只有用户操作了某些功能之后才能触发的。

假设你已经成功的将页面的脚本分成了IC和FC.IC的那部分就可以使用async loading capabilities在页面初始化的时候下载。FC的那部分呢,在页面下载的时候也同样的方式下载。然后浏览器会将那些不需要立即使用的代码的解析和执行先锁住。我们不希望在页面初始化的时候就下载那71%的脚本。

当然,还有一个办法,那就是在页面渲染完毕之后,再去下载那些FC. 这些脚本可以在onload的回调函数中进行后台加载。不过即便这些FC在后台加载,在他们解析和执行的时候,浏览器仍然会被“冻住”。如果这个时候用户尝试操作页面,将得不到任何响应。这些没必要的延迟会带来很多麻烦,所以Gmail的移动小组有了他们自己的一套解决办法Gmail mobile team’s way

道理很简单,也就是在用户需要的时候,再去解析和执行future-code。举个例子,当用户首次点击了下拉菜单,那么我们就去解析和执行menu.js。如果用户从来没有用过下拉菜单,那么我们就免去menu.js的不必要的解析执行的开销。不过当用户点击了那个菜单,我们并不希望他们还要等待menu.js的下载-尤其是在手机上。那最好的解决方案就是在后台下载脚本,但是直到用户真正需要的时候再去执行它。

Download now, Execute later

我们接下去看一下ControlJS在这方面能做些什么。我列出了一下的几个例子

Read more »

高斯闲着无聊,给数字排队,并操练各种对形组合变化方式,拼拼凑凑,发明了线性代数。什么左边行右边列的,你可千万别以为这就是严谨,高斯只是想凑好数。如果你在高斯只前反过来凑数,也没问题,就像用负一代表你有一个东西,用正一代表你缺一样东西,没什么不可。信用卡“余额”不就是这样么?

爱因斯坦穿越看了一回《星球大战》,整天痴迷于那普遍存在于宇宙之中,贯穿你我的原力。可是尤达不收他做徒弟,于是他异想天开,断定原力就存在于“物质”之中,还凑了个公式出来。他受绝地武士影响,变得超级自信,乃至自大,以至于敢在一个超级假设之上做学问。

Read more »