seo经典之作-2011最新搜索引擎优化实战(给出前端学习路线的具体建议(3)(组图))

　　seo经典之作-2011最新搜索引擎优化实战(给出前端学习路线的具体建议(3)(组图))

　　前言

　　这几个月来，朋友们几乎每天都加我微信，他们问得最多的问题就是——现在前端技术这么复杂，我该怎么学。这个话题太大，几句话无法回答；也因为这个问题确实困扰了很多前端开发者，所以我也开始输出这个系统文章。

　　虽然这个 文章 花了很长时间，但它肯定有它的局限性；我希望您随时指出这一点。

　　输入问题

　　我们可以感觉到，前端职位现在已经发展成为最重要的研发职位之一，所以对我们的要求也越来越高。所以我们需要学习的不仅仅是 CSS & HTML & JavaScript。但这三件事一直是前端的基础，并且从未改变。而在这三件事中，JavaScript 是最重要的。

　　接下来，我会根据自己的经验，对前端学习路线给出一些具体的建议。

　　目录学习三件套

　　每年还有很多面向初学者的前端开发。所以我也给刚起步的朋友一些建议。

　　刚入门的朋友，我觉得一开始不应该学Vue、TypeScript、Webpack等知识。重点应该是学习 CSS & HTML & JavaScript 的基础知识。

　　CSS & HTML

　　对于刚入门的小伙伴，还是建议大家认真学习CSS(3) & HTML(5))的知识点。在学习的路上，最好是学完后再打代码加深自己记忆的一部分。

　　当然，如果你愿意，建议你可以先模仿一个网站的静态页面（掘金、知乎等），通过一些属性可以了解它的实际实现场景。

　　当然，第一次开始输入代码时不要过分依赖自动完成功能。一开始使用自动补全对你记忆一些属性没有帮助；好好学习，以后一定会有收获的。

　　关于 CSS 你需要知道的一些事情（3)

　　CSS说起来容易做起来难，复杂又复杂；因为 CSS 总能给你惊喜。

　　HTML(5)你需要知道的一些知识点

　　说到 HTML，我认为很多人都是 div。因为 div 使用起来很酷，所以不用担心默认样式。

　　有人说HTML语义有很多优点，比如页面结构清晰，有利于SEO，便于团队开发和维护；我承认所有这些，但我仍然喜欢 div。

　　JavaScript

　　JavaScript一直是我们前端的基石，在一定程度上，对JavaScript的理解深度决定了你的开发。所以一定要努力学习。

　　现在很多人只是跳过了闭包、原型链、作用域链、继承等的文章，你现在可以问问自己，你真的了解这些基础知识点了吗？

　　JavaScript的基础知识点确实很多，所以《高级JavaScript编程》写了700多页；但是当你有了扎实的 JS 基础之后，你会发现学习框架或者学习框架源码会轻松很多。

　　JavaScript (ES6+) 你需要知道的一些知识点

　　上面提到的CSS&HTML&JavaScript的基础知识点，不需要你一上手就全部理解；其中一些是基本的，但它们也有困难。就算是进阶者，也不敢说自己掌握了这一切。有句话说的很好——一本书读一百遍，就知道它的意思。

　　我们不可能在第一次学习的时候就全部理解，但至少可以给我留下印象。当你在一段时间后再次学习这个知识点时，你一定会有新的认识。学习只是一项需要一直在线的任务，重复学习可以帮助你保持竞争力。

　　先声明一下，我并不是说其他​​技术不需要学习，但是对于初学者来说最好的重点还是先夯实基础。

　　其实，学习这三大项目并不需要太多时间。如果你有基础，大概3个月左右就能读完。你是否真正了解这是另一回事，但它已经是一个介绍。

　　CSS & HTML & JavaScript 推荐书籍/网站_W3C 的 CSS & HTML 网络课程《CSS 权威指南》、《CSS 揭秘》、《高级 JavaScript 编程》、《你不知道的 JavaScript》第 1 卷_入门从 ECMAScript 6 开始

　　HTML 不知道要推荐什么书。个人认为看教程和动手实践基本没问题。

　　接下来，我们可以学习一些工具库。

　　图书馆工具

　　对于库工具，我们常用的有 JQuery、underScore、zepto、Moment 等。

　　这些库为我们提供了极大的便利，节省了我们编写相关方法的时间，同时我们的程序更加健壮——我们自己的方法在某些情况下很可能会出现bug。

　　当然，对于这些库，我们不仅仅是了解API，还需要了解它的源代码。自己写相关的方法看看有没有这样的想法，这些库工具也是很好的学习工具，大家不要忽视。

　　下划线源代码中不是这个问题的答案吗？

