想做web前端的工作，应该先学什么？

在当今的数字化时代，前端工程师扮演着至关重要的角色。他们负责设计和开发用户界面，使得用户能够与应用程序或网站进行互动。为了找到最出色的前端工程师，你需要了解哪些技能和知识是必备的，同时也要掌握一些面试技巧和常见的面试题。

一、前端工程师必备知识技能

1.HTML与CSS

HTML和CSS是前端工程师的基础技能。HTML（超文本标记语言）用于创建网页的结构，而CSS（层叠样式表）则用于定义网页的样式。对于一个前端工程师来说，他们需要理解HTML标记和CSS属性的工作原理，能够使用最新的版本进行高效的编码。

2.JavaScript

JavaScript是现代前端开发中最重要的语言之一。它用于实现网页上的交互行为，例如动态内容、表单验证、动画效果等。前端工程师需要熟练掌握JavaScript的基础知识，包括语法、DOM操作、事件处理等，并且了解最新的ES6+规范。

3.响应式设计

随着移动设备的普及，响应式设计已成为前端开发的重要部分。前端工程师需要理解响应式设计的基本原理，并能够使用相应的工具和技术，如媒体查询、弹性布局、流式布局等，来实现响应式设计。

4.前端框架和库

现代前端开发中，前端框架和库的应用已经成为常态。前端工程师需要熟悉一些主流的前端框架和库，如React、Vue、Angular等。他们需要理解这些框架和库的基本概念和工作原理，包括组件化开发、状态管理、虚拟DOM等。

5.版本控制

版本控制是现代软件开发中的重要工具，前端工程师需要熟悉如何使用版本控制工具，如Git。他们需要理解Git的基本原理和使用命令，能够进行代码合并、解决冲突等操作。

二、前端工程师面试技巧

1.准备充分

在面试前，充分准备是必不可少的。除了熟悉前端工程师必备的知识技能外，你还需要了解公司的业务和产品。了解公司的需求可以帮助你更好地展示自己的技能和经验，同时也能表现出你对这个职位的热情。

2.展示实操能力

面试不仅仅是一场理论考试，更是展示你实操能力的机会。你可以通过展示过去的项目经验、代码样本或者现场进行编码来展示自己的实际能力。这样可以让面试官更好地了解你的技能水平和实践能力。

3.深入理解问题

在回答面试问题时，不要仅仅给出简单的答案。要深入理解问题背后的原理和逻辑。例如，当被问及如何实现响应式设计时，你可以详细解释不同的实现方法，并给出自己的优缺点分析。这样能表现出你的深度思考能力和对问题的理解。

4.良好沟通能力

前端工程师除了技术能力外，良好的沟通能力同样重要。在面试中，你需要清晰地表达自己的想法和观点，同时也要积极倾听和理解面试官的问题和要求。一个具备良好的沟通能力的前端工程师，能够更好地与团队协作，解决技术问题。

三、面试必考题目

1.请描述一下你对响应式设计的理解。

答：响应式设计是一种根据设备屏幕大小和分辨率来调整网页布局的设计方法。它主要通过使用CSS媒体查询来检测设备屏幕的大小，从而应用不同的样式规则。另外，响应式设计还需要考虑流动布局、弹性布局和图片自适应等问题，以确保网页在各种设备上都能正常显示。

2.请介绍一下你最近完成的一个项目，并描述一下你在该项目中扮演的角色和遇到的挑战。

答：我参与了一个电商平台的项目开发。我在项目中主要负责前端开发工作，包括UI设计、交互实现和性能优化等。其中一个遇到的挑战是如何实现动态加载产品数据的功能。我使用了React的状态管理和异步渲染技术，成功解决了这个问题，使页面能够根据用户操作动态加载数据，提高了页面的加载速度和用户体验。

3.请解释一下什么是组件化开发，并描述一下你在组件化开发中的实践经验。

答：组件化开发是一种将页面拆分为独立的可复用组件的设计方法。在前端开发中，组件化开发可以使代码更加模块化、易于维护和复用。我在实践中，通常会将页面划分为多个组件，然后为每个组件编写独立的CSS和JavaScript代码。这样可以使代码结构更加清晰，方便后期维护和扩展功能。

4.请解释一下什么是版本控制以及版本控制工具Git的使用场景和原理。

答：版本控制是一种追踪和管理文件变更的工具，它可以用于代码管理、文档版本控制等场景。Git是当前最流行的版本控制工具之一，它采用的是分布式版本控制方式，每个开发者都拥有一个完整的代码库，可以在本地进行代码的修改和提交。Git的主要使用场景包括团队协作开发、代码备份恢复、分支合并等场景。通过使用Git，可以更高效地管理代码版本和协作开发，减少代码冲突和错误的风险。

