無標題文檔

Twitter 的前端浅析

前段时间(似乎目前也有)Twitter 的网站不是非常的稳定,虽然是 服务器方面的问题 ,而本人职业倾向,于是就看了下 Twitter 的前端代码,下面我说下我的个人观点。

按照期前所说的 评定标准 ,我们来对比下 Twitter 做得如何。

减少 HTTP 请求数,以及使用 CDN、加 Expires 头等

https://friable.rocks/_/2009_11_05/058855b87c6a.jpg

这是本人的 Twitter 主页的请求数统计( 大图 ),看得出在页面不大(150K)的情况下,请求数竟然达到了 60 个居多。

其中,大部分的请求数是图片等,主要的内容是用户的头像。其中,大部分的图像资源来自 s3.amazonaws.com 这个站点,而同时多达 60 多的并发请求数,还是让人对效率方面堪忧。

https://friable.rocks/_/2009_11_05/648315b87e99.jpg

上图是 Twitter 返回的 HTTP 头信息,看得出虽然设置了 Expires 头等信息,但是似乎缓存并没有发挥实际的功效(谁能告诉我原因?)。

Javascript 和 CSS 方面

Twitter 的 CSS 文件仅为一个,并且在页面的头部就已经载入。在这里我无法理解的就是为什么它们没有把样式给压缩,甚至连注释都存在。

https://friable.rocks/_/2009_11_05/345865b87c66.jpg

特别是针对 Twitter 这样突发流量非常大的站点,相信压缩过以后效率会更理想些。

https://friable.rocks/_/2009_11_05/024525b87c64.jpg

Javascript 方面的问题除了说了上述的 CSS 一样未被压缩过以外,它们还分别载入了两套不同的 Javascript 框架,分别是 Prototype 和 jQuery

相信 Javascript 运行开销会比较大的还有 urchin.js 这个文件,它是 Google 的统计埋点(Twitter 没有自己的统计系统?)。

Twitter 的页面虽然简单,但是如此安排前端脚本,在庞大的流量基数面前,个人认为不应该抱乐观的态度。

其他

Twitter 的 HTML 结构发现,有很多的结构都是被简化了的(可能这是处于针对移动设备的考虑)。

https://friable.rocks/_/2009_11_05/939665b87c68.jpg

有趣的一点就是他们会将很多事情交给 Javascript 去做,比如是否出现「On a mobile phone」的提示。

个人认为针对「无障碍」的 HTML 结构而言,固然是可以这样做(给用户更多的提示信息)。

但对于桌面用户而言,毕竟这是属于多余的结构,所以此类的提示信息应该放在服务器上面判断。当然,反驳本热观点的最好理由就是:其一,坚持「无障碍」的 HTML(结构);其二,减少服务器的运行开支。

--Split--

本人的水平有限,此文希望能起到抛砖引玉的效果。PS:大家想听我发牢骚,可以 去我的页面看看

怎样才算 PHP 入门?

译言上有篇 「40 个迹象表明你还是 PHP 菜鸟」 ,里面的内容非常不错,但部分观点不完全苟同。

PHP 入门的确很简单,但这并不说明它不复杂。在从事 前端开发 之前,本人也作为 PHP 程序员混了一段时间,在这里根据此文的部分观点说下我的个人看法。

不使用 MVC

MVC 这玩意 几乎成了后台开发的「Web 标准」。很多程序员在没有真正弄清楚项目需求和规模前,就大喊「我们要些遵循 MVC 的代码」。

MVC 固然有众多的好处,但是退一步讲,其出发点也是为了提高效率的。在并不复杂的项目中刻意使用 MVC ,这好比将一个脚本分成三份,我想谁都不会这样做的。

不使用 autoload

PHP5 中加入的 autoload 特性 意在容许给编码人员二次出错的机会。有时候这个特性非常的棒(本人也经常在使用,这样可以省去不少的 inlcude/require 代码)。

这里要说明和提醒的就是,不要滥用这个特性 -- 比如你明知道这个类在某个文件中,何必劳神让 autoload 再去寻找?特别在些注重高效率的场合,必须面对这一点。

对集成开发环境(IDE)视而不见

