分析google.com 的首页代码-

机缘偶合，对 google_com 的首页代码发生了浓重爱好。一点“剖析”，杂记如下：

不同浏览器推送不同代码

 

 

上图是在不同浏览器下，保留的 google 首页代码。

注意：文件大小是经由 IntelliJ IDEA 格局化处置后的大小，请查看：lab/2009/google.

其中 Chrome 跟 Safari 的代码是一样的，Opera 仅仅一个 js 函数的写法与 Chrome 不同。差异最大的是 Firefox 和 IE。

我的设法：大局部利用场景下，针对不同浏览器完成不同版本，会增添开发和保护本钱。google 首页采用这种差异化计划，很可能是考虑到要最大限度下降网页流量。究竟对日拜访量上千万的网站来说，减少一个字符都能勤俭可观的流量。精简节俭，在 google 首页上体现得酣畅淋漓，下面会连续提及。

doctype 的写法

只有 Firefox 用了《！doctype html》来激活尺度模式。其它阅读器下，都是简朴粗鲁的 Quirks 模式。

我的主意：Firefox 下也能够直接用 Quirks 模式，视觉差异上极小。不清晰 google 为何仅针对 Firefox 开启了标准模式。

值得留神的是，在 google 搜索结果页，所有浏览器下都运用了《！doctype html》。 毕竟结果页庞杂些，仍旧用 Quirks 模式的话，会增长开发成本。首页由于简单，Quirks 和 Standards 比拟，没什么明显差异，因此能省就省。

对于 doctype， 强烈推举浏览：Activating Browser Modes with Doctype

对浏览器来说，doctype 实际上仅影响浏览模式，因而能从简就从简。W3C 校验，我感到没必要，很少关注。

精简，仍是精简

以 Firefox 下 google 首页的源码为例：

html， body 缺胳膊少腿

html 元素的良多属性没有用双引号括起来

class， id 等命名很短

script 和 style 元素没 type 等属性

没有 keywords 和 description 等 meta 值，我是搜索老大，哈哈

balabala 等等

想起一句话：遵守标准的一个主要标准，就是明白何时攻破它，并勇敢地打破。从这层意思上讲，google 首页是特别遵照规范的。

没有完善

仔细点，还可以发明：

引号去得不彻底，好比《img alt=“Google” 。..

还有padding-left： 0px， px 可以去掉

js 上，也有进一步精简的余地。比方下面两行完整一样的代码，很囧：

if（google.y） google.y.first = ［］;

if（google.y） google.y.first = ［］;

还有一段代码，div 提前到 script 前面能省去断定：

《script》

function wgjp（）

var xjs = document.createElement（‘script’）;

xjs.src = ‘/extern_chrome/1mZ_-PL2Zjc.js’;

（document.getElementById（‘xjsd’）;

《/script》

《div id=xjsd》《/div》

兴许求全责备了，笑过。

预加载

看代码：

《body onload=“sf（）;if（document.images）new Image（）.src=‘/images/nav_logo4.png’” 。..

这就是 YSlow 34条性能法令中的 Preload Components. google 首页提前加载了搜寻成果页的 css sprite. 另外赞一下这个 sprite 图的组织，很 cute.

延迟加载

看代码：

window.setTimeout（function（）

var a = document.createElement（“script”）;

a.src = “/extern_js/f/。../XRt_2Y4Z5sM.js”;

（document.getElementById（“xjsd”）， 0）;

上面这个 js 挺大的，包括了 google 的 js 库和输入框的提醒补全组件。这个 setTimeout 起到了将下载过程延迟到 window.onload 后。很小的代码调剂，却晋升了不少用户休会，真实划算。

另提一下，这个 js 在不同浏览器下也有不同版本，大小差别比拟显明。为了尽可能减少流量，google 还真费神。

奇淫技能

代码虽少，淫荡之处却摇曳生姿：

1. 遍历数组

for （var i = 0，c; c = ［“ad”，“p”，“pa”，“zd”，“ac”，“pc”，“pah”，“ph”，“zc”］［i++］;）

// doing something， such as console.log（c）

2. 短路语句

function _gjp（）

！（window._gjwl.hash && window._gjuc（）） && setTimeout（_gjp， 500）

短路表白式很常用，但用短路独自做语句，还真精简。

语义化

从语义上讲，google 的 html 代码是比较蹩脚的。但斟酌到各种浏览终端，或者 google 目前的写法特别优化,。不接触过跨n 》 20的浏览器开发教训，对此未几说。

小结

从首页代码中，能看出 google 推重的是：简单 + 适用 + 机能。我越来越认同这种观点。

上附近通:
其它文章

• 经验共享-成功网站的建设全过程-