精华内容
下载资源
问答
  • 三级列表页是什么 列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图表示:如何进入三级列表页 用户在首页左侧的导航中(如下图所示)、全部商品分类...

    三级列表页是什么
    列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图表示:

    这里写图片描述

    如何进入三级列表页
    用户在首页左侧的导航中(如下图所示)、全部商品分类列表页或者顶部面包屑导航中,选择到商品的最小类别后,就可以到达三级列表页
    这里写图片描述

    三级列表页的作用
    该页面根据用户选择的商品类目进行检索,将结果以列表展现在页面上。是用户快速的找到自己需要的产品,提高用户购买转化率。

    三级列表页的业务特点
    涉及到多维度多因子质量分综合排序,排序质量的效果直接关系到转化率,客单价,进而影响到GMV,实质上是数据挖掘和机器学习技术在海量数据上的应用。
    在不同三级类目下,通过复杂不确定的查询条件、属性区域和列表查询结构的实时联动,以及跟区域相关的库存、京东配送、货到付款等复杂业务逻辑下,坐到高并发实时计算。

    优化原因
    三级列表页的页面周围依赖的内部系统太多,要做到异步化展示,阻塞可降级。
    在持续开发一个核心系统过程中,除了满足业务需求外,还应该考虑系统未来的架构,追求极致的系统的可用性、高性能和稳定性。这个过程是一个长期积累和重构的过程,京东三级列表页的优化工作,就是这个过程的一部分。

    优化前的状况
    优化前的三级列表页有一下特点:
    1.基于搜索实现。
    2.全量数据,搜索结构不理想。
    3.接口相应时间长,影响了用户体验。
    4.没法针对数据做二次优化。
    5.转化率相对较低。
    基于以上原因,需要对三级列表页做出改变,也就是对老版本进行重构。

    重构版本目的
    通过优化,希望达到以下目的:
    1.非全量数据,线下异步根据数据模型进行筛选部分最优数据。
    2.要求实时过滤计算,接口响应时间要快,保证用户体验。
    3.数据进行优化,提高转换率,提高GMV。
    4.实现前端降级和异步模块出错上报。

    优化原则
    每个应用都要满足自己特定的需求,因为其商业条件、应用场景、用户期望,以及功能复杂性各不相同。尽管如此,如果应用必须对用户作出响应,那我们就必须从用户角度来考虑可感知的处理时间这个常量。事实上,虽然生活节奏越来越快(至少我们感觉如此),但人类的感知和反应时间则一直都没有变过:
    下面这个表格展示了Web性能社区总结的经验法则:必须在250ms渲染页面,或者至少提供视觉反馈,才能保证用户不走开。如果想让人感觉很快,就必须在几百ms内相应用户操作。超过1s,用户的预期流程就会中断,心思就会向其他任务转移,而超过10s,除非你有反馈,否则用户基本上就会终止任务!

    这里写图片描述
    此次的优化工作遵循一下四个原则:
    1.首屏优先:精简和瘦身页面,首屏优先展示出来;
    2.惰性交互:需用户交互的部分惰性加载;
    3.惰性执行:能不执行的先别执行,惰性执行;
    4.惰性滚屏:滚动惰性加载。

    主要优化工作
    (1)首屏优先
    为了保证首屏优先展示,HTML文档进行了适当精简。
    目的:尽快渲染出页面并达到可交互的状态。
    方法:
    1.如果非必须,尽量只生成首屏需要的HTML数据。
    2.优先获取资源,提前解析。如首屏需要的CSS和JS;如果不考虑维护成本,可以把首屏需要的CSS和JS放到文档中。
    3.发现和优化安排网络资源,尽早分派请求并取得页面。
    4.文档精简后,服务端生成程序耗时短,性能才回好。

    如下图所示,列表页的头、面包屑、品牌区、属性筛选区、60个商品主图数据,这些是服务端模版渲染输出;而剩余部分是在前端js惰性加载或生成。
    这里写图片描述
    (2)惰性交互
    惰性交互,即对需用户交互的部分进行惰性加载。
    对于三级列表品牌区,服务端只渲染18个品牌,用户在点更多时,AJAX异步加载其他的。对于整个属性是筛选区服务端只渲染5行,其他行用户在点更多时,js从文档嵌入资源中取得数据,并渲染成HTML。这样做可以保证服务端计算量少,提升服务端性能,较少数据传输。
    如下图:点“更多”时才加载更多的品牌,因为有些三级类目有许多品牌,如果不采用这种方式,整个页面渲染非常慢。
    这里写图片描述
    (3)惰性执行
    能不执行的先别执行,惰性执行。
    上图是三级列表页最重要的商品区(商品主图+N个关联商品小图),每个商品的区域都是完全一样的;如果在服务端拼装整个商品区域的话,尤其涉及到小图部分,会有非常多的重复HTML元素。
    这里写图片描述
    我们把体验和减少页面内容进行了折中处理:服务端渲染输出商品主图部分;小图部分通过Json数据嵌入到页面,然后通过js惰性执行渲染。这样可以很好地对页面进行瘦身。而且小图资源是页面嵌入的,非异步加载;没有网络请求。因此,用户基本感知不到异步带来的渲染闪动问题。
    (4)惰性滚屏
    三级列表页的60个商品区域的图片和页尾都是当用户向下滚动页面时,才去加载当前屏幕中的图片和模块。这样可以节省服务器带宽和压力,提升页面整体渲染时间。
    细节优化工作
    在实际优化过程中,还涉及到非常多的优化细节。
    讲一些JS/CSS资源直接嵌入页面
    把资源嵌入闻到那股可以减少请求的次数。比如页面需要的JS、CSS数据。如下图所需:
    这里写图片描述
    上图中的那些JS对象,是后端渲染输出的,因此不适合放入单独的JS文件,直接在页面中嵌入输出会更好些。slaveWareList是小图的列表对象。如果放在服务端渲染输出的话,首先需要进行一些循环拼装页面;另外会使页面体积变得非常大。
    权衡之后决定放到前端JS渲染输出。这样也带来了一些好处:
    1.减轻服务端压力,提升渲染模版性能和减少服务端执行时间;
    2.服务端不用生成HTML,文档减少上百个DIV,减少页面大小和网络开销。
    3.提前放到HTML中,不用异步调用。
    4.用户基本感知不到渲染过程。
    对引入的资源排定优先次序
    根据自己系统的业务,对每种资源定优先级:对必需的资源有限加载。而低优先级的请求保存在队列中延时加载或等待必须资源加载完成再加载;如:搜索推荐热词、顶部三个热卖商品接口、60个主商品的图片、价格有限加载。而对于库存、促销信息、广告词、预售商品、店铺信息等。延后加载。对于点击流,广告统计数据则延时两秒再加载。
    应用JS缓存来存储公有属性和商品信息属性
    三级列表页中的每个商品都是一个对象。存放在一个Map中,通过AJAX接口异步填充和维护商品的属性。用于后续用户交互用。同时维护成本也会降低;即页面中的每个商品数据放入一个Map中,如果没有则异步加载;如果没有则异步加载;如果有直接使用;即这些数据是公共数据。
    这里写图片描述
    AJAX接口最优调用
    页面往往依赖很多的异步接口,因此要对异步接口进行压测,找出接口的最优调用方式。如京东三级列表页依赖价格、库存、广告词、店铺信息等异步调用接口。而页面有时候会出现多达300多个商品,如果用一个get请求把这些sku做参数,性能非常慢,那么就采取分组分批调用。如页面商品在300个时,价格接口分六组,第一组30个,第二组30个,第三组60个,第四组60个,第五组100个,第六组100个。
    DNS预解析
    对可能的域名进行提前解析,避免将来HTTP请求时的DNS延迟。如对价格、库存、图片、单品页等服务预解析。
    这里写图片描述
    减少HTTP重定向
    HTTP重定向极费时间,特别是不同域名之间的重定向,更加费时;这里面既有额外的DNS查询、TCP握手,还有其他延迟。最佳的重定向次数为零。比如三级列表页以前是http://list.jd.com/9987-653-655.html,而现在是http://list.jd.com/list.html?cat=9987,653,655;在过渡期间可以重定向,但是过渡完成后就没必要重定向了。
    使用CDN(内容分发网络)
    把数据放到离用户地理位置更近的地方,可以显著减少每次TCP链接的网络延迟,增大吞吐量。比如京东三级列表页、商品详情页、公告JS、CSS
    传输压缩过的内容(Gzip压缩)
    传输前应该压缩应用资源,把要传输的字节减至最少;确保每种要传输的资源采用最好的压缩手段。所有文本资源都应该使用Gzip压缩,然后再在客户端和服务端间传输。一般来说,Gzip可以减少60%~80%的文件大小,也是一个相对简单(只要在服务端上配置一个选项),但优化效果较好的举措。(对于压缩级别,经过不同服务器的多次压测,建议Nginx设置为1-4)
    去掉不必要的资源
    任何请求都不如没有请求快,把一些非必须的或者可异步的,或者可延迟的尽量延迟请求。

    展开全文
  • 评论Sponsor大家平时一定会在手机上浏览各种新闻,看了那么多新闻,你还能想起来大部分的新闻列表是什么布局呈现的呢?你有没有发现不同的新闻类型采用的不同的布局方式呢?今天就来讲讲新闻列表应该采用什么样...

    新闻列表应该采用什么样的布局方式?

    十一月 23, 2019

    发表于: 视觉设计.

    评论

    Sponsor

    大家平时一定会在手机上浏览各种新闻,看了那么多新闻,你还能想起来大部分的新闻列表是以什么布局呈现的呢?你有没有发现不同的新闻类型采用的是不同的布局方式呢?今天就来讲讲新闻列表应该采用什么样的布局方式,下面我总结了五种布局样式:

    1.大图布局,2.多图布局

    3.左图右文,4.右图左文,5.卡片列表

    一、大图布局

    新闻列表中一般不会在整个页面中采用大图布局,因为新闻一般数量较多且具有时效性,采用大图布局会降低浏览效率,如果是比较重要的新闻或者是希望用户注意到的内容则会采用大图布局。更多情况下,大图布局和其他布局会混合使用,在大量新闻中,用大图布局的方式突出某条新闻引起用户注意。

    扩展

    大图布局也被运用于多种场景中,大图除了吸引用户还能展现更多图片细节,在很多以图片为主的产品如设计师灵感库都采用大图布局的方式。airbnb同样采用大图布局列表向用户展示符合条件的民宿,我们能发现预定酒店时列表往往是以小图布局配合更多文字信息的布局方式,因为酒店房间大致相同,没有更多的风格或特色,人们关注酒店的品牌星级价格或设施等。而民宿和酒店不一样,民宿往往各有特色,以其独居风格的装饰来吸引住客,干净舒适和富有特色的民宿图片能一下子吸引用户点击,通过浏览大图用户就能了解民宿的大体环境,而不需要再次点击查看,能提高用户浏览查找民宿的效率。

    二、多图布局

    多图布局中每行内容主要为标题 三张图片,通过对比发现,大部分的新闻产品中,娱乐新闻都是以这种方式布局的,为什么呢?娱乐新闻中图片是较为重要的内容,也更能吸引用户的注意,在列表中展示更多的图片能够满足用户的好奇心,也能提高用户浏览娱乐新闻的效率,通过图片就能判断是否为自己感兴趣的内容。除了娱乐新闻,社会新闻也采用这种布局方式。同样也是用图片来吸引用户,或通过图片即可了解大概的新闻内容。

    扩展

    大家对多图布局方式一定非常熟悉了,我们每天都用的微信还有微博也是采用多图布局的方式,这种方式可以让用户短时间内了解所有图片的大致信息,利于用户快速浏览。很多旅游APP旅游攻略也采用多图布局的方式,旅游攻略中经常用大量的图片来展示某个旅游景点,用户往往更关注图片也更容易被好看的旅游图片所吸引,和朋友圈微博的多图布局方式稍微有些不同的是,旅游攻略会选择一张最重要最吸引用户的图片以大图方式展示,其他的图片则以小图方式展示,这种布局方式既能让用户看清楚重要图片的细节,也能对攻略的内容有个大概的了解。

    三、左图右文

    图文列表是最常见的一种列表样式,一般用于更关注文字信息的科技、财经、时事政治等新闻,按照用户的阅读习惯,左图右文会让用户先看到图片再阅读标题,如果你希望用户更关注图片信息,那么就可以采用左图右文的样式。

    四、右图左文

    同样适用于更关注文字信息的新闻,与左图右文相比,将图片的优先级降到最低,让用户更关注新闻内容本身。除此之外,图片的大小及标题承载的文字数量也值得思考,下面的例子中,36氪的图片最小,给了标题更多的空间并且将标题加粗。36氪主要以科技新闻为主,对于这类新闻,用户更关注标题和新闻内容,完整的标题可以提高用户的浏览效率,通过标题就判断是否为自己感兴趣的内容。

    扩展

    大多数以文字信息为主的内容都是以左图右文/右图左文的信息展示。左图右文的样式看起来更加整齐,且用户浏览界面的顺序一般呈F型或Z型,左图右文能让用户更加流畅的浏览列表,而右图左文使文字信息和图片信息分离开,用户浏览列表时相对来说没有那么流畅。但如果用户更关注文字信息而不是图片信息,则以右图左文的样式能使浏览效率更高。

    五、卡片列表

    和前两种样式大体一致,但是用了卡片来承载内容,并且将图片信息放到最大,用户在关注标题的同时,也能清晰地看到图片信息。目前来看,很少产品会使用这种布局,我觉得可能是因为卡片样式会让整体的分割性更强,降低了阅读的效率,但是卡片样式相比前面几种布局方式更规整,具体哪一种更好,还需要通过一定的数据做支撑。

    扩展

    大部分大图列表实际上也是以卡片列表的样式呈现(看大图列表扩展)而小图加文字信息列表以卡片样式呈现的例子并不是很多,我找到两个产品案例。第一个是一个收集了全世界艺术展馆/展览信息的APP,你也可以找到所在城市的艺术展,列表采用小卡片的形式,突出展览名字,一个页面中可以承载大概八个展览,提高用户浏览效率。为什么艺术展览列表的图片采用小图而不是大图来吸引用户,我觉得有两个原因:1.产品更希望用户能到现场去看展览,所以没有采用大图呈现更多细节,给用户留下可探索的空间。2.在没有了解相关背景前,通过图片很难了解到是什么展览,这种情况下文字信息比图片信息更有效。第二个产品是好奇心日报,将列表中的图片信息都被放到最大,让图片呈现更多细节,但整体来看,会觉得”太满“,增加视觉负担。

    总结

    本文一共分析了五种新闻的布局方式,这些布局方式不仅仅运用于新闻列表,在以列表形式呈现的界面中我们都能看到。在做列表设计时,我们需要分析列表的内容和展示列表的目的,是要吸引用户关注还是要提高用户的阅读效率,根据具体的内容和目的再选择合适的布局方式。

    总结一下五种布局方式:

    第一种大图布局,如果希望重点突出的新闻,或者希望引起用户的注意,可以使用大图布局方式。

    第二种多图布局,如果是娱乐新闻、社会新闻等以图片为主的内容可以使用多图布局方式,通过图片可以引起用户注意,并可以通过图片了解新闻的大致内容。

    第三种左图右文,如果是以文字信息为主的新闻如科技新闻、财经新闻等,同时希望用户关注图片信息的时候,可采用左图右文的布局方式。

    第四种右图左文,当更关注文字信息的新闻可采用右图左文的布局方式,标题的优先级最高,尽量保持标题的完整性。第五种卡片列表,如果标题和图片同等重要的时候,可采用这种布局方式,将图片最大化。

    作者:Joley,公众号ID:Microinteraction

    推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

    交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。

    赞助商链接

    赞助商链接

    喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。

    版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

    { 发表评论 }

    姓 名 (必填)

    邮 件 (必填)

    网 站

    展开全文
  • 本文作者,王向维,京东商城三级列表页...三级列表页是什么 列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图所示。 如何进入三级列表页 用户在首

    本文作者,王向维,京东商城三级列表页架构师。工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前端即服务器端做了大量的优化工作。


    京东三级列表页


    三级列表页是什么

    列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图所示。

    如何进入三级列表页

    用户在首页左侧的导航树中(如下图所示)、全部商品分类列表页或者顶部面包屑导航中,选择到商品的最小分类级别后,就可以到达三级列表页。

    三级列表页的作用

    该页面根据用户选择的商品类目进行检索,将结果以列表的形式展现在页面上。使用户快速地找到自己需要的产品,提高用户购买转化率。

    三级列表页的业务特点

    涉及到多维度多因子质量分综合排序,排序质量的效果直接关系到转化率,客单价,进而影响到GMV,实质上是数据挖掘和机器学习技术在海量数据上的应用。

    在不同三级类目下,通过复杂不确定的查询条件、属性区域和列表查询结果的实时联动,以及跟区域相关的库存、京东配送、货到付款等复杂业务逻辑下,做到高并发实时计算。


    优化原因


    三级列表页的页面周围依赖的内部系统太多,要做到异步化展示,阻塞可降级。

    在持续开发一个核心系统过程中,除了满足业务需求外,还应该考虑系统未来的架构,追求极致的系统的可用性、高性能和稳定性。这个过程是一个长期积累和重构的过程,京东三级列表页的优化工作,就是这个过程的一部分。

    优化前的状况

    优化前的三级列表页有以下特点:

    • 基于搜索实现;

    • 全量数据,搜索结果不理想;

    • 接口响应时间长,影响了用户体验;

    • 没法针对数据做二次优化;

    • 转化率相对较低;

    基于以上原因,需要对三级列表页做出改变,也就是对老版本进行重构。

    重构版本目的

    通过优化,希望达到以下目的:

    • 非全量数据,线下异步根据数据模型进行进行筛选部分最优数据;

    • 要求实时过滤计算,接口响应时间要快,保证用户体验;

    • 数据进行优化,提高转换率,提搞GMV;

    • 实现前端降级和异步模块出错上报



    优化原则


    每个应用都要满足自己特定的需求,因为其商业条件、应用场景、用户期望,以及功能复杂性各不相同。尽管如此,如果应用必须对用户作出响应,那我们就必须从用户角度来考虑可感知的处理时间这个常量。事实上,虽然生活节奏越来越快(至少我们感觉如此),但人类的感知和反应时间则一直都没有变过: 

    下面这个表格展示了Web性能社区总结的经验法则:必须在250 ms内渲染页面,或者至少提供视觉反馈,才能保证用户不走开。如果想让人感觉很快,就必须在几百ms 内响应用户操作。超过1s,用户的预期流程就会中断,心思就会向其他任务转移,而超过10s,除非你有反馈,否则用户基本上就会终止任务!

    此次的优化工作遵循以下四个原则:

    • 首屏优先:精简和瘦身页面,首屏优先展示出来;

    • 惰性交互:需用户交互的部分惰性加载;

    • 惰性执行:能不执行的先别执行,惰性执行;

    • 惰性滚屏:滚屏惰性加载。

    遵循这四个原则,进行了优化工作。


    主要优化工作


    (1)首屏优先

    为了保证首屏优先展示,HTML文档进行了适当精简。

    目的:尽快渲染出页面并达到可交互的状态。

    方法:

    • 如果非必须,尽量只生成首屏需要的HTML数据。

    • 优先获取资源、提前解析。如首屏需要的CSS和js;如果不考虑维护成本,可以把首屏需要的CSS和JS放到文档中。

    • 发现和优先安排关键网络资源,尽早分派请求并取得页面。

    • 文档精简后,服务端生成程序耗时短,性能才会好。

    如下图所示,列表页的头、面包屑、品牌区、属性筛选区、60个商品主图数据,这些是服务端模板渲染输出;而剩余部分是在前端JS惰性加载或生成。

    (2)惰性交互

    惰性交互,即对需用户交互的部分进行惰性加载。

    对于三级列表页品牌区,服务端只渲染18个品牌,用户在点更多时,AJAX异步加载其他的。对于整个属性是筛选区服务端只渲染5行,其他行用户在点更多时,JS从文档嵌入资源中取到数据,并渲染成HTML。这样做可以保证服务端计算量少,提升服务端性能,减少数据传输。

    如下图,点“更多”时才加载更多的品牌,因为有些三级类目有非常多品牌,如果不采用这种方式,整个页面渲染非常慢。

    因为需要SEO的原因,京东三级列表页不能使用BigPipe等技术来进行更优的处理。

    (3)惰性执行

    能不执行的先别执行,惰性执行。

    上图是三级列表页最重要的商品区(商品主图+N个关联商品小图),每个商品的区域都是完全一样的;如果在服务端拼装整个商品区域的话,尤其涉及到小图部分,会有非常多的重复HTML元素。

    我们把体验和减少页面内容进行了折中处理:服务端渲染输出商品主图部分;小图部分通过Json数据嵌入到页面,然后通过JS惰性执行渲染。这样可以很好地对页面进行瘦身。而且小图资源是页面嵌入的,非异步加载;没有网络请求。因此,用户基本感知不到异步带来的渲染闪动问题。

    下图就是页面嵌入的小图Json数据。

    (4)惰性滚屏

    三级列表页的60个商品区域的图片和页尾都是当用户向下滚动页面时,才去加载当前屏幕中的图片和模块。这样可以节省服务器带宽和压力,提升页面整体渲染时间。


    细节优化工作


    在实际优化过程中,还涉及到非常多的优化细节。

    将一些JS/CSS资源直接嵌入页面

    把资源嵌入文档可以减少请求的次数。比如页面需要的JS、CSS数据。如下图所示:

    上图中的这些JS对象,是后端渲染输出的,因此不适合放入单独的JS文件,直接在页面中嵌入输出会更好些。slaveWareList是小图的列表对象。如果放在服务端模板渲染输出的话,首先需要进行一些循环拼装页面;另外会使页面体积变得非常大。

    权衡之后决定放到前端JS渲染输出。这样也带来了一些好处:

    • 减轻服务端压力,提升渲染模板性能和减少服务端执行时间;

    • 服务端不用生成HTML,文档减少上百个div,减少页面大小和网络开销;

    • 提前放到文档中,不用异步调用;

    • 用户基本感知不到渲染过程。

    对引入的资源排定优先次序

    根据自己系统的业务,对每种资源定优先级:对必需的资源优先加载,而低优先级的请求保存在队列中延时加载或等待必需资源加载完再加载;如:搜索推荐热词、顶部三个热卖商品接口、60个主商品的图片、价格优先加载。而对于库存、促销信息、广告词、预售商品、店铺信息等,延后加载。对于点击流,广告统计数据则延时两秒再加载。

    应用JS缓存来存储公有属性和商品信息属性

    三级列表页中的每个商品都是一个对象,存放在一个Map中,通过AJAX接口异步填充和维护商品的属性。用于后续用户交互用。同时维护成本也会降低;即页面中用到的每个商品数据放入一个map中,如果没有则异步加载;如果有直接使用;即这些数据是公共数据。

    AJAX接口最优调用

    页面往往依赖很多的异步接口,因此要对异步接口进行压测,找出接口的最优调用方式。如京东三级列表页依赖价格、库存、广告词、店铺信息等异步调用接口。而页面有时候会出现多达300多个商品,如果用一个get请求把这些sku做参数,性能非常慢,那么就要采用分组分批调用。如页面商品在300个时,价格接口分六组,第一组30个,第二组30个,第三组60个,第四组60个,第五组100个,第六组100个。

    DNS预解析

    对可能的域名进行提前解析,避免将来HTTP请求时的DNS延迟。如对价格、库存、图片、单品页等服务预解析。

    减少HTTP重定向

    HTTP 重定向极费时间,特别是不同域名之间的重定向,更加费时;这里面既有额外的DNS 查询、TCP 握手,还有其他延迟。最佳的重定向次数为零。比如三级列表页以前是http://list.jd.com/9987-653-655.html,而现在是http://list.jd.com/list.html?cat=9987,653,655;在过渡期间可以重定向,但是过渡完成后就没必要重定向了。

    使用CDN(内容分发网络)

    把数据放到离用户地理位置更近的地方,可以显著减少每次TCP连接的网络延迟,增大吞吐量。比如京东三级列表页、商品详情页、公共JS、CSS。

    传输压缩过的内容(Gzip压缩)

    传输前应该压缩应用资源,把要传输的字节减至最少:确保对每种要传输的资源采用最好的压缩手段。所有文本资源都应该使用Gzip压缩,然后再在客户端与服务端间传输。一般来说,Gzip可以减少60%~80%的文件大小,也是一个相对简单(只要在服务器上配置一个选项),但优化效果较好的举措。(对于压缩级别,经过不同服务器多次压测,建议Nginx设置为1-4)

    去掉不必要的资源

    任何请求都不如没有请求快,把一些非必须的或者可异步的,或者可延迟的尽量延迟请求。

    在客户端缓存资源

    应该缓存应用资源,从而避免每次请求都发送相同的内容。

    对静态资源CSS/JS或变化不频繁的HTML块,可以放到前端localstorage。因为每次都传输一些不变的静态文件或者HTML,实在是太浪费了。

    无状态域名

    Cookie 在很多应用中都是常见的性能瓶颈,很多开发者都会忽略它给每次请求增加的额外负担;减少请求的HTTP首部数据(比如HTTP cookie),节省的时间相当于几次往返的延迟时间。如列表页依赖的价格、库存接口,采用3.cn无状态域名,从而减少主域下cookie传输。

    并行处理请求和响应

    请求和响应的排队都会导致延迟,无论是客户端还是服务器端。这一点经常被忽视,但却会无谓地导致很长延迟。

    域名分区

    当页面中非常多请求都是一个域名下资源时,由于浏览器同时只能打开6个连接池,而且每个链接池是对不同域名起作用,所以很多请求一个域名会出现排队现象。如果把这些请求域名分区,让请求并行,从而加快资源下载。如:页面需要下载上百张图片,对图片进行域名分区调用。京东大部分页面都对图片进行了域名分区调用:

    http://img10.360buyimg.com/

    http://img11.360buyimg.com/

    http://img12.360buyimg.com/

    http://img13.360buyimg.com/

    http://img14.360buyimg.com/

    拼合和连接

    合并链接:把多个JavaScript 或CSS 文件组合为一个文件。

    拼合:把多张图片组合为一个更大的复合的图片(CSS Sprites)。

    服务端写相关信息到header

    把服务器IP后两位写到header,如果有问题,方便定位哪台服务器。ups:后端路由的所有服务器都取到。把缓存命中信息或异常走兜底了,把后端运行状态写到header。Head-status:命中、未命中、异常等状态。


    降级方案和异步模块出错上报功能的实现


    降级方案
    • 主动降级

    页面依赖很多AJAX异步接口服务,难免保证这些服务从不出错。所以在调用这些接口服务时都提前判断该接口开关是否开启,如果开关关闭则不调用该接口服务。页面不展示相关模块。保证在一个接口服务出问题时,我们可以快速降级。

    • 被动降级

    当某个异步接口服务返回非200状态码、请求超时、数据格式不正确等异常,就会被动隐藏或不展示相应模块。最上面三个热卖商品依赖的广告服务出问题时,会把每个三级分类对应的三个兜底商品展示出来,防止开天窗。对于其他模块因为是商品的属性,暂时做隐藏处理。

    上报模块错误

    当页面被动降级了,js就会上报该模块,后台程序记录并报警。同时也会上报js运行中出错的信息。记录什么浏览器,哪个版本,什么错误。我们会对这些问题验证和修改。保证每个用户都能访问。

    Web性能监控

    为什么要做Web性能监控,因为页面可能放在CDN,前端JS执行很多业务逻辑不知道运行情况,整个链路网络偶尔不稳定、页面依赖的模块和第三方异步服务多人工难以实时监控等,这些情况请求还没有到后端就可能出问题,所以后端监控无能为力。

    前端监控分两个方向:用WebKit内核模拟浏览器,定时抓取设定的页面;前端JS植入监控。

    • 用WebKit内核模拟浏览器,定时抓取设定的页面

    该Web监控项目采用一个中心服务,多个终端服务来完成大量页面抓取和校验。

    部署到全国各个机房,实时监控页面是否打开正常(请求超时、返回非200)、页面HTML关键元素是否丢失,页面是否出现乱码等。

    每个终端定时向中心服务请求需要处理的页面URL和该页面需要验证的规则。如果验证不通过,则记录下来并报警。同时会保存现场(HTML文档、页面截图)。

    该项目在这次618起到很重要的作用,页面出现任何问题,都会提前检测出来。

    • 前端JS植入监控

    该JS统计页面白屏时间、首屏加载时间、每个AJAX异步方法调用耗时和请求状态码。 同时也会上报异步模块降级了,JS运行中错误信息等。

    埋点统计

    京东列表页的埋点主要是来统计用户点击当前页面位置记数,帮助广告系统、业务、产品经理后续的工作。

    埋点数据上报,就是通过onclick发送AJAX请求到后端服务。

    其中对于点击后刷新当前页面的情况,需要在新页面记录上次点击的位置。因为在当前页面点击后上报AJAX方法还没执行就关闭当前窗口加载点击后的URL了。

    下图是点击流插件的统计,数据敏感不做展示,大家只看功能。


    总结


    用时

    此次重构的时间段为:2014年12月到2015年4月。

    效果

    京东三级列表页从优化到上线,已经经历了两个618和一个双11的考验,每天有上亿的访问量,页面打开时间在20~80毫秒(在某些地区或低带宽下会大于100ms)。


    后端方法调用tp99的性能数据如下图所示。

    心得

    列表页从开始200+ms到现在100ms内,QPS单台机器几百到现在的近万,页面从1MB到现在200KB内,包扩后台系统的拆分,逻辑算法后移、后台实时计算等优化。是需要有匠人的精神精雕细琢。

    列表页每周都会根据业务方和产品经理的需求在开发功能。对于每个功能点都要深入思考,列出多种方案,最终选择一个简单、易维护、不影响系统性能、不降低用户体验的方案。这个过程要不断思考、或请教有这方面经验的人、包括参考外部公司的方案。有趣的是可能晚上突发奇想就有更好的方案。

    中间也遇到无数的坑。对于每次遇到各种问题,必须想方案避免再次出现。同时要分析Nginx日志,分析每个请求,进而对爬虫、恶意参数访问、恶意请求做相应处理。这些都是前端服务必做的。当然后端服务也是非常重要的,后续会有列表页量身打造的缓存(加速、抗大流量、多样化兜底基础数据)、服务端架构、自动降级、架构高可用等方案。

    来源:http://blog.csdn.net/javaliuzhiyue/article/details/52191091

    展开全文
  • 被忽略的移动端列表页设计

    千次阅读 2017-03-13 23:52:53
    一、列表页是什么? 在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章中有这样一段话:列表页是一个由若干可选择对象所组成的队列。 在手机端,列表页是一个很常见的组件,它是...

    你知道么?每个移动客户端产品或APP都有列表页!

    一、列表页是什么?

    在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章中有这样一段话:列表页是一个由若干可选择对象所组成的队列。

    在手机端,列表页是一个很常见的组件,它是由手机这个特殊媒介的特征所决定的。手机端的内容呈现和pc端不同,有一定的阅读局限性,一个页面只能表明一个信息,同时上下空间可无限延伸。

    对交互组件做定义很重要,应该从现有的基本概念出发,来定义全新的交互对象。而不是将列表直接定义为一个貌似纵向排列的表单,这样就限制了交互的创新设计,典型的列表是纵向,但九宫格式和一些标签形式也属于列表形式之一。

    最近进行的一个儿童《手机印品商城》应用,42个页面有80%以上是列表页结构,越发的重视列表页的作用。

    二、列表页设计注意要点?

    1、明确列表的目的,目的决定形式

    列表页要达到的目的无非有几种:

    1)概观性,列表可以提供给用户一种概观性的方式来呈现内容。

    图01

    图01是一个携程旅行,首页导航用了分类概观性列表的形式,用户一目了然看到四种分类:酒店、机票、旅游、攻略。分别用四色和大图标区分,对于信息较多的列表仅一个层级是不够的,这四个分类又各自做了四个二级分类,并且在文字和图标上做了缩小的概括性处理,用户短时间迅速能了解自己需要操做的分类在哪里。

    (2)搜寻:用户可能需要在列表上寻找他们想要的信息。

    图02

    图02百度音乐,是我天早上都会使用的一款很有效率的产品,它的一个独特的设计点就是把音乐用各种情景分类,并配有图标,因为每天早上要叫孩子起床,在上班前送它们去幼儿园,但是叫小孩子起床是一件很头疼的事情,当看到活动分类有“起床”图标,选择之后播放的都是很亢奋的叫醒睡懒觉人的音乐,孩子一会就起来了,后来发现最好用的是亲子这个选项,因为放的都是他们在幼儿园学的歌曲,还没睁眼就跟着唱起来,甚是有效。这个分类列表用九宫格的设计形式,用最贴合的图标让用户能有效的找出自己需要的音乐分类,达到了很好的搜寻作用,节约了用户的搜索成本还养成了独特的搜寻习惯。

    (3)分类与过滤:用户可能正在分类信息或者使用一些方式(档案大小、名称)过滤内容。

    图03

    这是大众点评的移动端界面, 在这一个可视界面中就有三个分类列表。最上面是按照搜索使用大类做的分类,中间“天天秒杀”等内容是提炼了特色内容作为主要推广列表,并配有异形图,抓用户眼球,下面的内容就是根据地理位置给用户做的优先推广和最热最新的内容。这个列表设计明确的给用户优先做了分类,一般3秒就能做出大类判断,筛选过滤掉不需要的内容,进入到关键内容。不必在冗长的列表中寻找大类再区分小类,好的列表页设计已经提前帮用户考虑一步。

    (4)项目的整理、增减与分类:整理信息,此时很有可能需要多选、搬移的辅助功能。

    图04

    列表除了有罗列和区分功能,还有一个重要功能是可操作性。这也是列表的高级用途。我们可以在手机设置项里找到很多可操作的列表项,例如开启wifi模式或者关闭声音模式等等,在手机应用中,可操作的列表页设计也占很大一部分,图04的社交app里有三个可供用户操作的按钮,用三个图标表现,分别是“喜欢”“评论”和“切换”。用户和朋友互动第一时间对可视标签进行选择,并操作,操作即反馈,产生互动,这提升了列表项在单独具有选择功能基础上的操作功能实现,在手机界面的拓展上具有更积极的意义。

    2、明确列表页有多少项,项决定逻辑关系

    列表单元中可能包括图片、主标题、副标题、标识、图标等列表项,设计师需要将这些已经筛选出来的信息进行组织。但有效地组织前,必须有效地知道某个图标、人物头像或者商品照片的大小,还有主标题的最多字数和最少字数大概为多少,这样为你提出好的信息排布形式提供论据。

    图05

    图05是“饿了么”应用的列表页,每组项的推荐都涵盖很多项。

    这一个组合涵盖7个内容项分别是:1、图示 2、名称 3、星标评价 4、交易次数 5、送餐最低金额和送餐时间 6、可提供的优惠 7、更多优惠。在设计中如何有效的利用字体、字号、字色、图标等元素为逻辑区分内容的主次是设计师需要重点思考的。

    图06

    这是一个利用首字母做区分的音乐应用,类似我们的通讯录,一般情况下,数据量巨大且类别繁多较难在短时间找到的内容,可以用首字母为逻辑的方式来建立列表库。这种庞大的数据如果用单纯列表形式对用户来讲简直是灾难,失去耐心的用户最终会放弃应用,所以适当的列表形式非常重要。

    图07

    图07是一组电话薄的清单嵌套列表,每一个大项里含有邮件和电话两个二级项和4个三级项点开还包括一个可操作的四级项。是典型的可操作清单嵌板模式,在系统需要设置、删减等交互界面经常被使用。

    3、组织主次关系

    手机的视觉显示中:左边的信息比右边的信息重要,上面的比下面的重要,所以主角信息要尽量放在左边以及上面,配角放在右边或主角的下面,一些需要强调的副角则可以通过字体大小或者颜色进行强调。

    图08

    当列表页设计目的和逻辑都清晰呈现后,最后要做的是综合的梳理和关系的组织协调。图08分别是3个不同应用,但都基本符合上面比下面重要,左边比右边重要的设计原则进行类目的梳理,在视觉上和使用上一目了然,“巅峰榜”、“头像”、“数字列表”分别是三个列表页的主题,下面则是附属内容。既有大类又有细类,在文字、颜色标签的处理恰到好处。

    三、优秀创意形式分类举例

    1、缩图分格

    优点:将列表用网格缩图的方式呈现,让用户使用视觉图片的方式浏览内容。

    2、时间轴

    优点:逻辑清晰,主次分明,很适用于有时间线罗列的事件,html5设计常客。

    3、标签卡片

    优点:可扩展形式多样、视觉创意性强,标签是一种拟物形式,用户的参与感和实物感更强烈。

    4、清单嵌板

    优点:列表会在原地展开/收起,用来显示该项目的详细信息。

    5、通栏清单

    适合能提供高清有细节大图的产品展示,无限制长列表。

    不要忽略列表页

    往往被忽略的细枝末节才是关键。

    原文地址:ued.qq
    展开全文
  • asp.net 做了页面重定向,当列表页面放置长时间后点击详情页面链接,无法重定向,这什么呢? ----------------主要处理以前的页面链接,跳转到新的页面链接上去。 哪位好心人愿意回答我的问题呀?
  • 什么是列表,列表分为几种 顾名思义,HTML列表就是显示列表使用的。 列表分为无序列表,有序列表和定义列表3种。 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表...
  • [Java教程]移动开发中单异步加载所有列表项0 2016-08-06 00:01:46在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页可以接受的。那么,当我们为手机或其他移动端设计界面的话...
  • 我们如何知道他的下一条是什么呢? 肯定不能直接单纯的id+1 因为很可能他之后的数据是有删除啊操作的 那么主键就不连续 如何查它的上一下一页呢? 其实很简单: select * from article where a_
  • jsp页面中写下拉框的方法:首先在页面中设置一个隐藏域,用于保存后台传递过来的值;然后在页面中输出下拉列表;...而在这个页面中,一般少不了下拉列表的。推荐课程:Java教程。至于它的处理方式,我以前...
  • 列表页是PM画原型的时候最容易碰到的页面类型,那么如何快速画出并且展现交互呢?我们从具体的例子开始讲解其中的技巧,和各种不同的演变场景。希望初级PM可以通过这篇文章改进下自己的画法。列表页基本是由页面框架...
  • 列表页是产品经理画原型的时候最容易碰到的页面类型,那么如何快速画出并且展现交互呢?我们从具体的例子开始讲解其中的技巧,和各种不同的演变场景。希望初级产品经理可以通过这篇文章改进下自己的画法。列表页基本...
  • 列表:语义化标签有序列表用法:有顺序显示,一般用于显现顺序的列表无序列表用法:一般没有固定的顺序,基本使用黑心原点表示,可以用type属性来改变无序列表项符号自定义列表用法:可以控制在页面上的位置显示。...
  • 在使用EUCMS时,可能会有某个信息不需要了,想要删除,信息管理里点删除却删除不掉,这是什么原因呢?通常情况是因为此信息里包含图片路径,而在这个路里的图片不存在或图片的格式不规则,都会导致删除不掉此信息,...
  • 视频瀑布流列表页

    2020-12-09 02:24:09
    <div><p>视频列表页滚动的时候如果有新数据加载的时候,两列显示的item会出现抖动的现象,这个是什么造成的呢?</p><p>该提问来源于开源项目:spicyShrimp/Misses</p></div>
  • 我来简单的描述下,小编妹子提的需求这样的,你看啊,你这列表页的数据,能不能我就直接在列表上进行点一下就直接修改啊,我再点进去修改多麻烦,太不方便了。这尼玛,这需求,是不是真想给她一棒槌。ok,我们今天...
  • 本篇文章给大家带来的内容是介绍css中list-style属性是什么?如何设置列表样式?有需要的朋友可以参考一下,希望对你们有所帮助。在前端开发中,我们可以通过css属性来设置不同的列表样式,下面我们来看看css设置...
  • 摘要: 本文详述了管理后台列表页的设计原则和技巧,对于新手有很大的学习价值。...列表页是一些具有同种属性的内容的聚合。简单讲,在电商系统里面,展示所有商品或订单信息的或相似页面就是列表页。列表页的简单...
  • 在网上找了一下 什么js顺序什么的都没问题,下拉列表就是打不开,页面缩窄后 导航缩放那个目录也打不开
  • 对于PC的网页,这个问题并不典型,因为,新链接在原窗口打开还是在新窗口中打开,这都还没个定论,如果在新窗口中打开,也就不存在返回列表页的情况了。现在移动设备上,尤其手机这么小的屏幕上,无节制的打开...
  • 微信小程序开发-新闻列表之新闻列表绑定开发教程:1、效果图预览2、准备工作在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局。小程序里建议使用flex布局,因为小程序对...
  • 我用的框架layui的框架,其实不管什么框架,都一样的,特别简单; 问题描述:页面当中有新增按钮、修改、删除等,如果新增或修改成功,直接刷新列表用户体验会有一些差。 问题解决方向:我们的需求就是查询条件...
  • 列表页是PM画原型的时候最容易碰到的页面类型,那么如何快速画出并且展现交互呢?我们从具体的例子开始讲解其中的技巧,和各种不同的演变场景。希望初级PM可以通过这篇文章改进下自己的画法。列表页基本是由页面框架...
  • 聚合页面,指网站根据一定主题或关键词将原有文章进行重新排列组合成一个新的列表或专题页面。网站聚合页面的初衷为了方便用户对同一内容的扩展阅读而创建。聚合页面对SEO的影响,它可以快速获取排名与流量,做...
  • 首先什么是sticky效果呢具体参照饿了么APP的商品列表页(小程序版本发现并未实现)具体的效果及实现可以查看一下这个demo = sticky demo on codepen简单地说就是标题会有粘黏的效果,向下滑动时跟着列表走,向上滑动...
  • HTML+CSSHTML+CSS在绵白的北方世界艳遇一场大雪纷飞雪の物语为什么要初始化CSS样式?因为浏览器的兼容问题,不同浏览器对有些标签的默认值不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,...
  • 1、效果图预览2、准备工作在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局。小程序里建议使用flex布局,因为小程序对flex的支持很好的。上一篇博客中完成了轮播图部分,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,190
精华内容 1,676
关键字:

列表页是什么