web网页制作代码源码(网页设计制作网站源代码) 收藏 0

网站后端开发源代码

站在推动 Web 发展方面发挥的作用是不可否认的。从克服浏览器视频功能的限制到使用 WebSockets 推送广告（以防止广告拦截广告），您必须不断想出巧妙的方法，才能让自己处于 Web 技术创新的前沿。

最近，我有幸采访了大型站Pornhub的一名Web开发工程师，了解了相关的开发技术，Web API的改进，以及成为一名站开发工程师的感受。

注意：由于站行业竞争激烈，有些问题他们无法回答我，这一点我理解。

站需要显示大量图片内容。在开发过程中，您是否使用了大量图片和视频占位符？开发过程中的内容体验与最终产品之间是否存在很大差距？

事实上，我们在开发这个网站时没有使用任何占位符！归根结底，代码和功能才是最重要的，至于界面，我们现在已经很熟悉了。一开始有点困难，但我们很快就习惯了。

在开发过程中，你们是如何模拟直播视频流和第三方广告脚本的？它们都是重要的资源。

播放器分为两个组件，基础组件实现核心功能，用于触发事件，开发分开进行，集成时需要用到第三方脚本和广告，这样可以尽早发现问题，对于一些特殊情况，我们会配合广告商手动触发一些随机事件。

典型网页至少包含一个视频、一些 GIF 广告、一些实时预览和其他视频的缩略图。如何衡量网页性能？如何最大程度地提高网页性能？

我们使用多种评估系统。

播放器会向我们发送视频播放性能和用户播放状态；

我们使用了第三方RUM系统；

我们使用 WebpageTest，以便能够看到特定时间发生的情况。

我认为播放器是前端最重要和最复杂的功能之一。如何通过在视频前插入广告、标记视频的关键部分、更改播放速度等来保持播放器的性能、功能和稳定性？

我们有一个专门负责播放器开发的团队，他们的首要任务是持续监控播放器的性能。我们使用所有可用的工具：浏览器性能工具、WebpageTest、性能指标等。每次发布之前，我们都会进行一轮严格的 QA，以确保稳定性和质量。

视频团队有多少全职开发人员？有多少前端开发人员？

如果按照整个产品的规模来算，我只能说我们的团队是中等规模。

在您从事站开发期间，您看到前端领域有哪些发展？哪些新的 Web API 对您有很大帮助？

我看到前端技术在很多方面都在进步。

从使用纯CSS到使用LESS和Mixin，再到使用灵活的网格系统和图片标签来适应不同的分辨率和屏幕尺寸；

jQuery、jQueryUI 逐渐淡出了我们的视线，回归到更加面向对象的纯 JavaScript 编程，一些框架在特定场景下也发挥着非常有趣的作用；

我们非常喜欢新的 IntersectionObserver API，它对于加载图像非常高效；

我们还使用画中画 API 让视频浮动在页面上，但我们仍在获取用户对这个想法的反馈。

展望未来，您希望看到哪些 Web API 有所改变、改进或新增？

我们预计这些 API 会发生变化或改进：Beacon、WebRTC、Service Worker 和 Fetch。

Beacon：在iOS上存在一些问题，pageHide事件支持不够好；

Fetch：没有下载进度，也无法拦截请求；

WebRTC：直播的时候，如果分辨率不够高，会受到一些限制；

服务工作线程：对 navigator.serviceWorker.register 的调用不会被服务工作线程的 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 处于网络技术的前沿——WebXR、WebRTC 和 Intersection Observer API。我也很高兴看到他们开始逐步淘汰 jQuery，因为当前的网络 API 非常棒。

我很想从他那里了解有关技术和性能的更多细节，我相信从他们的源代码中可以学到很多东西。你会问什么问题？

如何查看网页的HTML源代码？这里提供详细步骤

每个主要的互联网浏览器都允许用户查看任何网页的HTML（超文本标记语言）源代码。以下部分包含有关在每个主要浏览器中查看源代码的多种方法的信息。

查看网页的源代码时，服务器处理的信息和代码不会出现。例如，搜索引擎处理服务器上的信息，然后在网页上显示结果。换句话说，你可以查看组成结果页面的代码，但不能查看搜索引擎的源代码。

此规则适用于所有服务器端脚本、SSI（服务器端包含）和编程代码。因此，你无法查看搜索引擎、论坛、投票、聊天等中使用的脚本源代码。此外，从源代码复制信息可能会导致错误，或将你引导回从中复制信息的页面。

要在Google Chrome中查看网页的源代码，请使用以下任一方法。

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的键盘快捷键Ctrl+U。

方法二

右键单击网页的空白部分，然后从弹出菜单中选择“查看网页源代码”。

查看包含元素的源代码

1、打开Chrome并导航要查看其源代码的网页。

2、单击浏览器窗口右上角的设置图标。

3、从下拉菜单中，选择更多工具，然后选择开发者工具。

4、单击屏幕底部左上角的“元素”选项卡。

提示：在Chrome中，按F12或Ctrl+Shift+I也会打开交互式开发者工具。该工具提供了与源代码和CSS设置的更多交互，允许用户查看代码中的更改如何立即影响网页。

要在Mozilla Firefox中查看网页的源代码，请使用以下任一方法。

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从弹出菜单中选择“查看网页源代码”。

查看包含元素的源代码

1、打开Firefox并导航到要查看其源代码的网页。

2、单击屏幕右上角的菜单Firefox菜单图标。

3、在下拉菜单中选择“更多工具”，然后从展开的菜单中选择“Web开发者工具”。

4、单击屏幕底部部分左上角的“查看器”选项卡。

提示：在Firefox中，按F12或Ctrl+Shift+I也会打开交互式开发者工具。该工具提供与源代码和CSS设置的交互，允许用户实时查看代码中的更改如何影响网页。

查看网页源代码的一部分

1、突出显示网页中要查看源代码的部分。

2、在高亮显示的部分上单击鼠标右键，然后选择“查看选中部分源代码”。

提示：你可以使用Firebug插件查看和编辑页面的源代码，并通过浏览器实时查看更改。

要在Microsoft Edge中查看网页的源代码，请使用以下任一方法。

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从弹出菜单中选择“查看网页源代码”。

查看包含元素的源代码

1、打开Microsoft Edge并导航到要查看其源代码的网页。

2、单击屏幕右上角的设置图标。

3、将鼠标移到下拉菜单中的“更多工具”上，然后从展开的菜单中选择“开发人员工具”。

4、单击屏幕右侧窗口顶部的“元素”选项卡。

提示：在Microsoft Edge中，按F12或Ctrl+Shift+I也会显示交互式开发人员工具。该工具提供与源代码和CSS设置的交互，允许用户实时查看代码中的更改如何影响网页。

要在Microsoft Internet Explorer中查看网页的源代码，请使用以下任一方法。

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从弹出菜单中选择“查看源”。

查看包含元素的源代码

1、打开Internet Explorer并导航到要查看其源代码的网页。

2、单击右上角的工具Internet explorer工具图标

。

3、从下拉菜单中选择“F12开发人员工具”。

4、单击开发人员工具菜单左上角的“DOM资源管理器”选项卡。

提示：在Internet Explorer中，按F12键将显示DOM工具。该工具提供与源代码和CSS设置的交互，允许用户查看代码中的更改如何立即影响网页。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com