Chesanqi's Web World

　　自从《阿凡达》的热潮过后就没去过电影院，但最近的豆瓣电影评分《盗梦空间》从9.3升到9.5，《敢死队》从8.5降到6.8，我迫切的迫不及待的想去看看什么叫做“匪夷所思却又流连忘返”。 　
　　
　　我去的是天通苑的万达国际影城，走路5分钟即到，买了10点55分的票，在楼下吃了肯德基，返回5楼时已经10点45分，或许我走的太匆忙，票没检就被我闯进去直奔9厅9排19号。我第三个进影厅，情形远不如《阿凡达》时的火爆，找到座位坐下时刚刚10点51分，收发了两条短信，10点55分正点开始放广告，首先是戴尔电脑，google.cn招聘的广告也在其中，我很喜欢这个广告，轻盈干净又有创意，虽然谷歌中国的状况并非如此。戴尔的广告播了第二遍，又播了一个什么广告，灯光熄灭，11点整我关闭手机，影片开始。
　　
　　以下内容严重剧透，继续阅读请慎重。
　　
　　《盗梦空间》的情节并非那么复杂，简单来说是两个能源行业的巨头，其中一方想整垮另一方，就派人去干掉另一方的继承人。这里的干掉并非杀死对方，而是希望公子哥继承垂死父亲的事业后分拆它，两个巨头便剩其一。这个得利的巨头叫伊藤，他要想达到目的，就得设法让公子哥自己有放弃父亲事业的想法。以莱昂纳多扮演的柯布为首的一群人有这么一种能力，可以与目标一起做梦，让梦中看到的想到的认识到的影响现实中的实际行动，正如天朝的封建时期，某位皇帝做了噩梦，就要在现实中报复一样。
　　
　　柯布给伊藤办事并非为了地位金钱或者其他物质需求，他只想回家回美国，因为家中有两位可爱的女儿。他与妻子是早期的盗梦者，他们既活在梦中也活着现在中，因为这种事做的多了，便很难区分梦与现实，特别是造梦时并非从无到有的创造，而是根据回忆创作。现实中的妻子自以为在梦中，只有死亡才能醒来，于是跳楼自杀，妻子也希望柯布如此这样回到她认为的现实世界，临死前对警方说了柯布有家庭暴力倾向，柯布被怀疑杀死自己的妻子，一直在被通缉中。能源巨亨伊藤自然有能力为柯布抹去罪名，让他安全的回到女儿身边。
　　
　　柯布以前的工作性质是在梦中盗取别人的心思，梦中人总是比现实中缺少防备，银行密码或者其他机密事件也就容易获取到。如果只有一维梦境故事倒也简单直白，我进到你梦中，或者咱们一起做梦，在梦中把事情解决，一觉醒来故事结束，就如民间传说中的“魏征梦斩泾河龙”的故事。但现在面临的问题是，我要把一个想法——“分拆父亲事业”植入到你的大脑中，在梦中无论怎么对你说教都无济于事，因为你会觉得那是别人的想法，与我何干，我为什么要去那么做，只有自己的脑海中滋生了某种想法，才会在现实中去实施他。于是我们需要你在梦中做梦，梦中做梦又做梦，梦中做梦又做梦再做梦，其实整部影片下来我也没搞清一共做了多少层梦，又都是谁做的梦，不过根据台词所示故事是准备做三层梦的，首先在波音747的头等舱中一位药剂师做了梦，把5位同伙加他自己连同公子哥带入梦中，在这一层梦中，药剂师驾车躲避公子哥潜意识里反抗因子化为的武装人员的追击；车内其余6人睡眠中做第二层梦，这一层是是由柯布的助手做的，梦中的场景在宾馆中展开，柯布的助手在这一层中是醒着的，其余诸人睡觉做第三层梦，……，不多赘述。
　　
　　我们都知道在沙发上迷五分钟做的梦，梦中的世界可能会过去一个小时、一天甚至一个月，以此为根据不难推论出，梦中梦的时间尺度是成几何倍剧增的。在《盗梦空间》里从飞机起飞到降落的过程中，最深层的梦时间尺度已经达到了50年。伊藤因为在药剂师和柯布助手的双层梦境中身负重伤只能生存在梦中的迷失层里，柯布为了解救他只身留在梦中，当历经磨难险中求生的年轻的柯布见到垂垂老矣满脸褶子的伊藤，告诉他自杀就可以醒来，醒来就可以和自己一样年轻时，故事终于归于平稳，小腹渐渐开始感觉到尿意。虽然只是100多分钟的片子，但也好像一天没去厕所一样。
　　
　　故事结束，一枚金属的小陀螺在桌上不停的旋转。导演显然有意这么安排，因为你能清楚的听到临旁的座位上啧啧的叹气声，那声音中或许包含了可惜、遗憾、不解、困惑……这叹气声只能是看过影片的人才能了解，这叹气声提供了在公交车在办公室在聚会中的谈资，因为这陀螺并非普通的陀螺，他转啊转，似停非停。
　　
　　魏征梦斩泾河龙，
　　
　　到乡翻似烂柯人，
　　
　　庄生梦蝶丢烦恼，
　　
　　哆啦A梦大雄觉，
　　
　　南柯一梦为一生，
　　
　　躺下驱使阿凡达，
　　
　　只愿保卫潘多拉。

