2024年最全4982亿背后的前端技术—2024天猫双11前端体系大揭秘，2024年最新网易云音乐前端面试

本文链接：https://blog.csdn.net/2401_84616339/article/details/138833630

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

**兜底&预案：**兜底一般指在大流量或其他不可控因素的情况下，如何将用户体验和业务损失降低到最小。预案需要评估可能遇到的各种情况，以及对应的处理方案。

**验收：**功能预演，按照用户的所有使用路径进行操作，目前这个工作仍是人工。时间穿越，将页面和系统的状态都调整为活动时间来验证，需要打通上下游的各个系统并形成联动。机型验收，基本分为高端机、中端机、低端机，分别进行验收，很多业务都需要针对低端机做功能降级。稳定性验收，单独页面的性能和稳定性各自保障，但业务叠加后很可能存在问题，尤其像会场、互动、直播、旗舰店等内存消耗大户，互相之间都有引流，切换后很难保证，需要整体全链路验收。

**变更&应急：**历次的故障数据表明，大部分的问题都是由于变更导致的，如何做好变更管控尤为重要。根据时间分为弱管控、强管控期；根据业务等级分为集团核心应用、BU核心应用、非核心应用等；建立变更的CR和审批的机制。应急主要指在核心活动期间，问题、舆情、故障等流转机制，针对问题发现、定位问题、修复问题时间作出要求，不同等级如何决策作出安排。

**监控：**淘系前端持续进行监控能力的建设和升级。需要保障大促高峰的可用性以及报警的实时性，覆盖所有的业务场景。针对越来越复杂的场景，需要端到端的监控和数据分析平台。灰度过程缺少度量和定点监控。根据这些问题和需求，jstracker提供了安全生产的整体解决方案，打造端到端的前端监控与数据分析平台，打造实时监控、多端覆盖、数据分析、智能化的数据平台。同时根据页面情况、错误日志、源站数据、FaaS日志等打造了双11的前端数据大盘。

▐ 资损防控

一直以来前端资损防控是平台非常薄弱的一环，前端触发的资损和舆情问题不在少数。之前全靠开发同学的经验和意识来保证，缺少体系化的资损防控能力。去年开始组织了团队层面的集中筛查和人工预演，对人力和时间的消耗非常巨大，并且很难保证质量并进行积累和沉淀。所以为了能有一种成本更低、预防效果更好的方式进行资损防控，2020年 S1 伊始，就重点对资防做相关产品化的设计和实现。同时今年也重点增加了商家、运营中后台侧的资损防控。

我们将资损防控氛围了三个阶段，研发阶段、操作阶段、运行阶段。研发阶段给存在资损风险的仓库打标，将常规的价格、优惠、默认文案等case进行枚举，通过静态扫描、UI测试用例扫描等方式进行防控。操作阶段，主要是指商家、运营进行优惠、权益等设置的阶段，通过表达方式统一（避免5折、0.5折造成理解差异）、二次确认、限定边界值、低价预警等进行防控。运行阶段有快照对比、服务端数据对账等方式，运行阶段的防控相对滞后，发现时很大概率已经造成实际的影响。

然而，目前仍是预防为主，不能百分之百保障没有资损故障发生，接下来我们还在构思链路级别的、生产环境上的防控手段，建设一些告警和自动止血为平台保驾护航。

业务价值

做好本职的基础上，我们希望给业务带来增量价值。本章从会场性能优化提升转化、基础链路新方案提升转化、唤端技术定制策略提升精准率、智能UI为不同人群提供不通过UI提升点击等4个方面来介绍。

▐ 性能提升

会场是每年双11的主角之一，会场的用户体验自然也是每年最关注的点。在日趋复杂的业务需求下，如何保障我们的用户体验不劣化甚至能更优化是永恒的命题。今年分别使用了预渲染方案和SSR方案进行优化，首先是重新定义了秒开的标准，从原来的前端时间升级到从用户点击经过跳转到页面可视的时间，增加了客户端路由、webview启动等时间，使体验的衡量更贴近用户真实的体感。覆盖了包括主会场、行业会场、外投会场等数十个场景。

预渲染