5.请描述一下你对性能优化的理解，并分享一下你常用的性能优化方法。

答：性能优化是前端开发中非常重要的一环，它可以提高网页的加载速度和 响应速度，提升用户体验。我常用的性能优化方法包括以下几点：1.代码压缩和合并：将多个JavaScript文件合并成一个文件，压缩CSS和JavaScript代码，减少文件大小和下载时间。2.图片压缩和优化：使用压缩工具对图片进行压缩和优化，降低图片大小和加载时间。3.使用CDN加速：使用内容分发网络（CDN）将静态资源缓存到各地的服务器上，加速用户下载速度。4.缓存优化：合理使用浏览器缓存，将静态资源缓存到用户的浏览器上，减少每次下载的时间。5.代码分析：通过使用性能分析工具，找出代码中的性能瓶颈，并进行优化。例如，通过使用虚拟滚动、懒加载等技术来提高网页的性能。通过这些方法，我可以有效地提高网页的加载速度和响应速度，提升用户体验。

6.请解释一下JavaScript中的闭包是什么以及它的应用场景。

答：闭包是指一个函数与其所引用的变量集合之间的绑定关系。它允许一个函数在执行时访问并使用其外部函数中定义的变量，即使外部函数已经返回。在JavaScript中，每个函数都可以产生一个闭包，闭包可以用来实现一些特定的功能，例如模块化、私有变量和回调函数等。应用场景举例：模块化：通过闭包定义一个私有的变量或函数，避免全局变量污染，同时可以对外暴露一些接口来实现模块化。私有变量：通过闭包定义一个私有的变量或函数，在外部无法直接访问，只能通过闭包中的公共接口来访问。回调函数：通过闭包将外部的变量传递给内部的函数，使得内部的函数可以访问并修改外部的变量。总之，闭包是一种强大的功能，它可以实现许多常见的编程需求，同时也可以提高代码的可维护性和可复用性。在面试前端工程师时，面试官通常会通过考察候选人的知识技能、实操能力以及解决问题的能力来判断其是否符合公司的要求。通过深入理解问题、良好协作开发，减少代码冲突和错误的风险。

7.请描述一下你对性能优化的理解，并分享一下你常用的性能优化方法。

答：性能优化是前端开发中非常重要的一环，它可以提高网页的加载速度和响应速度，提升用户体验。我常用的性能优化方法包括以下几点：1.代码压缩和合并：将多个JavaScript文件合并成一个文件，压缩CSS和JavaScript代码，减少文件大小和下载时间。2.图片压缩和优化：使用压缩工具对图片进行压缩和优化，降低图片大小和加载时间。3.使用CDN加速：使用内容分发网络（CDN）将静态资源缓存到各地的服务器上，加速用户下载速度。4.缓存优化：合理使用浏览器缓存，将静态资源缓存到用户的浏览器上，减少每次下载的时间。5.代码分析：通过使用性能分析工具，找出代码中的性能瓶颈，并进行优化。例如，通过使用虚拟滚动、懒加载等技术来提高网页的性能。通过这些方法，我可以有效地提高网页的加载速度和响应速度，提升用户体验。

8.请解释一下JavaScript中的闭包是什么以及它的应用场景。

答：闭包是指一个函数与其所引用的变量集合之间的绑定关系。它允许一个函数在执行时访问并使用其外部函数中定义的变量，即使外部函数已经返回。在JavaScript中，每个函数都可以产生一个闭包，闭包可以用来实现一些特定的功能，例如模块化、私有变量和回调函数等。应用场景举例：模块化：通过闭包定义一个私有的变量或函数，避免全局变量污染，同时可以对外暴露一些接口来实现模块化。私有变量：通过闭包定义一个私有的变量或函数，在外部无法直接访问，只能通过闭包中的公共接口来访问。回调函数：通过闭包将外部的变量传递给内部的函数，使得内部的函数可以访问并修改外部的变量。总之，闭包是一种强大的功能，它可以实现许多常见的编程需求，同时也可以提高代码的可维护性和可复用性。在面试前端工程师时，面试官通常会通过考察候选人的知识技能、实操能力以及解决问题的能力来判断其是否符合公司的要求。通过深入理解问题、良好的沟通能力、实际项目经验和解决问题的能力，你可以更好地展示自己的专业素养和综合能力，从而在面试中脱颖而出。

四、面试中的注意事项

1.态度积极：在面试中要保持积极的态度，展示出你对工作的热情和渴望。回答问题时要积极思考，给出具体的解决方案和思路，不要过于笼统或简单地回答问题。

2.自信表达：在面试中要保持自信，清晰地表达自己的想法和观点。对于不确定的问题，可以提出自己的猜测和推断，但要避免过于夸张或虚假的表述。

