2024年Web前端最全解密腾讯前端技术体系，前端-MVP模式详解

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

介绍完腾讯的组织架构后，下面重点介绍一下腾讯前端的技术团队情况：

AlloyTeam

腾讯 Web 前端团队 - Alloy Team 来自于腾讯 SNG(社交网络事业群)，源于 2008 年成立的腾讯 WebQQ 团队，于 2011 年 10.24 正式对公司外以< 腾讯 AlloyTeam> 为团队名称进行对外交流，AlloyTeam 的寓意是：像合金一样将各种技术，以及各个成员的聪明才智聚合在一起，从而产生更强的合金特性，未来我们也希望通过聚合业界的各大前端牛人，来共同推动 Web 前端技术在中国的发展！我们致力于 Web 前端技术的研究，热衷 HTML5、移动 Web 技术，用最酷的新技术开发各种有趣的开源项目。

Alloy Team在业界具有非常高的知名度，在开源社区也是非常活跃，一些热门的项目有：wepy - 小程序组件化框架，omi - 前端跨平台框架，weui - 微信风格UI组件库等等。

IVWeb

IVWEB团队是腾讯专业的前端团队，我们的口号是“卓越Web，全栈研发”。主要负责腾讯移动直播产品NOW直播 、花样直播、花样交友、手Q附近等腾讯直播平台研发工作。团队注重社区建设和对外交流分享，目前对外开源项目有：Feflow和Aegis。

除了开源项目以外，IVWEB团队还组织了TLC腾讯Live开发者大会，目前已经是第三年了，会议内容涵盖跨平台、小程序开发实践、服务端Node/Serverless、监控等等主题，在业内已经颇具影响力。

CDC

腾讯CDC，全称“腾讯用户研究与体验设计部（Customer Research & User Experience Design Center）”，2003年开始组建，正式成立于2006年5月，是腾讯公司级的设计团队，分布深圳、北京、成都三地，致力于提升腾讯产品的用户体验，探索互联网生态体验创新。

CDC经历过腾讯重大产品的体验设计，如QQ、QQ空间、QQ游戏、RTX 、QQ电脑管家、QQ浏览器、QQ音乐、腾讯视频、开放平台、企业QQ、腾讯网、财付通、腾讯微博、朋友网、腾讯地图、QQ拼音、SOSO、拍拍、腾讯WE大会、微众银行、米大师、企业云、安全云、AI LAB、微保、腾讯公益、数字广东等，以及更多概念产品的孵化。

TGideas

TGideas隶属于腾讯互动娱乐旗下，专注IP内容力构建与发展，是集产品内容开发，内容营销，IP商业化拓展，体验设计等能力为一体的中台设计团队。成员由资深创意人，内容创作者，视觉设计师，概念艺术家，技术工程师，内容营销策划，内容商务等成员组成。

这个团队在创意设计方面有非常深厚的功力，有不少关于图像、影视方面的创作。同时在技术方面，他们也开源了例如适用于移动端的Motion组件库、移动端Mocha-UI组件库、字体压缩Font Spide等等。

下图是腾讯前端技术体系的全景图，涵盖基础设施、服务层、跨平台框架、UI组件库、小程序以及工程化等方面：

3 基础设施

依托于腾讯云服务的能力，腾讯沉淀了强大的基础设施能力，这里只摘取了一小部分和前端技术体系相关的服务。

CDN作为静态资源分发已经得到广泛运用，对于用户体验的提升有极大的作用。腾讯云除了在全网有着快速、稳定、智能、安全的内容加速服务，还能够支持海外加速、全球应用加速等能力，对于全球化应用可以起到很好的帮助。

Serverless作为无服务器的技术服务现在已经成为了各大云厂商的标配，云函数 SCF 是腾讯云为企业和广大开发者们提供的无服务器执行环境，您无需购买和管理服务器，而只需使用平台支持的语言编写核心代码并设置代码运行的条件，代码即可在腾讯云基础设施上弹性、安全地运行。腾讯云完全管理底层计算资源，包括服务器 CPU、内存、网络和其他配置/资源维护、代码部署、弹性伸缩、负载均衡等。代码按需运行，空闲时不收费。使用云函数将帮您免除所有运维性操作，使您更加专注于核心业务的开发，实现快速上线和迭代，把握业务发展的黄金时期。

腾讯云还提供了关于视频直播、短视频、网络安全、大数据可视化平台、小程序云开发解决方案、测试服务、监控服务等等能力、极光推送等等能力。

其中，HTTPDns解析服务提供了稳定中立的第三方DNS解析服务，有效的解决了DNS劫持、DNS解析速度等问题，可以有效提升用户体验。

极光推送更是作为国内移动APP推送的主要解决方案，集成了iOS、Android的推送能力，解决了国内Android机型分散，缺乏统一的推送能力的问题，具备了每日数亿信息量的处理能力和极高的到达率。

