通过浏览器简单地测试,淘宝首页的DOMContentLoaded的时间是500ms左右,load时间是2s左右,相对于淘宝首页这样一个内容丰富的web页面,速度是非常给力的。。。。想请问一下,作为一个访问量巨大的页面,淘宝通过哪些技术手段实现这个效果?(ps:尤其在前端方面)
通过浏览器简单地测试,淘宝首页的DOMContentLoaded的时间是500ms左右,load时间是2s左右,相对于淘宝首页这样一个内容丰富的web页面,速度是非常给力的。。。。想请问一下,作为一个访问量巨大的页面,淘宝通过哪些技术手段实现这个效果?(ps:尤其在前端方面)
先挖坑,后面再细填。
1、使用CDN
使用了g.tbcdn.cn等CDN域名来加载图片、CSS、JS等静态资源
2、CSS压缩、JS压缩,减少文件体积
3、dns-prefetch
4、减少http请求数
图片CSS_Sprite,eg http://gtms01.alicdn.com/tps/i1/T1CLOwFelgXXakF0U7-800-400.png
5、缓存
6、script async 属性
以上的是可以确定的,还有其他的技术,等有时间再填。
记得某次QCon,台上的某人讲述了淘宝和天猫的首屏加载时间对赌的事。
策略方面,一切都围绕着异步,不断上调的首屏线,非核心模块异步,产生交互后再加载(元素被hover)等等方式,对于不用考虑SEO的淘宝,这是关键。
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
4 回答2.4k 阅读✓ 已解决
页面静态化,把所有可能的瓶颈打通速度就上来了呗,是大量调优的结果。比如taobao自己那个Tengine,能把好几个css合并成一个文件传输。