切图仔面试宝典

骑猪看日落 2024-04-17 20:26 83阅读 0赞

[![Star-500_-orange][]][Star-500_-orange 1] [![Version-6.66-brightgreen][]][Star-500_-orange 1] [![Github_20Page-Wscats-yellow][]][Star-500_-orange 1] [![Author-Eno_20Yao-blueviolet][]][Author-Eno_20Yao-blueviolet 1]

> Omi体验地址： http://wscats.github.io/CV/omi/build/index.html

> Vue体验地址： http://wscats.github.io/CV/vue/dist/index.html

> 项目地址： https://github.com/Wscats/CV

# 简历的本质 #

在写简历之前，我们必须清楚的了解一件事情，那就是简历是什么？  
它不是人生履历，不是项目清单，也不是技能大放送。  
简历的存在只有一个目的 —— 帮你约到面试。只要能达到这个目的，简历可以是一段视频，一个开源项目，一张照片，甚至是一行字，比如：

I wrote javascript

当然，绝大部分简历的形式，就是我们所熟知的，是一篇文章。即使你通过其他方式获得了面试，当你入职的时候，还是要有这么一份纸质简历的，所以不要想着偷懒。

其实简历不只是表现自己，更是传递以下三个信息，增强通过率。

*  是什么（你能做什么？，擅长什么？）
 *  比别人好在哪些地方（相比其他同行，你的优势？）
 *  如果雇佣你，招聘方会得到什么好处 （能不能为企业带来效益？）

正如你抉择跳槽，思考要不要留在这个公司的时候，你也可能考虑下面三点

*  待遇（给的钱够不够？福利好不好）
 *  环境（同事nice不？老板好不好？事少离家近？工作开心与否？是否帅哥美女多？嗯哼）
 *  个人（有晋升机会不？能否再进步？）

当然企业和你的相互选择其实正如上面几点中的考量和博弈，当然面试是平等的，是相互选择的结果，所以有你对企业的考量，也有企业对你的考量

回归到写简历，和很多人在大学写议论文写作文是不同的，过分的论证会显得自夸，反而容易引起反感，所以要点到为止。这里的技巧是，提供论据，把论点留给阅读简历的人自己去得出。放论据要具体，最基本的是要数字化，好的论据要让人印象深刻。

举个例子，下边内容是虚构的：

2015年(`时间可以具体到年月，或者经历的项目周期`)，我共同(`一般都是团队开发了，单干就别写了，除非你个人能力非常突出`)参与了XX新闻网站后端发布系统的开发（`这部分是大家都会写的`）。作为团队里面的核心程序员，我不但完成了网站界面、功能逻辑的开发工作，更提出了高效的组件化和模块化开发方案，通过模块化开发让团队成员较少编写代码时候的冲突，通过组件化让团队成员分工合作，各善其职，有效的提升了系统的的开发效率。（`这部分是很多人忘掉的，记得写出你在这个项目中具体负责的部分，以及你贡献出来的价值。`）在该系统上线后，Web前端性能从10QPS提升到200QPS，服务器由10台减少到3台（`通过量化的数字来增强可信度`）。2016年我升任WAPCMS项目负责人，带领一个3人小组支持着每天超过2亿的PV（`这就是你自身的优势。你能带给旧企业的价值，也就是你能带给新企业的价值。`）。

有同学问，如果我在项目里边没有那么显赫的成绩可以说怎么办？讲不出成绩时，就讲你的成长。因为学习能力也是每家公司都看中的东西。你可以写你在这个项目里边遇到了一个什么样的问题，别人怎么解决的，你怎么解决的，你的方案好在什么地方，最终这个方案的效果如何。

具体、量化、有说服力，是技术简历特别需要注重的地方。

（以上内容在写完简历后，对每一段进行评估，完成后再删除）

--------------------

# 联系方式 #

（HR会打印你的简历，用于在面试的时候联系，所以联系方式放到最上边会比较方便）

*  头像（如果你觉得自己长得可以，你可以放哈）
 *  手机：139\*\*\*\*\*\*\*\* （`如果是外地手机，可注明。如经常关机，要写上最优联系时间`）
 *  Email：wscats@gmail.com （`虽然我觉得QQ邮箱无所谓，不过有些技术人员比较反感，建议用163，gmail也可以`）
 *  QQ/微信号：7\*\*\*\*\*\*\*（`提供一个通过网络可以联系到你的方式`）

