淘宝首页性能怎么设置,淘宝网站首页功能,淘宝首页特点分析,淘宝首页优化<br> <div> <div> <div> article/<span>2023/7/29 12:59:24</span> </div> </div> <div> <div><div><div><div> <p>想必很多人都已经看到了新版的淘宝首页，它与以往不太一样，这一版页面中四处弥散着个性化的味道，由于独特的个性化需求，前端也面临各方面的技术挑战：</p><ul><li><p>数据来源多</p></li><li><p>串行请求渲染一个模块</p></li><li><p>运营数据和个性化数据匹配和管理</p></li><li><p>数据兜底容灾</p></li></ul><p>本次淘宝首页改版，虽已不再支持 IE6 和 IE7 等低版本的古董浏览器，但依然存在多个影响首页性能的因素：</p><ul><li><p><strong>依赖系统过多</strong>，数据的请求分为三块，其一是静态资源（如 js/css/image/iconfont 等）；其二是推到 CDN 的静态数据（如运营填写的数据、前端配置信息等）；其三是后端接口，不同的模块对应不同的业务，而且页面中还有不少的广告内容，粗略估计页面刚加载时首屏发出的接口请求就有 8 个，滚到最底下，得发出 20 多个请求。</p></li><li><p><strong>无法直接输出首屏数据</strong>，首屏很多数据是通过异步请求获取的，由于系统限制，这些请求不可避免，而且请求个数较多，十分影响首屏时间。</p></li><li><p><strong>模块过多</strong>，为了能够在后台隔离运营之间填写数据的权限，模块必须做细粒度的拆分，如下图所示：一个简单的模块必须拆分成多个行业小模块，页面中其他位置也是如此，而且这些被拆分出来的模块还不一定会展现出来，需要让算法告诉前端展示哪些模块。</p></li><li><p><strong>图片过多</strong>，翻页往下滚动，很明显看到，页面整屏整屏的图片，有些图片是运营填写，有些图片由个性化接口提供，这些图片都没有固定的尺寸。</p></li></ul><p>网页性能衡量指标有很多，倘若能够把握关键的几个，集中优化，性能自然也就上去了。</p><p>最能反映页面性能的一个指标是 FPS（frame per second），一般系统设定屏幕的刷新率为 60fps，当页面元素动画、滚动或者渐变时绘制速率小于 60，就会不流畅，小于 24 就会卡顿，小于 12 基本认定卡爆了。</p><p>1 帧的时长约 16ms，除去系统上下文切换开销，每一帧中只留给我们 10ms 左右的程序处理时间，如果一段脚本的处理时间超过 10ms，那么这一帧就可以被认定为丢失，如果处理时间超过 26ms，可以认定连续两帧丢失，依次类推。我们不能容忍页面中多次出现连续丢失五六帧的情况，也就是说必须想办法分拆执行时间超过 80ms 的代码程序，这个工作并不轻松。</p><p>页面在刚开始载入的时候，需要初始化很多程序，也可能有大量耗时的 DOM 操作，所以前 1s 的必要操作会导致帧率很低，我们可以忽略。当然，这是对 PC 而言，Mobile 内容少，无论是 DOM 还是 JS 脚本量都远小于 PC，1s 可能就有点长了。</p><p>DOM 加载并且解析完成才会触发 DOMContentLoaded 事件，倘若源码输出的内容过多，客户端解析 DOM 的时间也会响应加长，不要小看这里的解析时间，如果 DOM 数量增加 2000 个并且嵌套层级较深，解析时间也会相应增加 50-200ms，这个消耗对大多数页面来说其实是没必要的，保证首屏输出即可，后续的内容只保留钩子，利用 JS 动态渲染。</p><p>Load 时间可以用来衡量首屏加载中，客户端接受的信息总量，如果在首屏中充满了大尺寸图片或者客户端与后端建立连接次数较多，Load 时间也会相应被拖长。</p><p>流畅度是对 FPS 的视觉反馈，FPS 值越高，视觉呈现越流畅。为了保障页面的加载速度，很多内容不会在页面打开的时候全部加载到客户端。这里提到的流畅度是等待过程中的视觉缓冲，如下方是 Google Plus 页面的一个效果图：</p><p>墙内访问 google 的速度不是很快，上面元素中的的很多内容都是通过异步方式加载，而从上图可以看出 Google 并没有让用户产生等待的焦虑感。</p><p>由于平台限制，淘宝首页面临一个先天的性能缺陷，首屏的渲染需要从 7 个不同的后端取数据，这些数据请求是难以合并的，如果用户屏幕比较大，则首屏的面积也比较大，对应的后端平台数据接口就更多。数据是个性化内容或者为广告内容，故请求也不能缓存。</p><p>不论用户首屏的面积有多大，<strong>保证关键模块优先加载</strong>。下面代码片段是初始化所有模块的核心部分：</p><p>TMS 输出的模块都会包含一个钩子，并且会预先加载 js 和 css 文件。</p><p>对于无 JS 内容的模块，会预先打上的标记，初始化的时候跳过此模块；对于首屏模块关键模块，会直接进入懒加载监控：</p><p>除必须立即加载的模块外，关键模块被加到懒加载监控，原因是，部分用户进入页面就可能急速往下拖拽页面，此时，没必要渲染这些首屏模块。</p><p>非关键模块统一送到队列，没有基于将非关键模块加入到懒加载监控，这里有两个原因：</p><ul><li><p>一旦加入监控，程序滚动就需要对每个模块做计算判断，模块太多，这里可能存在性能损失</p></li><li><p>如果关键模块还没有加载好，非关键模块进入视窗就会开始渲染，这势必会影响关键模块的渲染</p></li></ul><p>那么，什么时候开始加载非关键模块呢？</p><p>上面的代码应该十分清晰，两种请求下会开始将非关键模块加入懒加载监控：</p><ul><li><p>当页面中触发这些事件的时候，说明用户开始与页面交互了，程序必须开始加载。</p></li><li><p>如果用户没有交互，但是页面已经 onload 了，程序当然不能浪费这个绝佳的空档机会，趁机加载内容；经测试，部分情况下，onload 事件没有触发（原因尚不知），所以还设定了一个超时加载，5s 之后，不论页面加载情况如何，都会将剩下的非关键模块加入到懒加载监控。</p></li></ul><p>如果说上面的优化叫做懒加载，那么这里的优化可以称之为懒执行。</p><p>首页上有几个模块是包含交互的，如头条区域的 tab ，便民服务的浮层和主题市场的浮层，部分用户进入页面可能根本不会使用这些功能，所以<strong>程序上并没有对这些模块做彻底的初始化</strong>，而是等到用户 hover 到这个模块上再执行全部逻辑。</p><p>首屏中有两个次要请求，一个是主题市场的 hot 标，将用户最常逛的三个类目打标；第二个是个人中心的背景，不同的城市会展示不同的背景图片，这里需要请求拿到城市信息。</p><p>这两处的渲染策略都是，在程序的 idle（空闲）时期，或者十秒之后去请求，然后将请求的结果缓存到本地，当用户第二次访问淘宝首页时能够看到效果。<strong>这是一种更懒的执行，用户刷新页面才看得到</strong>.这种优化是产品能够接受，也是技术上合理的优化手段。</p><p>不论图片链接的来源是运营填写还是接口输出，都难以保证图片具备恰当的宽高，加上如今 【【微信】】 的屏幕越来越多，对于这种用户也要提供优质的视觉体验，图片这块的处理并不轻松。</p><pre><span><<span>img</span> <span>src</span>=<span>&#【【网址】】/s.gif'</span> <span>data-src</span>=<span>&#【【网址】】/real/path/to/img.png'</span> /></span></pre><p>阿里 CDN 是支持对图片尺寸做压缩处理的，如下图为 200×200 尺寸的图片：</p><p>加上的参数后，会变成小尺寸：</p><p>我们知道 webp 格式的图片比对应的 jpg 要小三分之一，如上图加上参数后:</p><p>（不支持 webp 格式的浏览器展示不出来这张图片）</p><p>视觉效果并没有什么折扣，但是图片体积缩小了三分之一，图片越大，节省的越明显。显然，淘宝首页的所有图片都做了如上的限制，针对坑位大小对图片做压缩处理，只是这里需要注意的是，运营填写的图片可能已经是压缩过的，如：</p><p>上面这种情况，图片是不会正确展示的。首页对所有的图片的懒加载都做了统一的函数处理：</p><p>TMS 的模块在输出的时候会将数据的 id 放在钩子上：</p><p>如果模块是异步展示的，可以通过找到模块数据，而首页的个性化是从几十上百个模块中通过算法选出几个，如果把这些模块钩子全部输出来，虽说取数据方便了很多，却存在大量的冗余，对此的优化策略是：将数据格式相同的模块单独拿出来，新建页面作为数据页。所以可以在源码中看到好几段这样的配置信息：</p><p>减少了大量的源码以及对 DOM 的解析。</p><p>有一些模块数据是很少被修改的，比如接口的兜底数据、阿里 APP 模块数据等，可以通过调整参数，设置模块的缓存时间，如：</p><p>?这个数值在一分钟内是不会发生变化的，也就是说将这个请求在本地缓存一分钟，对于低频修改模块，缓存时间可以设置为一天，即：</p><p>当然，我们也可以采用本地储存的方式缓存这个模块数据：</p><p>缓存过期时间设置为 1 天，淘宝首页主要采用本地缓存的方式。</p><h4>使用缓动效果减少等待的焦急感</h4><p>这方面的优化不是很多，但是也有一点效果，很多模块的展示并不是干巴巴的?，而是通过动画效果，缓动呈现，这方面的优化推荐使用 CSS3 属性去控制，性能消耗会少很多。</p><p>页面优化的切入点很多，我们不一定能够面面俱到，但是对于一个承载较大流量的页面来说，下面几条必须有效执行：</p><ul><li><p>首屏一定要快</p></li><li><p>滚屏一定要流畅</p></li><li><p>能不加载的先别加载</p></li><li><p>能不执行的先别执行</p></li><li><p>渐进展现、圆滑展现</p></li></ul><p>当然，性能优化的切入角度不仅仅是上几个方面，对照 Chrome 的 Timeline 柱状图和折线图，我们还可以找到很多优化的点，如：</p><ul><li><p>在 1.0s 左右存在一次 painting 阻塞，可能因为一次性展示的模块面积过大</p></li><li><p>从 FPS 的柱状图可以看出，在 1.5s-2.0s 之间，存在几次 Render 和 JavaScript 丢帧</p></li><li><p>从多出的红点可以看出页面 jank 次数，也能够定位到代码堆栈</p></li></ul><p>在优化的过程中需要更多地思考，如何让阻塞的脚本分批执行，如何将长时间执行的脚本均匀地分配到时间线上。这些优化都体现在代码的细节上，宏观上的处理难以有明显的效果。当然，在宏观上，淘宝首页也有一个明显的优化：</p><p>这段代码基本保证每个模块的初始化都是在浏览器空闲时期，减少了很多不必要的丢帧。这个优化也可以被应用到每个模块的细节代码之中，不过优化难度会更高。</p><p>代码的性能优化是一个精细活，如果你要在一个庞大的未经优化的页面上做性能优化，可能会面临一次重构代码。本文从淘宝首页个性化引出的问题出发，从微观到宏观讲述了页面的优化实践，提出了几条可以借鉴的优化标准，希望对你有所启发。优化的细节点描述的不够完善也不够全面，但是都是值得去优化的方向。</p><p>出处&#【【网址】】/article/taobao-home-high-performance.html</p> </div></div></div></div> </div> </div> <h4> 相关文章</h4> <div> <div> <div> <div> 1.分布式服务框架设计分布式服务框架一般可以分为以下几个部分，（1）RPC基础层：包括底层通信框架，如NIO框架、通信协议，序列化和反序列化协议，以及在这几部分上的封装，屏蔽底层通信细节… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 一、架构图解1、架构图2、角色Provider: 暴露服务的服务提供方。1Consumer: 调用远程服务的服务消费方。1Registry: 服务注册与发现的注册中心。1Monitor: 统计服务的调用次调和调用时间的监控中心。1Container: 服务运行容器。13、调用关系0 服务容器负责启动，加载… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 分布式追踪系统分布式系统为什么需要 Tracing？先介绍一个概念：分布式跟踪，或分布式追踪。电商平台由数以百计的分布式服务构成，每一个请求路由过来后，会经过多个业务系统并留下足迹，并产生对各种Cache或DB的… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 今天先分享下我们在日志方面的一些处理方式。企业日志的几种情况：A. 服务器监控日志B. 内部应用程序日志C. 网站用户点击行为日志服务器监控日志服务器监控日志对企业来讲是非常重要的一个部分。这部分数据包含服务器的性能监控，也包含应用程序站点的… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 根据目前产品存在的问题，针对快速开发、海量用户、大量数据、低延迟等互联网应用的实际需要，通过对业务架构、系统架构、基础架构、技术架构进行分析，采用先进实用的微服务SOA架构重构智慧校园、数字化校园等产品，彻底解决系统解耦… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 随着互联网信息技术的飞速发展，数据量不断增大，业务逻辑也日趋复杂，对系统的高并发访问、海量数据处理的场景也越来越多。如何用较低成本实现系统的高可用、易伸缩、可扩展等目标就显得越发重要。为了解决这一系列问题，系统架构也… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 数据服务的高可用是所有企业都想拥有的，但是要想让数据有高可用性，就需要冗余数据写多份。写多份的问题会带来一致性的问题，而一致性的问题又会带来性能问题，这就会陷入一个无解的死循环！这里所谓数据一致性࿰… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 分布式系统需要在数据完整、一致性和性能间做平衡。本文系统介绍了处理分布式数据一致性的技术模型，如：Master-Slave，【【微信】】，2PC/3PC，经典的将军问题，Paxos，以及Dynamo的NRW和【【微信】】… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 生产消费者模式，指的是由生产者将数据源源不断推送到消息中心，由不同的消费者从消息中心取出数据做自己的处理，在同一类别下，所有消费者拿到的都是同样的数据；订阅发布模式，本质上也是一种生产消费者模式&a… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 所谓模式，就是在某种场景下，一类问题及其解决方案的总结归纳。生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式，用于功能解耦和分布式系统间的消息通信，以下面两种场景为例：数据接入 生产消费者模式&am… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 本地文件系统如ext3，reiserfs等（这里不讨论基于内存的文件系统），它们管理本地的磁盘存储资源、提供文件到存储位置的映射，并抽象出一套文件访问接口供用户使用。但随着互联网企业的高速发展，这些企业对数据… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 常见的分布式文件系统有，GFS、HDFS、Lustre 、Ceph 、GridFS 、mogileFS、TFS、FastDFS等。各自适用于不同的领域。它们都不是系统级的分布式文件系统，而是应用级的分布式文件存储服务。Google学术论文，这是众多分布式文件系统的起源Google F… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 分布式基础学习所谓分布式，在这里，很狭义的指代以Google的三驾马车，GFS、Map/Reduce、BigTable为框架核心的分布式存储和计算系统。通常如我一样初学的人，会以Google这几份经典的论文作为开端的。它们勾勒出了分布式存储和计算的一… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 目前全球范围内应用比较广泛的负载均衡设备为美国的F5。F5于2000年底进驻中国，在国内业界，F5负载均衡产品已经成为了主流负载均衡技术的代名词。下面我们对F5负载均衡设备做一个基本介绍，方便大家去认识和运用它。F5 设备的面板结构:F5状态灯… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 写在前面，软件架构评估是一个大型项目成功的保证，不管是否完全按照书中的操作来完成，但这总是一个必须的过程。老外的技术方面的书一般都很实在，在提出一定的事实和相应的理论基础后，一般就会列出些很具体的方法&#… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 【注】架构之重构的12条军规（上）发布以后，一些读者着急要下篇，所以在这里我把上下篇合并成一篇，让大家可以阅读完整版，不用分开看了。对于开发者来说，架构设计是软件研发过程中最重要的一环&… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 在软硬件系统总体架构设计完成之后，为保证架构设计的合理性、完整性和针对性，从根本上保证系统质量，降低成本及投资风险，需要对总体架构进行评估。 1、架构评估内容 （1）对软件的架构评估 对软件的… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 首先谈谈Java Web需要掌握哪些东西。这里是一些知识点的搜集，暂不做详细说明，欢迎各位博友补充指正。1.底层Java语言相关的就不说了，首先是JVM的结构和工作原理。比较重要的是Java内存模型，各种GC算法，Classloader的加… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 开头先理解一下所谓的“均衡”不能狭义地理解为分配给所有实际服务器一样多的工作量，因为多台服务器的承载能力各不相同，这可能体现在硬件配置、网络带宽的差异，也可能因为某台服务器身兼多职，我们所说的“均衡”，也就… </div> <div> 阅读更多... </div> </div> </div> </div> <div> <div> <div> <div> 你打算从Windows换到Linux上来，还是你刚好换到Linux上来？哎哟！！&#x<br>..2023天猫微信互助群,2023天猫微信互助群,助力人数是什么意思呢,想进天猫618 狂欢节天猫互助群500人怎么进的啊 天猫618 理想生活狂欢季2023天猫微信互助群 2023 淘宝618 理想生活狂欢季助力人数是什么意思呢 的小伙伴，关注加好友，加入互助群
本文地址：
/show-92603.html
版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。
