2024年Web前端最新解密百度前端技术体系，快点来白嫖

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

随着端上能力的不断增强，现在在端上做的事情越来越多。首先，数据可视化方向，各类图表、地图、3D等等数据可视化的尝试变得越来越多。其次，伴随着人工智能的加持，在端上的人工智能应用也变的普及，减少了服务端的交互，提高了系统的实时响应能力。最后，随着Webassembly等技术的应用，有可能将前端运行能力再提升一个档次，可以进行更为复杂的端上计算。

为了了解当前前端的发展趋势，让我们从国内各大互联网大厂开始，了解他们的最新动态和未来规划。

上一篇已经详尽介绍了阿里巴巴集团整体技术体系涵盖：基础设施、服务层、应用层、UI组件层、跨平台、工程化、智能化，可以看到许多比较前沿的探索，对于想要了解前端发展趋势的同学非常有帮助。强烈建议没有看过的同学先看解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）。

这一篇从百度讲起。

2 百度团队介绍

============

百度进入2019年业务上就一直萎靡不振，团队、组织架构上也不断调整，从今年股价走势也能看出发展的确不顺。市值上，也连续被美团、京东超越，自此江湖上再也没有BAT，只剩下AT了。

但是，百度作为国内老牌互联网公司，尤其是经历多年搜索大数据量的历练，同时百度是国内工程师文化最为浓厚的一家公司，被誉为国内互联网的黄埔军校。

因此，业务/市值上虽然已经无法和阿里巴巴、腾讯相提并论，但技术体系依旧还是国内顶尖的水平，下图是百度前端技术体系一览。

首先先大体介绍一下百度前端相关的技术团队(有公开信息的)

百度FEX

http://fex.baidu.com/

FEX名称的来源是FE代表前端（front-end），X代表了每个人都能独当一面，不仅所有事都了解一些，而且还有一个专长。就像X战警一样，每个人都有自己独特的能力，但是作为团队可以一起把事情做得更好。FEX 原属于「Web 前端研发部」，现在核心成员都在百度云，致力于将前端技术做成技术产品。

FEX 致力于针对百度的各产品线在 Web复杂应用，全端应用，全端数据监控及评估和前端工程优化等方面提升开发效率及页面体验，是百度内部最具影响力的前端团队。

FEX 是百度最早的开源实践者，先后推出了 Tangram、UEditor、FIS、GMU、Chassis、KityMinder 等库和工具，现在主要产品有 aipage、sugar 和 amis。

百度EFE

https://efe.baidu.com/

百度EFE（Excellent FrontEnd）技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。

EFE技术体系现由多个遵循该技术体系的前端团队所组成。E(Excellent)代表我们追求卓越的技术态度。

EFE团队有非常多的开源项目，最著名的当属可视化图表库ECharts，在百度内部也是一个非常有影响力的团队。

百度EUX

http://eux.baidu.com/

百度企业产品用户体验中心，网站主页上披露的信息不多，顾名思义应该是负责百度企业产品的交互、视觉、前端，从团队照片来看小姐姐比例很高哦。

百度UXC

http://sux.baidu.com/

百度用户体验中心，于2016年5月17日成立，由原先的移动用户体验部（MUX）、搜索用户体验部（SUX）、糯米设计团队、凤巢设计团队、Hao123设计团队等在行业内具有影响力的组织合并而成，覆盖了百度85%以上的产品体验设计。

UXC品牌与设计日益繁荣的时代共鸣，与设计更具竞争力的未来对接。面对未知与未来，我们将继续推进艺术和科技的完美融合，确立我们独特的审美和影响力，坚守“简单极致”的设计理念，以用户为中心。我们的愿景是打造中国的用户体验标杆，成为令人尊敬的用户体验组织。

坦诚、互助、学习、坚持，这些优秀的品质要继续传承，为我们的使命保驾护航！

3 基础设施

==========

https://cloud.baidu.com

类似于阿里，百度也有智能云服务，针对前端领域提供了Serverless函数计算、CDN、人工智能、数据可视化、IoT可视化、安全防护、开发者服务例如AR平台和性能监控APM等等

• Serverless 函数计算CFC：提供基于事件机制，弹性、高可用、扩展性好、极速响应的云端无服务器计算能力。您可以仅关注业务逻辑的代码部分，无需关注和配置服务器资源，支持多种函数触发器，满足多样化的事件触发场景。

• CDN: 百度智能云CDN将内容发布到最接近用户的边缘节点，智能调度、就近分发，依靠高可用性和高稳定性，以及百度自建的1000+优质节点对、100T+带宽、单节点80G-160G、支持IPV6等高优特性，为用户提供与百度搜索、百度地图、百度网盘同质的百度CDN服务，让您的网站像百度搜索一样快！

• 人工智能：提供了完整了人工智能的解决能力，包含语音技术、自然语言、图像技术、人脸识别、视频技术、文字识别等等

• 数据可视化-Sugar：提供报表及数据大屏可视化服务，图表组件丰富，拖拽式编辑，支持下钻、联动等交互式数据分析。

• IoT可视化：无缝对接海量实时数据，零编程设计可视化仪表盘，完美支持手机/监控大屏展现，更有强大的定制和嵌入功能，让开发物联网可视化应用如此简单。

• 安全防护：百度云提供了DDos防护、防火墙、安全监测、渗透测试等服务，为你的应用保驾护航。

• 开发者服务：提供了百度效率云，AR平台（提供人脸特效、肢体特效、环境特效、3D识别渲染等等），应用性能管理服务APM等。

效率云从需求、开发到交付，涵盖研发全流程，通过项目管理平台iCafe、代码管理平台iCode和持续交付平台iPipe，全方位赋能研发，保障研发流程。

应用性能管理服务APM主要包含拨测与移动端监测两大功能，为您的APP与网站提供真实、持续的性能监测，一并发现APP端到网络层的各样问题，及时定位问题，有效提升用户体验！

4 前端应用层框架

=============

LAWAS-基于 Vue.js 的 PWA 解决方案

https://lavas.baidu.com/guide

Lavas 是一套基于 Vue 的 PWA 解决方案，能够帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题，对提升用户体验，用户留存率等有明显提升，且开发者无须过多的关注 PWA 开发本身。

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

但是PWA接入还是比较复杂的，涵盖了Web App Manifest、Service Worker、Notification API & Push API、App Shell & App Skeleton、HTTPS、SSR等等，所以接入成本还是比较高的。Lavas基于Vue.js，提供了一套完整的PWA解决方案，可以帮助开发者快速接入PWA，获得Native-Like的体验。

San-MVVM前端框架

San，是一个 MVVM 的组件框架。它体积小巧（< 15K），兼容性好（IE6），性能卓越，是一个可靠、可依赖的实现响应式用户界面的解决方案。

San 通过声明式的类 HTML 视图模板，在支持所有原生 HTML 的语法特性外，还支持了数据到视图的绑定指令、业务开发中最常使用的分支、循环指令等，在保持良好的易用性基础上，由框架完成基于字符串的模板解析，并构建出视图层的 节点关系树，通过高性能的视图引擎快速生成 UI 视图。

San相对于Vue、React等前端框架最大的优势是其体积小巧和性能卓越，可以从下图中看到，在做一些Table的行添加、替换、删除等操作，性能上有一定优势。但它的问题在于生态不足，相对于Vue、React这类成熟框架，缺乏其他诸如工程化、状态管理、测试相关等等工具。

5 UI组件库

ECharts-数据可视化组件库

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

pt这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-Lb1Uxl5R-1714972130118)]