后端产品经理需要了解的技术知识——网页相关知识

产品经理应该了解一些技术知识，才能更好地完成产品的方案设计和技术评估，提高需求实现的质量和效率。与后端产品经理的工作关系最为密切的技术知识，主要包括网页相关知识、数据库相关知识、系统间数据对接知识等。

1.网页的前端、后端技术

网页前端“三剑客”典型的网页一般是由HTML、CSS、JavaScript三种语言共同完成的，这三种语言常被称为网页前端“三剑客”。HTML 相当于一个文档，它通过标签把信息进行编排和呈现；CSS 可以对这些文档进行修饰、美化，提升视觉效果；JavaScript 实现了网页和用户的互动。如果把页面比作一扇门，那么HTML是门板，CSS是色泽或花纹，JavaScript就是门的把手。

（1）HTML——网页的主体HTML 是超文本标记语言。之所以被称为“超文本”，是因为它不仅仅适用于纯文字，还可以对图片、音乐等超出文本的内容进行标记。HTML并不是一种编程语言，而是一种标记语言，是一种协议和规范。HTML代码相当于一个带有规范的文档，文档中包含的是呈现给用户的信息，包括文字、图片、链接、声音等。HTML提供了一些标签，用标签标记的方法把想要传递给用户的信息进行有序的排列，并通过浏览器的解析而呈现给用户。HTML文件的格式如下。

我们可以看到，在HTML中有很多用“<；>；”符号括起来的标识，这就是标签。标签就是标识信息展示方式的规范。标签有开始和结束两部分，两者成对出现，用斜杠“/”表示结束，比如 “<；/head>；”。注意，少量HTML元素没有结束标签。

如上例所示，用顶层标签<；html>；和<；/html>；表示这是一个页面，页面的内容就放在<；html>；和<；/html>；之间。在“头”部标签<；head>；和<；/head>；之间存放页面的标题，标题可以有多个，所以标题标签可以有多组。在“主体”标签<；body>；和<；/body>；之间存放网页的主体内容（如我们看到的正文的文字、图片等）。由于在网页的主体中有不同类型的内容，因此<；body>；和<；/body>；之间往往夹杂很多不同的标签。段落是通过<；p>；标签进行定义的，示例如下。

链接是通过<；a>；标签进行定义的，结构就是<；ahref="url">；Link text<；/a>；，其中href表示单击链接后跳转的地址，示例如下。

（2）CSS——进行样式的修饰CSS的全称是“层叠CSS文件”，用于定义如何显示HTML元素或XML元素，比如指定文字的颜色、大小、字体，以及按钮或输入框的样式等，然后将其插入到HTML 网页的<；style>；标签中，这样展示出来的就是 CSS 设置的风格了。其主要作用就是对页面进行修饰，实现更好的视觉效果，让用户接收信息更加舒服自然。CSS属于浏览器解释型语言，可以直接由浏览器执行。CSS的代码结构举例如下。

（3）JavaScript——实现操作行为JavaScript（简写为 JS）是用来控制网页的行为效果的，即内容应该如何对事件做出反应。例如它可以设置鼠标悬停效果、在客户端验证表单、显示警告框、设置Cookie等。使用JavaScript代码可以为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。网页中所有对数据进行判断、处理的操作，以及向浏览者反馈信息的本地代码实现部分，均可以由 JavaScript（当然也有可能是其他的语言）实现。使用JavaScript 可以使网页更具交互性，给用户提供更令人兴奋的体验，同时减轻了服务器负担。通常，JavaScript 脚本也是通过嵌入 HTML 中来实现自身功能的，其通常位于<；script>；与<；/script>；标签之间，示例如下。

2.网页后端技术

HTML、CSS、JavaScript 三剑客完成了网页的视觉和交互层面的工作，那么谁来完成数据的逻辑处理和规则运算工作呢？这时候就需要后端开发语言，比如PHP、Java等。

PHP是一种通用解释型开源脚本语言，具有开发周期短、跨平台、安全、使用广泛等特点。PHP语言将程序嵌入到HTML文档中去执行，执行效率高。使用PHP语言能够更快地完成网页前端频繁而琐碎的更新，自如地应对各种业务需求的变化。因此，页面的结构调整、用户输入内容的基本验证、规则逻辑等，都适合使用PHP开发。

