解密百度前端技术体系

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，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts应该是国内使用最为广泛的数据可视化组件库，其涵盖的范围也非常广泛，从最简单的折线图、柱状图，到高阶展示例如地理位置、3D图形等等，可谓组件库非常丰富应有尽有。

除去丰富的图形组件以外，ECharts能够接收多种数据格式，支持大数据量展示，针对移动端优化，支持数据图表交互性以及无障碍化访问等等。

Sugar-百度数据可视化平台

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

Sugar是一个数据可视化平台，包含数据源、组件库、拖拽式布局、炫酷大屏、数据分析和权限管控，提供整套数据可视化全流程的能力，可以用较低成本的实现企业数据可视化的述求。下图展示了Sugar的大屏能力：

6 百度智能小程序

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

类似于微信小程序，百度智能小程序也是依托于百度Web/APP的生态而产生的一种小程序。在渲染层，基于WebView/Native-View，逻辑层通过JSCore获取底层系统能力，同时也封装了web/native组件，也能够对接百度智能云端，提供基础云服务和AI服务。

在性能方面，只需第一次下载，同时提供预下载、预加载，本地客户端容器等能力，在体验流畅度上要远远好于传统H5。

百度智能小程序最大的亮点在于依托百度生态环境，提供了搜索、信息流、百家号、贴吧的流量，可以最大可能获取到用户资源。

7 工程化智能化

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

FIS-定制化前端工程化构建

http://fis.baidu.com/fis3/index.html

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

FIS涵盖了前端工程化开发的方方面面:

• 丰富的脚手架与组件仓库，自动监听、本地预览，让您的页面快速Run起来。

• 灵活运用开发工具提速开发，自动雪碧图、资源内嵌，文件校验、压缩、合并.

• 利用模块化提升可维护性，灵活适配开发框架

• 全面管理整站静态资源，轻松搞定性能优化

FIS3还支持插件能力，可以方便在编译、构建、打包等环节进行定制化，非常的灵活。不过，这套系统由于研发时间比较久远，当前前端工程化在社区已经有了一套基于Webpack、Babel等比较完整的实践体系，因此FIS3相对就比较难以推广了。

amis-Low Code中后台配置平台

amis前端低代码框架，通过JSON配置就能生成各种后台页面。目前在百度大量用于内部平台的前端开发，已有 100+ 部门使用，创建了 1.2w+ 页面。

amis支持以下能力：

• 通过JSON配置的方式来编写页面组件，并且提供可视化编辑器

• 数据的绑定与联动

• 支持多种Action类型

• 表单和CRUD页面生成能力

• 后台接口配置

最后

给大家分享一些关于HTML的面试题。

ss-process=image/format,png)

amis支持以下能力：

• 通过JSON配置的方式来编写页面组件，并且提供可视化编辑器

• 数据的绑定与联动

• 支持多种Action类型

• 表单和CRUD页面生成能力

• 后台接口配置

最后

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-k7cSYyFD-1718874235602)]
[外链图片转存中…(img-10IrNw9A-1718874235603)]