--------------------

# 个人信息 #

*  易佳梦/女/1990
 *  本科/XX大学计算机系
 *  工作年限/经验：3年
 *  技术博客：https://wscats.github.io/blog ( `使用GitHub Page映射页面会显得的逼格较高`)
 *  Github：https://github.com/Wscats ( `原创repo+多star的Github帐号会极大的提升你的个人品牌`)
 *  期望职位：Web前端程序员/工程师
 *  期望薪资：税前月薪15k~20k，特别喜欢的公司可例外
 *  期望城市：广州

--------------------

# 工作经历 #

工作经历按逆序排列，**最新的在最前边**，  
因为HR更多的是了解你在上一家公司或者近几年你的工作情况，我建议实际工作小于半年的你也可以不写当然（IT行业跳槽如此平凡~），因为短的在职经历会让HR觉得你不够稳定，存在录用后的风险，还有工作经历最好有层次感，比如你刚开始第一份前端工作你用的技术比较简单，你可以写你自己负责切图，用jQuery写逻辑，用sass写样式，然后再下一份工作你可能技术加强了，你就可以写你用vue，angular来开发了一个单页面应用，还负责写了部分后端接口，这样可以让面试官觉得你有自我学习，不断进步的习惯。

## 123公司 （ 2016年9月 ~ 2017年9月 ） ##

### 456项目 ###

我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。

### 789项目 ###

### 其他项目 ###

（每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。）

--------------------

根据上面的模板你可以这样来写

广州XX有限公司（2016.09 ~ 2017.03）技术部-前端工程师
    这个项目目的主要以成人学历为主线开发，有大专、本科、资格证等线上销售的教育培训产品。
    我在此项目负责了前期界面研究，做出原型设计，原型切图，配合后台开发人员设计界面与开发功能，并负责框架开发，封装公共组件，以及根据需要引进第三方插件。
    我在项目中遇到的最大困难是实现产品前端界面效果与设计图纸在某些界面上难以绝对统一
    我采用Vue+jQuery开发方案，在细节上我运用了jwplayer.js、jquery.KinSlideshow来实现幻灯片轮播效果，增强用户体验更好等。

# 自我评价 #

最好突出自己的优势，比如学习能力，解决问题能力，带队能力，沟通能力和技术能力等等  
想简单点可以这样写：

1.喜欢学习新技术，有良好的文档编写和代码书写规范，耐心打磨用户体验和用户界面
    2.有良好的沟通能力和团队合作能力，性格随和，认真负责，自学能力强

详细的你也可以这样来

1. 对前端技术具有浓厚的兴趣，喜欢逛CSDN，博客园等技术论坛；
    2. 具备良好的审美能力，有良好的代码编程习惯；（说好的审美，可以和设计师好好玩耍）
    3. 学习适应能力强，愿意不断学习新知识丰富自己；（学习能力大企业最看重）
    4. 抗压能力强，有信心在不同的工作强度下进行开发工作；（抗压技能点加上，去常加班的公司有独特优势，额）
    5. 性格随和，具有良好的团队合作精神。（性格最好能适应团队）

# 开源项目和作品 #

选取你自己**Github**上的某个开源项目即可，当然开源项目最好写清楚文档，比如安装方法，核心代码的分析（这一段用于放置工作以外的、关键来证明你的能力的材料，也可以理解为其他工程师或者开源社区对你的认可度）

## 开源项目 ##

（对于程序员来讲，没有什么比Show me the code能有说服力了）

*  [Piano][]：项目的简要说明，Star和Fork数多的可以注明
 *  [Articles][]：项目的简要说明，Star和Fork数多的可以注明

## 技术文章 ##

（挑选你写作或翻译的技术文章，好的文章可以从侧面证实你的表达和沟通能力，也帮助招聘方更了解你）

*  [我如何用前端技术得到XXOO网站的VIP][XXOO_VIP]
 *  [前端程序员经常忽视的一个JavaScript面试题][JavaScript] （ `或者好的翻译文章可以侧证你对英文技术文档的阅读能力`）

# 技能清单 #

