批一批淘宝首页的源代码

[url=http://ued.taobao.com/blog/]淘宝UED[/url]团队经常写一些很棒的技术文章，令我印象深刻的有一句话，大意如下：
[quote]虽然这种方法比较hack，但是可以减少2个HTML标签，考虑到我们是做超大流量的互联网应用，这样可以节省大量的带宽[/quote]

可是打开淘宝首页，查看源代码，从大流量互联网应用来看，有很多地方可以批一批：
1. 内嵌大量的CSS/JS代码（CSS 25K/JS 18K左右），浪费大量的带宽，除了一些经常会变动的代码，完全可以将大部分内容移到外部css/js文件，客户端可以享受到文件缓存带来的好处，减少带宽。

2. 使用了<base target="_blank" />，默认所有的链接都在新窗口打开，可是还有很多链接指定了target="_blank"，浪费带宽。

3. 源代码里面使用了大量的HTML注释，如果是自动生成的还情有可原，但是这些"", "" 完全是属于给开发人员看的，甚至连""这种属于版本控制的注释都丢上来了，还是浪费带宽。这些完全可在发表到生产环境时通过脚本自动去除，

4. 一些细节，比如给很多元素加了ID，而这个ID既不用在css selector，又没有JS对它操作。再比如在页面最下面用一个白色字体显示服务器id，而这个东西完全可以写成注释的方式，以节省html标签和相关的CSS代码。

淘宝的朋友，我知道你们在努力营造一个氛围：淘宝很重视技术，重视细节。可是这些东西怎么也不象是一个重视技术细节的团队搞出来的吧？

======答复分割线======
[quote="醒来"]
作为淘宝UED团队中的一员，我简单的说明一下：

1. 首页是淘宝的入口，PV非常高，服务器压力也大。“快”是第一位的用户体验。内嵌css和js就是为了减少对服务器的http请求数。原因有三： 1）根据研究，会有20%的用户是无缓存的情况下访问淘宝网，此时无法利用客户端缓存。2）减少http连接数可以减少服务器压力，同时减少无谓的http头信息的上传。3） gzip压缩会大量减少下载量。所以经过对比和权衡，我们选择内嵌css/js。

2. 首页是动态生成，有很多CMS维护的内容。很多时候超出我们的控制。我们正努力不断改善，增强控制能力。

3. 无谓的注释确实是应该删除的，不过注释也会减少跨团队之间的磨合成本。这也是一个权衡的过程。我们也在不断改善注释规范。

4. 试试Ctrl+A
[/quote]
1. 首页用内嵌css和js确实可以[url=http://developer.yahoo.com/performance/rules.html#num_http]减少http请求[/url]，但是这会[url=http://developer.yahoo.com/performance/rules.html#external]增加页面大小[/url]，如何取舍是需要用数据支持的：
内嵌的css/js在gzip之后也有8.6K大小，用外联的话多2个http header，因为走CDN服务器，所以没有cookie等头信息，通常1个js+1个css请求的头信息大小在0.5K左右，8.6K * 80% v.s 0.5K * 100%，对比和权衡是如何会选择后者呢？
至于说到"快"，淘宝首页，已经有9个js, 3个css和100来个iframe/图片请求，用内嵌的方式减少2个http请求，有意义吗？
Yahoo在首页也采用内嵌js/css，但是它只有3个js, 0个css，和20多个图片请求，这种对比下，用内嵌对于用户体验才算得上改善。

3. 我不是说不写注释，而是指发布到服务器的时候用脚本清理一下，一个正则表达式就可以替换掉了。

4. Ctrl+A能够让用户看到最下面的服务器编号，可是这有什么用途？

批一批淘宝首页的源代码相关推荐

Android仿淘宝首页UI（附代源代码及示例图片）
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获运行出来的效果部分代码源代码可以收获更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...
淘宝首页链接跳转，非taobao.com域名下的链接处理
淘宝首页需要实现这样一个功能,对于页面上非taobao.com域名下的链接,在用户点击时,需要在链接处弹出提示框,提示用户此链接非淘宝域名下的链接,并给与用户选择是否继续访问.如果用户确认继续访问,则 ...
2016淘宝首页改版细说淘宝首页设计变化史
近日,从微博上看到有网友说淘宝首页改版,现在淘宝正在一步步接入新版本,知情人士从3月22日就已经得到了淘宝官方人员的消息:新版资源位3月24日开始会接入部分流量,到时新旧版资源位会共存一段时间,直到旧 ...
微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
火狐浏览器打不开淘宝首页的解决办法
火狐浏览器打不开淘宝首页的解决办法今天想打开淘宝看看双11有没有什么好东西可以买买买,但是火狐跳出来意思是淘宝网站有问题无法访问,要去咨询网站管理员,囧~~~ 然后上网搜了一圈,说只要按下Ctrl+ ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...

批一批淘宝首页的源代码

批一批淘宝首页的源代码相关推荐

最新文章

热门文章