我采访了一位 Pornhub 工程师,聊了这些纯纯的话题
站在推动 Web 发展方面所起到的作用无可辩驳。从突破浏览器的视频能力限制,到利用 WebSocket 推送广告(防止被广告拦截),你必须不断想出各种聪明的办法,让自己处在 Web 技术创新的最前沿。
最近,我有幸采访了大型站 Pornhub 的一位 Web 开发工程师,了解了相关的开发技术、Web API 的改进,以及作为站开发工程师是一种怎样的体验。
注意:因为站这个行业竞争相当激烈,有一些问题他们不能回答我,这一点我表示理解。
站需要显示大量的图像内容,在开发过程中,你是否使用了大量的图片和视频占位符?开发过程中的内容体验和最终产品差距大吗?
实际上,在开发这个网站时我们并没有使用占位符!归根结底,代码和功能才是最重要的东西,至于界面什么的,到了这个时候我们已经很熟悉了。刚开始时有一点难度,但很快我们就适应了。
在开发过程中,你们是如何模拟直播视频流和第三方广告脚本的?它们都是很重要的资源。
播放器被分为两个组件,基本组件实现了核心功能,用于触发事件。开发是单独进行的,在进行集成时,我们需要用到第三方脚本和广告,这样可以尽早发现问题。对于一些特殊情况,我们会与广告主合作,通过手动的方式来触发一些随机事件。
一般页面上至少会有一个视频、一些 GIF 广告、一些直播预览和其他视频的缩略图。你是如何测定页面性能的?以及如何尽量提升页面的性能?
我们使用了一些测评系统。
播放器会将视屏播放的性能和用户播放情况发送给我们;
我们使用了第三方的 RUM 系统;
我们使用了 WebpageTest,这样就可以知道在某个时段发生了什么事情。
我假设播放器是前端的一个最重要也最复杂的功能。在视频前面插入广告、标记视频的关键部分、改变播放速度,等等,你是如何保持播放器的性能、功能和稳定性的?
我们有一个专门负责开发播放器的团队,他们的首要任务是持续地监控播放器的性能。我们用上了所有可用的工具:浏览器性能工具、WebpageTest、性能指标,等等。每次在发布更新之前,我们都会进行一轮严格的 QA 来保证稳定性和质量。
视频团队有多少专职开发人员?有多少前端开发人员?
我只能说,如果从整个产品的规模来看,我们的团队规模算是中等的。
在从事站开发期间,你看到前端领域经历了哪些发展?有哪些新的 Web API 给你带来很大的帮助?
我看到前端技术在很多方面都有进步。
从使用纯 CSS 到使用 LESS 和 Mixin,再到使用灵活的栅格系统和图像标签来适应不同的分辨率和屏幕大小;
jQuery 和 jQueryUI 逐渐淡出了我们的视线,我们回到了更加面向对象的纯 JavaScript 编程。一些框架在某些场景下也起到非常有趣的作用;
我们很喜欢新的 IntersectionObserver API,用它来加载图像非常高效;
我们还使用了画中画 API,让视频漂浮在页面上,不过现在还在争取用户对这个想法的反馈。
展望未来,有没有哪些 Web API 是你希望发生变化、改进的?或者出现新的 Web API?
我们希望这些 API 能够发生变化或改进:Beacon、WebRTC、Service Worker 和 Fetch。
Beacon:在 iOS 上有些问题,对 pageHide 事件支持得不太好;
Fetch:没有下载进度,也没有提供拦截请求的方式;
WebRTC:在进行直播时,如果分辨率不够大就会有所限制;
Service Worker:调用 navigator.serviceWorker.register 不会被 Service Worker 的 Fetch 事件处理器拦截到。
WebVR 在过去几年已经有所改进。目前来看,它的作用有多大?站会投入多大精力来支持 VR 内容?Pornhub 的 WebVR 有涉及触觉技术吗?
我们正在研究如何将 WebXR 应用在沉浸式空间场景中。作为最大的内容分发平台,我们有必要为用户提供让他们能够按照自己的方式来体验网站内容的机会。但我们还在探索,在使用这些新媒体时,内容和平台应该是什么样子。
我们是支持 VR、计算机视觉和虚拟主播的一个主要平台,我们将继续推动新技术的发展。
每个页面上都有不同类型的媒体和内容,对于桌面版或移动版来说,最需要考虑的东西是什么?
我们主要考虑操作系统和浏览器对功能方面的限制。比如,iOS 和 Android 在访问权限和功能方面就非常不一样。
一些 iOS 设备不允许在全屏时使用自定义播放器,它们会强制使用原生的 QuickTime 播放器。而 Android 则给了我们完全的控制权限,可以在全屏时使用我们的播发器。
另一个例子是 HLS 视频流,IE 和 Edge 对 HLS 视频流质量非常挑剔,所以我们需要控制视频的质量,否则在播放时就断断续续或者出现重影。
目前 Pornhub 可以支持的最低浏览器版本是哪个?现在还支持 IE 吗?
我们支持 IE 很长时间了,但最近不支持 IE 11 之前的版本。另外,我们也停止支持 Flash 播发器。我们现在主要支持 Chrome、Firefox 和 Safari。
可以分享一下 Pornhub 的技术栈吗?从服务器端到前端,你们使用了哪些库?
基本上,我们使用了这些东西:
Nginx;
PHP;
MySQL;
Memcached/Redis。
其他技术还包括 Varnish、ElasticSearch、NodeJS、Go 语言、Vertica。
前端方面,我们主要使用了纯 JavaScript。我们在逐步淘汰 jQuery,并开始使用框架,比如 Vue.js。
在外行看来,站的网页上一般充斥着各种视频缩略图、视频、直播和广告。从开发者的角度来看,是什么东西让一个站变得与众不同?
我们努力让每一个品牌都具备一定程度的独特性,不同的内容、界面体验和功能,还使用了很多不同的算法。
在面试 Pornhub 时,你是怎么想的?你有犹豫过吗?如果有,又是怎么消除这种情绪的?
我没有感到有什么不妥,毕竟这个挑战对我来说充满了吸引力。一想到有数百万人会用到我开发的东西,我就感到很兴奋。这个想法很快就得到了验证,当我开发的功能第一次上线时,我感到很自豪,我还叫我的朋友们也去看看!站永远都不会消亡,它为我们提供了稳定的工作来源。
与开发一般的网站相比,开发站可能会有所不同。当你告诉你的朋友、家人和熟人自己在开发站,你会觉得这是一种耻辱吗?你会犹豫告诉他们这些吗?
我为自己开发的东西感到自豪,我身边的人都知道,也很喜欢它们。这也成了我们的茶余饭后的谈资,非常有意思。
你也在其他地方开发过其他网站,在 Pornhub 的工作氛围有什么不同吗?
这里的氛围非常轻松友好,我不觉得跟在其他地方有什么不同。
作为前端开发人员,你需要与哪些团队密切接触?你们平常常用哪些交流方式?
我们需要与后端开发人员、QA 和产品经理打交道。大部分时间我们会跑到各自的工位上讨论问题,其次是使用聊天工具(Microsoft Teams),然后是电子邮件。
最后,作为一名在站工作的开发工程师,你还有什么想要分享的吗?
我非常高兴能够参与开发这个有如此大规模用户的产品。我们身处技术发展的最前沿,这让一切都变得有趣且颇具挑战性。
后记
这个采访很有启发性。我很惊讶他们在开发时居然没有使用图像。Pornhub 走在 Web 技术的最前沿——WebXR、WebRTC 和 Intersection Observer API。我也很高兴看到他们开始逐步淘汰 jQuery,因为现在的 Web API 很给力。
我很想从他那里挖到更过有关技术和性能的细节,我敢肯定他们的源代码里有很多值得一学的东西。换了是你,你会想问哪些问题?
网站开发中前端和后端分别是什么
通俗地说,前端工作用户可以直接看到,而后端开发工作主要在服务器端,用户无法直接看到。虽然前端开发和后端开发有很大的区别,但是为了更好的用户体验,他们的工作是相辅相成的。
网站前端指的是网站的页面制作或静态页面制作,是直接与用户交互的部分,包括你在浏览网页时接触到的所有视觉内容——从字体到颜色,以及下拉菜单和侧边栏。这些可视内容由浏览器解析、处理和呈现后呈现。
举个简单的例子,静态页面就像是固定布局的内容和图片。
之所以称之为静态,是因为这些内容是不能动态改变的,而动态改变则是指用户可以在后台进行上传、编辑、发布等操作来改变网页的内容。
简而言之,网站前端是指网站的页面制作,网站前端工作利用html、css、js等计算机语言技术制作网站页面的样式、布局、动态效果和数据交互,即为网站前端。
网站后端是指网站的服务器端技术或后端技术。
为了使服务器、应用程序和数据库能够相互交互,我们也说过静态页面的缺点是不能动态改变页面上的内容,实现一些代码逻辑,比如我们需要实现用户的注册和登录验证,或者上传图片和发布文章等,这都需要后端来实现。
后端工作主要是做平台部署、界面设计和功能实现。平台部署主要是配置服务器;接口设计主要针对不同的服务设计相应的功能接口。通常,一个平台有多个windows套接字。功能是实现具体的业务逻辑。
后端工程师需要有服务器端语言,如asp、java、jsp、php等,用于应用程序构建。采用Linux作为开发部署环境,网站后端技术还包括MySQL、sqlserver等数据库,用于存储后端数据。
现在我们明白了,网站的前端和后端工作是完全不同的。
(1) 呈现方式不同。
前端工作是创建网页,后端工作是结合数据库实现一些代码的功能逻辑。
简单来说,前端开发人员用一个按钮在应用程序中创建一个界面,然后按下按钮获取。后端开发人员编写代码,通过指出从数据库中提取哪些数据并传递回前端(最后显示在那里),使按钮工作。
(2)使用不同的技术
前端开发使用的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack、AngularJs、ReactJs、VueJs等技术。
以java为例,后端开发主要使用的技术包括但不限于Struts Spring MVC Hibernate HTTP协议Servlet Tomcat服务器。
APP开发前端和后端大PK
在APP开发过程中,经常会听到“前端”和“后端”两个词,二者都是APP开发中必不可少的两个角色。同属“代码大神”,二者有什么样的区别?分别负责什么样的工作内容?哪个更吃香、更重要呢?本期小犇就让前端和后端进行一次全面的大PK,结果您来评价。
一、含义
1、什么是前端
前端开发主要涉及网站和 APP,用户能够从APP 屏幕或浏览器上看到的东西。比如APP或者网页上的特效、布局、图片、视频,音频等内容。前端的工作内容就是将美工设计的效果图设计成APP和浏览器可以运行的页面,并配合后端做APP和网页的数据显示和交互等可视化方面的工作内容。
2、什么是后端
后端开发即“服务器端”开发,主要涉及软件系统“后端”的东西。比如,用于托管网站和APP 数据的服务器。后端是指用户看不见的东西,通常是与前端工程师进行数据交互及网站和APP数据的保存和读取,相对来说后端涉及到的逻辑代码比前端要多的多,后端考虑的是底层业务逻辑的实现,平台的稳定性与性能等。
二、技术PK
前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack,AngularJs,ReactJs,VueJs等技术。
后端开发从性质上讲后台开发编程语言的种类比较多,java,python,php,C#等等都可以作为后端开发语言。包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器等技术。
前端和后端技术栈比较
二、工作内容PK
前端工程师主要的工作职责分为三大部分,分别是传统的Web前端开发,移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端的开发任务;移动端开发则包括Android开发、iOS开发和各种小程序开发,在移动互联网迅速发展的带动下,移动端的开发任务量是比较大的,随着5G标准的落地,未来移动端的开发任务将得到进一步的拓展;大数据呈现则主要是基于已有的平台完成最终分析结果的呈现,呈现方式通常也有多种选择,比如大屏展示等。
工作内容与职责
后端工程师的主要职责也集中在三大部分,分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器;接口设计主要针对于不同行业进行相应的功能接口设计,通常一个平台有多套接口,就像卫星导航平台设有民用和两套接口一样;功能实现则是完成具体的业务逻辑实现。
三、知识技能PK
在知识技能方面,前端开发涉及到的内容包括Html、CSS、JavaScript、Android开发(采用Java或者kotlin)、iOS开发(采用OC或者Swift)、各种小程序开发技术(类Html),随着前端开发任务的不断拓展,前端开发后端化也是一个较为明显的趋势,比如Nodejs的应用。
所需技能
后端开发通常需要根据业务场景进行不同语言的选择,另外后端开发的重点在于算法设计、数据结构、性能优化等方面,在具体的功能实现部分可以采用Java、Python或者PHP等编程语言来实现。对于不少中小企业来说,后端开发通常都会采用开源的开发平台,这样就可以把精力集中在业务处理上,通常应用级程序员就可以解决问题,相应的开发成本也会有大幅度的下降。
有的人认为,前端很好学,后端不好学。也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣。后端入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码。前端入门简单,先易后难,能看到自己做出来的展示界面,有成就感。前端和后端两者工作的内容和负责的东西是完全的不同的。
如果美学和产品感觉方面的东西对你来说更重要,那么你可能会倾向于选择前端技术。如果你关注的是提高网站、应用程序或软件的效率和响应性,那么你的目标可能会是后端开发。前端设计师所做的很大一部分工作是让用户在移动或者 PC 屏幕上看到的东西看起来很棒,而且很容易使用。相反,后端开发人员只关心如何编写干净的代码。
前端和后端是一个共同体,就像鱼和水,谁也离不开谁,二者协同才能保证产品的的流畅稳定的使用。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。