Google 首页代码分析及简评

zhangking

墨衍会员 · AI 创作全网分发码龄25年

关注

VIP免费原创最新推荐文章于 2023-11-27 21:52:18 发布 3.7k 阅读 AI 写同款· GEO 优化 ›

谷歌小恐龙HTML源代码阅读详情

Google.cn 首页界面简洁，尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目。

几乎天天打开 google.cn 页面，有没有想到看看这个页面的 Html 代码是什么样子？当试图分析其 Html 代码时会发现，虽然页面看起来简单，但代码并不是想像的那么简单！

分析其代码发现：

以<Div>和表格混合布局，并不是所谓的纯粹的 XHTML <Div>+CSS “Web标准”布局；

标签的属性也不用 "" 或 '' 括起来。

使用 Javascript 的比较生僻的语句形式，比如 window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"}

Javascript 代码写的晦涩难懂，变量用单个字母表示，意义不明确，是为了显示技巧高超，还是为了“保密”？

“视频”“图片”……等地方的效果不是用 Html 代码构建，而是用纯粹的 js 代码构造，不知道是手工写的，还是用什么工具完成的？

本人把“很炫目”那部分的代码扣了下来，效果还在，但还是 js 脚本的形式。本人没有进一步深入分析，想进一步分析的可以自己做，希望能把新的与大家共享。

其实“很炫目”的那个效果并没用很玄的编程技巧，无非就是把类似动画帧的几个图片按时间顺序分别显示了一下，做出了动感的效果。大家看一下图片就能意识到。但具体怎么实现还要看代码。

这段代码还有值得学习的地方，例如判断浏览器类型的代码就很不错，毕竟是 Google 的东西嘛，不但搜索引擎世界第一，而且以玩 Javascript 而闻名于世。

以下代码是我简化后留下的，我认为与动画效果有关的部分。

Google.htm 文件代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<script> //Google 的代码，也不加 language="javascript"呀
    //window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"};
    //以上代码是 Google 原来的代码，作用是建立一个对象。相当于以下4句代码：
    google = new Object;
    google.kEI="oCDVSLaCH4vu6gOGmLm0CA";
    google.kEXPI="17259,17735";
    google.kHL="zh-CN";
</script>
</head>

<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<center>
<div id="tb"></div>
</center>
</body>
<script>
google.y={first:[]};
window.setTimeout( //在这里加载 wt_QGEYUfoQ.js 脚本文件
    function()
    {
      var xjs=document.createElement('script');
      xjs.src='wt_QGEYUfoQ.js';
      document.getElementsByTagName('head')[0].appendChild(xjs);
    }, 0);

/*google.y.first.push(
    function()
    {
      google.ac.i(document.f,document.f.q,'','');
    }
)*/
google.xjs_ready=1;
</script>

</html>

wt_QGEYUfoQ.js脚本代码：

(
function()
{
    var e=navigator.userAgent.toLowerCase();
    google.isOpera=e.indexOf("opera")!=-1;
    google.isIE=document.all&&e.indexOf("msie")!=-1&&!google.isOpera;google.isSafari=e.indexOf("safari")!=-1;
    //google.time=function(){return(new Date).getTime()};
    //google.log=function(a,b){(new Image).src="/gen_204?atyp=i&ct="+a+"&cad="+b+"&zx="+google.time()};
    //google.xhr=function(){var a=null;if(window.XMLHttpRequest)try{a=new XMLHttpRequest}catch(b){}else if(window.ActiveXObject)for(var d=0,c;c=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"][d++];)try{a=new ActiveXObject(c);break}catch(b){}return a};