预渲染是在今年双11会场中使用的技术方案，用于提升用户打开会场的体验。将原有H5页面渲染流程中的WebView的初始化、页面资源加载、部分JS的执行等耗时的操作，提前执行，在离屏状态下完成页面“渲染”。当用户真正点击进入会场的时候，复用这个提前“渲染”的页面，大大节省打开会场的时间。用户打开会场的整体平均耗时缩短了200ms~700ms左右，秒开率提升10%-14%。优化对中低端机绝对收益更高，已实现在低端机上实现秒开会场。让用户逛会场体验更流畅了，尤其中低端手机效果更加明显。在后续的文章也会讲述包括预渲染、数据快照、并行请求等性能优化方面的实践与思考。

图：中低端机型预渲染效果对比图

SSR

今年在不改变现有架构，不改变业务的前提下，在会场上使用了 ServerSideRendering 技术，将秒开率提高到了新的高度（82.6%）；在用户体验得到优化的同时，业务指标如点击率等也有明显的增长，带来了不错的业务价值。后续的系列文章汇中会详细介绍前端在解决工程化、业务效果评估上的具体实践与方法论；服务端在解决前端模块代码于服务端执行、隔离和性能优化上的思考和方案。

图：中低端机型 SSR 效果对比图

基础链路

基础链路是电商核心的链路，包含首页、商品详情、微详情、交易（下单、订单、购物车、支付成功）、信息流、我的淘宝等基础业务。现有的技术方案是手淘内使用Native版本，追求极致的体验和稳定性；站外流量、包括支付宝在内的阿里系App使用H5版本，追求灵活性和可用性。随着支付宝容器化体系的完善，在其他App中的内聚，基础链路新的容器化版本具备了孵化的土壤；同时H5的一些弊端，比如资源都在远端、Native能力使用限制等也可以得到优化。

借助之前的“新奥创”和“DinamicX”方案（主要解决业务定制以及安卓、iOS、H5的三端一致，实现一处开发、三端生效），容器化版本得以快速扩展，实现四端一致。性能数据上，加载时间对比H5版本有2s的提升，基本达成秒开的目标；业务数据上，容器化版本对比H5版本UV转化率提升70+%。

目前已覆盖支付宝、特价版、优酷、高德、淘小铺、一淘等App，以及通过百川SDK集成在众多外部媒体App。业务上也接入了每日必抢、大牌直降、淘宝特价、淘宝直播、百川媒体、优酷、小铺、轻店、花呗等业务。

唤端技术

随着流量见顶、电商大战进一步升级，如何做好用户增长是各大公司必须完成的命题。用户增长涉及的面非常广泛，今年淘系前端聚焦在唤端技术，即外部流量拉起手淘App的技术体系。唤端技术的门槛很低，简单到只需要拼一个类似 URL 的 scheme 就可以触发唤端。唤端技术又很复杂，不同的渠道、不同的OS、不同的 App 都有可能针对唤端协议有限制，并有各种各样的兼容性问题；唤端链路中不同业务可能都有自己的业务定制需求，例如参数的透传；唤端链路的效率更是被关注的核心点，不同场景不同业务在效率上可能都不一样，因此还需要对唤端效果进行监测和对比。为了解决这些复杂的问题，我们在唤端技术上进行了又一次升级，建设了可定制的唤端策略，打造了详细的唤端AB测试链路。从本次双11 的效果看，不同场景下的唤端效率（唤端成功率）相对提升了 25~40%不等。

图：唤端策略图

智能UI

随着移动互联网和推荐系统的发展，人和商品的精准匹配为业务带来了效率的大幅提升。越来越多的精细化手段逐渐应用于个性化推荐领域，比如场景化推荐、人群定投技术等。同时商品的信息比以往任何时候都要丰富（买家秀，品牌背书，无忧购服务等），不同的用户对于内容的UI表达有着差异化的诉求，因此通过为不同人群找到合适的UI表达一定能带来业务效果的提升。

项目的最早期，我们通过AB实验直接定量测试，明确了相同的UI方案在不同的场景会产生差异，不同的UI方案在相同场景下也会产生差异。也就是说，针对不同场景使用不同方案是有意义的。2020年双11大促我们第一次大规模采用智能UI产品化方案落地了多个前端模块，包括猜你喜欢模块、商品模块、店铺模块等，覆盖了双11的预售和正式开卖阶段，承受了流量洪峰的考验，且带来了稳定的增长。覆盖300多个会场，最高的会场PV点击率相对提升10%+。

技术升级

伴随业界的技术演进和业务的发展，我们在技术上相比去年也有了新的尝试和迭代升级，其中典型的包括FaaS的深度使用、PHA渐进式的体验增强、边缘节点渲染的应用等。

