产品与技术资料.docVIP

产品与技术 以下这张图就是元一分享的干货内容，它基本涵盖了一个初级码农需要知道的所有基础入门知识。但这张图的目的并非用来吓人，这其中的所有技术名词，将以最通俗易懂的方式串联起来——?即我们上网时的慢动作解析：打开一个网页或?App，这背后都运用了那些技术来让这个网页和?App?的内容呈现在浏览器和手机上；驱动这些动作背后的技术名词都是什么，各自有着怎样的优缺点，彼此间是如何协作和运转的，以及怎样合理地评估技术能力和开发难度。当然，元一也推荐了丰富的学习资料。 这中间涉及的技术知识：前端包括?HTML，CSS，JavaScript，jQuery?以及?Bootstrap?；后端包括?HTTP?服务器，后端编程语言，数据库以及?Cookie?和?Session；移动开发分为原生，混合式，HTML5，以及不同的移动端技术选择在功能和开发成本上的比较。 什么是前端？什么是后端？二者是如何配合运转的？ 前后端的划分，可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术（ 比如 HTML / CSS / JS，甚至移动设备的 Obj-C / Swift ）；而后端的作用就是负责将这些东西封装在 HTTP 的数据包中然后通过网络传送到前端。当然除了这些前端文件，后端还有一个更重要的职能，即保存和提供用户数据，比如移动端常见的 JSON 就是目前最流行的在后端和前端之间传输的一个文件格式。 前端与后端是如何配合的？如上图，以 Web 端为例，在浏览器输入一个网址后，浏览器向服务器发送了一个 HTTP 请求；服务器通过一个 HTTP 响应，把显示这个网页所需要的资源传回给了浏览器。而需要在浏览器中执行的技术，HTML / CSS / Javascript 等就叫做前端；需要在服务器端执行的、通常我们看不到技术就叫做后端。 Web 前端的运行逻辑 假设我们要访问 Google，从我们在浏览器输入 G 到最后这个页面出现在眼前，这其中涉及许多前端的技术反应和代码组合，总体而言可以简化为两步： 1/ 浏览器向 Google 的服务器发送了一个请求。 2/ 服务器收到了一个 HTTP 响应，这个响应中就包含了执行这个命令所需要的所有资源（注：可以通过 Chrome 浏览器的开发者工具来进一步观察 HTTP 协议的运行情况；下图为 Google 的 HTTP 协议运行情况）。 上图这个界面看起来很复杂，但对于非程序员而言，HTTP 协议运行情况只要关注其中的几个关键部分：第一列，即资源的 URL；第四列是这个资源的类型。在第一个请求和后续的请求之间有一根蓝线，即进度条。而 HTTP 协议中运行的项目越少，浏览器加载的速度越快。图中 Google 就处理得很好，只有 10 个左右的请求。 Web 前端语言 HTML 和带样式的 HTML HTML 就是一组标签和文本的组合，是一个最基本的网页。它已经包含了网页常见的元素，实际上在 Web 早期的很长一段时期内，网页都是这个样子。后来随着使用网络的人群越来越广泛，在 HTML3.0 中引入了对网页样式的定义，某种程度上可以说，也是从这个时候开始产生了网页设计师的角色。 CSS 带样式的 HTML 也拥有一个缺点，它需要为每个标题和文字都设定样式，工作量非常庞大。 CSS 就是在这样的情况下诞生了。CSS ，又称叠层样式表，简言之是一种用来表现 HTML 文件样式的样式设计语言。CSS 能够对网页中的对象的位置排版进行像素级的精确控制，实现基础的静态的交互设计；而CSS 目前的最新版本 CSS3 能够真正做到网页表现与内容分离。 Javascript 差不多在 CSS 诞生的同一时间，大家开始觉得这样静态的网页似乎略显无聊，能不能给网页加入一些可以动起来的元素？比如点击一个按钮之后变个颜色。当时网景公司的工程师Brendan Eich 就给他们自家的浏览器引入了这种实现动态效果的脚本语言，这就是 Javascript（简称 JS）的诞生。所以通俗来说，Javascript 就是用来给 HTML 网页增加动态功能，实现更炫酷的交互。 提到 Javascript ，就得提一下 jQuery 。 jQuery 是一个优秀的 Javascript 库。jQuery 使用户能更方便地处理 HTML ，它能够使用户的 HTML 页面保持代码和 HTML 内容分离,通过 jQuery ，可以不用在 HTML 里面插入一堆 JS 来调用命令，只需要定义 ID 即可。此外，由 Twitter 设计师 Mark Otto 和 Jacob Thornton 合作开发的 Bootstrap 也是一个受欢迎的前端框架。 HTML5 简史和