淘宝和天猫首页都用到了哪些技巧或者技术_PHP基础

资料来源：网络整理时间：2023/3/5 15:04:29 共计：3579 浏览

淘宝和天猫首页都用到了哪些技巧或者技术？

淘宝和天猫平台作为国际电商领域的标杆，其平台架构也一直受到众多开发者的关注。要知道，在巨大的流量下，页面中的任何细节都可能给网站带来很大的影响。那么淘宝和天猫首页做了哪些特殊的优化处理使得其能应付庞大的流量冲击呢？下面我来带大家分析学习一下。

图片惰性加载

淘宝和天猫作为商城平台，网站上的图片资源很多，如果这些图片资源都是一次性加载的那就会造成服务器带宽浪费，另外也严重影响了网站打开的速度。所以它们对图片都是使用惰性加载的，即只显示当前屏幕可视范围之内的图片，非屏幕可视范围的图片不显示（显示了也没人看），这样所有的图片资源就是按需加载的，使得网站打开速度很快。

静态资源使用独立域名部署访问（动静分离）

将动态请求和静态请求以不同域名的形式来做请求分流，这样做的好处就是可以针对性进行优化。比如说静态资源放在一台服务器上部署，这台服务器并不要求计算能力多强，重点要求的是硬盘容量大、读写速度快；动态程序则放在计算性能高的服务器上部署。

另外一方面，虽然现在主流浏览器众多，但每款浏览器对于静态资源请求也是有并发数限制的，使用不同域名可以分散这个并发数的限制，使得同一时间内可以并行请求更多的资源，从而加快渲染速度。

CDN加速

CDN是内容分发网络，CDN技术通过部署在全国各地的Cache节点使得访客可以“就近读取”所需的资源。什么意思呢？比方说淘宝的主服务器在北京，那江苏省用户访问淘宝网站上的一些静态资源并不是从北京那台服务器获取的，而是从江苏省的某台Cache服务器里读取的，这样请求速度极快。

DNS预解析（DNS Prefetch）

上面说到了静态资源可以使用多个域名来部署访问，其实这样做也会带来另外的性能问题，那就是页面中请求的域名过多，DNS解析也是存在时间开销的。所以我们可以通过DNS Prefetch技术来缓存域名解析结果，减少DNS查询次数，从而加快页面解析速度。

目前主流浏览器支持DNS Prefetch，只需要在HTML源码里添加一个link标签即可，如下图示：

使用内嵌样式

如果看过淘宝网站的HTML源码后会发现，淘宝将主要的CSS样式是直接写在HTML页面里的，而不是使用外链的方式引入CSS的。

这样做有什么好处呢？主要有以下几点：

减少了请求次数

避免了样式加载失败造成的页面乱版

请求合并

对于一个大型网站而言，要使用的CSS及JS等文件是很多的，如果每个CSS和JS都是单独加载的，那带来的问题就是请求数过多。

所以就有了请求合并的优化措施，通过服务器端技术，我们可以将多个请求合并输出，这样请求数只算一次，大大减少了请求次数，页面渲染速度更快。

我们看到淘宝的很多JS都是以一个<script>标签引入的，然后多个文件路径以逗号分隔。这种就是将多个JS请求合并为一个请求输出。

以上就是我的观点，对于这个问题大家是怎么看待的呢？欢迎在下方评论区交流 ~ 我是科技领域创作者，十年互联网从业经验，欢迎关注我了解更多科技知识！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：如何用Docker成为更高效的数据科学家_PHP基础 | ·下一条：mysql 子查询函数,mysql中format是多行函数还是单行函数_数据库