lihui49的博客

从代码规范, 前端工程化, 性能优化等方面介绍一个前端老项目的深度重构的过程。

”微前端”这个词现在对前端同学来说已经比较熟悉了，各种方案也已经落地开花，比较主流如single-spa、乾坤，后来的也有webpack模块联邦。爱番番团队在项目初期后端微服务化的过程中，前端也落地了自己的微前端方案，更好的服务于敏捷开发，提升交付效率。全文3308字，预计阅读时间10分钟。一、背景爱番番团队后端使用微服务架构，实现敏捷开发和部署。为配合微服务架构模式，前端需要对原有的web端单体项目进行拆分，每个微服务对应部分的前端需要有独立的代码库，能够

导读：揭秘百度直播研发部Web应用SSR技术新玩法，在CSR目录下添加一个JS计算函数就可以让页面具有SSR能力。依托端云协同驱动打通SSR技术关键路径、规模化落地引领高品质Web应用的市场价值。让我们对这个小时级赋能方案一探究竟。全文3608字，预计阅读时间10分钟===一、背景从CSR到SSG，网页信息从无到有完整呈现个性化内容滞后于AJAX请求，夯实访问体验，提升网页内容体量和平台品牌等级，满足消费者对更高质量体验的需求。同时内容服务型站点SEO推广也是关键要素，内容运营助于业务获得突破..

全文3268字，预计阅读时间8分钟目录：一、名词解释二、业务背景：新增服务市场业务线三、困境：服务端的渲染由后端主导，前端只负责产出静态（浏览器端执行）js文件四、重新开始：前端也能做服务端渲染，js也能在服务端生成html1：引入Node.js做服务渲染层2：确定SSR技术方案node-vue-ssr五、新的挑战：Node.js和SSR的加入，同构逻辑冗杂六、合理分层：拆解不同端的复杂度，一次开发多端生效，提高开发效率七、配置化开发：每一层开发单元如何工作传递给下一层.

在平时工作中，我们会把通用的代码，合并到一个通用的SDK中，增加大家工作效率，本文主要分享我们在编写SDK时候的准入标准以及相关编码思想。首先需要回答，为什么要编写SDK？1. 避免重复造轮子2. 减少线上bug概率1.1 避免重复造轮子好的sdk可以帮助团队省时省力，将相同的功能抽象到一个通用sdk中，前人栽树后人乘凉。1.2 减少线上bug概率1. 经过大家共同的优化出bug的可能性较低，即使出bug，也只需要修改sdk即可；2. 若每个代码库都实现一遍

导读：讲述在业务快速迭代发展过程中，为了让大数据更好地赋能业务，高效的为用户提供有业务价值的数据产品和服务，百度爱番番的数据团队构建实时和离线大数据基础平台的心路历程，包括如何应对业务、技术、组织等方面的挑战和解决实际痛点过程中的思考与实践。全文9911字，预计阅读时间24分钟。一、前言作为一站式的公私域智能营销与销售加速器，爱番番既承载着百度内部生态的各类推广平台的线索数据（例如：搜索、信息流、基木鱼自建站等营销推广平台的业务沟通、询价收集、表单留资等用户行为形成的线索）的落潜、管控、跟进以及转化等业务能

百度Geek说 关注我们，带你了解更多百度技术干货。 64篇原创内容 ...

百度Geek说 关注我们，带你了解更多百度技术干货。 55篇原创内容 ...

导读：Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台应用，支持移动、Web、桌面和嵌入式平台。Flutter使用Dart为开发语言，利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件，相比React Native（依赖中间者JSCore引擎）性能更高。全文3560字，预计阅读时间 14分钟。目前Flutter混合栈技术成熟，基础建设完善，百度贴吧、网盘、地图、阅读、输入法等均已接入Flutter，一套代码双端运行，约节省50%

导读：自从angular/react/vue的出现颠覆了前端开发者开发模式以来，虽然新的前端框架依然不断涌现，但是迟迟没有一个新的前端框架进入广大前端开发者的视野。本文会从近两年越来越火的lowcode/微前端出发，探讨在传统前端领域，下一代前端工程/框架的可能方向。全文3166字，预计阅读时间 6分钟。一、lowcodelowcode 其实一点也不新，通过 GUI、配置化的方式代替传统的手写代码编程，从sql语句到dreamweaver,基于模型驱动的可视化的编程工具层出不穷。而近两年lowcode的兴起

百度Geek说 关注我们，带你了解更多百度技术干货。 39篇原创内容 ...