Java也是常用的后端语言，它可以有效地提高复用度、提升性能和吞吐能力、规避安全问题。Java语言的运行效率高，不容易犯错，适合大中项目。但Java语言也有缺点，比如其开发复杂、维护成本高等。在国内的大公司里，偏业务的程序员一般都会使用Java语言。当然还有其他语言可用于处理底层逻辑运算，比如ASP.NET、C++等语言。一个完整的网站通常由前端代码实现界面效果，由后端代码完成逻辑运算和数据处理。这种前后端分离的模式，确保网页性能稳定、快速且安全。

3.浏览器

3.1.浏览器的概念

网页是通过在浏览器上加载来呈现的。浏览器的主要功能是将用户选择的 Web资源呈现出来，其通过向Web服务器请求资源，并对资源进行解析，将资源中的内容显示在浏览器窗口中。浏览器的种类比较多，对规范的遵循方式并不一致，这也是Web页面兼容性问题的根源。浏览器的用户界面都差不多，常见的用户界面元素包括：地址栏、前进和后退按钮、书签选项、刷新和暂停按钮、主页按钮等。

2.浏览器的主要组件浏览器相当于一个应用程序，其展示的内容是由其访问的服务器提供的。浏览器支撑浏览功能的组件包括但不限于如下。

（1）用户界面：即用户看到的界面，主要包括地址栏、前进和后退按钮、书签等，也就是浏览器上除了用来显示所请求页面的主窗口之外的其他部分。

（2）渲染引擎：用来解析并渲染所请求的内容，即在浏览器窗口中显示所请求的内容，比如使用PDF查看器插件就能显示PDF文档。渲染引擎是每一个浏览器的核心部分，所以渲染引擎也称为浏览器内核。

（3）浏览器引擎：用来查询及操作渲染引擎的接口，这也是一个核心功能，相当于浏览器的动力装置。

（4）JavaScript解释器：用来解释并执行JavaScript代码的工具。

（5）数据存储：浏览器需要在硬盘中保存类似Cookie、缓存的各种数据，其是一种客户端存储技术。

（6）其他组件。

4. 相关的协议和概念

1.TCP/IP、HTTP协议浏览器能够获取并展示页面内容，是通过一些网络协议实现的。网络协议也就是网络标准规范，主要有TCP/IP协议、HTTP协议等。

（1）TCP/IP协议TCP/IP 协议，指传输控制协议/网际协议（TransmissionControl Protocol/Internet Protocol），是用于因特网（Internet）的通信协议，定义了电子设备（比如计算机）如何连入因特网，以及数据如何在它们之间传输的标准。浏览器展示网页内容，需要从服务器获取网页数据，这时候就需要从浏览器（相当于客户端）发起HTTP请求到服务端，而该请求是基于TCP/IP协议才能生效的。

（2）HTTP协议HTTP协议，即超文本传输协议（HyperText TransferProtocol），是互联网上应用最为广泛的一种网络协议。浏览器获得了服务器的数据信息之后，该数据信息可能是散乱无序的，如何规范地按照设计者的期望展示给用户呢？这就用到了HTTP协议。HTTP协议是在TCP/IP协议基础之上建立起来的，其初衷是为了提供一种发布和接收HTML页面的方法。

（3）工作过程当浏览器输入服务器的IP地址后，即开始通过TCP/IP协议向服务器发起HTTP请求，建立起与服务器的连接通道。该通道从服务器 IP 地址获取服务器页面数据，然后根据HTTP协议按照一定格式予以响应，显示页面。这就是通过浏览器访问页面的框架性的机制和流程。该过程如图2-2所示。

4.1IP地址、域名、网站名、URL、端口

（1）IP地址如果把计算机比作房间，那么 IP 地址就是房间的地址。IP 地址为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。例如“163.125.121.123”就是一个电脑的IP地址。服务器也有它的 IP 地址，其实际就是提供服务的那台主机的地址。因此访问服务器的IP地址本身就是访问提供服务的主机上的信息。

