技术产品经理的要求(需要了解的技术知识)-昊阳知识网

前言

1997 年，一名程序员当众羞辱刚回归苹果的乔布斯不懂技术，乔布斯当时给出的回答很经典。视频链接[1]。

乔布斯的回答（片段）：“当我们尝试去为苹果思考战略和愿景，都是从能为用户带来什么巨大利益出发，我们可以给用户带来什么，而不是先找一群工程师，大家坐下来，看看我们有什么吊炸天的技术，然后怎么把它卖出去。”

“产品经理要不要懂技术？”这个问题也是如此。懂不懂技术不是结果，最终目的是(期望)为用户带来收益。

我做了 5 年的一线程序研发和 4 年的技术管理工作，近期调岗到产品部门，技术的出身的背景在实际工作中给了我非常大的便利，同时也深刻感受到程序员和产品经理的思维模式、脑回路的截然不同。

这篇文章主要就是讲解我从程序员的角度去看待产品经理们可能需要知道的技术基础，由于对于产品经理的理解还在入门阶段，可能会有很多有失偏颇的地方，更多是从技术的角度去思考，描述不对的地方还请见谅。

程序员的“黑话”

曾经我以为，产品的日常黑话是：

我不管，反正你要实现！

做这么点东西要那么久吗，分分钟就能搞定吧！

要不你先做一版，先看看效果再说，不行再改。

我的需求很简单，照着这个做就行了，一模一样就好！

现实却是：

你们怎么做最简单？

哥，我有个需求，您看看能不能帮我加上去？

我这儿有个操作结果不对，是我的操作有问题吗？

技术的同事们会觉得我们的设计不考虑成本，逻辑漏洞百出，甚至是异想天开。产品经理可能会觉得被技术团队排斥或愚弄了。归根结底是因为沟通不顺畅。

在沟通的过程中，往往因为我们不懂专业术语和基本的技术知识，产生了太多的信息噪音。产生以下两种结果：

程序与产品经理期望的“南辕北辙”；系统的功能和业务“张冠李戴”；

最终导致需求多次变更，程序员们硬着头皮反复反工，甚至带着情绪去编码，这无疑会加深两者的矛盾。产品经理往往也不会得到很好的反馈，被客户和研发甚至测试人员骂。

“工欲善其事必先利其器”，在与研发沟通前，我们也应该了解程序员们的“黑话”，比如浏览器调试、HTTP、CSS、JSON、XML、Session、Docker、领域模型等等。

这一章我们主要讲解基础知识：浏览器及调试、HTTP、域名、URL、服务器。

3W 的由来

WWW(World Wide Web)的含义是“环球网”、“布满世界的蜘蛛网”，俗称“万维网”、3W、Web。

WWW 是一个基于超文本(Hypertext)方式的信息检索服务工具。它起源于 1989 年 3 月，由欧洲量子物理实验室 CERN(the European Laboratory for Particle Physics)所发展出来的主从结构分布式超媒体系统。

通过将位于全世界 Internet 网上不同地点的相关数据信息有机地编织在一起，WWW 提供这样一种友好的信息查询接口：用户仅需提出查询要求，而到什么地方查询及如何查询则由 WWW 自动完成。

WWW（万维网）的普及标志着人类进入互联网时代。

浏览器

百度百科是这样解释的：

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。

浏览器内核

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。JS 引擎：则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果，常见的如V8引擎。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

内核的分类

浏览器的内核的种类很多，常见的浏览器内核可以分为四种：Trident、Gecko、Blink、Webkit。

