b站 前端构架_技术干货：哔哩哔哩（B站）功能框架图 ——以B站为例分析面对秋招必须要掌握的前后端...

本次夏令营知了堂项目经理以B站为原型，带着大家熟悉了软件的开发流程及还原了部分功能模块。现在就将B站功能架构图及前后端技术栈给大家。同时从以B站技术为例给大家分析作为应届毕业生，面对秋季校招时必须要掌握的核心技术知识模块。

图一 B站功能架构图

前端篇

前端在前几年的发展过程基本上是一个工程化的过程,框架和工程化工具层出不穷。很多人都在追逐框架的道路上越来越累。这两年，基本趋于平静，框架方面也形成了三足鼎立的局面，各个框架也在相互借鉴取长补短。那就回归本质，想要从事前端这个职业(或是长远发展)，还是要注重知识的系统性和基础的扎实性。

通过企业的用人需求可以看出，这两年对于前端人才的技术的要求变化还是挺大，就拿应届生(成都地区)来说相较于2017年之前，对于技术的要求都在不断升级，在要求技术栈全面性的同时更加看重基础的扎实程度。

下图是某公司的前端应届生的招聘要求，可以看出任职资格上基本涵盖了前端所需技术栈。

那么反推作为应届生的我们在简历上的准备，我们要基本符合企业用人需求，大概可以以下从2个方面去准备。

一：技术栈

1. HTML+CSS+JS+bootstrap 网页的制作(熟练)

2. ECMA5、ES6、JQ 、面向对象OOP、闭包等ES高级特性

3. Nodejs+数据库(mongoDB/mysql)服务端编程

4. Vue/react/angular至少熟悉一种、小程序

5. Webpack工程化项目搭建

6. Git、svn等协同开发

二：项目方面

作为应届生至少有2个项目能写在简历里面。并且写清楚项目功能、项目职责、所用技术栈。所以我们最好能动手分析并且用当下流行技术栈实现一个项目。

在这以还原B站(哔哩哔哩)为例，去分析一下它的功能和技术，B站作为一个大型弹幕视频网站，从功能而言，主要就是视频和弹幕，其中还有广告，会员，创作等功能，具体的功能组成可以参考(图一 B站功能架构图)。

在这我们从以下几个方面来分析，并结合目前互联网公司的项目所采用的技术架构来做一些讨论。

因为要完成一个项目，首先要了解及熟悉它的需求。

1、产品性质 B站是一个平台类产品(b2b2c)，b端对应up主，主要功能就是上传。c端对应观众，就是观看视频。

2、核心功能 视频，包含直播+社交，在这我们要了解的技术就是视频的上传， 需要涉及到：

(1) 前端文件上传，断点续传，

(2) 流媒体播放，本地缓存，

(3) 视频播放器的编写，

(4) 核心功能——弹幕等功能

3、性能/安全相对于B站这种大型视频网站，肯定需要考虑性能方面的优化，从以下几个点我们可以思考对于技术的选择。

(1) 项目框架本身：数据量特别大 而页面本身加载不卡顿，且首页打开时间应该在3秒之内，所以选择了目前流行的vue作为前端项目架构，它就是利用MVVM模式结合虚拟DOM等技术来解决数据渲染的性能相关问题。

(2) 多人同时弹幕操作，而视频或DOM不卡顿。这里会涉及到算法相关技术

(3) 同时在线人数高 同时播放引起的高并发的问题

当然这里面要完整实现B站相关前端功能，需要从最基础的网页布局到页面懒加载、模块化编程，前端数据分片加载(chunk)等技术的运用，在学习过程中我们应该明白我们的目的是什么，然后结合项目去实战，还有就是要学会分析项目的业务及功能，从而结合技术去综合锻炼。

后端篇

B站作为一个大型弹幕视频网站，从功能而言，主要就是视频和弹幕，其中还有广告，会员，创作等功能，本次我们主要从视频和弹幕的技术为例，来对目前互联网中项目架构的公用技术来做一些剖析。

视频模块B站视频技术体系图

视频上传其实是一个很复杂的技术，但是归根到底其实就是对于数据流的处理，从最基本的技术开始，其实就是IO技术和多线程技术的使用，服务器接收到数据流进行处理，在这个过程中通过多线程等技术来提升文件上传速度；

用户观看视频也是如此，是一个基于数据流下载的问题；但是在整个这个过程中，涉及到真正后台实现要考虑的问题就很多了，比如：

l 内容如何快速上传

l 如何存储海量内容

l 如何对海量内容进行处理

l 如何应对大量并发内容访问

l ......

以上其实也就是我们后台技术的深入以及一些架构演变，这些对应的内容也是很多互联网技术架构中要考虑的技术；

内容如何上传：会考虑到就近上传，中间会涉及到DNS等技术，上传的是需要进行格式转码，加密转码等，包括断点续传，会涉及到算法等相关技术；

海量内容的存储：在整个后台架构中就会涉及到数据库系统和文件系统的处理，包括使用我们分布式存储技术，从mongoDB到fastDFS，再到结合hadoop系统的使用；

海量内容的处理：包括CDN内容的分发，多服务器负载均衡再到搜索引擎elasticsearch的使用等，而大量并发内容的访问，从服务分离到缓存等的使用，以上这些技术都是我们在学习Java后台技术中会涉及的内容。

当然，有些技术是掌握，比如向mongoDB，fastDFS，elasticsearch等 ，是各大系统中都会使用的，应用起来也相对简单；有些技术是了解，因为需要真实生产环境大量数据的实践下掌握真正的调优配置以及原理，比如真正的hadoop大数据生态的使用，需要在工作中积累和更加的深入。

弹幕系统模块

B站的弹幕文化是B站区别于其他视频网站的重要特征，可以想象，对于热点视频，对于并发产生的弹幕的技术支撑也是一个很复杂的系统，B站自己有一套自己优化的弹幕系统，我们从后台技术的角度来理解，其实弹幕就是一个高并发实时消息系统，涉及到大量并发消息的有序接收后的实时推送，这块其实我们在进行Java后台学习过程中，会有类似的技术体系涉及：kafka消息队列，RabbitMQ消息中间件，都是实现高并发实时消息系统的一些重要技术。

所以我们以视频和弹幕为例，其实可以看到，Java后台作为一个稳定的生态，对于各种互联网中的应用场景都有一套通用的技术解决方案，这也是我们在学习过程中能够学习的；通过这些通用技术的学习，我们可以了解任何一家公司底层架构的一些原理，在以后实际工作中进一步提升和完善自己的技术体系。

作为应届毕业生，想要从事Java相关的工作，以下能力要求是大家必须达成的：

本次夏令营活动已结束，但是我们对大家的就业服务将一直持续……

如果你正面临着以下难题，可参与知了堂“天府人才内推”活动我们将竭力帮助你摆脱

1、技能达不到企业的需求——缺乏项目经验

2、简历撰写没有围绕求职岗位进行，项目经验无法支持求职岗位要求

3、缺乏面试技巧，无法和HR项目经理进行交流(答非所问)

4、缺乏简历投递的途径和渠道资源

5、每次都“挂”在面试题(没有人帮你梳理解题思路)