题目当然是模仿的淘宝UED的那本译作《PPK on Javasrcipt》，可惜我说不了那么深刻，只是摆出来供大家探讨。html5和css3现在是个时髦的话题，时髦到现在才写这个都有点过时了。还好爸爸总对我说这么一句话“只要是你没看过的《故事会》，1999年的也是最新的。”

闲话少说，html5新增的一些特性包括：

• 新的特殊内容元素，比如 header、section、nav、article、aside、footer
• 新的表单控件，比如 date、time、email、url、search
• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持

一、新增内容元素的出现，是标准向语义化跨出的一大步。以前我们有一些约定俗成的规矩(点击这里)，比如说

1
2
3
4
5
6
7

<div id="header">页面头部</div>
	<div id="content">
		<div id="nav">导航区域</div>
		<div id="main">主内容区</div>
		<div id="side">侧边栏</div>
	</div>
<div id="footer">页面底部</div>

在html4.01中div是区域划分的最好元素，不夸张的说只用一个div就可以搞定整个页面，所以市面上流行着大量div+css的书，其实div只是html中的一个元素标签，严格来说应该是(x)html+css技术。html5更加强调了标签的语义化，新增header、nav、article、section、footer等内容元素。所以上面的代码片段在html5中比较合理的写法变为：

1
2
3
4
5
6
7

<header>页面头部</header>
	<section>
		<nav>导航区域</nav>
		<article>主内容区</article>
		<aside>侧边栏</aside>
	</section>
<footer>页面底部</footer>

好了，现在不用约定俗成了，现在标准规定了，每个符合标准的浏览器都会知道页面中的每一部分代表什么内容，有什么作用。代码简洁漂亮没有多余重复的div,搜索引擎可以更清楚的判断网页的哪部分内容更重要。事情变的简单，工作效率增加。

但是但是，要注意他们跟h1、P不一样，新增的内容元素不是换了名字有了自己特点的div。尝试这样定义header标签的样式：

1

<header style="width:300px;height:200px;background:red;">页面头部</header>

测试发现在ff、safari、opera中width和height都没有起作用，只有在chrome中才得到想象中的效果。（ie我暂时忽略了，原因不表）新增的内容元素不是div，现在就可以使用这些新内容元素，但有时候要套一个多余的div，比较：

1
2
3

<header  style="width:300px;height:200px;margin:0 auto;">
 内容
</header>

1
2
3

<header>
	<div style="width:300px;height:200px;margin:0 auto;">内容</div>
</header>

二、新的表单控件,html5新增了许多input输入类型选择：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

详细了解，请点击这。

以前不借助javascript，实现表单验证功能是不可能的。html5新增的input类型不要javascript就能验证。email可以验证输入是不是email格式；number类型确保输入的是一个数值。这真是振奋人心的新增功能。

但是但是，现在面临最大的推广困难是各浏览器对其的支持，那是相当的不乐观。即使浏览器对标准全面支持，我觉得实际应用起来仍然不那么乐观，因为标准没有规定，当值为true时浏览器应该怎么做，当值为false时浏览器又要怎么做。比如说opera有自己的fasle效果，input底色变红并且出现输入不合法的提示。如果我们想做到各浏览器表现效果一致，恐怕需要一个像css那样的reset.css。

去掉超链接的虚线框，在IE中至少有这么几种办法：

1. a {blr:expression(this.onFocus=this.blur())}
2. onfocus=”this.blur()”
3. 用.htc 实现
4. 使用IE的私有属性hidefocus=true

不考虑性能及其他因素，这几种办法在IE类浏览器遨游、TT、360中都表现相同，但是在搜狗浏览器中，会遇到点麻烦。默认设置的搜狗兼容模式会进行弹出窗口拦截，大概有这么几种情况：

