• 欢迎访问爱玩吧
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏爱玩吧
> 建站资源 > 【教程】一些互联网公司HTML页面简单分析

【教程】一些互联网公司HTML页面简单分析

建站资源 aiwanyule 8年前 (2016-05-11) 已收录

一些互联网公司HTML页面简单分析

因为我做了一款主题，所以会留意其他网站的一些效果、功能。特别是在浏览一些互联网巨头的网站的时候，常常会打开chrome的开发者工具。

兼容IE

百度贴吧

<!–[iflt IE9]><script>(function(){vartags = [‘header’,’footer’,’figure’,’figcaption’,’details’,’summary’,’hgroup’,’nav’,’aside’,’article’,’section’,’mark’,’abbr’,’meter’,’output’,’progress’,’time’,’video’,’audio’,’canvas’,’dialog’];for(vari=tags.length -1;i>-1;i–){document.createElement(tags[i]);}})();</script><![endif]–>

腾讯isux

<!–[iflt IE9]>
<scriptsrc=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
<![endif]–>

淘宝网 – 我的淘宝(旧版)

<!–[iflt IE9]>
<scriptcharset=”utf-8″src=”http://g.tbcdn.cn//tb/mytaobao/1.7.13/components/common/??html5shiv.js,round-vml.js”></script>
<linkrel=”stylesheet”href=”http://g.tbcdn.cn//tb/mytaobao/1.7.13/pages/home/init-ie.css”type=”text/css”/&gt;
<![endif]–>

这里所使用的是html5shiv这个开源项目，目前在Github已经有5000+的Star,有兴趣的可以看看。

兼容模式

淘宝

<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>

淘宝UED

<metahttp-equiv=”X-UA-Compatible”content=”IE=edge,chrome=1″>

viewport

手机淘宝

<metaname=”viewport”content=”initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>

手机百度

<metaname=”viewport”content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

与手机淘宝不同，百度多了width=device-width,即网页宽度默认等于屏幕宽度。

其他

dns-prefetch

淘宝使用了dns-prefetch，DNS预获取。可以对页面上的CDN先进行DNS查询，从而加快网页加载速度。

<linkrel=”dns-prefetch”href=”//g.tbcdn.cn”>
<linkrel=”dns-prefetch”href=”//gtms01.alicdn.com”>
…

JS异步加载

一般是在<script></script>中添加async。

比如淘宝（说好的一些互联网公司呢，怎么都是淘宝！），在<head></head>中的JS脚本就都使用了异步加载。

<scriptsrc=”http://uaction.aliyuncdn.com/js/uab.js”async=””></script&gt;
…

HTML

爱玩吧 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：【教程】一些互联网公司HTML页面简单分析
喜欢 (0)