Trident (IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

代表：360极速浏览器、IE、傲游、世界之窗浏览器、猎豹安全浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

Gecko(firefox)

Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁。

WebKit(Safari)
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

Bink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Trident Blink双内核的模式。

Presto (Opera)

Presto 是挪威产浏览器 opera 的 “前任” 内核，最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了

浏览器缓存

浏览器的缓存就是为了解决网站服务器的吞吐量，减轻服务器的负担而出现的。当浏览器本地有缓存的情况下，就不会再从网站服务器上下载资料，从而达到减轻服务器的负载。缓存的逻辑如下：

当我们在网站建设的时候，需要不断更改网站的功能、样式、图片等来满足需求。当我们把改好的文件上传到网站空间替代的时候，本地刷新浏览器查看更改的相关功能，样式，图片时，却还是看到以前的没有更改的版本。这个时候就是本地浏览器缓存的影响，使得页面显示还没更改。这个时候就需要清除一下浏览器的缓存，使得浏览器重新从网站服务器上下载新的页面资料，达到页面效果一致性。

如何清除浏览器缓存？

弹出如下弹窗：

也可以使用万能快捷键：

Ctrl Shift Delete，这个快捷键在所有浏览器中都适用。

浏览器调试

在任何一项技术研发中调试都是必不可少的技能。掌握各种调试方法和技巧，必定能在工作中起到事半功倍的效果。如快速定位问题、降低故障概率、帮助分析逻辑错误等等。而前端开发的调试方法就是浏览器调试。

首先按下 F12，或者[菜单]-[更多工具]-[开发者工具]（快捷键 Ctrl Shift I，所有浏览器通用）开启调试工具。

可以选择你期望的手机类型，或自定义尺寸。并可以选择网络模式，

选择控制台可以看见前端页面的打印信息、警告信息、和 BUG（如果有）

小技巧

通过 chrome 截图Ctrl Shift P开启组合快捷键-搜索“截图“

截取手机网页的截图上述方法同样适用

HTTP

HTTP 的全称：Hyper Text Transfer Protocol（超文本传输协议）,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。

HTTP 是一个简单的请求-响应协议，是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。

HTTP 请求可以使用多种请求方法，具体见下表：

序号方法描述1GET请求指定的页面信息，并返回实体主体。2HEAD类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头。3POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。4PUT从客户端向服务器传送的数据取代指定的文档的内容。5DELETE请求服务器删除指定的页面。6CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。7OPTIONS允许客户端查看服务器的性能。8TRACE回显服务器收到的请求，主要用于测试或诊断。9PATCH是对 PUT 方法的补充，用来对已知资源进行局部更新。

响应头参考：https://www.runoob.com/http/http-header-fields.html

HTTP 状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。

HTTP 状态码分类

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)：

分类描述1**信息，服务器收到请求，需要请求者继续执行操作2**成功，操作被成功接收并处理3**重定向，需要进一步的操作以完成请求4**客户端错误，请求包含语法错误或无法完成请求5**服务器错误，服务器在处理请求的过程中发生了错误常见的 HTTP 状态码

下面是常见的 HTTP 状态码：

200 – 请求成功301 – 资源（网页等）被永久转移到其它 URL404 – 请求的资源（网页等）不存在500 – 内部服务器错误HTTP Content-type

Content-Type（内容类型），用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。

简单理解 Content-Type 就是告诉客户端实际返回的内容的内容类型。

语法格式：

Content-Type:text/html;charset=utf-8Content-Type:multipart/form-data;boundary=something常见的格式text/html ：HTML 格式text/xml ：XML 格式（忽略 xml 头所指定编码格式而默认采用 us-ascii 编码）image/jpeg ：jpg 图片格式application/xml：XML 数据格式（根据 xml 头指定的编码格式来编码）application/json：JSON 数据格式application/pdf：pdf 格式application/octet-stream ：二进制流数据（如常见的文件下载）application/x-www-form-urlencoded ：form 表单数据被编码为 key/value 格式发送到服务器（表单默认的提交数据的格式）multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式URL

URL 由三部分组成：资源类型、存放资源的主机域名、资源文件名。也可认为由 4 部分组成：协议、主机、端口、路径
URL 的一般语法格式为(带方括号[]的为可选项)：

protocol :// host.domain[:port] / path / [:parameters][?query]#fragment

protocol – 定义因特网服务的类型。最常见的类型是 httphost – 定义域主机（http 的默认主机是 www）domain – 定义因特网域名，比如 aeotrade.com:port – 定义主机上的端口号（http 的默认端口号是 80）path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。:parameters – 定义文档/资源的名称?query – 查询参数，用于给动态网页传递参数，可有多个参数，用&符号隔开，每个参数的名和值用=符号来隔开。fragment – 锚点域名

域名的层级结构如下:

主机名.次级域名.顶级域名.根域名

小知识，所有的域名后面都有一个.root 表示跟域名，

DNS