（我一般主张将技能清单写入到工作经历里边去。不过很难完整，所以有这么一段也不错）  
以下均为我熟练使用的技能

*  后端开发：PHP/Node
 *  后端框架：ThinkPHP/CodeIgniter
 *  前端框架：ReactJS/VueJS/AngularJS/Omi/EmberJS/Cocos2dJS/Ionic
 *  前端样式库：WeUI/Bootstrap/AntDesign/ElementUI/AmazeUI
 *  前端工具库：jQuery/Zepto/Lodash/Axios
 *  前端调试：Postman/Charles/Vue(React) Dev Tools
 *  前端插件：Swiper/Iscroll
 *  前端模块工具：Webpack/Gulp/RequireJS/Fis/Grunt
 *  预编译语言：Typescript/Sass/Less/Pug/Jade
 *  Native开发：Weex/React Native/Cordova/Uni App
 *  小程序相关：Mpvue/Taro/Kbone/Wepy
 *  数据库相关：MySQL/MongoDB/PgSQL/PDO/SQLite
 *  版本管理、文档和自动化部署工具：SVN/Git
 *  单元测试：PHPUnit/SimpleTest/Qunit/Mocha
 *  云和开放平台：SAE/BAE/AWS/微博开放平台/微信应用开发

例如你可以这样写,当然你得根据自己的个人情况进行修改

1、熟练使用合理的结构和样式编写兼容主流浏览器的页面；
    2、能适当运用CSS3使页面在现代浏览器上效果更佳；
    3、熟练运用rem单位和flex布局实现不同浏览器宽度下的整页缩放；
    4、熟练使用photoshop软件进行简单的图片处理，能根据图片特征保存成最优的格式；
    5、熟练使用原生javaScript以及常用javaScript库，如jQuery、zepto；
    6、能运用模块化、面向对象的方式编程；
    7、了解http协议，能够根据http请求报文、响应报文和状态码排查问题；
    8、熟练运用ajax实现异步数据传递，熟悉JSON等数据交换格式；了解php和数据库；
    9、了解如何使用node.js搭建本地server模拟接口返回数据测试ajax接口；
    10、能使用Bootstrap、WeUI、Ionic等前端样式库和框架进行开发；
    11、熟练运用AngularJS，VueJS进行模块开发，了解双向数据绑定原理，熟练编写控制器、服务、组件、过滤器等
    12、熟练使用Gulp对代码进行压缩合并；熟悉使用Git和SVN进行代码管理和版本控制；

当然再举个例子（精通慎用！熟悉可以多用，不够自信就用了解吧，额哼）

1、熟练HTML、DIV+CSS的页面布局，能根据设计图完成页面制作
    2、熟练响应式布局、弹性盒布局，熟悉基于HTML5的WebApp开发以及移动端适配
    3、熟练主流浏览器的兼容性以及相应的适配技术，完成页面的完整兼容
    4、熟练掌握HTML5、CSS3新增功能，了解Canvas动画制作
    5、熟悉掌握原生JavaScript，熟悉jQuery，了解Zepto
    6、熟练Bootstrap、AngularJS等前段框架，了解MUI、Vue框架
    7、熟练使用AJAX进行数据交互，协助后端开发工程师完成项目
    8、熟练JSON数据的使用以及处理方式
    9、熟练LocalStorage、SessionStorage、Cookie等本地存储
    10、熟悉使用Swiper、Font-awesome、jQueryUI以及jQuery插件等前端插件
    11、熟练使用Cordova插件将WebApp打包成安卓App，实现混合App开发
    12、熟练使用DW、SublimeText、HBulid、Git、Gulp、Scss、Photoshop 等开发工具

这里尽量不要重复叙述相同的技能点，保持好每一条都是独特的，每一条描述出现的英文技能点关键词尽量保持大小统一，比如`Bootstrap、WeUI、Ionic`，这样写没问题，但是不要个别大写个别小写`bootstrap、WeUI、ionic`，遇到强迫症的HR就尴尬了，不过有些还是例外的比如`jQuery`,还是第二个字母大写吧(…额，不解释)，还有这里不要出现一些“感性“的描述，比如熟悉使用PHP，能跟后端工程师愉快的合作(什么鬼)，这些句子就不要出现了

## 参考技能关键字 ##

