这里的通用能力指互联网开发工程师的通用能力，日常开发工作我认为包含两大部分：1、需求理解；2、代码产出；3、团队协作。以下列举的能力无一不是对日常开发效率有提升的。
英语能力
程序员两条腿：一条英语一条数学。下面分块阐述英语能力为什么重要
能够提升代码的可读性、可维护性
目前中文变量名的实践还没有普及，良好的英语阅读能力既能够帮助你阅读他人的代码，又能帮助你帮助你编写语义化代码，以代码为例：
componentWillUnmount() { ... }
import { debounce } from 'lodash';
router.push('/goods/list')
<navigation-link url="/profile">
如果你英语能力不错，看起来是这样的：
组件即将卸载(){...}
从lodash中引入防抖函数
路由跳转到“商品列表”
<导航链接 地址="/档案">
如果你英语能力不佳，看起来可能是这样的：
组件巴拉巴拉(){...}
从lodash中引入夸嚓夸嚓
路由跳转到“#%@￥#@”
<什么什么链接 地址="/档案">
等你找谷歌翻译的时候，别的同学已经把代码改完了，同理：写代码时 this.a; this.item 的可读性也远远不如 this.profileDetailData; this.goodsListItem。
能够提升技术视野，丰富解决问题的途径
常用代码库基本都是英语编写的，许多文档也是英语版最为标准，中文版有很多机翻痕迹。英语可以帮助我们看到更大的世界，接触更多的技术，接触更多的社区和人。以前经常有这样的言论：我不出国我高考考英语干嘛？殊不知若不是高考有外语，寒门子弟不知道要晚多少才能体系化学到，书到用时方恨少啊。
有些同学会想：我看vue、webpack、lodash的中文文档或者其他机翻文档也没什么，我用csdn和百度也一样解决问题。你说的没错，笔者也一样有中文看中文，有百度不谷歌。但是这个渠道不是单选而是加法，不是百度谷歌二选一，而是在百度的基础上，多了一个谷歌的途径，纯纯的有益无害呀！
以下列出最为常用的程序员英语网站：
对团队协作有帮助
语义化的代码、语义化的文档对团队的帮助是显而易见的。此外还有个容易忽略的点：流利的读出变量名可以让你“显得”很专业，或许你不是英语能力很强，但是比起读的磕磕巴巴，当你流利的读出来的时候（甚至带有弹舌等技巧），别人会觉得你是认真的、内行的、你不是在搞笑的，会更容易认真的倾听和对待、更认真的和你交流、更尊重你，这对沟通帮助很大。其实就是展示你的专业性，除英语的其他行为同理。
小结
综上，英语对工作效率的提升点有：提升写代码速度、提升个人能力、提升解决问题的速度等。高效的学习方法有：使用各英语APP背编程系列单词、看英剧美剧、玩外服游戏等
数学能力
能够提升代码编写速度、代码性能
程序员另一条腿，之所以摆在英语后面，是因为常用到的比较简单，不常见的又太难学。在开发页面和前端日常需求的时候，多数只用得上初高中的数学知识，此时影响效率的最大因素是 熟练 。能快速心算出布局间距、JS计算公式、算法复杂度，对工作效率提升很大。
是个人能力进步的基石
能力越强，机会越多。数学能力直接影响了程序员的算法能力，而大厂必面算法题，能不能赚到更多钱、进入更大的平台，也就是看你数学好不好了哈。另一个是，想深入前端技术，对数学知识的要求也很高，例如：
- 计算机图形学，图像即是像素点矩阵，需要对矩阵、向量的计算、各种求值、批量处理等
- GIS地理信息系统，涉及到地图、地理空间编码等
- 各类动画（包括但不局限于CSS、SVG、Canvas）中需要大量的几何知识
小结
数学对工作效率的提升点和英语一样，笔者认为学习基础学科没有捷径，需要大量的阅读和练习，一定要趁学习能力尚可的时候打下坚实的基础。想多赚钱，就学数学刷算法题吧。
产品、设计能力
懂产品和设计的技术就像懂技术的产品和设计一样，我们的目的不是做产品和设计要做的事，而是打通沟通桥梁，养成自己做事的大局观。能力包括但不限于构建用户画像、运营方法、产品交互、平面设计，能力对应的用途有：
- 需求评审的时候能够认识到做这件事的目的，做事途中能更好的为公司和团队思考。
- 能更快更准确的理解需求，不容易因为口口相传曲解需求。
- 设计稿评审的时候能迅速在脑中构建布局、安排元素。可以和设计师权衡开发成本，讨论交互、动画，快速达成一致，避免会后沟通
- 能够更多的参与到开发链路，刷存在感，给领导积极专业的印象
建议大家先从手头上做的领域看起，学习的途径有：阅读专业的产品书籍；竞品调研；观察好的交互和设计资源；多和产品、设计请教（产品都很爱跟你BB的，做设计的同学一般都比较开朗善良）；
设计工具
之所以把设计工具单独拎出来，因为熟练使用设计工具能极大的加快静态页面编写速度。设计工具推荐大家根据公司UI情况安装，目前最流行的是Sketch，这里主要说为什么能提效，具体如何使用Sketch和PS，网上还是有非常多教程的。
自己切图，大大减少沟通成本
假设有这个场景：小红和小军都是前端开发，都接到了一个页面开发任务。
小军让UI将设计稿传到了蓝湖，下载了所有的蓝湖切图开始写，然后发现1.切图把阴影也切进去了，让UI去掉后重新上传。2.希望图里包含另一个元素、希望图里去掉某个元素、希望组合几张图。于是和UI说明需求重新切图。总之，自己搞不了需要频繁麻烦别人，慢不说也不知道会不会吃脸色被吐槽。
小红让UI将设计稿原件发了过来，自己用sketch打开，需要啥图自己cmd+G编组、cmd+E导出，甚至可以简单改色拖布局，很多情况都自己搞定了，成功自闭。
人和人直接沟通是有损耗的，减少沟通环节提升的效率是非常多的。如果你要泡UI妹子的话，也可以让她手把手教你用^_^
图片相关知识
作为前端，和图片打交道的时间还是比较多的，这里列一下有用的图片知识点
- 大小允许的情况下，移动端多使用高清晰度倍率的图片（二倍图三倍图皆可），因为手机的设备像素比（DPR）大于1，更清晰的图像质感更好。附带高质量在线压缩网站：tinypng
- 图片是由rgba（红绿蓝透明度）像素点组成的矩阵，rgb像素点的颜色值是0-255，0表示透明，1表示不透明。
- 判断图片色偏的方法：如果每个像素点的blue值都很大，则图片偏蓝。过亮过暗则是判断rgb的总值和纯白对比。
- CSS中除rgba的表示方法，hsla（色调，饱和度，亮度，透明度）也可以表示颜色
打代码通用思想
Coding之前
在接到需求之后，我认为首先要分配好思考和打代码时间。之前公司有个大牛，如果一个需求需要做3天，前两天半大牛不碰键盘，等所有东西都想清楚后半点把代码打出来，据说几乎没有bug。有的同学急于上手、毛毛躁躁，导致南辕北辙后期返工，是得不偿失的，当然也不能陷入啥也不干瞎想的另一个极端。我自己是先拆解需求，按小块分好后每块分配30%左右的思考时间，后面边写边斟酌细节。也建议大家至少有个基本的大纲和骨架之后，再上手coding
代码质量
我认为高质量的代码主要包含三个维度：可读性、健壮性、可维护性。一套长期迭代的代码，这三者缺一不可。
- 如何提高代码的可读性：
- 做好变量命名，编写语义化的代码
- 做好注释，注释清楚代码的意图
- 做好模块化，将代码整齐归类
- 统一代码风格，个人项目可以按自己喜好写，团队项目还是应该磨合出一套统一的代码风格
- 如何提高代码的健壮性：
- 做好异常捕获（try catch），保证类型的正确性（typeof typescript）
- 严格人工测试、使用jest等单元测试、end to end测试库
- 上报错误日志，建立错误监控体系（使用开源前端错误监控库Sentry或自行捕捉错误并上报）
- 利用好devtools、vconsole等工具排查错误
- 如何提高代码的可维护性：
- 高可读性即可提高可维护性
- 组件、方法做到高内聚、低耦合、高扩展性
- 自动化开发部署和测试（Gitlab CI、Jenkins等工具）
解决问题思路
代码错误：JS引擎和浏览器的bug我们基本是接触不到了，遇到bug一定要对自己说：“是我写错了”，而不是“这啥呀，我不知道啊”。在解决时首先要定位问题，对于不好定位的问题可以使用排除法，不断将正确的部分排除，也可以通过不断注释代码来定位，正所谓 no code no bug。
兼容性问题例如页面在Chrome、Safari上是好的，在微信公众号是不好的。此时不要怀疑代码，代码能够在主流平台运行，一定是符合规范的。要花时间观察不兼容的行为，找到能够兼容的写法或者对某些平台特殊处理
团队协作能力
人之所以牛逼，一是懂得使用工具，二是能够大团体协作。所谓韩信点兵多多益善，能够维持多大的团体是管理者的能力体现。在互联网开发中，即使部门很大，单独的迭代和业务线通常也是小组行动。在这我以自己浅薄的经验谈谈自己对小团队作战的看法
在一个个迭代中，我们要经常确认团队的共识，包括目标共识、交付共识、进度共识，在这些共识大体一致的前提下，大家各抒己见，出现分歧注意多倾听、让权威人员拍板。比较糟糕的情况就是群龙无首、相互推诿。我认为在一个团队中，独裁是非常重要的，在同一时间只能有一个头，试想一下，你让你的手去火中取栗，你的手不但不听还要逼逼赖赖，你烦不烦。作为团队leader，很多决策是综合考量，成员在信息不足的情况下，鼎力相助才是最好的合作方式。须知做错尚可调整，内耗必然一事无成。
乐于分享
近期我听到了一些不可思议的言论：“这我不能教他，教会他了我还吃什么饭（鄙夷）”。其实我还是很震惊的，程序员应该是最具开源精神的群体了。要知道“欲想取之，必先予之”哪怕你是因为自私，你也应该多分享、多交流呀，你藏着掖着，别人能对你敞开胸怀吗。相信大家从小白时期走过来，都是得益于开源的社区和前辈的帮助，拒绝分享无异于过河拆桥。
下一篇：万字前端效率大提速系列 🚀 ：二、HTML、CSS、JavaScript三剑客
---小尾巴--- 有想法有问题欢迎私聊讨论 ^_^