▐ FaaS

Serverless，一块深水的坚冰，逐步从深海付出了水面，阿里淘系从去年在大促实践开始，逐渐将 Serverless 应用到前端领域方方面面。今年双11首先是在覆盖场景方面，FaaS从淘宝行业拓展到会场和营销业务，业务的复杂度得到极大的丰富。能力进一步提升，支撑的业务量级也从2k QPS提升到5W QPS，CPU水位从去年的高 QPS 规模时，精力花费降低约50%。在研发体验方面，打造解决方案体系，单元保障、大促管控、专家系统、函数盘点等能力，运维提效约50%。在研发体验方面，打造解决方案体系，降低研发门槛，支持外包快速入场。

▐ PHA

PHA 全称 Progressive Hybrid App，是提升 Hybrid 体验的一种应用框架。提升页面加载速度和交互体验的渐进式 Web 应用，使用 PHA 开发的应用本质上没有脱离前端开发和 W3C 标准，但依然拥有原生应用的特性和体验。或许你有想到 PWA，但 PHA 有比 PWA 更强的 UI 能力和更快的加载速度。目前已经在手淘、特价版、Lazada、CBU 等多个客户端落地，支持了618、双11等多个大促。PHA联合客户端、前端团队、数据分析团队，跨栈协同，在性能优化方向上也做了很多优化工作，梳理全链路性能埋点、定义新的性能口径（从用户点击到可视），使用了预加载、预渲染、资源加速下载、离线资源等优化手段。

▐ ESR

现在的渲染节点主要是在终端或是服务端，对应CSR（Client Sider Rendering）和SSR（Server Side Rendering），分别有适用的场景以及优势和弊端。现在借助阿里云的能力可将渲染转移到CDN节点，也就是我们要介绍的ESR（Edge Side Rendering），即能为前端提供渲染能力，同时也能将大量CDN机器上的计算资源利用起来。

阿里云推出了CDN轻量编程环境——EdgeRoutine，这为我们提供了一个新的尝试方向。我们可以在CDN节点去做提前渲染的事情。CDN的访问策略是会去寻找离用户最近的节点，就像快递运输的最后一公里一样，总会派送到离客户最近的分拨点。这么看来页面的网络调度时长是非常有优化空间的。并且我们还可以利用CDN节点资源共享的特性，将部分数据缓存到CDN节点上，减少远程的数据请求。

这套方案对于数据刷新率不高、访问量极大的页面，ESR搭配CDN的缓存能力是非常适合用的。以达人页为例，首屏时间约能提升50%左右。现在ER的技术才刚刚起步，应用场景比较局限，能力上还有很多不足，体系也需要不断地建设，但这个新技术为前端提供了更多可能，需要我们不停的去探索和完善。

▐ 双11 PM 初体验

双11作为电商年度最核心的节日，各方面投入的力度和资源都是最大的。作为参加过8次双11的老兵，作为前端PM是第一次，有很多不一样的感受。

**复杂：**首先是业务上，有双11定制和特有的主会场、主互动、猫晚等，还有淘系内部本身就有导购、行业、营销、直播等数十个业务，同时联动支付宝、优酷、本地生活、阿里妈妈、菜鸟等多个集团BU，与商家、ISV、物流、媒体等的协同和合作。技术上同样复杂，前端的页面从开发、搭建、源站、CDN的全部链路，以及Node FaaS的容器、中间件、容量准备、流量调配、机房部署等。管中窥豹，对于整个体系的认知还需要更进一步的探索。

**流程：**双11作为电商业务每年的大考，已经摸索出一套成熟的流程机制。包括人员的组成、沟通机制、时间排期、组织保障等各个方面都有很细致的机制进行保障。

**协同：**双11是非常好的节点，可以让各团队、各岗位、各BU之间形成联动，集中力量将如此庞大的体系进一步完善。很多技术的升级和突破都是在双11落地并进一步推广的。这次预渲染的方案就是客户端和前端紧密协同，在很短的时间内实现并验证的。

**多维：**看问题的视角可以更多维，不同技术岗位视角，全链路视角，业务的视角。以一次变更的审批为例，之前更多关注变更的代码实现上，对上下游的影响、对稳定性的影响、对业务的影响、是否引入新的风险、影响的范围等等都需要进行综合衡量，做一个判断往往需要从中进行取舍，而不单单是技术上的1和0。

招兵买马

最后的最后，招聘贴！

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css源码pdf