b站前端构架_技术干货:哔哩哔哩(B站)功能框架图——以B站为例

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后台技术中会涉及的内容。
白介素1当然,有些技术是掌握,⽐如向mongoDB,fastDFS,elasticsearch等 ,是各⼤系统中都会使⽤的,应⽤起来也相对简单;有些技术是了解,因为需要真实⽣产环境⼤量数据的实践下掌握真正的调优配置以及原理,⽐如真正的hadoop⼤数据⽣态的使⽤,需要在⼯作中积累和更加的深⼊。
弹幕系统模块
B站的弹幕⽂化是B站区别于其他视频⽹站的重要特征,可以想象,对于热点视频,对于并发产⽣的弹幕的技术⽀撑也是⼀个很复杂的系统,B站⾃⼰有⼀套⾃⼰优化的弹幕系统,我们从后台技术的⾓度来理解,其实弹幕就是⼀个⾼并发实时消息系统,涉及到⼤量并发消息的有序接收后的实时推送,这块其实我们在进⾏Java后台学习过程中,会有类似的技术体系涉及:kafka消息队列,RabbitMQ消息中间件,都是实现⾼并发实时消息系统的⼀些重要技术。
所以我们以视频和弹幕为例,其实可以看到,Java后台作为⼀个稳定的⽣态,对于各种互联⽹中的应⽤场景都有⼀套通⽤的技术解决⽅案,这也是我们在学习过程中能够学习的;通过这些通⽤技术的学习,我们可以了解任何⼀家公司底层架构的⼀些原理,在以后实际⼯作中进⼀步提升和完善⾃⼰的技术体系。
作为应届毕业⽣,想要从事Java相关的⼯作,以下能⼒要求是⼤家必须达成的:
本次夏令营活动已结束,但是我们对⼤家的就业服务将⼀直持续……
如果你正⾯临着以下难题,可参与知了堂“天府⼈才内推”活动我们将竭⼒帮助你摆脱
1、技能达不到企业的需求——缺乏项⽬经验
2、简历撰写没有围绕求职岗位进⾏,项⽬经验⽆法⽀持求职岗位要求
3、缺乏⾯试技巧,⽆法和HR项⽬经理进⾏交流(答⾮所问)
4、缺乏简历投递的途径和渠道资源
5、每次都“挂”在⾯试题(没有⼈帮你梳理解题思路)

本文发布于:2024-09-23 22:24:40,感谢您对本站的认可!

本文链接:https://www.17tex.com/xueshu/1252.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:技术   视频   功能   涉及   弹幕   并发   内容   框架
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议