（2）域名为对应的 IP 地址指定的一个容易记住的名字，就是域名，例如“google.com”“baidu.com”“163.com”等就是域名。注意，如果域名前面加上“www”，就不再是域名了，而是网站名。域名在本质上是用于标识计算机的电子方位。

（3）网站名网站名是由“服务器名+域名”组成的，比如某网站的域名是“sitename.com”（此网站域名为虚构，与现实中的任何网站无关，下文同），因为想建立一个万维网的服务器，所以就有了网站名“www.sitename.com”。后来其又想运作邮箱服务器，所以也就有了邮箱网址“email.sitename.com”。

为了方便理解上面的概念，我们以网址“http：
//www.sitename.com/index.html”为例，其各部分的解释如下。

①“http：//”是协议，也就是 HTTP 超文本传输协议，即网页在网络上传输的协议。

②“www”是服务器名，代表这是一个万维网服务器。

③“sitename.com”是域名，用来定位网站的独一无二的名字。

④“www.sitename.com”是网站名，由“服务器名+域名”组成。

⑤ 后面的“/”是根目录。用户通过网站名找到服务器，然后就会访问服务器存放网页的根目录。

⑥“index.html”是根目录下的默认网页（大部分的默认网页都是index.html）。

(4)URL即统一资源定位符，也就是我们平时说的网址。URL的构成为“IP或域名+端口号+资源位置+参数+其他”。URL是网页元素的绝对路径，可以用来定位任何查得到的网页、多媒体文件等。互联网上的每个文件都有一个唯一的URL，它包含了文件的位置，以及浏览器对其处理的方式。比如页面上的每一张图片，都有它独一无二的URL，让你在浩瀚的数据世界中找到它。

5 Web服务器

1.服务器

（1）服务器的概念服务器就是指能对其他设备（客户端）提供某些服务的计算机系统。比如一个计算机对外提供FTP服务，那么它就相当于服务器（端）。基本的服务器就是一台高性能的实体电脑，或者是云端的虚拟机（可以通过互联网租用第三方的云端服务器，比如阿里云、腾讯云）。在网络环境下，根据服务器提供的服务类型不同，其可分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。服务器与客户端的连接示意图如图2-3所示。

（2）服务器的特质由于需要提供高可靠的服务，因此服务器在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面的要求较高，具体包括但不限于如下。

①硬件性能高：服务器在网络中通常以一对多的方式提供服务，需要承担多种应用请求，因此其硬件必须有能力保障服务质量，对内存、容量、运行速度等硬件性能的要求较高。

②稳定性和安全：服务器需要 24 小时不间断工作，要有可靠的数据备份机制、快速恢复故障的功能，以及数据保密措施。

③可扩展性：服务器需要有更广阔的扩展空间，从而随着服务对象的数量、服务业务种类的变化而进行扩展和个性化定制。

④与配套设施兼容作业：服务器常常要和附属硬件配合工作，比如交换机、负载均衡器、光缆等。

2.Web服务器

（1）Web服务器的概念不管什么网页资源，若想被远程计算机访问，都必须有一个与之对应的网络通信程序。当用户访问时，这个网络通信程序会读取Web资源数据，并把数据发送给来访者。Web服务器就是这样一个程序，它用于实现底层网络通信，处理HTTP协议。使用Web服务器，开发者只需要关注Web资源怎么编写，而不需要关心资源如何发送到客户端手中，从而极大地减轻了开发者的工作量。

（2）Web服务器的工作机制Web页面属于“B/S架构”，即“浏览器/服务器架构”。在这种场景下，客户端使用Web浏览器，通过网络连接到服务器上，使用HTTP协议发起请求，告诉服务器“我”现在需要得到哪个页面，然后把所有的请求交给Web服务器，之后Web服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容，再返回给客户端。客户端在接收到内容之后经过浏览器渲染解析，得到最终显示的效果。

（3）一对多和多对一的Web服务器如果一个网站必须对应一个Web服务器主机的话，那么很多大公司（比如腾讯）就要有数不尽的服务器。实际上，在一台Web服务器上可以搭建多个网站。