4 小程序

=========

微信小程序

微信小程序在2017年推出，是一种不用下载就能使用的应用，已经构造了新的小程序开发环境和开发者生态。现在已经有超过150万的开发者加入到了小程序的开发，小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿。

微信小程序是一个真正现象级的平台型产品，改变了许多人使用App的方式。而且随着微信小程序的成功，各大互联网厂商都开始开发各自平台的小程序，同时手机厂商也联合起来开发快应用平台。

小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。

为什么要这么设计呢？前面提到的管控和安全，为了解决这些问题，我们需要阻止开发者使用一些浏览器提供的，诸如跳转页面、操作 DOM、动态执行脚本的开放性接口。

• 逻辑层：创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码

• 渲染层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程

同时，小程序的资源文件是下载到本地缓存进行加载、渲染、运行，类似于原生App中Hybrid离线包的方式，能够提供了非常好的性能体验。

wepy - 小程序组件化开发框架

原生小程序开发方式相对比较封闭，无法利用前端开发的完整体系生态，于是wepy就希望通过组件化、现代前端式的开发方式引入到小程序开发中。

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份， 是小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。

特性：

• 使用 Vue Observer 实现数据绑定

• 支持 Vue watch/computed/mixin 等特性

• 基于原生组件实现组件化开发

• 支持 TypeScript

小程序开发框架目前在业界已经百花齐放，上图就是一个对比，可以看到对于小程序多端开发的诉求是非常高的，wepy对于小程序类型支持略显不足，同时也没有移动端容器支持的能力，但其在流行程度和组件丰富度上还是占据优势。

westore - 微信小程序解决方案

https://github.com/Tencent/westore

受 Omi 框架 的启发，且专门为小程序开发的 JSON Diff 库，所以有了 westore 全局状态管理和跨页通讯框架让一切尽在掌握中，且受高性能 JSON Diff 库的利好，长列表滚动加载显示变得轻松可驾驭。总结下来有如下特性和优势:

• 和 Omi 同样简洁的 Store API

• 超小的代码尺寸(包括 json diff 共100多行)

• 尊重且顺从小程序的设计(其他转译库相当于反其道行)

• 增强 data 数据绑定，函数属性可直接绑定到 WXML

• this.update 和 setData 语法类似，但返回一个Promise

• this.update 比原生 setData 的性能更优，更加智能

• Westore 专为小程序插件开发定制了模板

• Westore 集成了腾讯云开发

解决了小程序的痛点:

• 使用 this.data 可以获取内部数据和属性值，但不要直接修改它们，应使用 setData 修改

• setData 编程体验不好，很多场景直接赋值更加直观方便

• setData 卡卡卡慢慢慢，JsCore 和 Webview 数据对象来回传浪费计算资源和内存资源

• 组件间通讯或跨页通讯会把程序搞得乱七八糟，变得极难维护和扩展

5 UI组件库

===========

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

WeUI提供了表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等方面的组件库，下图就是部分表单、列表、选择器的组件示例。通过这套UI组件库，可以在微信Web生态中打造出和微信原生体验一致的界面风格，可以保证用户的体验。

腾讯云图

腾讯云图（Tencent Cloud Visualization，TCV） 是一站式数据可视化展示平台，旨在帮助用户快速通过可视化图表展示海量数据，10 分钟零门槛打造出专业大屏数据展示。精心预设多种行业模板，极致展示数据魅力。采用拖拽式自由布局，无需编码，全图形化编辑，快速可视化制作。腾讯云图支持多种数据来源配置，支持数据实时同步更新，同时腾讯云图基于 WEB 页面渲染，可灵活投屏多种屏幕终端。

6 跨平台

=========

Hippy - 多端一体化方案

Hippy 作为前终端的一体化方案，其拥抱W3C标准，通过自绘和源生混合绘图组件复用以追求极致性能，并不断接入实现更多优质组件。其已经在浏览器上应用了数十个内外部业务，承载了数十亿计的用户访问量，拿下了公司内部2018年年度代码文化奖。

对于多端一体化的研发方式，业界一直在探索，例如React Native、Weex实现了通过JS编写、Native渲染很好的平衡了研发效率和渲染效率，但是依旧无法直接实现Web/Native的多端一体化，因此依旧需要寻找一个框架可以在多端实现跨平台、高性能、动态化发布的开发解决方案。

项⽬目架构 Hippy SDK 采⽤用三层设计，其中：

• JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；目前支持前端主流框架，例如React、Vue

• C++ 层：JavaScript运行时接口的封装；任务调度器包含延迟任务、优先级管理、事件循环等等；提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台；

• Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块；

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-Ah2pJdFe-1714849903214)]

[外链图片转存中…(img-iP3eDVXZ-1714849903215)]

[外链图片转存中…(img-onqDPdpo-1714849903216)]