Question

我最近对软件开发感兴趣。通过查看源代码并定期访问堆栈溢出，我已经非常好了。由于其可扩展性，我已经喜欢Web应用程序。因此，我想通过点击“查看来源”在网络浏览器中查看Facebook和Google的源代码。

有趣的是，在Google和Facebook上点击“查看来源”并不会显示HTML标记，而是显示整页缩小的Javascript（至少我认为是JS）。我附上了一个屏幕截图来显示我的意思。这是如何运作的？根据我在此过程中学到的知识，浏览器需要HTML才能显示内容。我的假设是大公司这样做是为了保护他们的来源。但是浏览器如何知道要显示什么？如果浏览器可以正确显示这些网站，从哪个源代码读取？

我试图谷歌这一点，但搜索术语，如“不能查看Facebook来源”或“不能查看谷歌来源”显示了一堆不相关的结果。

这是一个我没有听说过的框架吗？任何人都可以提供相关的解释。如果这些大公司正在使用这些新方法，我想将它们纳入我自己的武器库。

点击Google搜索结果页面上的“查看来源”时可见的屏幕截图：

Answer 1

您似乎不了解HTML和JavaScript的基础知识以及它们如何在浏览器中协同工作;从维基百科/ JavaScript

中考虑这个例子

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <script>
        document.getElementById('hellobutton').onclick = function() {
            alert('Hello world!');                     // Show a dialog
            var myTextNode = document.createTextNode('Some new words.');
            document.body.appendChild(myTextNode);     // Append "Some new words" to the page
        };
    </script>
  </body>
</html>

这是带有嵌入式JavaScript的HTML标记（您也可以嵌入CSS）。有些人出于各种原因做了什么，就是将JavaScript缩小到几乎所有使人类可读的东西都被删除的程度 - 当然Javascript运行时（浏览器）并不关心，无论是否能够轻松执行它它是否缩小。

HTML本身可以缩小，但你不能真正缩小它，除了删除换行符，空格并使它看起来像一行而不破坏HTML的语法/语义，就像你可以用JavaScript一样，因为HTML不有变数。

现在考虑维基百科中的相同示例，但缩小（JavaScript和HTML）

<!DOCTYPE html><html> <head> <title>Example</title> </head> <body> <button id="hellobutton">Hello</button> <script>document.getElementById("hellobutton").onclick=function(){alert("Hello world!");var e=document.createTextNode("Some new words.");document.body.appendChild(e)};</script> </body></html>

两者对浏览器同样有效。

其他信息

您始终可以看到向您显示网站所需的所有客户端代码。但最近，Web开发人员倾向于使用越来越多的JavaScript来为其站点添加交互性或动态生成HTML。在后一种情况下，您经常会发现“查看来源”页面根本没有任何期望script标记。您可以使用浏览器上的开发人员工具检查此动态生成的HTML，以及检查为该站点加载的各种JavaScript脚本。

请记住，开发人员可以并且经常会缩小他们的代码，这使得很难轻松查看JavaScript，无论您选择如何检查它。

如果您对像GitHub这样的地方的开源Web项目感兴趣，可以查看未经编辑的原始JavaScript。

Answer 2

您正在查看的一堆JavaScript被称为minification。不合格确实是缩小的副产品，但主要目的是提高装载速度。由于Facebook和谷歌是世界上流量最高的两个网站，因此他们必须采用一系列技术来更快地提供内容服务。

使用像Grunt或Gulp这样的任务运行器进行缩小，基本上做了一些事情：

将useful_name等变量更改为同等有效的短变量，例如e。
消除所有空白。
将许多功能重写为相同的较短功能。

例如：

var array = [];
for (var i = 0; i < 20; i++) {
  array[i] = i;
}

相当于：

for(var a=[i=0];++i<20;a[i]=i);

这明显占用更少的字节。

虽然缩小有助于混淆＆＃39;代码，它没有丝毫提高安全性，因为混淆可以完全解码。

除了缩小之外，使用Browserify，Brunch或webpack等捆绑器将多个不同的JavaScript或CSS文件合并为一个也是常见的做法。因此，要弄清楚代码实际执行的内容可能非常困难，尽管可以通过单击{} 来帮助文件中的<link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/script.js"></script> <div class="example"> </div> 相关来源的左下角。

其他常见的加载速度方法包括使用 Prettyprinting ，减少HTTP请求以及使用 Content Delivery Networks (CDNs) - 所有这些都是除了他们的缩小之外，上面做了。

Answer 3

通过使用来自javascript（Angular或Reactjs或Vue等）的编译源来对网页进行html呈现。在这种情况下使用dt[, diag(5)] # [,1] [,2] [,3] [,4] [,5] # [1,] 1 0 0 0 0 # [2,] 0 1 0 0 0 # [3,] 0 0 1 0 0 # [4,] 0 0 0 1 0 # [5,] 0 0 0 0 1没有帮助。您可以右键单击并选择dt。

Answer 4

从我学到的知识开始，浏览器需要HTML才能显示内容。

查看有关客户端和服务器端呈现的this post。

Google的首页实际上是完全服务器端呈现的（所有HTML都出现在＆＃34;查看源代码＆＃34;），它就是在页面正文之前有很多内联的Javascript所有这些都是小型的。

Facebook更多地使用JavaScript，大多数部分是用React（他们的前端框架）编写的，这就是为什么在检查Facebook的源代码时你几乎看不到任何简单的HTML。正如Jun所说，在Javascript完成所有操作后，您可以使用浏览器的检查员进行检查。

我的假设是大公司这样做是为了保护他们的来源。

不是真的，没有＆＃34;保护＆＃34;前端代码，它只是客户端渲染变得更加流行，每个人都缩小了源代码以节省带宽。如此大规模（Facebook和谷歌），每个保存的字节都很重要。它可能更难阅读，但实际上没有任何东西可以被隐藏或保护，就像你说的那样，浏览器需要渲染和执行代码客户端。

为什么我看不到谷歌和Facebook等大型网站的HTML源代码？

4 个答案: