美团饿了么外卖点菜界面联动菜单性能优化(代码片段)

关键词：

1. 业务逻辑描述

2. 优化后的性能提升对比

相当明显

3. 常规处理逻辑

把左侧菜单的一项成为分类(category)，
把右侧每一项称为项(item)。

1. DOM更新后，获取整个content的高度（包裹所有item的盒子的高度）;
2. 获取每个category在content上的高度，从而获取跳转y值区间数组jumpArr；
3. 在content上监听滑动事件，判断当前y值在jumpArr中的位置，更新左侧category样式。

这种方法处理的问题（性能上的）

每次触发scroll事件后都会遍历数组jumpArr来判断此刻左侧导航该有的样式。scroll事件的触发是相当密集的，也就是jumpArr的遍历也是相当密集。对性能有很大的影响。特别是当应用越来越大时、设备比较老旧时。

4. 我的优化思路

1. 标题2中的1、2步保持不变，通过相同的方法获得jumpArr;
2. 上面步骤3采用的是实时遍历，现在抛弃这种做法。而是，生产一个跳转函数，可以使用if...else也可以使用switch...case，这里选用后者，因为性能更加出众。
   注：生成的jumpFunc是字符串，需要使用eval()来进行函数转换。

5. 代码示例(vue)

1. 计算获取jumpArr

getGoodsHeight() 
    //这两项是用来获取content总高的
    const specials = document.querySelector(".specials");
    const itemList = document.querySelectorAll(".group-item");
    //预赛了
    let heightList = [];
    heightList.push(specials.offsetHeight);
    itemList.forEach((element, index) => 
    const eleHeight = element.offsetHeight;
    const preheight = heightList[index];
    heightList.push(preheight + eleHeight);
    );
    this.heightList = heightList;

1. 根据jumpArr得出用于逻辑处理的跳转函数jumpFunc

getJumpFunc() 
    //这样的写法有助于性能，使用判断而不是用循环
    let i = 0;
    let func = `(function ()  return function (y, context) `;
    const length = this.heightList.length;
    while (i < length) 
        const current = this.heightList[i - 1] || 0;
        const next = this.heightList[i];
        const lastIndex = length - 1;
        let partition = "";
        switch (i) 
            case 0:
            partition = `if(y > 0 && y< $next)  context.addNavStyle($i) `;
            break;
            case lastIndex:
            partition = `else  context.addNavStyle($i) ;)();`;
            break;
            default:
            partition = `else if (y > $current && y <$next)  context.addNavStyle($i) `;
            break;
        
        func += partition;
        i++;
    
    return eval(func);
,

1. 项目地址

美团项目

饿了么购物车动画(代码片段)

前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画，所以想看看别人是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来... 查看详情

外卖订单爬虫（美团，饿了么，百度外卖）

这个程序是用来抓取外卖平台（美团，饿了么，百度）的商户订单开发，并不是一个通用库，而是为这个特定场景进行开发的。适用场景：餐饮企业拥有多家外卖门店，订单量非常大，有对订单进行数据分析的需求。主要功能：... 查看详情

徐州外卖送餐员待遇，饿了么，百度，美团。哪个待遇好？

参考技术A本人就是送餐员，美团没做过但是据说有任务单，达到350单才有2500块的底薪，饿了么刚辞职，每月任务单300，底薪1600，百度外卖是1350底薪，无任务单。其实最主要的是百度外卖是由系统派单，不存在人为因素！基本... 查看详情

三大外卖平台（美团、饿了么、百度）你最看好哪个？为啥？

参考技术A三大平台各有所长，目前美团和饿了么所占的市场份额应该是压倒百度外卖了。用户对于平台的取向大多是基于是否有优惠券，配送费，送达时长这些。现在有个快报报的平台，经常有优惠券发放，每周还有限时优惠... 查看详情

饿了么，美团，百度外卖哪个工资待遇好

饿了么，美团，百度外卖哪个工资待遇好美团外卖的工资待遇较好，具体的工资需要根据外卖员的送单量而定。美团外卖一天能送几单，主要取决于对送餐路线的熟练程度和送餐技巧，通常新手外卖员一天挣到两百左右。美团外... 查看详情

