web前端工程师进阶学习路线如何走

Posted 2023-04-23

less和sass什么时候学都行，1,2天就能学会。这个不着急，没有什么承上启下的作用，可以单独拿出来学。

bootstrap就是一个框架，把最主要的栅格系统看看就好。其他的大概了解能干啥就行，很多公司，是不让用bootstrap的，而是用源代码自己写。这个用一天的时间没啥问题。
node.js和angular比较重要，如果学会，算是上了一个台阶了。所以重点说说这个。
angular属于mvvm框架，一开始觉得angular挺复杂的，所以想学一个简单的，轻量级的，所以决定先学vue。但是在了解的过程中发现，很多的专业名词，没听过，或者理解不透。所以又开始从头学习node.js。在学习node.js的过程中又开始迷茫，发现了很多JS不懂的地方。
所以，又开始深入研究js的dom，函数，ajax，数组等。总之用了很长的时间，浪费了很长时间。
最后总结一下啊。其实，没必要钻那么多牛角尖。
先做着vue的例子，不懂的地方，直接略过，很多时候，不理解的不懂的东西，用着用着，突然就能明白。照猫画虎先把VUE的例子跟着做一遍之后，同时梳理一下涉及到的JS知识点。能自己用vue做出几个小成品的时候，开始结合js研究node.js。之后再去涉及angular。
angular差不多有个大概了解的时候，反过头接着学vue，你会发现，又会发现很多新东西。
web前端这个东西特别有意思，当你达到一个高度，返回来再看以前的技术，会发现，哎呀，竟然又能发现新大陆。 参考技术A 前端需要学习的内容很多，涵盖较多方面，大致可以分为以下几个阶段。
一、初级阶段：前端初体验，感受视觉冲击，提升学习兴趣，打消学习疑虑

PS入门（前端UI协同工具蓝湖与标你妹工具使用)
html5，cSS3(大量CSS3网页特效制作)
移动端布局基础(媒体查询、页面适配)，响应式页面布局。

二、中级阶段：夯实基础，打通任督二脉，杜绝做一个API的搬运工

JS入门，
DOM操作，BOM，H5常用新API，Jquery之DOM操作，Ajax ;
JS高阶，面向对象(OOP)，原型、原型链，执行上下文栈，作用域、作用域链，This，闭包，ES6/ES7.Jquery页面特效+插件封装;
服务器知识Node.js (Express4) , MongoDB(mongoose)/mysql. Websocket.

三、高级阶段：通往前端实战之路，时下最新开发框架与使用技巧，杜绝过时技术炒剩饭

Vue全家桶(Vue2.x+Vue-Router3.x+Vuex3.x+ElementUl2.x+Axios0.9)
React全家桶(React16.x+React-Route-Dom5.x+Redux4.x+React-Redux+Redux-Thunk)
微信小程序（登录态+微信支付)
Webpack4.x 参考技术B 分享一份完整的前端学习路线，包括每阶段需要掌握的知识点，可以参考下。
1、PC端页面制作与动画特效
学习HTML+CSS搭建网页、CSS动画特效、PhotoShop切图等基础知识，获得初级Web前端工程师技能，主要进行PC端网页制作与样式设计实现，能够配合UI设计师进行项目开发。
2、移动端页面制作与响应式实现
讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式进行移动端与PC端适配。
3、javascript与jQuery开发
同HTML5基础知识一样，JavaScript开发与jQuery开发是职业晋升必备的技能包，获得中级Web开发工程师技能，主要进行页面行为交互，实现网站常见特效，加轮播图，选项卡，拖拽效果等，并能配合UI和后端进行项目开发。
4、HTML5高级框架技术开发
常用的Vue框架开发，React框架开发，Angular框架开发，数据可视化技术。可获得中级Web前端工程师技能，主要适用框架开发企业项目，实现单页面应用开发。可以完成复杂的数据交互应用场景，具备独立开发项目能力。
5、全栈前后端技术开发
Node.JS技术，其他后端技术，如Java或php。可获得高级Web前端工程师技能，主要进行前后端全栈样式开发，能独立完成一个中小型项目的前后台，对于网站开发有着非常熟练的编程能力。
可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师、中级前端开发工程师、高级开发工程师等职位的要求。
当然对于有基础某个环节薄弱的同学，可以只学单独一个阶段，加深巩固。 参考技术C 分享一份完整版的web前端学习路线，可以参考下。
1、PC端页面制作与动画特效
学习HTML+CSS搭建网页、CSS动画特效、PhotoShop切图等基础知识，获得初级Web前端工程师技能，主要进行PC端网页制作与样式设计实现，能够配合UI设计师进行项目开发。
2、移动端页面制作与响应式实现
讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式进行移动端与PC端适配。
3、JavaScript与jQuery开发
同HTML5基础知识一样，JavaScript开发与jQuery开发是职业晋升必备的技能包，获得中级Web开发工程师技能，主要进行页面行为交互，实现网站常见特效，加轮播图，选项卡，拖拽效果等，并能配合UI和后端进行项目开发。
4、HTML5高级框架技术开发
常用的Vue框架开发，React框架开发，Angular框架开发，数据可视化技术。可获得中级Web前端工程师技能，主要适用框架开发企业项目，实现单页面应用开发。可以完成复杂的数据交互应用场景，具备独立开发项目能力。
5、全栈前后端技术开发
Node.JS技术，其他后端技术，如Java或PHP。可获得高级Web前端工程师技能，主要进行前后端全栈样式开发，能独立完成一个中小型项目的前后台，对于网站开发有着非常熟练的编程能力。
可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师、中级前端开发工程师、高级开发工程师等职位的要求。
学web前端一般在2万左右，4-6个月左右的时间。应该根据自己的实际需求去千 锋看一下，面授的，先好好试听之后，再选择适合自己的。只要努力学到真东西，前途自然不会差。 参考技术D

