内容简介
本书专为非技术背景的互联网行业从业者和想了解互联网技术的人员量身定制，分门别类地整理了Web前端技术、客户端技术、开发技术、网络技术等章节，基本涵盖了当前互联网行业的所有垂直技术领域。为了让读者能够更好地理解技术的精髓，几乎每篇文章都配以现实生活中通俗易懂的例子，用于类比复杂的互联网技术原理。
作者简介
陈宇：电子科技大学硕士，高级工程师，就职于腾讯成都分公司，任安卓终端开发工程师。主导多个业务模块的架构设计及项目管理工作。
巩晓波：毕业于电子科技大学计算机专业，现任腾讯高级工程师，从事前端开发、后台开发和移动端开发工作。
高杨：电子科技大学计算机专业硕士，现任腾讯高级工程师，主要从事移动端的研发工作。
杨俊勇：毕业于北京邮电大学，现任腾讯高级工程师，从事后台开发和移动端开发工作。
关磊：毕业于哈尔滨工业大学，就职于腾讯成都分公司，专家工程师，从事前端、后台、移动端开发和技术管理工作。
目录
1 Web 前端技术
AJAX 技术的妙用
DOM 是什么
静态网页与动态网页
分析URL 的结构
网页基础知识：表单
H 5应用程序缓存简介
Chrome 里的冷知识
JS DDoS 攻击的原理与防御
UA 的故事
URL 编码
简单理解HTML、CSS 和
跨域与同源
Cookie 和广告联盟
HTTP Header 是什么
简单理解HTTP 的GET 和POST
WebSocket 是什么
“直出”是什么
互联网的黄金矿工：爬虫
简单理解单页Web 应用
锚点与网页内跳转的实现
前端如何适配手机屏幕
简单理解“盗链”与“反盗链”
广告过滤机制科普
2 客户端技术
“骗人”的动画
细说Android 应用的“续命大法”
Hybrid APP
手机传感器知多少
定位终端设备位置的方法有哪些
客户端推送实现方式
为什么美颜APP 可以美颜
听歌识曲的基本原理
朋友圈中的图片缓存系统
应用的生命周期
3 开发技术
“空指针”是什么
程序中的“越界”是什么
编程五分钟，命名两小时
开发动画需要多少工作量
耦合与解耦
栈与队列
为什么有些Bug 不能改
加载等待的艺术
并行计算
简单了解进程间通信
“编不过”是怎么回事
程序“挂了”是怎么回事
简单说说操作系统
什么是代码混淆
程序员遇到Bug 时会做些什么
应用“续命”大法之异常捕获
搜索引擎的基石：倒排索引
简单理解面向对象
简单理解重构
流水线技术
多线程是什么
复用的艺术：线程池
4 网络技术
网络基础之协议栈
互联网是如何提供服务的
IP 地址枯竭的后悔药：网络地址转换
PING 和网关
端口二三话
TCP 与UDP
TCP 凭什么说自己可靠
谈谈UDP 的可靠性
什么是反向代理
CDN 是什么
断点续传的奥义
推送服务的核心：长连接
HTTPS 技术简介
讲讲代理服务器
聊聊Wi-Fi 技术
就近接入：怎样让用户找到近的机房
Socket 简介
什么是HTTP 跳转
神奇的Hosts 文件
释放你的小水管：说说下载速度那些事儿
下载劫持简介
VPN 简介
5 网络安全与后端技术
密码存储之开发指南
密码存储指南
Web 安全之SQL 语句
Web 安全之XSS
Web 安全之CSRF
ARP 欺骗的原理
DDoS 的原理
Android 应用二次打包
那些年中过的病毒
家庭Wi-Fi 防“蹭网”指南
后台服务之RPC 框架
后台服务之RESTful API
Session 是用来做什么的
后台服务之流量控制
后台服务如何生成一ID
6 名词解释
抽象、封装、类、实例和对象
SDK、API 和架构
控件、组件和框架
二进制文件
脚本
内存泄漏
中间件
打底数据与云端控制
变量与函数
散列表
钩子
配置文件
算法复杂度
模板
RGB 通识
应用程序、进程和线程
视频文件与编解码标准
同步、异步和回调
时间戳、MD 和GUID
栈的含义
JSON
理解OpenGL
引擎
开源许可证
渲染
WLAN、Wi-Fi 与IEEE
位图与矢量图
接口
线程池、对象池和连接池
向前兼容和向后兼容
游戏引擎
7 大前端
React：流行的前端技术
React Native：专治急性子的产品经理
一个React Native 的应用是什么样的
什么样的业务适合用React Native 来改造
终端开发新思路：Flutter
一窥微信小程序的技术思路
如何自己开发小程序
8 人工智能
如何通俗地理解机器学习
人工智能从业者：专家、工程师和调参程序员
TensorFlow：几行代码写一个神经网络的时代来了
人工智能里的套话该怎么理解
一个简单的机器学习模型
什么是神经网络
神经网络的数据处理
为什么你的神经网络像个傻瓜
懂你的推荐算法：你应该懂的一些知识
9 沟通
程序员的分工
如何正确地提需求
程序员想要的需求文档
为什么项目会延期
目标设定的两种方法
你只是在为自己工作
为什么产品经理经常焦虑
精益创业的作用
前言
写作缘起
互联网产品经理需要懂技术吗？这是一个引起广泛讨论的问题。有人觉得产品经理每天跟程序员打交道，在需求制订和实施的过程中，少不了对相关技术实现细节进行讨论，所以产品经理必须要懂技术。也有人认为，产品经理作为产品负责人，只需要负责把控产品风险和进度，技术的事情就交给技术负责人吧！
实际上，作为程序员，在跟一些产品经理打交道的过程中，作者不止一次感慨：如果他们能有些基本的技术概念，确实可以省下不少的沟通成本。当然，作者也见过对技术细节过分拘泥的产品经理，花了过多时间探讨方案的技术可行性，而忽略了对产品体验的打磨。
通用的技术理解能力，是每一个互联网从业人员的基本素养。它包括但不限于：认识一些常用的计算机名词，如“内存操作系统”“请求”“响应”等；理解一些常见的互联网技术套路，如“延迟加载”“多线程加速”。除此之外，了解一些互联网领域的前沿技术方向，对于开阔视野也很有帮助。
懂技术和不懂技术并不像整数1和0那样界限分明，它们更像一个区间的两个端点，中间的界限需要我们来把握。在这一点上，大家完全可以“功利”一点。在互联网技术里，有 80%的概念是简单、基本、常用的，掌握这些只需要花我们 20%的时间。余下 20%的概念属于每个技术领域的实现细节，要掌握这些可能会花掉我们 80%的时间，大可以先放下它们，专攻能为我们所用的概念。
产品经理有了这些底子，当工作中真正需要用到某一项技术的时候，再去网上了解它的来龙去脉，也会事半功倍。
也正是基于这样的想法，作者开始创作本书。自始至终，作者给自己定的目标就是“接地气”。本书不是晦涩难懂的教科书，相反，作者试图以科普的形式配合通俗易懂的语言和适当的例子，给产品经理讲他们能看得懂的技术。同时，作为一线程序员，作者还会结合实际工作经验，穿插一些在实践中遇到的技术问题辅助讲解。技术本身是相通的，希望读者在理解技术的过程中，能找到它要解决的本质问题，多思考采用该技术的原因。
阅读建议
本书介绍了常见的互联网技术，基本涵盖了完成一个互联网产品需要的各个环节。除此之外，作者把平时工作中关于产品技术及管理的一些思考单独汇成一章（第9章“沟通”），希望能对读者有所启发。
详细的章节介绍如下。
第1章 讲解Web前端技术。Web是大家最熟悉的互联网形态，通过阅读本章，读者可以快速上手。
第2章 讲解客户端技术。随着移动互联网的兴起，移动客户端应用成为主流。本章讲解开发一个APP时会用到的技术。
第3章 讲解开发技术，包括简单的编程语言、编程时用到的一些“套路”，以及一些计算机基础知识。
第4章 讲解网络技术。互联网是建立在信息传输的基础上的，本章讲解整个传输的过程，以及传输中需要解决的问题。
第5章 讲解网络安全和后端技术。本章介绍了黑客们常用的攻击手段，以及程序员的应对方法。
第6章 讲解互联网技术领域的一些专业名词。
第7章 讲解前终端一体化技术（大前端）。后移动互联网时代，随着React Native的普及及小程序的流行，前端和终端成了一家人，多端运行成了趋势。
第8章 讲解人工智能的基本原理。人工智能代表未来，各大公司纷纷“All in”，产品经理也要紧跟时代潮流。
第9章 讲解产品经理平时工作时与程序员沟通的方法，以及作者平时工作中的一些感悟。
致谢
我是一名程序员，在一次和产品经理长时间的“PK”后，萌生了给产品经理讲技术的想法。当时的主要诉求是，希望通过我作为程序员的技术积累，给产品经理普及一些基本的技术概念，使大家在沟通之前，能有一些基本的共识，以提高效率。但是，一来我本人技术方向比较单一，二来业余时间实在有限，仅凭一人之力难以付诸实践。于是我找到组里的几位同事，拉他们入伙。一顿火锅后，我们达成了共识：先从一个公众号做起。
公众号的名字也叫“给产品经理讲技术”。根据大家的技术特长，我们几个做了简单的分工。杨俊勇平时做后台工作较多，他负责网络安全和后端技术部分；陈宇是终端领域专家，他负责客户端和开发技术部分；关磊平时喜欢思考人生，他负责名词解释和沟通部分；高杨负责 Web 前端和网络技术部分；我负责大前端和人工智能部分。我们5个人给自己定了个小目标：在一年中坚持每天发一篇技术科普文章。万万没想到，公众号获得了很多产品经理的认可，后来陆续得到了5万多名关注者。期间也有一些“大V”自发帮忙宣传，让我们觉得这是一件越来越有意义的事情。
写公众号这件事是我们工作之余来做的，几个人都是理科生，一个句子、一个措辞都要斟酌很久，也因此耗费了大量的业余时间。感谢大家的坚持和努力！在此，特别感谢作者项目组的领导和同事们给予的鼓励和支持。
最后，由衷地感谢电子工业出版社编辑郑柳洁和鞠燕纯对本书的耐心修改，是你们让本书更精彩。
读者反馈
如果您有好的意见和建议，请在微信公众号“给产品经理讲技术”上及时反馈给我们。
巩晓波
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
● 提交勘误： 您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
● 交流互动： 在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。
1 Web前端技术
AJAX技术的妙用
我们在搜索引擎的搜索框中输入一个关键词，如图1-1所示，会出现很多联想词。这些通过联想预测的词是如何从后台传输到当前浏览的网页，并在输入框下面显示的呢？
图1-1
在地图类应用中随意地放大缩小页面时，整个网页没有刷新，那么页面中新出现的许多街道细节是怎么从后台传输过来的呢？网页没有刷新是指一个空网页渲染到屏幕上，单击网页中的一个链接后，又打开了一个新的网页。整个网页有没有反复刷新对用户来说体验截然不同。例如，作者刚输入“除”字，网页就刷新了一遍，输入“夕”字后，网页又“白”了一下，然后整个页面重新显示出来，这种体验对大多数人来说都是不可接受的。
注意上面例子中的两个现象：
（1）网页没有刷新。
（2）本地网页从后台获取了新数据（联想词和街道细节不会预先下发，因为后台也不知道用户的后续操作是什么）。
其实，这种只让部分页面刷新的技术叫作AJAX（汉语读音为“阿贾克斯”或“额寨克思”），它是“Asynchronous JavaScript And XML”的首字母缩写，翻译为“异步JavaScript和XML”。JavaScript和XML都是成熟的语言和技术标准，已经存在了很多年，这项技术组合直到被谷歌在Google Map项目上应用，才展示了新的威力。它主要解决的就是不用刷新网页，就能和后台交互获取数据，并应用于当前网页的问题。
来看看作者网络抓包的结果。这个结果是作者在搜索框中输入“除夕”两个字后，在一次网络请求中返回的。这个结果就对应于下拉列表中的联想词（该字符串被在线转成了可视化的JSON格式）。
{
“s”:[
“除夕的来历”
“除夕不放假”
“除夕的英文”
“春节”
]
}
AJAX具备的这两项能力怎么实现呢？
（1）发起网络请求。发起网络请求的能力由浏览器的内置能力提供，所有的浏览器都提供了XmlHttpRequest对象，它可以由网页调用，用来连接一个特定的地址。
（2）无须刷新，可动态操作网页。我们先引入术语 DOM（Document Object Model，文档对象模型）。读者可以将一个网页想象成一个人，一个人的运动系统由骨骼和肌肉组成，DOM相当于骨骼，定义了一个网页的结构，以下代码对应了一个最简单的网页的骨骼和框架。
可以看到，html、body、h1、p等标签构成了这个网页的DOM模型，而JavaScript就是为操作DOM而存在的，可以动态地操作整个网页。
有了这些基础知识，作者再来梳理整个“百度联想词”的工作过程。首先，在百度搜索引擎中输入“除夕”，这时利用XmlHttpRequest对象发起了对百度后台的一次请求。随后，这次请求返回了若干个联想词的JSON串，这时百度网页中的JavaScript程序开始进行处理，解析JSON串，并将解析后的字符串插入网页的DOM结构中。页面经过重新渲染，在当前页面上展示了一个下拉列表框，并填入刚才从后台得到的联想词。
总结：AJAX是一项用于异步拉取数据并展示在当前页面的技术，这对需要延迟加载数据和触发式加载数据的页面有很大益处。绝大多数网页为了加速响应，都会用到这项技术。例如，访问一个内容型网站时，这个网站的后台会把当前页面的基本框架“吐回”浏览器，这样一个网页的基本样子就有了；又如，在一些视频网站上，所有的电影名、演员名都是立刻显示的，电影的海报是框架加载完成之后，再发起AJAX 请求拉取的。采用这样的异步加载模式可以在最大程度上缓解用户等待时的焦虑感。
DOM是什么
DOM（文档对象模型）是Web前端里最基础、最常用的一个模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。HTML语言是由很多标签组成的，代码如下所示：
上述代码中，head和body是标签。这些标签不是随意摆放的，它们有自己的规则。首先，它们是嵌套的，一层套一层，比如html套 body,body又套h1。其次，每一层可以同时存在很多标签，比如 head 和 body 属于同一层，它们被外面的 html套着。这样的结构很像计算机里的文件夹。例如，“我的电脑”是最外层，里面套着C、D、E、F盘，每个盘里又有很多文件夹，文件夹里又有文件夹，逐个打开后才能看到具体的文件。
为什么要按照这种结构来组织呢？目的其实是方便解析和查询。解析的时候，从外向里循序渐进，好比按照图纸盖房子，先盖围墙，再盖走廊，最后才盖卧室。查询的时候，会遵循一条明确的路线，例如“D盘/文化交流/影视作品/给产品经理讲技术.avi”，一层一层地缩小范围，查找效率会非常高。所以，浏览器在解析HTML文档时，会把每个标签抽象成代码里的对象，按照这种层次分明的结构组织，这就是DOM。
如图1-2所示为数据结构里典型的“树”结构。程序员经常说的DOM树，其实就是这个意思。浏览器在解析 HTML 时，会在它的内部构建这样一棵 DOM 树，然后按照这棵树上的层次顺序解析每个标签。解析完成后，用户就看到了网页的内容。
图1-2
浏览器解析完HTML，就要开始解析HTML里的JavaScript代码。程序员可以通过 JavaScript代码实现一些动态的网页效果。例如，从服务器拉取一段数据来展示，或做一个酷炫的动画效果，都要用到DOM。
举个简单的例子（代码如下所示），想要在网页里显示一行字“this is from javascript”，首先要找到那个可以显示文字的标签。这是非常容易的，因为浏览器已经把DOM都交给JavaScript了。DOM里的对象，正好就是JavaScript语言里的对象。JavaScript可以通过下面的方法修改DOM树上的标签对象。
随着对前端知识学习的深入，读者会发现JavaScript操纵DOM是非常普遍的事情。例如，很多网页一开始加载出来的只是个架子，只显示出一个loading图标的转圈动画，只有等JavaScript从服务器上请求到真正的数据后操纵DOM来显示数据，才能看到内容，这就是典型的异步加载 。以HTML 5的游戏为例，里面的人物要随着手指或鼠标运动，普遍的做法是通过JavaScript操纵DOM改变元素的位置来实现。可以说，DOM使得JavaScript在前端世界里几乎无所不能。
但是，有一点要注意：操纵DOM本身是一件效率非常低的事情。一个网页往往很复杂，浏览器构造出来的DOM树往往很庞大，有的甚至有几千个节点。在这么庞大的一棵树上频繁地改动，对浏览器（尤其是移动浏览器）来说是不小的工作量，稍不注意就会出现卡顿。
于是，有人发明了一种便捷的方法，叫作虚拟DOM 。简单来说，就是用JavaScript模拟了一棵简单的DOM树，然后在这上面演练所有的DOM操作，等时机成熟时再把虚拟DOM树和真正的浏览器的DOM树做对比，算出差异，一次性地改变真正的DOM树。这两个步骤从整体上大大提高了JavaScript操纵DOM树的效率。
静态网页与动态网页
静态网页、动态网页都是网页，都是在浏览器上用HTML展示出来的页面。HTML是网页的基础结构，网页如何排版、每个元素在什么位置，都是由它来描述的。
读者每天看到的网页，无论是新闻网站，还是在线编辑、下载网站等，大部分都是动态网页，其中掺杂了少数的静态网页（例如，展示一个公司的电话号码、logo及地址的网页一般是静态网页）。
静态网页和动态网页的核心区别是后台是否有数据库的支撑，也可以简单地描述为网页上展示的内容是否要变化，是因人而异地显示不同的内容（例如QQ空间），还是根据时间线呈现内容的变化（例如新闻客户端），或是一直保持不变（例如一些国企或政府网站）。
静态网页无须经过后台程序的处理。例如，我们将一个.txt文件的扩展名改为.html，放到服务器中，如果有请求来到服务器，服务器会直接将此文件吐回浏览器来显示。
动态网页要经过后台程序的处理，我们常见的ASP、JSP、PHP都是后台处理程序。以PHP为例，当网页被请求时，首先到PHP容器中进行解释，这时解释器知道了当前页面的需求（需要在网页中展示一行文字和一张图片），然后PHP程序连接数据库，获取这两个数据，将其插入网页的HTML中，再吐回浏览器来显示。
可能有读者会问，以html、shtml结尾的URL一定对应于静态网页，以asp、jsp、php结尾并包含“?”的URL一定对应于动态网页，对吗？
咱们打开一篇腾讯网站的新闻，观察它的 URL:http://news.qq.com/a/20160402/010599.html。
这个网页的URL就是以html结尾的，但它内部包括视频、正文、广告等多种元素，而且都是网页的主框架加载完之后，靠AJAX拉取数据的，所以上面问题的答案是：不对。这种格式主要是为了对搜索引擎更友好而进行的动态网页伪静态化。
总结：
（1）静态网页和动态网页都是网页。
（2）静态网页不需要后台程序干预处理，直接由服务器返回。实现为静态网页后，一般不需要维护，因为数据不需要更新。
（3）动态网页一般需要由程序来处理（ASP、JSP、PHP、Python、Ruby等），并由数据库提供数据支撑。
（4）不要以URL的形式来判断一个网页是静态的还是动态的，而应该看页面的属性（产品经理最好具备一些调试技巧和经验）。
（5）动态网页更灵活。
纸质书购买
暂无
电子书下载
