如何成为全栈工程师

本文主要参阅书籍《Web全栈工程师的自我修养》所整理的读书笔记,很感谢此书作者余果,给自己的职业发展指明学习方向。

高性能网站的关键:缓存

服务器缓存

对于一些计算量大的Web服务,服务器内存或CPU性能不好,优化服务器端的缓存就尤为重要了。

  1. 数据库查询缓存
    开启MySQL查询缓存来提高速度,减少系统压力。默认MySQL是不开启查询缓存,修改my.ini设置缓存。

    # SIZE是指为查询缓存开辟多大的空间。默认是0
    query_cache_size = SIZE
    query_cache_type=OPTION #0:不缓存 1:所有缓存结果都缓存起来 2:缓存查询命令select开始的查询结果

    对于查询操作多于修改操作的数据库,开启数据库查询缓存是很有益的,但是对于修改操作很多的数据库,缓存经常失效,得不到加速效果,数据库还要花费时间写缓存,速度就更慢了。“缓存命中率不高”
    只要查询语句不一样,表更新发生变化,都会要求更新缓存。

  2. 扩展数据库缓存:memcached
    MySQL自带缓存的缓存池是在MySQL的服务器上开辟,能够使用的内存是有限的,这时候就需要利用服务器集群来实现数据库缓存。
    memcached的缓存失效跟默认的MySQL失效不同,采用的是时间来过期的设计。
    WordPress开启memcached比较简单,服务器安装memcached后,到插件列表中搜索cache或memcached之类的关键字即可。
    但是如果只有一台服务器,那么memcached反而会让系统更慢。
  3. 静态化

浏览器缓存

通过设置浏览器缓存跳过HTTP请求。
浏览器设置缓存的作用:

  • 对用户来说,减少请求更快加载页面,节省流量。
  • 对网站来说,减少带宽压力和费用

服务器设置资源的HTTP响应头设置属性和值,发出自己缓存指令.

# Expires
Expires: Thu,15 Apr 2020 20:00:00 GMT #2020前别向我要了
# Last-Modified,浏览器问:用户又要了,文件有更新过吗?服务器:没更新,你直接用吧。 这个回答不需要带上请求的文件体,只用一个HTTPS头表示文件未更新即可。 304表示未更新
Last-Modified:Tue,01 Mar 2015 03:42:36 GMT #这个资源上一次修改在2015 0301

资源加上Query String(?v1),只要这个发生改变,则被认为URL发生改变。

大前端

知识体系

初级工程师:

  • 对浏览器兼容性的了解
  • 对HTML、CSS、JavaScript语法和原理的理解
  • 对编辑器和插件的出息程度
  • 对调试工具的了解程度
  • 对版本控制软件的熟悉和应用经验
  • 对前端库、框架的使用
  • 标准、规范

中级工程师:

  • 代码质量、代码规范的理解
  • 对JavaScript 单元测试的熟悉
  • 对性能优化的应用和理解
  • 对SEO的应用和理解
  • 代码部署
  • 移动Web

高级工程师:

  • 代码架构
  • 安全
  • 对自动化测试的理解。

传统iOS开发流程:设计师设计完PSD稿,做好标注,切出各种状态的图片,交给开发者。开发者拿到切片,根据标注设计稿和切片,实现界面和逻辑功能开发。 这种缺点很明显:开发周期长,代码耦合强,沟通成本高,设计原因质量低。
优化的开发流程:让擅长用户体验的Web UI工程师进行App UI开发。App开发人员负责除UI之外的部分。

框架vs库

库是一系列对象、方法等代码,库起到重用代码的作用,剩下重写这部分代码的工作量
框架是一个软件系统可重用的部分,包括子程序,库,胶水语言,图片等资源。胶水语言(glue language)是用来连接软件组件的程序设计语言(通常是脚本语言)。
不同的库和框架功能不一样,jQuery在于方便操作Web界面(DOM).Angular在于通过数据绑定,让开发者直接修改数据模型,而不用关心DOM界面的更新。GASP库在于优化了JavaScript的动画部分,动画速度比jQuery快。

参考书籍

《精通CSS 高级Web标准解决方案》
《单页应用 JavaScript 从前端到后端》

移动转型

混合App