与之相反的还有一种情况，就是多个Web服务器为一个网站提供服务。大型网站的Web服务器都有均衡负载策略：虽然是一个IP，但对应的可能是多台内部服务器，由负载均衡策略决定每次访问落实到哪台服务器上。在这种情况下，用户所看到的IP地址，其实所对应的并不是一台Web服务器，而是一个负载均衡器，它负责分发外部请求到具体的Web服务器上，通过合理管理每天的网上数据流量，来减轻单个服务器上的负担，力求让网络访问者享受最佳的联网体验。负载均衡器将客户端请求分拨给不同的服务器的示意图如图2-4所示。

6 缓存、Cookie、Session

缓存

（1）什么是缓存缓存即数据交换的缓冲区，简单说就是临时存储数据的地方，其可以存储一些高频数据的副本。缓存无处不在，有浏览器端的缓存、服务器端的缓存、数据库的缓存等。浏览器会缓存它浏览过的资源，包括网页、图片等数据。由于CPU处理缓存数据的运行速度比内存数据快得多，所以缓存的存在可以提高响应速度，减小服务器压力。

（2）缓存与数据库的对比

①范畴不同。所有具备持久化存储能力的机制，甚至包括可以直接读写的本地文件，你都可以说它是“数据库”。所有保存中间的、额外的数据的机制，你都可以说它是“缓存”。

②结构不同。数据库的存储方式严格且多样，而缓存通常是简单的“key-value”结构（key是关键字，value是关键字的值）的数据。

③处理速度不同。数据库是存在低速设备上的，每次访问数据库，都要经过“读/取”（I/O）过程，即从磁盘调入内存的过程，该过程是耗时、耗性能的。而访问缓存的速度非常快。从数据结构层面来说：缓存使用了异步非阻塞，使用了动态字符串，并采用了跳跃表。

④范围对比。缓存中有的数据，数据库中一定有。反之则不成立。缓存中存储的是一些请

2.Cookie和Session倘若我们在电脑上使用账号、密码登录过某网站，那么下次进入该网站时通常会自动登录。这其实就是浏览器的Cookie和Session在起作用。这两者都是用来保存状态信息的，是为了解决HTTP无状态（即HTTP对前后请求没有任何识别能力）的问题而生的。比如用户登录一次，就会生成Session文件，保存到服务器中，并对应生成Session ID，保存到Cookie 文件中。Cookie文件是被保存在客户端中的，其可以在浏览器目录下被查询到。这样下次同一个用户在同一个用户端上登录时，就能够通过 Cookie文件中的Session ID，将登录资料调用出来。需要注意的是，如果浏览器禁用了Cookie，那么同时Session也会失效。

3.缓存、Cookie和Session三者的对比缓存与 Cookie、Session 的主要差别在于：缓存的内容比后两者更广泛、数量更大，比如会话信息、秒杀商品、热点新闻、热门商品等需要频繁查询的信息，都会保存在缓存中。从数据存储位置看，三者对比如表2-2所示。表2-2 缓存、Cookie、Session的存储位置对比

6 页面加载

1.页面加载的过程分析用户打开一个页面，页面框架中的那些不需要加载的内容会先呈现出来，之后浏览器会逐步拉取服务器上的数据。这就是为什么当用户打开一个页面时，刚开始页面上的部分内容为空白，需要等待一会才能够载入。用户等待的时间主要花费在下载网页元素上，这些网页元素包括 HTML、CSS、JavaScript、Flash、图片等内容。每增加一个元素，网页载入的时间就会增加。以浏览器加载HTML页面为例，我们来简单看一下页面加载的整个过程。

（1）用户输入网址（假设用户第一次访问该网站），浏览器向服务器发出请求，服务器返回HTML 文件。

（2）浏览器开始载入 HTML代码。这时发现代码中的<；head>；标签内含有一个<；link>；标签，引用了外部的 CSS 文件，于是浏览器又发出 CSS文件请求，让服务器返回这个 CSS文件，在获取该文件后，浏览器开始渲染页面。

（3）与此同时，浏览器继续载入HTML中的<；body>；标签部分的代码，发现其中有一个<；img>；标签引用了一张图片，于是向服务器发出请求。此时浏览器不会等到图片下载完毕，而会继续渲染后