　　当我们学习库工具的时候，一定要回顾一下 JavaScript 的基础；这进一步加强了基础。

　　前端框架（MVVM）的学习

　　最流行的框架一定是 React 和 Vue。如果说 JQuery 的存在更方便我们操作 DOM，那么现在 MVVM 框架将我们从手动更新 DOM 的复杂操作中解放出来。

　　至于学哪一种，React 和 Vue，更多的是看公司用的是哪一种（不一定）。至于如何使用Vue（React），用不了多久就上手了。我们更应该关注它们背后的设计思想和实现原理。

　　一些问题

　　我们不需要花太多时间在框架的 API 使用上，我们应该研究其背后的设计思想和实现原理。

　　我应该选择 Vue 或 React 哪个？

　　对比这个问题，很多人有烦恼（有的人两个都学，所以没有烦恼），这个问题已经被很多人回答了。但我仍然不认为选择哪一个在政治上是正确的，选择你需要的。

　　有兴趣的可以看看这个文章：

　　以下是文中的抽象思想：

　　Vue的优点是：

　　React 的优点是：

　　vue相关资料

　　对于框架的一些学习资料，我个人比较喜欢推荐官方文档。官方文档中有很多问题已经明确说明。市面上的一些书籍是官方文档的延伸（不排除有优秀作品）。

　　vue官网&vue路由器官网&vuex官网解析vue.js内部运行机制掘金手册浏览器&电脑基础

　　如果你想快速晋升为高级工程师，那么你必须具备一定的浏览器和计算机基础知识。因为它可以让你更好地了解前端。

　　浏览器一直是 JavaScript 最重要的托管环境，所以我们必须了解 JavaScript 是如何在浏览器中执行的。

　　我们应该与浏览器的前端开发接触最多。记得第一年工作最头疼的就是处理IE的兼容性问题。工作中的很多问题都和浏览器有关，所以我觉得了解浏览器的工作原理是非常有必要的。

　　为什么要学习浏览器的工作原理？准确评估Web开发项目的可行性 从更高维度看页面 解决面试中遇到的大部分浏览器问题 计算机基础

　　我们需要对计算机的基础有一个大致的了解，这样我们才能对整个过程有一个大致的把握。在实际开发过程中不要太被动。

　　有些事情要知道

　　这里只列出部分知识点。如果你想全面学习，可以参考下面的推荐材料。

　　Browser & Network Fundamentals 推荐书籍/资料 《浏览器的工作原理与实践》专栏《图解HTTP》《网络如何连接》前端工程

　　如果你从事前端开发的时间长一点，你肯定会有这种感觉——前端开发越来越工程化，越来越复杂。

　　对于前端开发来说，现在前端需要做的不仅仅是剪页、调用接口那么简单，我们需要了解的技术无疑更加广泛。

　　对前端工程的一点见解

　　随着项目复杂度的增加，前端需要做的工作也越来越繁重。当项目复杂时，会出现很多问题，例如：

　　在前端工程细分方面，我认为可以分为三个方向：模块化、组件化、标准化。也就是说，所有能够提高前端开发效率和前端应用质量的手段和工具，都是前端工程的实践。

　　模块化

　　每个从 UI 中拆分出来的收录模板 (HTML) + 样式 (CSS) + 逻辑 (JS) 的完整结构单元，我们称之为组件。

　　即按功能将复杂的页面拆分成多个独立的组件。

　　标准化前端工程，一些知识点，性能优化

　　提到性能优化，你首先想到的是什么？我首先想到的是一个面试问题：

　　从输入网址到完成页面加载的具体流程

　　因为从直观上看，我们在前端需要优化的步骤基本都在这个加载项目中。

　　性能优化现在是前端必备的技能。当然，一些所谓的性能优化技巧现在已经成为需要遵循的规范。

　　我们需要关注两个方向的性能优化：

　　运行时优化开发过程中性能优化一些知识点推荐资料Nodejs

　　我们知道，得益于 Nodejs，前端开发出现了新的高潮。JS可以开始涉及到后端领域，JS的可能性更大。

　　Nodejs一些知识点数据结构和算法

　　在这一点上我也很弱，所以我不会扩展它。这部分你可以刷 leetcode。

　　另一本书是《Learning JavaScript Data Structures and Algorithms》（第三版）

　　根据葫芦画

　　在项目开发过程中，我们可以接触到很多优秀的库工具或者UI库。比如lodash、underscore、moment、element-ui、antd design等。

　　这么优秀的工具我们自己可能设计不出来，但是我们可以完全自己写下这些工具，你会发现里面有很多不可思议的技巧和绝妙的想法。

　　这也是一种非常有用的学习技巧。

　　终于