b站前端构架_技术干货：哔哩哔哩（B站）功能框架图——以B站为例.pdfVIP

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等技术，上传的是需要进⾏格式转码，加密转码等，包括断点续传，会涉及到算法等 相关技术； 海量内容的存储：在整个后台架构中就会涉及到