不敢相信,技术栈,居然被P站秒了

PornHub的FE，分享了P站前端一些实践，英文比较晦涩难懂，故翻译整理了一下，很多同学对前端技术不是很熟悉，故加入了简单解释，希望对大家理解相关技术有帮助。

提问：能分享一下，P站架构使用了哪些技术栈么？

答，除了大数据体系，都是比较常用的技术栈：

（1）核心架构采用的是Nginx，PHP，MySQL；

（2）使用Memcached和Reids来做缓存；

（3）使用Varnish来做页面缓存加速；

（4）使用ES来解决搜索问题；

（5）服务用的是go；

（6）大数据体系用的Vertica；

画外音：Vertica是一款基于列存储的，支持PB级别结构化数据存储的数据库。

（7）前端NodeJS也有使用；

提问：一个页面至少包含一个视频，一个GIF广告，一些直播视频的预览，一些视频的微缩图，如何监控页面性能，如何找到花时间最长的地方？

答：我们使用第三方RUM（Real User Monitoring）来监控页面性能。

由于我们是国际性的大站，通过RUM监控，能够检测到哪些地域流畅，哪些地域卡顿，哪些地域流量高，哪些地域没有流量。

画外音，页面性能监控，常见的有两种方式：

（1）模拟性能监控

主要通过外部代理，模拟真实用户行为（登陆，点击等），执行固定监控脚本，收集页面性能数据。这是国内主流页面性能监控方式。

（2）真实用户性能监控

在用户真实流量的过程中，加入了一些埋点，收集相关性能数据。这种方式的优缺点都很明显：优点，代表最真实的用户性能体验；缺点，对用户体验有影响。

至于找到页面性能瓶颈，我们使用最常见的页面抓包，看执行时间“瀑布流”。

提问：前端交互对P站来说尤为重要，你们如何看待前端技术的变化？哪些新的WebAPI最吸引你们？

答：我们在前端技术栈上做了很多改进。

CSS层面，从最初的纯CSS，到LESS，再到现在的Grid，用户在观看视频的场景很多，我们必须适应不同的分辨率和屏幕尺寸。

画外音：

LESS(Leaner Style Sheets)，是一门向后兼容的CSS扩展语言，它和CSS非常像，并对CSS增加了一些有用的扩展，例如：变量，混合(Mixins)，嵌套，函数，作用域，注释等等一些特性。

Grid，是目前最强大的CSS网格布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出不同的布局。对跨终端，多屏幕适配尤为有效。

JS层面，我们逐步淘汰了jQuery和jQuery UI，而使用Vanilla JS这款更加高效的JS框架。

画外音：Vanilla JS，世界上最轻量级的JS框架，没有之一。特点是快速、轻量、跨平台，可以用它快速构建JS应用程序。其官方网站是：

http://vanilla-js.com/ 

别的JS库都需要显示引用地址，例如：