结合个人经历总结的前端入门方法(1)

2. 在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法

3. 阅读HTML，CSS，Javascript标准全面完善知识点

4. 阅读前端牛人的博客、文章提升对知识的理解

5. 善用搜索引擎

目标：

1. 熟记前面知识点部分的重要概念，结合学习经历得到自己的理解

2. 熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。

入门之路

---

以下是入门阶段不错的书籍和资料

1. HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。

2. CSS先看《CSS: The Missing Manual》，然后《CSS权威指南》

3. javascript先看《javascript高级程序设计》，然后《javascript权威指南》

4. HTTP看HTTP权威指南

5. 在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。

6. 动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址

• 可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题（带参考答案）

• http://code.tutsplus.com有各种各样的教程

• MDN也有很多教程，更重要的是里面有详细的文档，需要查找某个功能时在Google搜索：xxx site:https://developer.mozilla.org

• http://www.html5rocks.com/zh/也有很多优质教程

• http://www.sitepoint.com/

• http://alistapart.com/

7. 原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网

8. 建一个https://github.com/账号，保存平时学习中的各种代码和项目。

9. 有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号，方便实用

10. 经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。

11. 经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识

继续提高

---

有了前面的基础之后，前端基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。 可以参考前面必备技能部分提到的那两个项目，从里面选一些进行发展学习。以下是一些不错的方面：

• Grunt：前端自动化工具，提高工作效率

• less css：优秀的CSS预处理器

• bootstrap：优秀的CSS框架，对没有设计师的团队很不错，与less结合使用效果完美

• requirejs：AMD规范的模块加载器，前端模块化趋势的必备工具

• Node.js：JavaScript也可以做后台，前端工程师地位更上一步

• AngularJS：做Single Page Application的好工具

• 移动端web开发：智能手机的普及让移动端的流量正在逐步赶超PC端

• Javascript内存管理：SPA长期运行需要注意内存泄露的问题

• High Performance JavaScript(Build Faster Web Application Interfaces)

• Best Practices for Speeding Up Your Web Site：重要技能

一些个人经历

---

LingyuCoder的学习经历

上面的大神都总结得差不多了，我这里就胡扯一些吧

工具

• chrome dev tools：前端开发调试利器，着重注意几个功能：

• console（废话）

• elements:元素样式调整，很常用

• sources：代码中添加断点，单步调试，以及单步调试过程中查看内存中的对象

• watch expression：通过表达式查看当前内存中的值

• call stack：查看调用栈，开启async，可以看异步调用栈（这个非常有用，尤其是ajax调试的时候）

• scope variables：作用域链上的变量，非常有用

• network：抓包查看每个请求，非常重要，前后端联调必备

• timeline：分析渲染、js执行等等各个阶段，性能优化利器

• emulation：模拟移动端环境，mobile页面开发必备

• 一些插件:

• liveload: 修改页面后自动刷新，不用按F5

• dimensions：直接在页面上测量的利器

• livestyle：css样式修改后自动起效果，不需要刷新，elements修改后也能同步到代码中

• image tool：测量，取色

• UC二维码：移动端调试扫码必备

• pagespeed，YSlow：页面性能分析和优化插件

• 马克飞象：优秀的在线markdown编辑器，快速写周报，做记录

• sublime text2：编码方便，插件多，速度快，性能好

• emmet：提升html编码速度必备

• sublimelinter + 各种语言的lint和hint：代码纠错

• 一些snippets：自动补全，提升开发效率

• Intellij IDEA和WebStorm：集成开发环境，集成了各种功能，开发比sublime要方便，但会比较吃性能

• Mark Men：测量、取色、标注利器，拿到视觉稿之后第一个打开的软件

• GFW Fucker：我用红杏，可以的话买个虚拟服务器当梯子

• iHosts：非常优秀的hosts管理软件，轻松修改hosts，开发调试必备

• Charles：Mac 平台最好用的抓包分析工具

• Rythem：AlloyTeam出品的代理抓包软件，非常轻量，安装简单，移动端（真机）开发调试很好用

• Wunderlist：一个非常不错的Todo List，任务、需求多的时候管理起来很方便

技能

前端的技能其实除了JavaScript（包括NodeJS）、HTML、CSS以外，还有很多。其实前端的技能树很大，这里只能列一些我开发中见到的说一说

语言基础

JavaScript：

• 作用域链、闭包、运行时上下文、this

• 原型链、继承

• NodeJS基础和常用API

CSS：

• 选择器

• 浏览器兼容性及常见的hack处理

• CSS布局的方式和原理（盒子模型、BFC、IFC等等）

• CSS 3，如animation、gradient、等等

HTML：

• 语义化标签

进阶

JavaScript:

• 异步控制（Promise、ES6 generator、Async）