初级前端工程师：

能熟练使用html、css、js ，主要工作搭建静态页面。

中级前端工程师：

作为一名中级前端工程师的话，还需要会使用一些框架，像bootstrap、jquery之类的。进阶的知识应该是ajax，了解怎么与后台交互式学习ajax的关键点。

高级前端工程师：

高级前端工程师首先要学习的就是前端工程化，可以学习的进阶框架有angular.js、vue-cli、react 。

web前端工程师知识学习路线

想要成为一名优秀的web前端工程师（http://www.maiziedu.com/course/web/）需要具备哪些技能？因为web前端开发涵盖了许多领域的技术，那么需要掌握的技能有哪些呢？下面就一起来看看web前端工程师必备技能知识。

1、界面和用户体验

注意，浏览器的实现标准是不一致的，请确保你的网站能够兼容所有主流的浏览器。最少需要测试的有 Gecko 引擎(Firefox)，WebKit引擎(Safari以及一些手机浏览器)，Chrome，你所要支持的 IE 浏览器，以及 Opera。此外，你还需要了解不同系统下，浏览器是如何渲染网页的。

考虑一下人们不使用主流浏览器的情况，如手机，屏幕阅读器和搜索引擎。一些可用的辅助信息：WAI 和 Section508，移动开发：MobiForge。

阶段：如何在不影响用户的情况下部署更新。有一个或多个可以用来改变架构、代码或全部内容，并确保它们在可控范围内实现部署的测试或临时环境。有一种自动化的方式把更新部署到线上网站。最有效的实现方式是结合使用版本控制系统(CVS、Subversion等)和自动构建机制(Ant、NAnt等)。

不要直接向用户显示不友好的错误信息。

不要用纯文本的方式显示用户的电子邮件，因为他们可能会被垃圾邮件烦到死。

为用户生成的链接添加 rel=”nofollow” 属性，以避免垃圾邮件。

为你的网站建立周全的限制–这条也同时属于安全方面。

学习如何进一步的提高。

POST 提交成功后进行重定向，以免刷新造成重复提交。

别忘了考虑无障碍访问。这总是不错的，在某些情况下，这甚至是法律要求的。 WAI-ARIA 和 WCAG 2 里都有关于这方面很好的资源。

不要让我思考。

2、安全

OWASP开发指南 几乎覆盖了网站安全所有的内容。

了解注入，尤其是 SQL注入，并学会如何阻止它。

永远不要相信用户的输入，以及其他任何请求（包括Cookies和隐藏域的值）。

使用盐值(salt)哈希密码，并对不同的行使用不同的盐值，防止攻击。使用哈希算法如 bcrypt 或 scrypt(更安全，但比较新)(1, 2)来存储密码。(如何安全的存储密码)。NIST也允许使用PBKDF2来加密密码。避免直接使用 MD5 和 SHA 等算法。

不要企图拿出自己喜欢的认证系统。这是很容易出错的，并且是不可测的，甚至直到你被攻击了你才知道。

了解信用卡处理规则。(也可查看该问题)

在登录页和任何需要输入敏感数据的页面使用SSL/HTTPS。

防止 session 被劫持。

避免跨站脚本(XSS)。

避免点击劫持。

保持系统更新到最新的补丁。

确保数据库连接信息的安全。

让自己了解最新的攻击技术和会影响你平台的漏洞。

阅读谷歌浏览器安全手册。

阅读WEB应用黑客手册。

考虑最小特权原则，尽量使用非root用户运行服务器(以tomcat为例)。

3、性能

如果有必要的话，实现缓存，请正确理解和使用HTTP缓存。

优化图片。不要使用20K的图片作为平铺背景。

学习如何 gzip/deflate 内容（deflate效果更好）。

合并样式表与脚本文件以减小浏览器链接数，同时提高 gzip 的压缩能力。