域名和网站之间是如何建立联系的呢？其实，网站就是由一系列网页组成，我们可以把整个网站看成是我们的一个文件夹，而各个网站就是里面的一个个文件。区别在于，网站的文件一般放在云端服务器上面，我们要访问这个文件，需要：

找到相应的云服务器从云服务器那里，下载网站文件让本地浏览器生成网页

本地电脑上使用的 DNS 服务器，一般选择自动：

服务器就是计算机的一种，只不过它比普通计算机运行更快、负载更高、更稳定。服务器可分为文件服务器、数据库服务器、应用程序服务器、WEB 服务器等，根据计算机的服务请求，并进行相应的处理，具备承担服务和保障服务的能力。

简单说服务器就是更高级的电脑，只不过电脑是发送请求的客户端，服务器是接受服务请求，并及时反馈的服务端。

以我们现在的电脑配置，市面上的绝大多数计算机可以成为一台微型服务器。

客户端与服务器

客户端就是产品或服务所指的终点。如果说服务器是：餐馆的厨房、工厂的仓库、图书馆的收藏库。那么客户端就是：餐馆的就餐区、工厂的门市、图书馆的借阅处。

B/S 与 C/S 架构

首先服务器就是 Server，也就是 S，B 表示 Browser，也就是浏览器，B/S 也就是浏览器 -> 服务器的架构。慧贸链的官网就是 B/S 架构。

同理 C/S 就很好理解了， C 表示客户端（Client），C/S 是客户端 -> 服务器的构架，我们未来的保管箱客户端离线版就是 C/S 架构。

C/S 架构的业务逻辑主要集中在客户端，“服务器”可以认为是数据库服务器，客户端的响应速度较快、网络通信量低。缺点是当业务需要升级时需要每台客户端升级。

B/S 架构的业务逻辑和数据操作都集中在服务器端，这里的“服务器”可以认为是既包含应用服务器，也包含数据服务器，对客户端进行统一，用户只需要安装一个浏览器（Browser）。客户端将不受到操作系统的限制，业务升级只需要升级服务器应用就行。缺点是增加了服务器端的负担，比如“秒杀”等场景服务器压力很大，同时如果服务器宕机，整个应用将无法使用。

HTML

HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

如：

<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>慧贸链（www.aeotrade.com）</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

这是一个最简单的 html 文件，在页面的显示如下：

html 文档的后缀名:.html .htm

我们简单对上面的 html 内容做一个解释:

<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元（meta）数据，如 – 定义网页编码格式为 utf-8。<title> 元素描述了文档的标题<body> 元素包含了可见的页面内容<h1> 元素定义一个大标题<p> 元素定义一个段落

上述的<>内容我们称呼为标签或者元素，标签有开始也会有结束，如：

个别标签可以不用结束符，直接在<>的末尾用/来代表结束，如：<br/>，<img/>，也可以加上结束标签，<img></img>

常用标签h1h2h3…h6//标题<ahref=”default.htm”>//超链接<p>//段落<br>//换行<body>//定义文档的主体,包含文档的所有内容<html>//告知浏览器其自身是一个HTML文档<span>//行内元素<div>//把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。<img>//图片<table>//表格<tr>//表格-行<td>//表格-列<iframesrc=”URL”></iframe>//内联框架

在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

世界第一个网页：http://info.cern.ch/[2]

XML

HTML 被设计用来显示数据，这个环节就需要传输和存储数据，XML 基于这个目的被设计出来。

XML 指可扩展标记语言（EXtensible Markup Language），是一种标记语言，被设计为传输和存储数据，其焦点是数据的内容。

XML 很类似 HTML，跟 HTML 不同的是 HTML 的标签都是预定义我们无法自定义标签，XML 标签没有被预定义。需要自行定义标签。

下面是张三写给李四的便签，存储为 XML：

<note><to>李四</to><from>张三</from><heading>便签</heading><body>我新增了一个需求??</body></note>

在 HTML 中使用的标签（以及 HTML 的结构）是预定义的。HTML 文档只使用在 HTML 标准中定义过的标签（比如 <p> 、<h1> 等等）。

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种描述 HTML 文档样式的语言，用来描述应该如何显示 HTML 元素。

简单理解：HTML 标签比喻成人的骨头、肉。人有了，没有衣服不好看。然后就穿衣服，就好看了。CSS 就是人的衣服，是视觉上能感受到的东西。