百度Geek说 关注我们，带你了解更多百度技术干货。 38篇原创内容 ...

百度Geek说 关注我们，带你了解更多百度技术干货。 37篇原创内容 ...

点击关注「百度Geek说」更多技术干货等着你导读：随着互联网的发展，越来越多人喜欢直播，百度直播也在快速发展中，为了提升用户的使用体验，本文针对百度直播的复杂流程进行了整体梳理，并详细说明开展的一系列起播优化工作。全文4216字，预计阅读时间 9分钟。一、背景百度做直播有两个目标：1、把现实世界照搬到线上，在线上和在线下有一样的体验，直播种类有媒体、咨询、电商、秀场等；2、是对美好想象的一个完美塑造，随着5G、VR、AI到来，带给我们想象的空间，把线下没有的东西超越这个时空，放到线上，超越线下的想象空间。做

点击关注「百度Geek说」更多技术干货等着你导读：随着 Web 前端工程‬日趋复杂，也‬带来了更大的工程理治‬挑战，微前端在‬大型前端工架程‬构解决方案中成已‬为重要思路之一。本文详细描述 EMP 的诞生背景、使用场景、生态以及如何使用，可以帮助大家能更简单、更高效的构建生产可用微前端架构。全文3740字，预计阅读时间9分钟。一、EMP是什么EMP 是一个微前端架构解决方案集合，旨在帮助大家能更简单、更高效的构建生产可用微前端架构。https://github.com/efoxTeam/emp2020年5月

导读：所谓黑灰产，包含网络黑产、灰产两条产业链，随着互联网的飞速发展，网络黑灰产也在不断演变，当前网络黑灰产已经趋于平台化、专业化、精细化运作。基于黑灰产攻击特点，我们提出了一种基于社群编码的黑灰产攻击识别方法，社群发现部分基于图关系，编码部分引入大规模的图嵌入表示学习。相比于传统的图谱关系挖掘，可以更好的识别和度量未知攻击。而且我们还提出了基于异步准实时的工程化实现，对频繁变化的黑灰产攻击有更强的应变灵活性。全文4424字，预计阅读时间12分钟。一、背景所谓黑灰产，包含网络黑产、灰色两条产业链，随着互联网

点击关注「百度Geek说」更多技术干货等着你导读：性能分析等场景对实时分位数有强烈诉求。在计算累计时长时，可以将不同时间段的时长简单相加，而分位数却无法先计算不同维度下的分位值，然后对其直接聚合，该特性对实时计算带来了较大挑战。我们基于TDigest数据结构，利用Redis和Doris等高性能存储，预先计算所有可能查询的分位值指标，既可以快速计算指标，同时可以保障查询效率。该系统已经对百度内内核性能、网络性能等业务场景进行输出，并能有效满足业务高时效的分析需求。全文3663字，预计阅读时间10分钟。一、问题

点击关注「百度Geek说」更多技术干货等着你导读：商业落地页除了内容展示外，还承载了服务营销能力以及客服-用户联通等能力，落地页的加载性能密切关系到用户体验、客户转化。开展性能优化工作必然离不开数据，我们从数据开始，分析落地页加载性能对用户体验的影响情况，同时建设整个大商业的落地页性能指标，拆解关键加载路径，用数据指导优化方向，再介绍商业端到端性能优化的主要技术手段。全文2842字，预计阅读时间6分钟。一、落地页加载性能的重要性移动落地页加载速度是影响用户搜索体验的重要因素，直接影响到商业的转化能力。用户点

**导读：领域驱动设计（Domain Driven Design - DDD）起源于2004年Eric Evans出版《领域驱动设计》，相比于在国外IT圈享有盛誉且行之有效不同，国内IT圈了解DDD的人很少，落地实践的少之又少。最近几年随着微服务架构的普及和中台的兴起，DDD也成了各大技术论坛和微信公众号文章里经常谈起的话题。DDD的热度是起来了，但业界介绍DDD的资料大多偏理论，缺乏生产项目可借鉴的实践经验。因此大多人读了很多DDD材料后还是一脸懵，怎么衡量DDD带来的价值？老板能同意搞DDD吗？什么.

导读：作为凤睛早期的接入方、后期的核心成员，笔者经历了整个项目前后四年的变迁，看过项目的艰难开端、中期的默默积累以及后期的蓬勃发展。每一次架构的变迁都带着技术浪潮的烙印，也看到项目成员利用有限资源来解决实际问题而持续不断的创新。凤睛是百度商业业务系统的性能监控系统（APM），它侧重于对Java应用的监控，基本接入了百度绝大部分Java应用（覆盖数千个业务应用，数万个容器）。它能够对主流中间件框架（ Spring Web、RPC、数据库、缓存等）进行自动埋点，实现全栈式性能监控和全链路追踪诊断，为百度各业.