3.展示自己的优势：在面试中要展示自己的优势和特长，例如技术能力、项目经验、沟通能力等。可以通过具体的案例和数据来证明自己的价值，让面试官对你的能力有更深刻的认识。

4.谦虚诚恳：在面试中要保持谦虚诚恳的态度，尊重面试官的意见和决策。对于自己的不足之处，要诚实地承认，并表达出自己愿意学习和改进的态度。

5.提前准备：在面试前要提前了解公司的背景、业务和产品，了解该公司对前端工程师的要求和期望。可以根据这些信息来准备自己的简历和面试材料，更好地展示自己的优势。

五、总结

前端工程师是数字化时代的核心角色之一，他们在网页设计、交互实现、性能优化等方面发挥着重要的作用。在面试前端工程师时，需要考察其知识技能、实操能力、解决问题能力以及沟通能力等多方面的素质。通过充分的准备、深入理解问题和良好的沟通表达，你可以更好地展示自己的能力和潜力，从而在面试中获得成功。

本文分享自华为云社区《

【云驻共创】想面试前端工程师，必须掌握哪些知识和技能？-云社区-华为云

》，作者： 可以交个朋友。

点击下方，第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

楼主问这个问题应该是准备转行做前端工作，而且是空闲时间自学。我本身也是自学的前端知识，现在工作半年多，跟你分享一下我的经验。

楼主说的javascript，html，css这些都是基础的，稍微进阶点是jquery和bootstrap的使用。学习顺序就是第一先从html和css入手，这两个是标签和样式的使用，不涉及逻辑语法，快的话两三天就能明白、上手，可以先做点静态页面，页面上都是写死的，切换轮播都不需要的那种，当然有的效果做不出来，不要怕，内事不决问百度，外事不决查谷歌，都可以找到的。

第二步建议了解点j浏览器的东西，javascript也可以了解点，了解什么是dom操作，了解一些概念像浏览器请求加载，不用学太深了解概念为主，这时候以jquery为主，这样可以使页面有一些行为操作，轮播，放大镜等效果，可以上网查看jquery之家有很多写好的可以直接使用的效果，页面就变得好看了。自学的话照葫芦画瓢我不担心，我最担心的就是理解概念，可以在网上看看慕课网、网易云课堂这些课，对自己提升也有帮助。

第三步可以学习bootstrap，swiper这些框架的使用，说实话也挺好用的，你可以在官网上查看。他们的使用依赖于jquery调用。使用这些框架会让你的页面更好看，而且响应式布局可以省去很多烦恼，用户体验更好，省去了自己写代码的麻烦，开发效率高。

第四步，javascript建议深入学习下，理解概念，能够使用原生的代码操作，最简单的写个贪吃蛇，就很好了。理解闭包这些概念，数组操作，面试会用到。要是想着先工作那就技术会用先，不会的上网查能学会就可以了，不要说研究的多深，那是后续工作，先有工作，可以慢慢在学。

第五，ajax的使用和json数据结构，前后台进行数据交互就是ajax请求，了解它的发送和接受，一个是jquery的ajax使用，这个是写好的结构可以直接使用，再者就是javascript原生的书写。

第六，html5+css3这个是必须会的吧，html5新增了很多标签，提升了开发性能，移动端开发更友好，css3让页面的活性更大，阴影、渐变等效果更好。localstorage和sessionstorage让浏览器存储数据，前端的功能越来越大了。使用他们的时候注意浏览器的兼容性。

上面学习的过程中，也了解下百度的echarts使用，生成图表，有些公司需要数据可视化，很有用的。

第七，现在前端很火的框架是vue，react这种单页面应用，使开发效率更快。vue是华人大神尤雨溪带队开发和维护的，生态很完善，上手也很容易，中文的开发文档对开发人员也很友好，建议新手学习。react是facebook推出的，生态完善，生态也很庞大。本人现在工作使用的是vue，很容易操作。现在去找工作如果不会这两个中的一个都很难的，除非在二、三线城市，还是用jquery开发。建议大家跟上技术步伐，多学习。

第八，就是前后端分离。传统的前端人员开发受到限制，不停地跟后台人员沟通，渲染数据。因为前端页面变化比后台数据大，所以很不方便。这个概念的提出，使前端开发人员解放出来，不需要再去配合后台人员开发。前端自己有个服务器处理数据，后台人员只需要提供接口就好了。

刚开始转后台的前端人员可以学习nodejs，这个就是用javascript语法写的，对前端人员很友好，容易上手。node中的express框架，可以很容易的创建后台服务，跟前端交互，当然数据库的简单操作也需要会，主要是sql语句使用。网上的学习资料也很多，可以学习。当然你的js基础需要合格。