• 模块化的开发方式（AMD、CMD、KMD等等）

• JavaScript解释器的一些相关知识

• 异步IO实现

• 垃圾回收

• 事件队列

• 常用框架使用及其原理

• jQuery：基于选择器的框架，但个人认为不能叫框架，应该算工具库，因为不具备模块加载机制，其中源码很适合阅读钻研

• AngularJS/Avalon等MVVM框架：着重理解MVVM模式本身的理念和双向绑定的实现，如何解耦

• underscore：优秀的工具库，方便的理解常用工具代码片段的实现

• polymer/React: 组件化开发，面向未来，理解组件化开发的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及浏览器处理的流程和绘制原理

• DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程

• 解析HTML、CSS、JavaScript时造成的阻塞

• HTML5相关

• SVG及矢量图原理

• Canvas开发及动画原理（帧动画）

• Video和Audio

• flex box布局方式

• icon fonts的使用

常用NodeJs的package：

• koa

• express

• underscore

• async

• gulp

• grunt

• connect

• request

一些理念：

• 响应式Web

• 优雅降级、渐进增强

• dont make me think

• 网页可用性、可访问性、其中的意义

• SEO搜索引擎优化，了解搜索引擎的原理

• SPA的好处和问题

性能优化：

• 减少请求数量（sprite、combo）

• 善用缓存（application cache、http缓存、CDN、localstorage、sessionstorage，备忘录模式）

• 减少选择器消耗（从右到左），减少DOM操作（DOM和JavaScript解释器的分离）

• CSS的回流与重绘

项目

• 版本管理：首推Git，用过Git都不会想用SVN了

• Git：本地版本管理的机制

• SVN：远程中心的版本管理机制

• 自动化构建：主要就是less、模板、coffee等的预处理以及对代码压缩和合并

• Gulp：基于流构建，速度快、模块质量好

• Grunt：独立任务构建，速度慢，配置蛋疼，灵活性高

• 预处理和模板引擎

• less：语法简单，但功能有限

• jade、ejs、velocity等模板引擎，各有各的长处

• coffee：python工程师最爱，我没用过

• 环境搭建：主要是将线上代码映射到本地，并在本地启动一个demo服务器，至于模拟数据的mock，见仁见智了

• 本地代理：ihosts

• 自动化测试：在业务较为稳定的情况下，可以通过自动化测试来减少测试的事件，但需求较多的时候，维护测试用例的成本会很高，可能用自动化测试会起到反效果

• jasmine

• mocha

• 生态系统

• npm

• bower

• spm

• 搭建一个属于自己的博客

• git pages

• hexo

• jekyll

未来

• Web Componets：面向未来的组件化开发方式

• HTML模板

• Shadow DOM

• Custom Elements

• HTML Import

• 移动端Native开发：这也是需要了解的，以后前端工程师会经常地和webview打交道，也要了解native开发

其他

有些东西不是考敲码就能弄好的，我参与实习的时候感受到了很多，这些是我遇到的也是我感觉自己做的不好的地方

• 对于业务的思考：我个人这方面非常欠缺，所以放在最前面，在敲码前要多思考业务

• 交流和沟通能力：这个非常重要，前端同时需要与项目经理、产品、交互、后台打交道，沟通不善会导致很多无用功，延缓项目

• 知识管理、时间管理：input和output的平衡，output是最好的input。如何做好分享，参与社区，做好交流，作好记录

• 对新技术的渴望，以及敢于尝试

入门书

入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要持续关注技术的新动态。这里推几本我觉着不错的书：

• 《JavaScript高级编程》：可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看

• 《JavaScript权威指南》：不太适合入门，但是必备，不理解的地方就去查阅一下，很有帮助

• 《编写可维护的JavaScript》和：

• 《Node.js开发指南》：不错的Nodejs入门书籍

• 《深入浅出Node.js》：Nodejs进阶书籍，必备

• 《JavaScript异步编程》：理解JS异步的编程理念

• 《JavaScript模式》和《JavaScript设计模式》：JavaScript的代码模式和设计模式，将开发思维转变到JavaScript，非常好的书

• 《JavaScript框架设计》：在用轮子同时，应当知道轮子是怎么转起来的，讲解很详细，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西

• 《Dont make me think》：网页设计的理念，了解用户行为，非常不错

• 《CSS禅意花园》：经久不衰的一部著作，同样传递了网页设计中的理念以及设计中需要注意的问题

• 《高性能JavaScript》和《高性能HTML5》：强调性能的书，其中不只是性能优化，还有很多原理层面的东西值得学习

• 《HTML5 Canvas核心技术》：我正在读的一本书，对于canvas的使用，动画的实现，以及动画框架的开发都非常有帮助

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总