Reading the Meituan Homepage HTML Source
Homepage: https://www.meituan.com
Front-end code is transparent—we can always inspect it. There’s a lot to learn from viewing production source. Here’s what stood out to me on Meituan’s homepage.
SEO
<title>美团网-美食_团购_外卖_酒店_旅游_电影票_吃喝玩乐全都有</title>
<meta
name="description"
content="美团网:美食攻略,外卖网上订餐,酒店预订,旅游团购,飞机票火车票,电影票,ktv团购吃喝玩乐全都有!店铺信息查询,商家评分/评价一站式生活服务网站"
/>
<meta
name="keywords"
content="美食,团购,外卖,网上订餐,酒店,旅游,电影票,火车票,飞机票"
/>
Meta tags still matter for SEO. For SPA apps they’re trickier, which is why SSR exists.
Format detection
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
Notes:
- Disables automatic detection of phone numbers, addresses, etc., preventing accidental clicks.
- Non-standard tag; works in Safari only. See the Apple docs.
Custom meta tags
<meta name="lx:category" content="group" />
<meta name="lx:cid" content="" />
<meta name="lx:appnm" content="mtpc" />
<meta name="lx:autopv" content="off" />
These are custom tags. I do something similar—e.g., add a releaseDate tag to mark build times and quickly spot which version is live.
DNS prefetching
<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" />
Notes:
- Smart use of DNS prefetching can shave 50–300 ms from page load.
- Best practices:
- Prefetch static asset domains manually.
- Prefetch domains used by client-side redirects or requests.
- Skip manual prefetch on plain hyperlinks—Chrome already does it (except for HTTPS, where you need
<meta http-equiv="x-dns-prefetch-control" content="on">). - Prefetch the redirect target domain when you know a link will jump there.
Recommended reads:
HTTP→HTTPS switch
<script>
(function () {
if (location.protocol == 'http:') {
location.href = location.href.replace('http://', 'https://');
}
})();
</script>
In practice this doesn’t do anything because the server already issues a 302 redirect (I’d prefer a 301).
Protocol-relative URLs
<link
rel="stylesheet"
type="text/css"
href="//s0.meituan.net/bs/fe-web-meituan/23bb705/css/main.css"
/>
Since the server forces HTTPS, the protocol-relative form doesn’t buy much here—but it’s a handy technique elsewhere.
async vs. defer
<script
src="//analytics.meituan.net/analytics.js"
type="text/javascript"
charset="utf-8"
async
defer
></script>
Notes:
asyncdownloads without blocking HTML parsing.deferdelays execution until the document is parsed.- You can specify both—they’re simply attributes on
<script>.
<link> inside <body>
<body id="main">
<link
rel="stylesheet"
type="text/css"
href="//s0.meituan.net/bs/fe-web-meituan/5058856/css/com_header.css"
/>
...
Browsers fix up HTML before rendering, so this still works. HTML is resilient.
IIFE example
!(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');
- IIFEs helped emulate block scope before ES6; today
let/constoften cover the same needs. - The leading
!is unnecessary—no return value is consumed.
A quick comparison illustrates the value:
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);
}
Final Thoughts
Even a static HTML page surfaces a ton of front-end details. Because our craft is transparent, peek at other sites often—you’ll always learn something new.