好的 IDE 是能提交效率,但坦白的说,本人没有使用 IDE 的习惯。

在大学期间学习 Linux 系统开发(c 语言)的那会,已经习惯用 Vim 编辑代码 、使用 make 和 autoconf 组织代码、使用 gcc 编译,如果碰到需要调式,还可以让 Vim 和 gdb 配合。

本人的观点就是「好的软件只做一件事情」,我敢保证 IDE 中的编辑器没有 Vim 好,断点调试也没有类似 gdb、xdebug 要来的方便(至少熟悉)。

所以,本人觉得作为工具的工具,没有孰优孰劣的说法。

-- Split --

总之,文中的很多观点本人甚为同意,除了技术上的些细节,看得出很多都包含了「思想」这一范畴。比如良好的代码风格和开发方式、使用 OOP (不过和 MVC 一样,经常会被玩概念)、还有很多脚本基本安全方面的的意识(比如输入过滤)等等。

在我看来,好的 PHP 程序员不仅仅需要过硬的技术,重要的还是思想--团队意识、责任感、兴趣、激情、还有敬业等等(再这样说下去直接去学 六脉神剑 去算了)。

说到这里就不仅仅是 PHP 程序员的范畴了,希望广大的技术人员都能共勉。

百淘 27 期培训总结

三天的培训总算是结束了,整个人仿佛重生了一样。 第一天的项目前面以后说过了 ,下面总结下昨天(第二天)以及今天的安排。

https://friable.rocks/_/2009_11_05/948735b47a12.jpg

第二天是户外拓展,这也是我最期待的。不过整天下来,失望超出了期望,最大的原因是我和我组的女生被分到了不同的组(最要命的后面说)。

第一项是「双飞」,说白了就是两个人在八米的高空,一前一后走独木桥。不过本人几乎是直接拖着队友就过来(长痛不如短痛,夜长梦多)。下来了以后其他队友问她在上面有什么感觉,她只说「我还没反应过来呢,就被明城丫的拽到对面了」-_-!

第二项高空抓单杠也几乎没有什么难度,只是爬上去以后突然发现那杠子在离我「远去」,往下一看原来教练那丫的看我身材故意把杠子拉远了。随后就是天空突然出现一朵乌云,再随后的事情就不说了……

在这里特别点名 文亮 同学,这来自东北的爷们(同时也是我们的队长),在「展台」上恍惚了半宿,终于「体力不支」直接掉下来(注意「掉」这个字)--这事在午饭时间被引申为教材使用。

第三个项目是「过电网」,坦白的说这才是本人最期待的。但是就如期前所说的,我期待的几位女生(咳咳,不要误会)被分到其他组,加上我队的队长(不要怀疑是谁)决定让男生先过去,由于时间的缘故(省略),甚为遗憾!

https://friable.rocks/_/2009_11_05/067745b47a2f.jpg

最后一项的「毕业墙」就更惨烈了。由于本人看起来比较强壮,同时身材上「更接近终点」,当之无愧的被选为人梯。惨烈程度无以言表,据说另外同为人梯的某位同学肩膀上还被烙上了「Nike」的 Logo……

https://friable.rocks/_/2009_11_05/428785b5e3fc.jpg

第二天的培训就显得乏味的多--还是一如既往的被「洗脑」。但最后环节的「知己知彼」还是比较有趣的,内容就是介绍对方的工作(上面照中的那胖子,当初就是他踩着我的肩膀翻过墙的)。

https://friable.rocks/_/2009_11_05/688405b5e3fd.jpg

此位仁兄就是上述的队长,据说在他的阐述下,有很多在场的女生萌生了申请内部调动到他部门的念头(动机待查)。

https://friable.rocks/_/2009_11_05/964515b47a10.jpg

总结以后的再总结下,为期三天的百淘培训还是有很大的收获的。譬如在公司有个不成文的规定,就是不经过百淘和倒立考试就不能转正,看来只有经历了以后才知道其中的含义(怎么女孩子没有穿裙子去考试的?)。

PS: 小妮子 的公司似乎也要去拓展,在这里提前祝她出洋相(请原谅本人邪恶的念头)。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章