Mikel
[转载]【原】读淘宝HTML有感 – FMP-FMP – 博客园.
今天公司的前端让我帮看一下淘宝的样式表是怎么读取的，我看了一下，第一眼感觉有点奇怪：
整个首页仅有一个link标记和一个script标记：
<link rel="stylesheet" href="http://a.tbcdn.cn/p/fp/2012/fp/??layout.css,dpl/dpl.css,sitenav/sitenav.css,logo/logo.css,search/search.css,<br>nav/nav.css,product-list/product-list.css,mainpromo/mainpromo.css,attraction/attraction.css,notice/notice.css,status/status.css,interlayer/interlayer.css,<br>cat/cat.css,convenience/convenience.css,act/act.css,expressway/expressway.css,guang/guang.css,hotsale/hotsale.css,helper/helper.css,footer/footer.css,<br>recom_new/recom_new.css,local/local.css,globalshop/globalshop.css,guide/guide.css?t=2012080220120724.css" /> |
<script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,<br>p/fp/2012/fp/directpromo.js?t=2012080620120724.js" data-fp-timestamp="20120806"></script> |
简单的思考之后，基本上想到是怎么处理的了。
其实like标记的href属性、script标记的src属性其实都是链接到一个服务器端页面，将css,js文件名已参数的形式传进去，然后根据参数去读取这些文件，再把读取结果写会客户端。当然，肯定会利用到缓存。
除此之外，我用浏览器调试工具看了一下请求和响应结果，其中包含一项：
Status Code:304 Not Modified 什么意思？ 看这里：http://bulaoge.net/topic.blg?dmn=webdev&tid=301677
淘宝就是淘宝，细节方面考虑的很周全，那么这么做有哪些好处呢 或者说咱学到了什么呢？
1.为什么一个页面会加载这么多个样式表？ 我猜：都是按模块化写的，为了适应页面模块经常增删、调整。
2.为什么要把这些样式表写在一起？我猜：是为了减少请求次数，n个样式表只需请求和相应一次。
3.在加上读取文件缓存、CDN缓存、浏览器缓存。页面相应速度会加快很多。
4.样式和js有修改咋办？大家会看到链接后买年会有一个参数：t=2012080220120724.css t=2012080620120724.js ，我想是用来清理缓存用的。
淘宝就是淘宝，细致入微。记录下来希望以后开发中可以派上用场。