浏览雅虎性能卓越的网站，以及大量的指南，其中包含提升前端性能和YSlow工具（需要安装Firefox, Safari, Chrome 或 Opera）。此外，Google page speed(浏览器扩展)也是一个性能分析工具，它同时可以优化你的图片。

对于小的如工具栏图片，使用CSS Image Sprites(参考最小化HTTP请求)。

访问量大的网站应该考虑跨域拆分组件。

静态内容（如图片、CSS、JavaScript及不需要访问cookie的内容）应该放在一个单独的域下，因为域及其子域的每一个请求都会发送cookie。这里是使用内容分发网络（CDN）的一个很好的选择。

减少浏览器渲染页面所需的HTTP请求的总数量。

利用Google Closure Compiler及其他压缩JS的工具。

确保网站根目录下有一个favicon.ico文件，即使在HTML中并没有提到它，浏览器也会自动加载它。如果你没有 /favicon.ico ，就会返回很多404错误，消耗服务器带宽。

4、SEO (Search Engine Optimization) 搜索引擎优化

在动态内容中，把 # 改成 #! ，然后在服务器端使用$_REQUEST["_escaped_fragment_"]。换句话说 ./#!page=1 变成了 ./?_escaped_fragments_=pa

ge=1。此外，对于使用 FF.b4 or Chromium 的用户，history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一个非常棒的命令。因此，即使地址栏已经改变了，页面也不会刷新。

不要使用“点击这里”这样的链接。你是在浪费一个搜索引擎优化的机会，而且它让使用用屏幕阅读器人们更难阅读。

有一个XML网站地图，最好在默认位置 /sitemap.xml。

当有多个URL指向同一个内容的时候，使用 <link rel="canonical" ... /> ，这个问题可以通过 Google Webmaster Tools 来解决。

使用 Google Webmaster Tools 和 Bing Webmaster Tools。

安装 Google Analytics 或者其他开源分析工具如：Piwik。

了解 robots.txt 及搜索引擎蜘蛛 是如果工作的。

使用重定向（301）www.example.com 到 example.com(或者反过来)，防止它们平分谷歌网站排名。

要知道有 badly-behaved 蜘蛛的存在。

如果你的网站有非文本内容，Tim Farley 的回答中有一些非常有用的信息。

5、技术

理解HTTP以及GET、POST、session、cookie以及“无状态”的意思。

撰写XHTML/HTML和CSS要遵循W3C规范，并确保它们通过校验。这样做的目的是为了避免浏览器的怪癖模式，并且这使得非标准浏览器如屏幕阅读器和移动设备更加容易实现。

理解浏览器是如何处理JavaScript 的。

理解JavaScript 、样式表、以及页面使用的其他资源是如何加载的，并考虑它们对感知性能的影响。现在普遍认同的一种做法是把除分析代码等以外的脚本文件放在页面底部。

了解JavaScript 沙箱是如何工作的，特别是当你想使用 iframe 的时候。

需要注意到，JavaScript是可以被禁用的，因此AJAX只是一个扩展，而不是基准。虽然大部分用户并没有禁用它，但记住，NoScript正在变得越来越流行。并且，谷歌在索引你的网站时也不会运行JavaScript。

学习 301 和 302 重定向之间的不同。

尽可能多地了解你的部署平台。

考虑使用 Reset Style Sheet 或 normalize.css。

考虑使用JavaScript框架(如jQuery, MooTools, Prototype, Dojo 或 YUI 3)，这可以避免很多使用JavaScript操作DOM时的差异。

在考虑感知性能和框架的同时，考虑使用服务，如Google Libraries API，来加载框架，这样浏览器可以使用已经缓存的框架而不是从你的网站上下载。

不要重复造轮子。在做任何事情之前，先搜索相关的组件或者实例。99%的可能别人已经实现了并发布出了开源的代码。

在确定需求之前，尽量不要使用超过20个的库，这是非常不利的。特别是客户端WEB，保存轻便、快速、灵活是最重要的。

6、BUG修复

要了解你花费20%的时间写代码而花费80%的时间来维护，因此写代码时一定注意。

建立一个好的错误报告解决方案。

建立一个别人可以提建议和批评的系统。

为未来的支持人员和维护人员建立良好的文档。

经常备份！Ed Lucas 的回答中有一些建议。有一个恢复策略，而不只是一个备份策略。

使用版本控制系统，如 Subversion、Mercurial 或 Git。

不要忘记验收测试。Selenium 等框架可以帮到你

请确保您有足够的日志记录的地方，可以使用框架如log4j, log4net 或 log4r。当网站出现问题的时候，你需要能够找到问题所在。

日志要记录已处理异常和未处理异常。分析日志输出，因为它会显示出你网站的关键问题。

这里有些省略的东西并不是因为它们没用，而是因为它们过于详细或者超出了范围，或者说的太远了。当然，上面的内容可能也有一些遗漏或者错误。