这些大概就是前端学习的路线，希望对你有帮助，如果有疑问可以在文章下面留言。

我是测不准，欢迎关注，大家一起学习交流！喜欢的朋友点赞呦。^_^

我们知道在网站开发中有前端和后端两种角色的开发人员，那么前端一般来说是客户端，而后端则是服务器端。前端主要负责的是与服务器进行通信并实现视觉和交互效果。前端的核心价值就在于实现用户体验，

我给大家整理了一下零基础学习前端开发的知识路径：

基础知识：

1、首先是Html+CSS这部分的内容，这部分主要用以实现页面效果，是前端最基础的知识，当你能背熟给个标签的使用之后，你就可以模仿一些网站做一些页面，不断的在实践中积累经验。

2、JavaScript，JS是很强大的一门语言，但是他的内容实在太多了，而且有很多内容是糟粕，新手是无法区分精华与糟粕的JavaScript，JS是很强大的一门语言，但是他的内容实在太多了，而且有很多内容是糟粕，新手是无法区分精华与糟粕的。

进阶：

当你具备了以上知识的时候，你就可以做出一般的静态网页了，也能做出比较炫酷的动画效果，但是对于复杂的、要与服务器交互的页面还需要进一步的学习。

1、 CSS方面，着重去了解盒子模型，流动，block，inline，层叠，样式优先级等概念。然后是标题，背景，圆角，导航条，table，表单等也需要学习一下，学习完以上知识点你就可以在简历上写上熟悉CSS了，大胆点写个精通也行。

2、学习了以上JavaScript的知识点后还不能让你胜任JavaScript编程工作，所以在有了以上基础之后还需要进一步学习，内容如下：

学习一款框架，这里我推荐你学习jQuery，这是非常简单易用的一款框架，你可以轻松的通过jQuery来完成一些简单的项目，学习起来也很简单，你不需要面面俱到的学习框架的所有内容，你只需要学习怎么用和基本用法就行了，毕竟遇到问题还可以查看文档，框架可以帮你屏蔽浏览器的差异，能让你把更多的精力放在开发的业务部分。

面向对象基本概念。虽然说JavaScript并不完全是一门面向对象的编程语言，因为他的设计理念我们可以看到很多函数编程语言的影子，但是我们还是要尽量把它当作面向对象编程语言来使用，这里要求懂得面向对象的基本理论，对封装，继承，多态要有一定的理解。

着重了解JavaScript语言的内部机制。你必须熟悉以下的概念：JavaScript中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，this指向的是谁。

DOM编程，这是一个合格的前端工程师的核心技能之一，虽说现在框架已经封装了绝大部分的原生DOM语法，能让你更方便的使用DOM来完成一些事情，但是还是很有必要去熟悉DOM原生语法的。

Ajax编程。这里必须圈重点，前后端分离开发是近两年很流行的一种前后端协作开发模式，而且页面无刷新改变看起来也很炫酷，要做到这里都要用到Ajax编程，但是你也不用害怕，因为真正使用起来其实Ajax很简单的，而且现在的几乎所有框架都对Ajax有着很好的封装。

补充了解浏览器的差异性。这部分包括CSS和JavaScript两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。

根据以上学习完，你已经可以成为一名合格的前端工程师了，但是如果想要进阶，你还不能松懈，还需要继续努力才行，要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1.易维护；2.可测试；3.高性能；4.低流量（移动端）。先脚踏实地的把门入了，未来的路，还任重而道远。

最后分享一则千锋前端的学习路线图，仅供参考。

千锋html5教程第一部分：课程体系解读 http://pan.baidu.com/s/1o7B9OYA

千锋html5教程第二部分：微案例讲解 https://pan.baidu.com/s/1nwyNFg1

千锋html5教程第三部分：知识点讲解 http://pan.baidu.com/s/1jICHs9o

加油吧，骚年！

我先说说我自己吧，我是一个后端！不过因为是在小公司所以前端后端我都要做！就前端而言首先html+css+js是肯定必须掌握的，这些是做前端的基础，然后稍微进阶一点就学习一些现在比较流行的前端框架比如说 vue react-native等 vue用来做web页面很方便双向绑定，react-native用来做app前端ui的也很实用，我们公司现在就在用react-native做app不过现在不太稳定经常有些坑，慢慢去踩， 以前比较流行的什么jquery之类的去了解了解会用就行了。

html.css.javascript。

至于jquery已经无足轻重了。

新人直接上vue。

重要的是自己确实掌握了这些东西，可以实际开发出项目，完成老板交付的任务。不是自以为学过了，学会了。

这些都是基础，都要掌握。相对而言，js难一些，但更为重要。