最近知乎收到的问题不多，很难请前台学习。连续几次升级，答案都挺全的。 现在整理一下给掘金的朋友们参考。 知乎原问题:前言前台工作两年多了。 大部分的前台原则和框架都可以完全应用。 工作中很少有处理不了的问题(除了那些恶心的无法实现的需求)。现在经常被安排面试新人(被安排面试主要是因为工作能力突出，公司有很多工作3年以上的员工)。 说说我的学习方法吧，可能对你有用！先打好基础，HTML，CSS，JavaScript就不用说了，完全掌握。 如果不知道，就查MDN 关注HTML的语义 区分块级标记和行内标记 检查一下剩下的文件。 head里还有少量meta的定义。明白；理解 半铸钢ˌ钢性铸铁(Cast Semi-Steel) 重点放在盒子模型，定位，层次，过渡，动画和变换。 知道原理和规则 大部分作品都是按照设计写的。 掌握以上99%的回收率并不难。 接下来重点介绍几种常见的布局。 之后再去flex。 最后，少顶嘴 差不多了。 Java Script语言 重点来了。看红宝书掌握基础，提前去上不懂的JavaScript。 这两套就够了，不要做那么多。 理解每一个知识点。 ES6基本没问题。 以下问题要先了解，优先顺序如下:这个用法，相关原理，原型/原型链闭包，面向对象相关同步async/callback /promise/async，await modular CommonJS，AMD要先了解这些难懂的概念，更了解你的JS。 接下来开始看框架:第二，前期要用框架，后期要懂原理。 新人先做Vue。 Vue是一个易于使用的框架。 按照官方文件走问题不大。 我们应该提高对原则的理解。 学习如何阅读源代码。 Github经常去购物 在学习框架之前，我其实建议新人首先要明白，Babel和webpack并不是只使用。 工作中也会用到少量的原理。 Babel将教你如何编译代码。 Webpack教你如何打包文件。 自己写编译器和打包工具也不是特别难。 反正看了vue和react源码，帮助很大。 做了Vue的全家桶，理解React和React hooks学习新的思路。 回望Vue 你会发现他们是如此的相似却又不同。 实践总结，你会对整体框架有越来越深的理解。 第三，如何看源代码。刚开始看源代码的新手会陷入两种困境。 第一，无从下手 第二，看完没什么感觉。 这也很正常。 一般我们熟悉的框架都有几千甚至上万的PR。 太多细节会打扰你。 掌握整个节奏和流程。 学习原理也很难。 就连找个入口都像大海捞针。 建议从以下几个方面入手:挑一个简单的。 不要从vue，react，webpack开始。 太难的话会直接劝阻新人。 不要为了面试而读书。 反之，效果不好，面试再问深一点也回答不出来。 平时有兴趣多思考。 根据难易程度，函数库 像vue，webpack，babel，都有适合你的简单项目。 一些创始人(葛优)也进行了直播。 国外更多，youtube搜索很多。 即使不看源代码，写一个简单的演示也会大大提高原理和理解。 调试开源项目 先把项目拉下来。 在vscode里跑下来，核心函数再破几个点。 看看变量之间的区别。 对它有了更深的了解。 看源代码是别人的，学的是自己的。 学习的时候，记笔记，思考原则，总结经验。 下面说说前台工程怎么做。 目前在做前台开发。如果你现在想学习前台开发技术，并且遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙3000人:前:851中:231末:348。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 四、前台工程现在最流行的打包工具webpack。 当然可以直接用vue-cli2，vue-cli3和create-react。 但是你还是要掌握webpack。 首先，关注babel和webpack。 学习编译和打包的原理。 自己配置webpack。 试着自己写下webpack的加载器和插件。 在学习这些东西之前，你应该对node.js有所了解，没必要一直学习Node.js。 一般日常使用的是读写文件的fs接口和path path接口。 通过编写一些演示，这些API不难理解。 在基本的webpack上，配置文件没有使用太多的节点内容。 最后，学会自己配置webpack的配置文件。 如果想优化打包量和速度，需要了解很多webpack插件。 webpack的核心是插件。 当然，前景工程还不止这些。CI/CD可持续整合。海理解。 了解各种脚本自动化命令和代码生成技术