今天公司的前端让我帮看一下淘宝的样式表是怎么读取的,我看了一下,第一眼感觉有点奇怪:
整个首页仅有一个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,
nav/nav.css,product-list/product-list.css,mainpromo/mainpromo.css,attraction/attraction.css,notice/notice.css,status/status.css,interlayer/interlayer.css,
cat/cat.css,convenience/convenience.css,act/act.css,expressway/expressway.css,guang/guang.css,hotsale/hotsale.css,helper/helper.css,footer/footer.css,
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,
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 ,我想是用来清理缓存用的。
淘宝就是淘宝,细致入微。记录下来希望以后开发中可以派上用场。