混合App(Hybrid App)同时使用Web技术和原生程序语言开发。由Objective-C或者Java制作整体框架。App启动,全部或部分界面使用网络视图WebView技术实现。WebView技术一般是使用WebKit渲染引擎加载显示。
对WebView进行性能优化,常用优化:

  • 部分资源和全部资源打包在App里面,使用json来通讯,缺点App发布包比较大
  • App启动时从后台下载所需要的资源,缓存在手机沙盒中。好处不会增加包体积,但是首次访问加载资源导致等待时间较久
  • 使用HTML5 Manifest实现资源缓存。这样可以在没有互联网连接时访问。缓存所有资源列表到本地后,如果更新WebView,可以在服务器上更新资源列表和Manifest文件。 App检测Manifest文件修改,就知道资源已经更新。
  • 主要逻辑不要用WebView来实现。原生的技术好用在:页面间转换,高性能动画,大量数据的界面(无线滚动图片流)

持续集成

持续集成是一种软件工程流程,将所有工程师对软件的工作副本,每天整合数次到公用主线上。在服务器开发和前端开发,没有固定的集成开发环境,所以在构建持续集成的开发流程中,就要考虑版本控制、包管理、依赖关系、架构优化、自动化发布等。

包管理

  1. Npm
    常用的命令:

    npm install <name>;[--save|--save-dev|--save-optional|-g]
    • –save 表示这个模块会直接安装在package.json中的dependencies属性中
    • –save-dev 表示这个模块会直接安装在package.json中的devDependencies属性中. dependencies和devDependencies的区别,假设一个人下载您的模块,只要功能,不需要测试代码、文档构建器。这时候把这个开发阶段使用的包放在devDependencies中
    • –save-optional表示这个模块是可选的,会直接装在package.json中的optionalDependencies属性中. 由于可选,npm安装会尽量下载和安装,如果下载失败,npm也不会报错,直接略过。
    • -g会将模块安装在全局目录中。

    关于npm的版本号,可以在package.json中指定需要的某个模块的版本

    • “1.2.3”
    • “>1.2.3,<1.2.3”
    • “>=1.2.3,<=1.2.3”
    • “1.2.3-2.3.4” 大于1.2.3并且小于2.3.4
    • “~1.2.3” 合理靠近1.2.3,等价于>=1.2.3 <1.3.0
    • “~1” 等价于1.0.0到2.0.0
    • “*“ 任意版本
  2. Bower
    请参考博客Bower 基础指南

构建工具

请参考博客前端构建工具的由来

理解编程语言

《黑客与画家》的作者Paul告诉我们,编程语言和算法一样重要,真相处于两种极端之间。编程语言有差别,但是没有那么极端,不存在绝对标准。

编程语言是什么

编程语言编译成机器码有两种传统方式,使用编译器预先编译或者使用解释器一边编译一边运行
编译器工作方式:通过编译程序把源代码解释成当前系统CPU可执行的机器码,下次只需要执行这个机器代码即可。这种方式可移植性差,显然不能把Win的exe文件拿到linux中执行。
解释器工作方式:代码,一句一句解释给CPU执行。不会把整个程序翻译出来,而是像个中间人,每次运行都要先转成另一种语言运行。这种方式有平台无关性,代价是执行效率低。
编译器和解释器可以以某种方式结合,就是“运行时编译”(Just-In-Time compilation,JIT).初次编译需要的时间比较久,不过以后编译的效率会比普通编译更高。
现在已经很难分语言是解释型还是编译型的。通常Java是半编译半解释,兼具编译和解释两种,先编译成.class字节码,然后通过jvm从.class文件逐行解释。
JavaScript是系统级别的次选语言,类似JAVA一样,一次编写,到处运行,但是效率不如原生的程序,在API权限上受限于自己运行的平台,所以用JavaScript编写原生程序,只能使用被封装起来的API。eg:iOS的PhoneGap框架

v8引擎的特殊

v8引擎与传统JavaScript引擎的解析流程不同。传统JavaScript引擎先把JavaScript代码编译成字节码,然后通过字节码转译成机器码。v8引擎直接把JavaScript代码编译成机器码,所以性能得到很大提高。v8还使用一些其他优化技术,比如优化的垃圾回收器和缓存策略。
编译器和语言是两码事。同一门语言可以有不同的编译器来实现,每个编译器生成的代码质量也不同。

参考书籍

《代码大全》
《代码的未来》

全栈游乐场

VPS

