前言
本场 Chat 需要读者具有计算机基础知识，对编程语言有一定程度的了解。主要面对的读者包括以下四类人员。
熟悉其他编程语言，打算学习前端的开发者。
在校大学生或应届毕业生。
处于自学或者培训状态的学者。
工作经验不足三年的初中级前端开发人员。
只要您是一个前端学习者，或是一个一两年开发经验的人，认真读完本篇内容，您都会获得收获。
前端概述
对于普通用户而言，前端就是页面所呈现的结构和效果。包括网页的页面，微信的页面，小程序的页面，混合 App 的页面。这些页面中，除了数据部分其他都由前端来实现的。对应的后台，就是处理前端所提供的数据，根据前端的各种交互请求处理各种数据，并返回对应的内容。
对于开发者而言，前端就是 HTML、CSS、Javascript。HTML 就是页面的结构，CSS 是页面的样式效果，Javascript 是页面逻辑。
HTML 由一个个标签组成，CSS 由一个个属性组成，Javascript 则由一个个方法组成。
HTML 是前端开发最基本的内容，也是最简单的内容。我们只需要将内容包在一个个标签里面即可，不管是 HTML4 或者 HTML5，对于开发者而言，都没有太大的影响。
CSS 在页面中是相当重要的，开发者需要依靠它来还原我们的 UI 效果图。基于 CSS 属性的浏览器兼容不一致，我们在实际工作中往往都是需要根据不同的属性写不同的浏览器兼容代码。用户屏幕的尺寸不同，我们页面的样式也会发生变化，所以我们还需要知道响应式布局的内容。而且很多时候我们的 CSS 样式会基于逻辑发生变化，所以在这里我们还需要学会在不同的情况下控制不同的页面效果。
Javascript 是我们工作中使用最多的，除去少量简单的内容介绍页面，还存在大量的逻辑处理。而这些逻辑处理，也是考验一个开发者能力的地方。同样一个功能，能用最少的代码实现该功能，并且在后续需求变化的时候也能良好的处理，这是我们所需要做到的。
用我自己的话来理解，前端就是做两件事。一件事是将我们的页面呈现给用户，另一件事就是决定我们页面可以进行什么操作或者有什么事件。
每一个人对于前端的技术都会有不同的看法，我来讲讲我对前端技术的认知与划分。
CSS技术
在我看来，CSS 的作用分为三类，布局+样式+效果。
布局：指的是一些影响页面元素布局的属性，如：position 、float 、z-index、flex等属性。
样式：指的就是元素本身的一些展示效果属性，如 font-family、font-size、color、width、background 等属性。
效果：指的是对元素进行一些变化的属性，如 transform 、transition 等属性。
我们日常开发中，最容易出现问题的部分，可能就是布局这一块，因为很多时候我们的设置往往不产生作用。
首先我们在写 CSS 的时候应该注意书写顺序，如下面代码如示。
/* 位置属性 */
position, top, right, z-index, display, float
/* 大小 */
width, height, padding, margin
/* 文字系列 */
font, line-height, color, text-align
/* 背景 */
background, border
/* 其他 */
animation, transition
另外，CSS 很多属性具有继承性，也会因此带来一些问题，如你使用浮动时，可能要考虑清除浮动。
注意：使用 clear 的时候尽量不要放在有内容的元素中。
除此之外，有的时候还会遇见 overflow 或者 position 出现错误之类的情况。在这样的情况下，我们应当在使用其中一个的时候也对另一个进行设置。
对于 CSS 和 JavaScript 中所涉及到的各种深坑，因为其内容较多，所以我将独立整理一篇文章发布在读者圈，在此就不过多对每一种坑进行解说了。
JavaScript 技术
学习 JavaScript，和学习 CSS 完全不同。JavaScript 是一门编程语言，我们应该如何划分它的内容，如何对它进行学习呢？
在文章开头我们已经说过文章适合有一定编程基础的人学习，所以在此就直接讲解 JavaScript 编程语言，其他基础内容就不多讲解了。
1.了解JavaScript
你需要了解 JavaScript 与 ECMAScript 之间的关系，以及 DOM 和 BOM 的概念。
2.基本概念
这一块和其他编程语言一样，你需要了解的就是 JavaScript 的语法、变量、数据类型、语句、函数等等。
3.作用域问题
在 JavaScript 编程中，我们经常会遇见作用域的问题，这一块是需要独立掌握的部分。
4.函数
当了解了函数的概念之后，接下来就需要深入的研究函数。这是 JavaScript 日常开发工作中最多最复杂最考验技术的内容，其中涉及到很多细小的知识内容，需要你用大量的时间来学习和掌握它们。
5.事件
事件是 JavaScript 与 HTML 之间的交互方式，日常工作中基本都是通过触发某些事件来执行我们的函数。对于事件，我们需要学习和了解事件流和事件类型。我们通常基于事件流有许多的处理。对于事件类型而言，我们日常使用的事件类型不会太多，但是你需要对每一种事件类型都要了解清楚，知道什么事件类型可以用来完成哪一些功能。
6.JSON
JSON 其实并非 JavaScript 中的内容，它是一种数据类型，而在前端实际工作中往往会不断的接触 JSON，所以你需要了解它。
7.Ajax
Ajax 的核心内容就是 XHR，通过 XMLHttpRequest 对象来完成与后台的交互，在这里你需要掌握如何使用 Ajax 与后台完成交互，以及在交互过程中的各种设置。
8.跨域
什么是跨域？跨域用来解决什么问题？如何来跨域？当你了解完了这三个问题之后，结合 Ajax，你就可以解决与后台之间出现的各种交互问题。
项目流程
为什么要将这个单独作为一个大点来讲解，这里要给大家阐述一个问题，一个正常开展的项目，你作为一个开发者，必须要参与整个项目的流程，而不是一味的听了做，做不出来再说。
前端的前期准备工作是非常重要的，用20%的时间来做准备工作，可以减少你80%的麻烦。
首先在项目立项的时候，作为开发者，我们一定要参与立项的讨论，项目要求的功能和给我们的开发时间以及技术要求，这些在前期就一定要确定都是可行的。
当项目功能块确认之后，UI 会先出一版原型图，这时候会基于这版原型图再进行讨论，无论是单人开发还是协同开发，我们都需要了解整个原型图，对于每一块都要了解，如果有疑问的地方，一定要和 UI 进行及时的沟通，如果沟通发现问题两者无法决定，要及时上报问题。如果原型图没有问题，那么接下来就该拆分每一个原型图的功能，确认每个页面所包含的功能点，对应的每个功能点会使用什么技术，这些都需要做好准备。
在 UI 做原型图的时候，前端开发人员就该定下开发的一些规定和开发使用的技术，并与后台进行沟通，约定好你们之间的交互格式。
在前期我们还应该有一份具体的开发进度表，什么时间做什么内容。到什么时候完成这个项目，什么时候开始测试，什么时候发布。虽然开发过程中有很多内容是不可控制的，但是一份计划的进度表是非常有必要的。它会让你更加清晰的知道你在什么时候该做什么事。
每天上班前十五分钟为今天的工作进行一些安排，中午的午休是非常重要的，它能让你在下午保持足够的精神，下午下班前花十五分钟总结今天的工作进度。这些小小的安排都是非常有用的，能够确保你在开发的过程中能够有条不紊的执行你的工作计划。
当你的项目开发中遇到技术问题如何处理？在此提供下面几个方法。
1.百度
这是大部分人都采用的方法，但是你往往会发现有的时候百度出来的结果并不能解决你的问题。
2.Google
其实 Google 应该是最推荐使用的，但是因为两点原因，所以把它放在百度后面，一个原因是因为要翻墙，还有一个原因是需要英语阅读能力。如果你能解决这两项，那么首推的方法就是 Google。
3.论坛社区
IT 人员都喜欢在各个社区论坛活跃，比如我就长期在 CSDN 活跃，当你遇见问题的时候，你可以把你的情况通过帖子或者问答的形式在论坛中求助，都能比较快的得到回复（从效率来讲，你前面的方法没有得到需要的结果才推荐使用论坛社区）。
4.自己的技术圈子
每一个 IT 从业人员都应该有自己的一个技术圈，你认识的各路大神都是你积累的宝贵资源。直接问人的效率肯定是最高的，但前提就是你有认识的人能解决问题。所以大家在工作中有机会接触大牛的机会都一定要珍惜。
当你测试或者发布之后出现 Bug 怎么办？
由于前端在开发流程中的位置关系，所以很多时候项目出现问题都会来找前端，前端背锅侠可不是说着玩的。
当我们的项目出现问题的时候，首先第一点也是最忌讳的一点，就是一来就推卸责任，当你的项目经理拿着问题来找你的时候，你首先就是一句不是我的原因，那么恭喜你，你的项目经理会特别的记住你。
当我们接到问题的时候，首先第一步应该确认问题，寻找到问题出现的原因。当你找到原因之后，如果是后台的原因，或者其他原因，及时反馈。记住如果不是你的原因，你需要说得出问题的原因说在。
如果问题出现在我们自己身上，我们应该先拿出解决方案，并确认该方案解决问题会不会带来其他的影响，不要改一个 Bug 就跟着出现一片的 Bug。确认完成之后在动手更改。当你更改完成之后记住不要马上发布，而是要整个项目的流程走一遍，确认都没有存在问题之后再发布出去。
在这里，我们说些题外话。
对于一个前端而言，和你配合的 UI 及后台能够决定你的开发效率和开发质量。我们来对 UI 进行一个等级划分，当然这个划分是基于我们的工作而言（当然，有的很小的公司可能甚至还没有 UI，这样的情况我们就不讨论了）。
初级：UI 直接给你一份效果图，让你照着效果图处理。由于 UI 对前端不了解，可能还会在效果图中给你弄错一些东西。比如，应该是下拉框，她给你画的是一个输入框。有的时候她设计的东西可能还超过了我们需要兼容的屏幕尺寸。你需要在开发过程中不断的询问她，不断的确认内容，她也修修改改，你也得修修改改。
这样的 UI 应该也是新手级的 UI，你遇见这样的 UI 你需要拿着效果图自己去取各种数据，她的错误会带着你跑偏，面对这样的 UI 你的开发效率只能是非常低的，而且经常做无用功。
中级：UI 会先给你原型图，然后告诉你原型图中的各个要点，询问你实现起来是否有问题，没有问题她在去做效果图。做完效果图之后，她会为你把每个页面的数据都进行标注，你只需要按照她的标注来实现即可。
这样的 UI 就是我们日常工作中最常见的 UI 了，基本上和这样的 UI 配合你的工作效率不会被拖延，但是在工作中还是会因为沟通或者其他问题，出现一些她想要的效果和你完成的效果之间的差别。
高级：UI 在原型图的时候会告诉你大体的内容，然后会做出多版效果图，并完成每一版效果图的标注，同时会告诉你这些效果图中需要注意的内容，以及她想要的效果。她设计的多版效果图，会让你使用你觉得实现起来比较 OK 的一版。
如果在现阶段遇见这样的 UI，你应该觉得庆幸，她大大提高了你的工作效率，她自己可能额外做了很多工作，对你而言，她做的这些工作都为你节省下了大量的精力，基本上你的工作过程中不需要为效果图的实现而伤神。
除去 UI 而言，后台一样会对我们的工作效率产生很大的影响。
对我们而言，什么样的后台是有利于我们提高工作效率的后台呢？
首先，在开始阶段和你商量，并约定好你们之间交互的格式，然后给你写一份接口 API 文档，根据你开展的顺序为你写接口，写完接口之后会自己测试已经 OK 了，然后告诉你。
简单来说，就是问你想要什么样的数据我给你，告诉你我需要什么样的数据，你按照格式给我。接口我都自己测试已经 OK 了，可以用了，你直接调用就可以了。什么请求处理，异常处理，跨域问题之类的他都为你解决了。
相反的，如果一个后台自己决定了他要给你什么样的数据格式，不管你这边的情况，你自己拿到了再来处理，什么接口 API 也不给你详细的内容，随便告诉你接口地址，其他问题都丢给你，那么你的开发进度肯定就会大受影响。
我们应该具备的技术
不同的阶段，我们应该具备不同的能力，如下表所示。不要空有一两年的工作经验，工作技术却还是和刚入门的区别不大。
初级和中级在我看来最大的区别是对技术的了解和对自己的了解。一个中级前端对技术必须已经很了解了，而且学习能力必须够强，除此之外，你还得了解你自己。
其实所谓的初级中级并没有一个标准，而且很多时候你会某一方面做得非常好，但是其他某些方面又显得不足。从开始能写页面，到后面的追求质量和效率，我们就是在不断的提升自己。无论在什么阶段，学习都是最重要的。
如何学习
入门学习
这个问题是最难的，也是一个刚入门的人最迷茫的。因为他们不知道前端有些什么，不够了解造成了不知道学什么。所以当你越了解前端的时候，你的学习能力就越强。
自学是最困难的，困难之处在，你在海里游泳，你想上岸，但是你不知道岸在哪一边，也没有灯塔为你指明方向。
虽然现在培训机构遍地都是，口碑也很差，但是不得不说，对于大部分想学习前端的人而言，培训是个不错的选择，因为你可能找不到一个愿意一直抽空来带你的人，每一个开发者的时间都是很宝贵的，因为他们连休息时间可能在写代码，周末也在写代码，度假都还在看代码。
如果你有一个愿意带你的人，他了解你的学习情况，他就会告诉你该如何学习，你欠缺什么东西。
如果没有，而又不想参加培训，那在这里只能给你们推荐一份自学套餐。
1.基础学习
通过 W3C 或者菜鸟教程了解基础的知识语法，跟着每一个知识点做 Demo 练习。
2.视频学习
这个时候就有必要来看一些基础系列的视频教程，跟着教程中所教的内容来进行尝试。
3.独立练习
当你觉得基础掌握之后，你可以写东西了，去找一些简单的网站来模仿，用自己学习的内容来完成这些网站。
4.扩展学习
当你基础掌握 OK 之后，你就可以学习一些基础框架的东西来丰富你自己了，但是前提是已经掌握好了基础知识。
PS：这是一个大致的学习线路，而学习的内容你可以在读者圈找到我的联系方式，告诉我你的情况，我来告诉你学习内容。
进阶学习
当前面的内容你已经掌握了，并且能够熟练的在项目中使用了，这个时候学习的方法和学习的线路就会与之前的时候发生变化了。
这个时候，你学习的内容很多时候都会根据你工作内容来写，比如各种各样的框架，各种各样的第三方插件，及第三方 API 的使用。
这个时候你学习的东西应该是具有明确的目标性的。比如我现在要学习 Vue.js 框架。那么我们在这个时候就应该先前往 vue.js 的官网进行了解，学习基础语法，同样需要跟着做各种练习。基础的学习完之后，就需要对它的其它进阶内容进行学习，如 vue resource、vue router 这些。
简单来说就是跟着官网做，然后加以实用，在实用过程中发现问题，找解决方案。
如果你不是因为工作内容而学习，而是想学习一些内容作为技术储备的话，你也可以在读者圈找到我的联系方式，我了解你的情况之后为你推荐适合你学习的内容。
在进阶学习阶段你必须要掌握下面提到的这些内容。
1.第三方内容的使用。比如 Echarts、百度地图 API，要知道如何学习使用这些内容。
2.CSS 框架。你起码需要掌握一种，如：Bootstrap。
3.JavaScript 框架。我觉得你起码需要掌握 jQuery 这样的基于 DOM 操作的框架，除此之外有能力，你应该掌握一种 MVVM 框架，其他的框架基于你的工作内容来看，有需要的进行学习。
4.工具的使用。如 SVN、Git 这些版本控制系统对代码进行管理，WebPack 对你的项目结构进行管理、打包。
前端的坑
前端遇见的坑，都是你选择前端时脑子进的水。
前端的坑太多，多到没有一个人、一个教程、一本书能把它详细列举出来，在这里我们来列举一些具有代表性的坑。
CSS
1.浏览器兼容
很多时候会因为不清楚浏览器各个版本对于不同的内容支持度而产生问题，这类问题统称为兼容性问题。
解决方案就是需要你对浏览器兼容性足够了解。
2.浏览器默认样式问题
在不同的浏览器上，你的页面可能展现出了不同的效果，这个除了上面说的浏览器兼容问题以外，还可能因为各个浏览器的默认设置不同，如默认字体大小、默认间距。如果你没有对这些进行设置，那么它们的效果就会不同。
对于这样的问题，在 CSS 中有个概念叫做 CSS Reset，即浏览器样式重置。如果需要不同的浏览器有一样的默认效果，那么你就需要对浏览器样式进行重置。
3.元素位置问题
在页面中正常写代码的时候，你发现元素所处的位置和你理想的位置出现了出入，或者说你进行了某些设置，写了一些 CSS 属性，却发现它没有生效。
出现了这样的问题，一般是采用了浮动、定位、层级、图片文字混排造成的。对于这些内容而言，使用时要注意 CSS 书写顺序，以及子元素对父元素属性的继承。
浮动时，记得需要清除浮动。定位，记得父元素与子元素之间是否都进行了相对应的设置。你如果将图片和文字放在了同一个元素中，想让它们对齐，你是无法直接对齐的，你需要对图片进行额外的样式处理。
而且浮动和定位这些会相互产生影响，在使用的时候应该注意。
对于这一块的问题，很多时候也会和第一点的浏览器兼容产生一定的关联，注意各个属性的兼容性支持。
4.元素大小问题
有的时候，你发现设置的元素大小失效了。面对这样的情况，一般都存在于有层级的元素中，父元素于子元素都应当进行对应的设置，设置大小 auto 有的时候必要使用 min 或者 max 控制。除此之外还有一点，就是没有设置 overflow 属性而带来的各种问题。
JavaScript
1.浏览器兼容问题
JavaScript 同样存在浏览器兼容性问题，你需要了解浏览器对 JavaScript 的兼容性支持。
2.计算问题
大多数语言在处理浮点数的时候都会遇到精度问题，尤其在 JavaScript 里似乎特别严重。
比如我们输出 11.1*13，页面上会输出 144.29999999999998。
如何处理这些问题？我们可以避免浮点数计算，将浮点数转为整数，如 alert(((11.110)13)/10)。
3.typeof 返回值
尽管在学习 JavaScript 的时候，告诉你有这些数据类型，但是使用 typeof 的时候你会发现它的返回值似乎不是这样返回的。null 和 Array 都变成了 obj。
4.作用域问题
作用域问题，有的是作用域访问不到，也有局部变量影响到全局变量的问题。
对于这类问题，在 ES6 中新增了 const 和 let 来解决。
在使用某些框架的时候，你就会习惯一种写法 that=this。
5.this 指向问题
由于不清楚在各种情况下 this 的指向，所以会出现 this 指向不明确的问题，这里大家应该对 this 进行仔细的学习。
6.严格模式
你开启了严格模式，你的代码必须遵循严格模式，不然就会各种错误。
7.事件流
对事件捕获和事件冒泡不清楚而出现的问题。
8.时间格式
对于时间的连接符 -和/，不同的浏览器也会出现不同的支持。
new Date 在不同浏览器中支持的写法都不同，最兼容的写法是 yyyy/MM/dd。
不多先生的话
其实以上几点内容，都是工作中遇见的问题，也不全面。你要是想通过一篇文章就能够获得技术的突飞猛进，那是不可能的。下面的内容，不是技术的干货，但是对于入门前端的你，我觉得你可以听听。
我们的前端路上的第一脚迈向哪里？
学习
很多人对这两字不觉得有什么，但是作为一个一路走过来的人，用实际告诉你，当你准备入行前端的时候，你就需要准备好不断的学习，每一个前端都是在不断的工作中不断的学习新的内容。而你的学习态度和学习能力，决定了你前端生涯能走多快，走多远。
我们公司有同样工作经验的两人，但是两人的薪资待遇和工作情况完全不一致。从刚入职的时候差不多的工资，到最后越来越大的差距，中间体现的就是一个人的学习情况，一个人的进步。
想学习的人，懂学习的人，一年可能得到多次提薪。
这是和你收入直接发生影响的。
虽然不是每一个人的学习能力都可以一样，但是我们都可以有一样的学习态度。
我公众号的第一篇文章就是一首古诗，在这里送给大家：
劝学诗
作者：颜真卿
三更灯火五更鸡，正是男儿读书时。
黑发不知勤学早，白首方悔读书迟。
不要说什么白首方悔读书迟，在你的前端生涯中，经过一年你就知道主动学习与被动学习会发生多大的差别，尤其是刚入行的人。
最真实的案例：同时毕业的两个同学，一样入行前端，一年过去了，一个的工资是4K，一个的工资是14K，同样的大学毕业，同样的城市。这些都是值得大家思考的。
心态
除去学习之外，我们的工作中还有什么是非常重要的？那恐怕就是与人相处了。在与人相处的过程中容易发生不开心，我们要解决这些不开心。
有人的地方就有江湖。虽然搞开发的不像其他一样勾心斗角，但是也是存在办公司文化的。尤其是我们这个岗位——前端背锅侠。
首先大家都知道的一个道理，心情好，做事儿效率高。所以我们在工作中，无论遇见什么问题，首先要保持好心态。
遇见问题最重要的是什么？及时沟通，及时解决。
每一个人在每一家公司都会遇见无数问题，各种不开心，如果你不解决这些问题，如何能在公司好好的待下去？所以我很喜欢鸡汤文，我喜欢催眠自己。
有人说天天加班怎么保持好心态，工作不顺利怎么保持好心态。
遇见问题有时候是很无奈的，我2016年的五月，连续上了一个月的班，每天早上九点晚上十点，连放端午都在加班。但是通过这一个月，我明显感觉到自己的某些成长，心态上的，技术上的。
然后我就离职了。
这就告诉大家，凡是都有一个度，这个度越大，你的抗压能力就会越强，你的抗压能力越强，你能承受的就越多。
不管是什么样的经历，都是你宝贵的经验。
规划
无论是对你的职业生涯还是对你的工作内容，你都需要有所计划，有所规划。不然你不会知道自己的路怎么走。
在你刚入行的时候其实并不推荐你思考太多，你需要的就是技术的提升和经验的积累，但是当你迈入前端一段时间之后，你就得必须思考你的职业生涯要如何规划，你的工作要如何规划。一个合适你的规划能够像灯塔一样，在你航行的时候为你指明方向。
你可以不需要有非常详细的规划，列得一条一条的计划。但是你应该知道你什么时候要做什么。
比如我的2018年计划：
1.大约写30-40篇博客。
2.学习PHP和Python。
3.继续研究红皮书。
4.想写一本书，准备材料，了解相关内容。
这样一些大的内容你必须要有，但是细节，如写什么博客，如何来学习 PHP，这些你可以列出计划，然后实时根据进度进行调整。
理想一定是要有的，万一实现了呢？
尽管计划赶不上变化，但是你还是需要做计划。