本技能关键字列表是在简历和招聘信息中统计出来的高频词。如果您的简历要投递给有机器（简历筛选系统）和非机器（不懂技术的HR）筛选简历环节的地方，请一定从下边高频关键词中选择5～10个适合你自己的。

<table> 
 <thead> 
  <tr> 
   <th>Skill</th> 
   <th>Skill</th> 
   <th>Skill</th> 
   <th>Skill</th> 
   <th>Skill</th> 
   <th>Skill</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>web</td> 
   <td>javascript</td> 
   <td>html5</td> 
   <td>css3</td> 
   <td>H5</td> 
   <td>js</td> 
  </tr> 
  <tr> 
   <td>ajax</td> 
   <td>w3c</td> 
   <td>div</td> 
   <td>css</td> 
   <td>html</td> 
   <td>ES6</td> 
  </tr> 
  <tr> 
   <td>vue</td> 
   <td>angular</td> 
   <td>react</td> 
   <td>backbone</td> 
   <td>jQuery</td> 
   <td>zepto</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>xml</td> 
   <td>xhtml</td> 
   <td>bom</td> 
   <td>dom</td> 
   <td>svg</td> 
  </tr> 
  <tr> 
   <td>ui</td> 
   <td>photoshop</td> 
   <td>weui</td> 
   <td>bootstrap</td> 
   <td>ionic</td> 
   <td>flex</td> 
  </tr> 
  <tr> 
   <td>atom</td> 
   <td>visual studio code</td> 
   <td>hbuilder</td> 
   <td>sublime text</td> 
   <td>firebug</td> 
   <td>dreamweaver</td> 
  </tr> 
  <tr> 
   <td>asp</td> 
   <td>jsp</td> 
   <td>java</td> 
   <td>ruby</td> 
   <td>python</td> 
   <td>php</td> 
  </tr> 
  <tr> 
   <td>ps</td> 
   <td>mobile</td> 
   <td>mvc</td> 
   <td>mvvm</td> 
   <td>mvp</td> 
   <td>www</td> 
  </tr> 
  <tr> 
   <td>http</td> 
   <td>https</td> 
   <td>ftp</td> 
   <td>ssl</td> 
   <td>websocket</td> 
   <td>seo</td> 
  </tr> 
  <tr> 
   <td>sass</td> 
   <td>less</td> 
   <td>AMD</td> 
   <td>CMD</td> 
   <td>requirejs</td> 
   <td>seajs</td> 
  </tr> 
  <tr> 
   <td>github</td> 
   <td>stackoverflow</td> 
   <td>segmentFault</td> 
   <td>coding</td> 
   <td>csdn</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>linux</td> 
   <td>mac</td> 
   <td>windows</td> 
   <td>ios</td> 
   <td>android</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>gulp</td> 
   <td>grunt</td> 
   <td>webpack</td> 
   <td>git</td> 
   <td>svn</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>flash</td> 
   <td>jssdk</td> 
   <td>phonegap</td> 
   <td>cordova</td> 
   <td>hybrid</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>firefox</td> 
   <td>chrome</td> 
   <td>safari</td> 
   <td>charles</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>express</td> 
   <td>nodejs</td> 
   <td>koa</td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>semantic</td> 
   <td>foundation</td> 
   <td>yui</td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>actionscript</td> 
   <td>coffeescript</td> 
   <td>typescript</td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mysql</td> 
   <td>webapp</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>面向对象</td> 
   <td>闭包</td> 
   <td>继承</td> 
   <td>组件化</td> 
   <td>模块化</td> 
   <td>数据结构</td> 
  </tr> 
  <tr> 
   <td>正则表达式</td> 
   <td>兼容性</td> 
   <td>安全性</td> 
   <td>重构</td> 
   <td>交互</td> 
   <td>性能</td> 
  </tr> 
  <tr> 
   <td>微信小程序</td> 
   <td>微信公众号</td> 
   <td>阿里云</td> 
   <td>知乎</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 面试表现 #

千言万语总结为三条

*  态度比技术重要
 *  做人比做事重要
 *  公平谦虚和乐观