虚拟专用服务器(virtual private server,VPS)是一台把服务器分割成多个虚拟专享服务器的优质服务。
这里前端工程师也会需要学习配置反向代理来某个host指向两台开发服务器,查看服务器错误日志,查看什么原因导致开发机无法访问。
理解HTTP:

  • 某开发服务器部署一个反向代理,指向另一个服务器。不能简单的把脚本转发过去,会有跨域的限制。利用Apache的mod_rewrite代理的参数来解决问题
  • 有时候浏览器限制只有来自一个域名的自定义字体才能正常显示。那么只需要在HTTPS头中设置允许域调用自己就可以。如何修改?Apache的配置文件也可以修改。

软件设计方法

待完成(请阅读完《JavaScript设计模式与开发实践》)

设计模式

设计模式不是一个代码包或者外部库,而是对特定解决方案或者模板的一种描述。
在设计软件或者系统会遇到一些通用问题,通过问题的解决方案叫做“最佳实践”,设计模式就是精炼、正式的最佳实践。

架构模式

设计原则

高效工程师

在追求速度的同时,更应注重为用户提供可靠的服务,减少Bug.

知识工作者中高效的工程师的生产力是低效工程师的几十倍。

提速100倍

  • 阅读英文资料
    工具:Google,StackOverflow
  • 时间管理四象限
    工作可分为:
    • 既紧急又重要(立即执行)
      eg:严重Bug,服务器漏洞
    • 紧急不重要(请他人代劳)
      eg:会议,一些可转交的需求
    • 不紧急不重要(对它说不)
      eg:刷论坛和朋友圈等
    • 重要不紧急(指定计划)
      工程师应该把80%的时间工作投入该分类中,避免瞎忙。
  • 消除重复工作
    可以自己定制工具快速开发
  • 给自己留出不被打扰的时间
    编写程序和学习是需要大量的精神头伏,需要整块连续的时间思考,避免被各种提示工具打扰。
  • 番茄工作法
  • 跨界思考
    工程师文化是指工程师在产品开发的强势方,在产品和设计师的沟通中有更多的话语权。这是因为工程师文化要求工程师有更多的跨界思考能力,才有投票权。
  • 纸上头脑风暴
    工作前最好在纸上列出自己的想法
  • 避免加班文化
    下班后尽量不要处理工作需求,多点时间自我学习,准备分享,或者编外项目。不要加班做白天遗留下来的工作。

学习设计

好的设计是优秀用户体验的必要条件。工程师不一定要有很强的设计能力,但是对好的设计感觉和判断力非常必要。

好的Web设计流程

跨平台处理:视觉设计师关注设计模块和整体氛围,只需要整理一份PC设计的视觉设计稿。让前端根据拿到的PC设计稿,利用流式布局和媒体查询等技术,直接创建多个平台页面。
动画设计处理:前端主动提出动画的见解,做出效果后再反馈给设计师确认。

设计基础

4个设计理念:亲密,对齐,重复,对比。
更多请参考《写给大家看的设计书》
设计工具:

  • Axure
  • Sketch

参考书籍

《响应式Web设计全流程解析》
《写给大家看的设计书》
《写给大家看的设计书:实例与创建》

全栈思维

管理者的思想

责任与态度

上司只关心你有没有完成,不关心你有什么理由。

不要给自己没有完成的任务找任何理由,而是以诚恳的态度说明当前进度,以及未来是否能如期完成目标。这样boss才能对进度有所了解和语气。责任和态度是最好的升职方法,对自己的项目负责。

把产品和自己名字联系起来,当别人谈到此项目的时候,自己也能够自豪。不管是在做产品还是做其他事情。

管理

  1. 自我管理
    安排和管理好自己的时间,做事情讲究优先级,懂得授权和请求他人帮助,而不是“瞎忙”。保持对项目成功的渴望。
  2. 沟通管理
    对于中期项目,理想的沟通效率是每周沟通至少两次,让项目每个人都有足够的自律和积极性。

《卓有成效的管理者》的五个核心思维习惯:

  • 时间用在什么地方
  • 重视对外界的贡献
  • 善于利用长处,包括自己、上司、同事、下属的长处
  • 集中精力于少数重要的领域,并产生卓越的效果
  • 善于做有效的决策

沟通

  1. 平级同事
    授权给平级同事,最好的方法是诉诸对方的利益。
  2. 上司
    报告进度,目前情况,几种解决方案,建议的方案选择

参考书籍

德鲁克—《卓有成效的管理者》
Ruby之父松本行弘—《编程的本质》