点击关注「百度Geek说」更多技术干货等着你导读：大规模短文本聚类系统，旨在精准高效地将海量搜索query进行总结归纳，凝练成为含义内聚表达清晰的“需求”，不仅可以更好地满足用户需求，还能找到内容满足的长短版。如何保证聚类系统的高准确性，如何提高聚类系统的运行效率，是我们团队的工作重点。我们通过多级拆分、精准匹配语义相似度、误差修正等手段，逐步提升了系统的各项效果和性能指标。本文基于我们的实际工作经验，分享了大规模短文本聚类的设计和实践。第五期百度Geek说「周一见」活动火热进行中，转发文章截图发给小编，有

点击关注「百度Geek说」更多技术干货等着你导读：从去年开始，百度MEG（移动生态事业群）架构平台上的用户产品逐步进行云原生改造，如今已基本完成。现阶段更多关注动态弹性能力、动态管理机制的建设。本期「Geek大咖说」，我们邀请到来自推荐技术架构部的传玉老师， 跟大家聊聊百度搜索与推荐引擎云原生改造的阶段性策略，以及对未来发展的思考。嘉宾简介 ：传玉2012年起专注于搜索引擎与推荐引擎方向；2016年开始负责自有的资源调度和容器编排系统的研发工作；2019年开始负责部分通用基础组件的研发工作，并开始在MEG用

导读：随着移动互联网的发展，视频化浪潮借着5G的东风扑面而来。然而众多用户在进行视频化创作的过程中，被传统视频编辑器复杂的功能和陡峭的学习曲线劝退。为此，百度百家号业务研发团队结合用户的实际创作需求，开发出一款简单易用的在线视频编辑和发布工具——百家号在线视频编辑器。本文将细致地介绍这一编辑器的技术原理，架构和演进方向，并从一角揭示百度内部的技术合作与创新机制。*第四期百度架构师「周一见」活动进行中，本期赠送小度音箱，详细活动规则见二条推文～前言随着移动互联网的快速发展，人们越来越习惯于在手机上观看视频内容

导读：直播业务的核心功能有两个，一个是实时音视频推拉流，另一个是直播间消息流的收发。本文主要介绍百度直播服务内的消息服务系统的设计实践和演化。第三期百度架构师「周一见」活动火热进行中，文末有惊喜福利~一、背景直播间内用户聊天互动，形式上是常见的IM消息流；但直播消息流不仅仅是用户聊天。除用户聊天外，直播间内常见的用户送礼物、进场、点赞、去购买、主播推荐商品、申请连麦等互动行为的实时提醒，也是通过消息流下发的。此外，直播间关闭、直播流切换等特殊场景，也依赖消息流的实时下发。消息流可以认为是直播间内主播与用户间

导读：百度Feed信息流推荐系统服务于手百、好看、全民、贴吧等公司绝大多数信息流业务场景，随着业务的高速发展，整个系统承载的流量已经高达数十亿，在庞大的流量规模背后是数百个微服务和数万台机器做支撑。如何保证整套系统对外的高可用性是整个系统能力建设的关键，也是我们团队的一个非常核心的工作方向。为了保障信息流推荐系统常态5个9的可用性目标， 本文将基于我们实际的工作经验分享介绍百度Feed在线推荐系统是如何建设高可用性架构的。第三期百度架构师“周一见”活动开启，文末有惊喜福利~一、背景百度Feed信息流推荐系统

**导读：**从粗糙到精致，从简单到复杂，全球互联网Web App（网页应用）平均体积已增压到1.6Mb，随着音视频等富媒体内容的流量池膨胀，终端设备上的用户对网页装载速度尤其敏感。页面不能做到秒开，就会有大量用户选择离开。重视并改善网站性能，优化即时网页装载时间，加速即时网页在浏览器平台终端状态展现，进而可以带来网站流量增长。本文源自百度直播研发部，提出了前端渐进增强的页面渲染方案，即“路由分离+预静态化+WebView预创建”方案，来替代模板同步渲染方案，并采用工程化的方式将能力打包下沉赋能产品线。.

导读：上期我们讨论了 San CLI 的使用，这期我们再深入一点，来看看 San CLI 的实现原理。一、核心模块和核心概念为了方便理解下文的 San CLI 的整体工作流程（主流程），我们先来看下 San CLI 的核心模块和核心概念。1. 核心模块San CLI 的核心模块包括：san-cli：负责 San CLI 的主流程和实现核心功能；san-cli-service：Service 层，负责 Service 流程；san-cli-command-init：实现 san init 命令

导读：本文是 San CLI 的使用和原理的第一篇，主要介绍 San CLI 的初衷和使用，下一篇介绍具体的实现原理。一、什么是 CLICLI，是命令行界面（command-line interface ）的英文缩写，命令行界面是在图形用户界面得到普及之前使用最为广泛的用户界面。我们就不看图形用户界面和命令行界面的定义了，直接举两个例子直观些。这是图形用户界面：这是命令行界面：虽然命令行界面没有图形用户界面使用广泛，但后者并不能取代前者，原因这里列举一些：远程操作。如果我们要远

导读：百度搜索中台系统不但承接了搜索的阿拉丁流量，也致力于构建各个垂直业务的搜索能力。随着业务的不断发展，系统的流量规模已经达到百亿级别。而在百亿流量的背后，是千级别的微服务模块和数十万的实例数量，如何保证这套复杂系统的高可用、高性能和高可控，全要素多维度的可观测性成为搜索中台系统能力的关键。本文首先会介绍什么是可观测性以及云原生时代为什么更要关注可观测性，然后阐述搜索中台是如何以极低的机器成本打造百亿流量的实时指标监控（Metrics）、分布式追踪（Traces）、日志查询（Logs）和拓扑分析（Top

导读：前端发展飞速，从最开始的静态页面到 JavaScript，再从 PC 端到移动端，随着大前端的复杂度不断提升，很多公司开始前后端分离，剥离出前、后端架构设计。那我们来看看，前端架构设计是什么？曾经非常简单的前端架构发展到现在有哪些问题，遇到前端代码体量巨大、跨团队协作效率、代码耦合、技术栈落后等问题又该怎么解决？一、什么是前端架构？前端架构这一词，相信很多人的定义都不太一样；按照拆词的解释来看，我理解为“前端”+“架构”。前端是指，Web 端的前台页面，包括网页的内容、样式、脚本等，这三者通常

导读：本文从哈希表传统设计与解决思路入手，深入浅出地引出新的设计思路：从尽量规避哈希冲突，转向了利⽤合适的哈希冲突概率来优化计算和存储效率。新的哈希表设计表明 SIMD 指令的并⾏化处理能⼒的有效应⽤能⼤幅度提升哈希表对哈希冲突的容忍能⼒，进⽽提升查询的速度，并且能帮助哈希表进⾏极致的存储空间压缩。1 背景哈希表是⼀种查找性能⾮常优异的数据结构，它在计算机系统中存在着⼴泛的应⽤。尽管哈希表理论上 的查找时间复杂度是 O(1)，但不同的哈希表在实现上仍然存在巨⼤的性能差异，因⽽⼯程师们对更优秀 哈希数据结

导读：尽管自动化测试技术日新月异，但是自动化case构建成本、执行稳定性等问题的存在，使手工测试依然移动端质量保证的重要手段。传统手工测试必须通过人工操作的方式执行测试用例，效率提升依赖测试人员的操作熟练度。本文从介绍百度内UI兼容性测试现状切入，引出“一机多控”并以此概念为基础打造的工具Hydra。然后从技术实现的角度，介绍了Hydra整体的设计思想以及部分核心模块的设计。一、背景1.1 移动端UI兼容性测试移动端的UI兼容性测试，顾名思义就是对移动端应用在不同机型、不同分辨率、尺寸的移动设备上U.

导读：线上系统异常问题一直以来都是使人”闻风丧胆”的，传统手段在解决这类问题时面临着相应的技术瓶颈。基于此，探索基于单元测试召回异常问题的方法，实现了一套通用且无人参与的单测生成系统，在百余模块上落地取得了一定的效果。从近代码手段的单元测试着手，围绕基于单测生成技术召回异常问题的应用实践展开。主要介绍该方案0到1的整体建设思路、并从理解代码、构造高覆盖测试用例数据、生成测试用例代码以及分析失败用例这四方面展开介绍。

色彩即是一种感受，也是一种信息。在多元化的产品场景中，如何运用一套科学的视觉策略，建立一套合理的页面个性化配色体系，解决产品展示形态单一、页面同质化严重、信息层级扁平等问题，提升产品的惊喜感、协调感、沉浸感。智能取色将在设计、策略、服务等多个维度给你答案！