面试是平等的，不是上下级的汇报，也不只是简单的一问一答（对方的设问，你也可以有疑问）  
如果对方不是主动提问者，那自己要活跃一点，化被动为主动，一般面试官在前三道问题配合简历足够建立对你的印象（包括，技术，人品，沟通和态度等）  
技术不行表现态度，遇到问题不懂别简单说不知道（面试官更倾向于你彰对这个问题的见解而不是准确答案），遇到不懂问题可以主动先说完自己的理解，剩余部分你可以尝试跟他留个联系方式（QQ，Facebook，Wechat，Email等）等你面试完回去再回复Ta一个答案（能彰显学习能力，态度与决心），有时候这不失是一个很好的机会，做不成同事也可以做朋友，还有给面试官纸质简历的时候，最好双手放过去，铺垫些礼貌的开场白。

# 面试题参考 #

这里收录了142多张现场纸质面试题集合，来自于不同面试者应聘不同公司的真实记录

*  [142+张现场纸质面试题集合][142]

--------------------

# 其他参考 #

<table> 
 <thead> 
  <tr> 
   <th>Article</th> 
   <th>Article</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://github.com/Wscats/Good-text-Share/issues/85" rel="nofollow">前端程序员经常忽视的一个JavaScript面试题</a></td> 
   <td><a href="https://github.com/Wscats/CV" rel="nofollow">怎样才是一份好的技术简历？</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.zhihu.com/question/39486348" rel="nofollow">初级前端面试需要带什么作品？——知乎）</a></td> 
   <td><a href="https://www.zhihu.com/question/19568008" rel="nofollow">如何面试前端工程师？——知乎</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/amfe/article/issues/5" rel="nofollow">写给前端面试者</a></td> 
   <td><a href="https://github.com/Wscats/CV" rel="nofollow">如何写好一份前端简历</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/amfe/article/issues/5" rel="nofollow">写给前端面试者（大漠，淘宝）</a></td> 
   <td><a href="https://github.com/wintercn/blog/issues/8" rel="nofollow">谈谈面试与面试题、谈谈面试与面试题 II （winter，淘宝）</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.cnblogs.com/joyeecheung/p/5003980.html" rel="nofollow">互联网公司技术岗实习/求职经验（实习内推+简历+面试+offer篇）（张秋怡，阿里巴巴）</a></td> 
   <td><a href="https://github.com/hawx1993/Front-end-Interview-questions" rel="nofollow">史上最全 前端开发面试问题及答案整理</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions" rel="nofollow">前端开发面试题（马云云，ZTE）</a></td> 
   <td><a href="https://github.com/qiu-deqing/FE-interview" rel="nofollow">收集的前端面试题和答案（邱德清，阿里妈妈）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/wangwenjie1314/webQd" rel="nofollow">web前端面试相关的知识点（王文杰，乐视云）</a></td> 
   <td><a href="http://www.cnblogs.com/xxcanghai/p/5189353.html" rel="nofollow">一道常被人轻视的前端JS面试题（沧海）</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://www.cnblogs.com/syfwhu/p/4434132.html" rel="nofollow">常见前端面试题及答案（默语，腾讯）</a></td> 
   <td><a href="http://www.cnblogs.com/syfwhu/p/4434132.html" rel="nofollow">前端工作面试问题（一）（Ruipeng Zhang，哈工大）</a></td> 
  </tr> 
 </tbody> 
</table>

# 最后 #

最近比较忙，后面有时间继续整理，感谢您花时间阅读，期待你能找到一份不错的前端工作，加油！谢谢。

[Star-500_-orange]: https://img.shields.io/badge/Star-500+-orange
[Star-500_-orange 1]: https://github.com/Wscats/CV
[Version-6.66-brightgreen]: https://img.shields.io/badge/Version-6.66-brightgreen
[Github_20Page-Wscats-yellow]: https://img.shields.io/badge/Github%20Page-Wscats-yellow
[Author-Eno_20Yao-blueviolet]: https://img.shields.io/badge/Author-Eno%20Yao-blueviolet
[Author-Eno_20Yao-blueviolet 1]: https://github.com/Wscats
[Piano]: https://github.com/Wscats/piano
[Articles]: https://github.com/Wscats/articles
[XXOO_VIP]: https://github.com/Wscats/Good-text-Share/issues/62
[JavaScript]: https://github.com/Wscats/Good-text-Share/issues/85
[142]: https://github.com/ifyouremember/Interview