美团网首页HTML源码阅读

Posted on Edited on Comments: Views:
Symbols count in article: 3.6k Reading time ≈ 3 mins.

首页网址：https://www.meituan.com

前端代码是透明的，你可以直接获取。通过解读源码，总是可以学到很多技术点。这里我来梳理下美团首页源码中包含的技术点。

SEO

1
2
3
4
5
6
7
8
9
<title>美团网-美食_团购_外卖_酒店_旅游_电影票_吃喝玩乐全都有</title>
<meta
      name="description"
      content="美团网:美食攻略,外卖网上订餐,酒店预订,旅游团购,飞机票火车票,电影票,ktv团购吃喝玩乐全都有!店铺信息查询,商家评分/评价一站式生活服务网站"
    />
    <meta
      name="keywords"
      content="美食,团购,外卖,网上订餐,酒店,旅游,电影票,火车票,飞机票"
    />

这两个meta标签服务于SEO，对于SPA应用，SEO是个问题，所以进而也就有了对应的解决方案SSR。

格式检测

1
2
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />

注意

  • 服务于关闭格式检测，比如数字串，避免点击直接call出去
  • 该标签非标准标签，只在Safari下有效，相关Apple文档

自定义标签

1
2
3
4
<meta name="lx:category" content="group" />
<meta name="lx:cid" content="" />
<meta name="lx:appnm" content="mtpc" />
<meta name="lx:autopv" content="off" />

注意

要知道，如上标签为自定义的,比如我一般增加releaseDate标签，来记录打包的具体时间，这样方便了解当前访问的WEB网页版本

DNS Prefetching

1
2
3
4
5
6
<link rel="dns-prefetch" href="//analytics.meituan.net" />
<link rel="dns-prefetch" href="//www.meituan.com" />
<link rel="dns-prefetch" href="//s0.meituan.net" />
<link rel="dns-prefetch" href="//s1.meituan.net" />
<link rel="dns-prefetch" href="//p0.meituan.net" />
<link rel="dns-prefetch" href="//p1.meituan.net" />

注意

合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升

dns prefetching的正确使用姿势如下

  1. 对静态资源域名做手动dns prefetching。
  2. 对js里会发起的跳转、请求做手动dns prefetching。
  3. 不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。当然HTTPS的网页不会，需要手动开启下<meta http-equiv="x-dns-prefetch-control" content="on">
  4. 对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。

推荐两篇相关好文

http,https切换

1
2
3
4
5
6
7
<script>
     (function () {
       if (location.protocol == 'http:') {
         location.href = location.href.replace('http://', 'https://');
       }
     })();
   </script>

实际测试，这段代码完全没用，因为美团在服务器端已经做了302跳转，当然个人认为301永久跳转更佳

相对协议URL

1
2
3
4
5
<link
     rel="stylesheet"
     type="text/css"
     href="//s0.meituan.net/bs/fe-web-meituan/23bb705/css/main.css"
   />

因为美团这里服务器端已经做了强行跳转HTTPS，个人理解这里自动协议切换是没有意义了。当然了解这个手段没问题，相对协议URL的好处就是浏览器会根据当前URL的协议自动去选择HTTPS或者HTTP

async,defer

1
2
3
4
5
6
7
<script
      src="//analytics.meituan.net/analytics.js"
      type="text/javascript"
      charset="utf-8"
      async
      defer
    ></script>

注意

  • async用于异步加载不block HTML的继续解析
  • defer用于JS的延迟执行
  • 两者是script标签的两个属性，因此是可以同时使用的

body中link标签

1
2
3
4
5
6
7
<body id="main">
    <link
      rel="stylesheet"
      type="text/css"
      href="//s0.meituan.net/bs/fe-web-meituan/5058856/css/com_header.css"
    />
 ...

如上body中的css work,因为浏览器在渲染前会纠错，也就是HTML是可以容错的。

IIFE

1
2
3
4
5
6
7
8
9
10
11
12
13
!(function (win, doc, ns) {
  var cacheFunName = '_MeiTuanALogObject';
  win[cacheFunName] = ns;
  if (!win[ns]) {
      var _LX = function () {
          _LX.q.push(arguments);
          return _LX;
      };
      _LX.q = _LX.q || [];
      _LX.l = +new Date();
      win[ns] = _LX;
  }
})(window, document, 'LXAnalytics');
  • IIFE主要解决的是ES6之前没有块作用域的问题，当然因为有了ES6带来的let，const，部分IIFE的场景完全可以替代。
  • 这里的感叹号是多余的，可以去掉，因为没有消费IIFE的返回值

运行如下例子即可看出IIFE的价值

1
2
3
4
5
6
7
8
9
10

for (var index = 0; index < 10; index++) {
       window.setTimeout(() => console.log(index), 1000);
     }

for (var index = 0; index < 10; index++) {
       ((i) => {
         window.setTimeout(() => console.log(i), 1000);
       })(index);
     }

写在最后

  • 一个简单的HTML网页也带出了这么多的细节知识点，不得不说，前端很碎。
  • 正如开篇所说的，前端是透明的，所以好处就是看看别的站点的每个功能是如何实现的，总是能学到些，so，不断学习不断进步吧。