当我使用浏览器中的查看页面源代码时，为什么某些网站的源代码看起来混乱

Question

我是Web开发的新手，遇到一个新网站时，我会从浏览器中查看其源代码，并尝试了解该网站的结构和所有内容。但是，当我查看某些网站的源代码时，它看起来确实很凌乱且难以学习。我想知道为什么源代码看起来像这样，如果出于某些安全目的，我只想知道那里有哪些工具可以在我们投入生产时将我们的源代码转换为混乱的不可读代码。

您可以看下面的图片来理解我的意思。

Answer 1

您正在寻找的是一个名为minification的过程。许多常见的前端Web开发工具（例如Bower或Grunt）将使您可以将文件压缩到具有相同输出所需的最小代码。

通常，这样做不是出于安全目的，而是出于性能的目的。行数越少，文件中的字节越少，从而使站点访问者的加载速度更快（网络上的数据更少）。

HTML和CSS只能做很多事情，但是大多数工具都可以将JavaScript缩小到几乎不可读的程度；变量名称将转换为单个字母，有时代码将被完全重写/优化。

请记住，最终用户始终可以看到前端副本 ，因此您不能完全阻止最终用户反编译正在执行的操作使用JavaScript，但如果有专有代码在起作用，许多公司还希望使访问者反编译其客户端代码变得“困难”。这是一个称为obfsucation的过程，并应用类似的逻辑；变量名称将被更改，逻辑将被更改等。

Answer 2

我相信您是指缩小。

缩小是一种在不影响浏览器处理代码的情况下删除不需要的数据的方法-例如代码注释和格式，删除未使用的代码，使用较短的变量和函数名称，等等。

这就是为什么代码最终看起来不可读的原因。

您也可以缩小HTML，CSS和JavaScript资源：

To minify HTML, try [HTMLMinifier](http://kangax.github.io/html-minifier/)
To minify CSS, try [CSSNano](https://cssnano.co/)
To minify JavaScript, try [JScompress](https://jscompress.com/)

Answer 3

源代码将被压缩，这就是为什么它在查看时如此笨拙。缩小表示消除了方括号，空格和分号。

坦率地说，由于您是Web开发的新手，因此无法查看该网站的源代码。学习基础知识的最佳方法是从w3schools弄清手（尽管您从这里学到了很多知识）。然后尝试使用浏览器开发人员工具来了解网站布局。