Web全栈工程师的自我修养

余果 著 2015年9月第一版

写在最前

找了空余的时间一口气把这本书看完了，总体给我的感觉是一本好书。值得读一读，作者定义了什么是全栈，想到之前一个很火的文章：facebook只招全栈工程师，其实在这篇文章里面已经提过了，算是旧的话题了。这本书给我的收获就是系统的理清了全栈工程师的标准，下面我就总结下本书的精华吧。

全栈工程师定义

Quora上的一个高票回答是

全栈工程师是指：一个能处理数据库、服务器、系统工程和客户端的所有工作的工程师，客户可能需要的是移动栈、Web栈或者原生应用程序栈。

PS：简单说，全栈工程师就是可以独立完成一个产品的人。

如何成为全栈工程师

先精后广，一专多长。什么意识呢，就是现在一个特定的方向上有比较深入的专研，然后再将学习目标渐渐推广开来。比如：先从前端方向入手，掌握HTML、css、js。然后深入到性能优化，SEO，多种框架，响应式页面等前端细节中去。进过一段时间的深入研究后，再转向服务端语言或App的方向发展。

实践出全栈

积累作品集，作品集是指你个人的项目和作品的集合，一份精心准备的作品集比简历更能说服人。作品集包括博客，开源项目，有趣的demo等。

PS：问自己一个问题：我做这件事情的目标用户是谁？程序员制作和维护自己的作品集的最大动机便是更好地向其他人展示自己的能力。那么其他人是哪些人呢？

• 老板
• 潜在客户
• 潜在雇主
• 潜在朋友
• 任何人 告诉他们，我就是这么牛
• 自己 作品集是一个历史项目的沉淀

全栈工程师眼中的HTTP

从纸面形式系统的了解了在前后端视角中，打开网址发生的请求细节。

• 发出的请求列表
• 每个请求的开始时间
• 每个请求从开始到结束花费的时间
• 每个请求的类型
• 每个请求的状态码
• 每个请求产生的流量消耗
• 每个请求gzip压缩前的体积，以及本地gzip压缩后的体积。 PS：一个基本优化就是：尽量减少同一域下的HTTP请求数，以及尽量减少每一个资源的体积。

减少同一域下的HTTP请求数

浏览器是针对资源的域名限制并发连接数，而不是针对浏览器地址栏中的页面域名，所以很多静态资源可以放在其他域名下(不同的子域名也被认为是不同的域名)。如果你有一台服务器，可以把这些不同的域名同时指向一个IP，也就提高了对这台服务器的并发连接数限制。

cookie的作用域是整个域名，也就是说如果某个cookie存放在google.com域名下，那么对于google.com域名下的所有HTTP请求都会带上cookie数据。所以一般会把静态资源放在单独的域名下。还有其他一些优化，比如合并同一域名下的资源。省去不必要的HTTP请求，减少重定向等。

减少每一个资源的体积

常用的图片格式有哪些，它们的使用场景是什么，对图片格式的敏感，能反映出工程师对带宽和速度的不懈追求。对于大的文本资源，必须开启gzip压缩。gzip对于含有重复"单词"的文本文件，压缩率很高，能有效提高传输过程。

后端视角

对HTTP的关注在于让服务器尽快响应请求，以及减少请求对服务器的开销。

PS: 浏览器限制对某个域的最大并发连接数，是浏览器对服务器的一种保护行为。浏览器实质也是一种客户端，为了防止服务器被大量的并发请求弄得崩溃，但是其他的客户端可能不考虑服务器的压力，而发起大量的并发请求，从而对服务器有伤害，服务器端就要进行防范了，具体防范就不说了，自行搜索。

关于缓存

前后端缓存方面的基础知识就不说了，说点我觉得挺好的知识。

对于浏览器来说，如何缓存一个资源是服务器端制定的策略，自己只是根据服务器端的“指令”来执行而已，服务器端的指令就是HTTPS头。服务器通过对每个资源的HTTP响应头设置属性和值，来发出自己的缓存指令。

如果一个a.js文件设置了缓存，到2020年都不过期，那么怎么让客户端知道我们修改了a.js呢？

根据HTTPS规范，如果修改了请求资源的query string，就应该被视为一个新的文件。?后面的字符串，比如?foo=1&bar=2。如果字符串改变了，则被视为URL发生了改变。这个时候浏览器会认为这是一个新的资源。对服务器而言，有querystring，就去处理，没有就直接返回资源。

说下浏览器缓存设置的最佳实践

• 动态生成的HTML用Cache-Control: no-cache
• 静态HTML用Last-Modified
• 其他所有的文件类型都设置Expires头，并且在文件内容有所修改的时候修改query string

针对文件可能在运营商服务器上被劫持，需要进行适当修改

其他所有的文件类型都设置Cache-Control头，并且在文件内容有所修改的时候修改文件名

关于持续集成

CI是一种软件工程流程，将所有工程师对于软件的工作副本，每天整合数次到共用主线上。在构建持续集成的开发流程中，就要考虑版本控制、包管理、依赖关系、架构优化、自动化发布等一系列问题。

关于版本控制，不说了，现在前端就是 git 和 svn

包管理，就是 npm 或者 yarn

构建工具，无非就是grunt、 gulp、 webpack

关于理解编程语言

作者写这章的想法还是很好的，尽可能的展现底层思想。这里说一下V8引擎为什么比传统JS引擎块，因为传统JS引擎是先把JS代码编译成字节码。然后再通过字节码转译成机器码。而V8是直接把JS代码编译成机器码。性能得到了大大的提高。V8还有优化的垃圾回收器和缓存策略。

一定要懂的GPL和DSL

GPL是通用用途语言，DSL是特定领域语言。GPL有C、Java、python等，GPL是指我们可以用此语言编写所有类型的软件。从游戏到客户端软件，从服务器端软件到手机端软件。而DSL的目的是解决特定领域的问题，比如HTML和CSS就是一种DSL，专用于web开发。SQL也是DSL，专用于操作数据库。为什么我总结这个呢，因为很多人不知道这个概念，我觉得我们应该站在一个更高的视角去理解这些语言。这样我们在工作中才能更好的进行技术选型和思考。

大前端

说说什么是web app

支持Web标准的app。web app 开发就是可以无缝移植到所有支持Web标准的平台。

hybrid app

混合模式App同时使用Web技术与原生语言开发，通过应用商店区分移动操作系统分发，需要用户安装使用。

App启动后，它的全部界面或者部分界面中，使用网络视图(WebView)技术来实现。WebView能加载显示网页，可以将其视为一个浏览器，它一般使用WebKit渲染引擎加载显示网页。

PS: 怎么优化hybrid app，就不说了，看看好的博客吧。书上说的较少。

全栈工程师意味着高效

既然玩全栈，那也就意味着一定要高效。坚持DRY，还有有流程的沟通能力。毕竟你向别人汇报的东西太多了，沟通能力一定要锻炼好。如何锻炼沟通能力，请自行百度知乎啥的。

其他tips

总是要学点设计学知识的，推荐看看《写给大家看的设计书》。设计的四大基本理论是：亲密性、对齐、重复、对比。这些理论是什么意识呢，简要说说亲密是是意识。其他的大家去查查吧。

关系亲密的元素要放在一起，关系疏远的元素则要分开。位置的亲密性直接表现出意义的相关性。