Google 首页代码分析及简评

最新推荐文章于 2023-11-27 21:52:18 发布

zhangking

最新推荐文章于 2023-11-27 21:52:18 发布

阅读量3.6k

点赞数

分类专栏：其他内容 DHtml-Web前端文章标签： google 代码分析 function javascript xmlhttprequest div

本文链接：https://blog.youkuaiyun.com/zhangking/article/details/2956945

版权

本文分析了Google.cn首页的HTML代码，揭示了其混合使用<div>和表格布局、JavaScript的非标准写法以及隐藏的动画效果实现。虽然页面看似简洁，但实际上代码结构并不简单。通过对代码的解析，我们可以看到Google在浏览器兼容性和动画效果上的处理方式，以及一些可能用于保密的晦涩代码。文章还探讨了如何通过JavaScript构建动态效果，特别是那些小图标的动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.index