• a.新窗口打开会被拦截，原窗口不会。
• b.原页面打开会被拦截，但是作为iframe调用不会。
• c.页面放到服务器上会拦截，放在本地不会。
• d.前面提到的去掉虚线框的前三种办法有可能会被拦截，使用hidefocus=true则有可能放过你，具体见demo,为什么都是有可能，见下面三点。
• e.如果页面有两个指向相同地址的a链接，被拦截的那个a先被点击，那紧接着点击不会被拦截的a也会被拦截。
• f.如果页面有两个指向相同地址的a链接，不被拦截的那个a先被点击，那紧接着点击会被拦截的a则不会被拦截，刷新页面也不会。
• g.如果页面有两个指向相同地址的a链接和一个其他指向其他地址的a链接，如果不被拦截的那个二分之一a先被点击，接着单独的那个a被点击，此时再点击会被拦截的a则会被拦截。（f和g的区别在于，点击两次相同的链接a之间是否点击了另外的其他链接。）
• h.有几个例外不会被拦截，搜狐（http://www.sohu.com/）QQ（http://www.qq.com/）Google（http://www.google.com/）谷歌中国（http://www.google.cn/）
  （但是，谷歌中国新家（http://www.google.com.hk/）会被拦截,另外焦点房产网、17173、chinaren、搜狗包括搜狗浏览器官网均会被拦。）

facebook使用chunk技术让页面分块输出成很多JS段，这样做的好处就是服务器和客户端可以并行进行处理，不用等服务器全部处理完毕，客户端才进行处理。

举个博客园首页的列子，博客园首页分为下面几块(“推荐博客排行”,”首页随笔列表”,”最新新闻”…)
我们一般对该http请求处理如下：

1. 浏览器发送http请求；
2. 服务器处理请求(从缓存读取前50个推荐博客，从数据库读取”首页随笔列表”,从数据库读取”最新新闻”)，生成首页的html代码；
3. 服务器发送html代码给客户端；
4. 浏览器接收到响应，处理html。(下载css,js,image,执行js等等)

可以看出传统的http请求4个过程中，每个过程都必须等待前1个过程完成后才能执行，这样就存在很大的资源浪费。

facebook的对该http请求的处理如下：

1. 浏览器发送http请求；
2. 服务器处理请求；
• 从缓存读取前50个推荐博客,生成”推荐博客”的js代码段，flush输出该代码段；
• 服务器继续读取”首页随笔列表”，并生成输入js代码段；
• 服务器继续读取”最新新闻”，并生成输入js代码段。
3. 浏览器接收到js代码段，下载该代码段所需的js和css。插入html代码。

在这个处理流程中，最大的特点就是2,3是并行进行处理的，服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理，自己再继续处理其他的数据。

原文链接：
《名站技术分析 — facebook奇特的页面加载技术》

————————————
相关博文：
《为什么Facebook比以前快2倍》

随着用户的增多,几乎所有网站都会面临一个问题：网站速度变慢，用户体验变得不好。Facebook已经有超过5亿的用户，其用户增长速度令人震惊，但是人们从来没有发现Facebook变慢，相反，它正变得越来越快！Facebook 为什么能越来越快？

罗伯特 约翰逊（Robert Johnson）是Facebook的项目总监，他说：在工程师团队对Facebook代码进行了重写和深入优化之后，网站的速度以前快了2倍。

1.Facebook花了多久才让它变快2倍的呢？

罗伯特 约翰逊：我们对网站进行的大幅度的”改革”，这的确使网站速度得到很大的提升。工程师团队花了大概一个月来规划这个项目，具体的实施过程则花费了6个月。

2.在这次的重写行动中，你们在技术上做了什么大的改进？

罗伯特 约翰逊:我们队源代码做了比较多的优化和重写：

1、把用户请求之后的内容生成、网络传输和网页渲染的时间重叠起来;
2、把相应的功能代码放进一个在页面初始化时需要用到的Javascript核心功能文件中;

这个项目叫做”BigPipe“，只要当客户端的浏览器准备好了,我们的服务器就会以最快的速度以流的形式传送内容，当我们的服务器还在产生数据的时候，客户端的浏览器就已经开始下载静态内容和渲染页面最重要的部分了，我们把几部分的时间重叠了起来，使用户感觉更快。这个新的JavaScript库叫做”Primer“.

除了服务器端的大项目之外，我们还对所有的文件都进行了”瘦身”，让一切变得更小更轻，比如我们进行了CSS图片合并(CSS Sprites).

3.Facebook是否鼓励开发员大胆尝试和创新呢？

罗伯特 约翰逊:也许这是这个项目最棘手的部分之一。对于Facebook来说,开发速度是最重要的指标之一，我们不希望看到任何会使开发速度慢下来的事情。我们既要让开发人员尽可能容易的完成任务,又要使网站代码尽可能得到优化，所以我们制造了一些辅助开发工具，它们能使鱼和熊掌兼得。比如Primer，让它使Facebook运行得更快和让它易于集成和不容易被误用是同等重要的。

我们监测一切可能会影响程序性能的因素，并开发相应的工具，在程序正式放出之前检查代码。

这很重要，一旦代码出现问题，系统就会自动提醒开发人员，而不是靠开发人员自己去检查那些问题。这样开发人员就可以不断地创新，只要在出现一些比较特殊问题的时候，开发人口才需要停下来解决那些问题。

原文： oreilly 译文：http://cnnet.us/taobao/facebook-faster/ 转载请保留出处