饿了么商家名字怎么加后缀

参考技术A饿了么美团店加特符号，就是有你起名时约符号，直接按复制，复制后在游戏里改名添加，按你约爱好设就... 参考技术B饿了么美团店加特符号，就是有你起名时约符号，直接按复制，复制后在游戏里改名添加，按你约... 查看详情

美团外卖搜索基于elasticsearch的优化实践(代码片段)

美团外卖搜索工程团队在Elasticsearch的优化实践中，基于Location-BasedService（LBS）业务场景对Elasticsearch的查询性能进行优化。该优化基于Run-LengthEncoding（RLE）设计了一款高效的倒排索引结构，使检索耗时（... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提：已安装好node、npm、vue、vue-cli、stylus（此项目使用stylus来编译）2.开发软件：GoogleChrome（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件，在底部导航的时候可以相应的显示不同的标题技术点：使用slot进行组件间的通信；父组件给子组件传值（子组件里面通过props接收父组件传过来的数据）查看链接：https://blog.csdn.net/sinat_17775997/article/... 查看详情

真的有人在偷听我们讲话么？

...最让人头疼就是隐私问题。前有12306数据贩卖，今有传闻美团饿了么在偷听我们讲话，显然大家已经被以前各种隐私暴露的事情吓怕了。前几天，就有这么一档子事儿，一些媒体进行跟风报道：通过模拟使用场景，对安卓手机、i... 查看详情

美团外卖搜索基于elasticsearch的优化实践(代码片段)

美团外卖搜索工程团队在Elasticsearch的优化实践中，基于Location-BasedService（LBS）业务场景对Elasticsearch的查询性能进行优化。该优化基于Run-LengthEncoding（RLE）设计了一款高效的倒排索引结构，使检索耗时（... 查看详情

饿了么宣布外卖无人化!百万外卖员即将面临失业

...车、无人加油站、无人餐厅之后……　　刚刚，阿里系的饿了么宣布，全国首个外卖机器人来了!　　饿了么外卖机器人诞生!完成中国首个办公楼内订单配送　　　　饿了么宣布，外卖无人化!　　近日，上海虹桥万科中心，饿了... 查看详情

饿了么：三招错旗让先行者惨败2016

...，再起波澜。让人颇感有趣的一幕出现在圣诞节期间。在美团外卖宣布12月25号日“完成订单量突破900万单”以后，第二天饿了么也紧跟着宣布25日“900万订单投向饿了么”。但同为900万单，“完成”和“投向”则是 查看详情

一个基于springboot+redis+vue仿饿了么外卖系统（后台+移动端），可二次开发接私活！...(代码片段)

...墙被抓了！已大规模行政处罚！该项目是一款仿饿了么外卖平台系统，参考了一些现有其他开源外卖项目，在此基础之上，做了优化处理，并使用SpringBoot+Vue技术开发。可用于学习使用。01项目说明一个... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿了么的翻版。 查看详情

外卖侠小程序源码v4.24.0微擎插件外卖cps同城生活团购

...台。至此，外卖侠小程序已涵盖：特价电影票、美团外卖、美团闪购、饿了么外卖、饿了么商超、美团优选、美团到店、美团酒店、京东、拼多多、唯品会、淘宝/天猫等十几个类别的CPS功能，并且还可以通过强大的... 查看详情

上线长辈模式，饿了么能拿下银发市场吗？

...线对老年人更加友好的长辈模式；而在这之前，美团、支付宝以及滴滴等都针对老年人群体上线了相应的长辈模式。在大厂竞相涌入老年人市场趋势下，谁又能率先打开这个增量场呢？老年人又真的会点外卖吗... 查看详情

订餐系统之同步美团商家订单

...是商户毕竟需要服务，订单还得配送出去。然后饿了么，美团外卖都提供了面向供应商的api的权限的申请，这对我们做配送系统的说，真是一大利好。以前都是让商户手动录入其他平台的订单，费力还容易出错。还得在多个app之... 查看详情