web前端好学吗，2020年最新「前端学习体系与前端概述」

短命女 2021-09-03 04:49 402阅读 0赞

**前端学习目标**

基础课程：HTML + CSS javaScript DOM BOM AJAX HTML5 + CSS3

应用课程：jQuery easyUI 移动端开发 响应式开发 PHP基础 H5UI bootstrap less/stylus 模板引擎 swiper iscroll select2

工程课程：ES5/6/7 git&GitHub nodeJS mongoDB mySQL webpack gulp babel VUE 微信小程序 REACT

**学习前端所需要用到的工具**

欲善其事必先利器，工具花样不在多，重点在人的技术本身。

最简化工具有 chrome浏览器、 editplus编辑器、 pxCook量图器。后续随着课程推进，会慢慢介绍各种辅助工具，在这里就罗列，以免干扰新手小白。

**浏览器**

浏览器是网页的载体，是咱们前端工程师的主战场。浏览器常用的有 IE系列、火狐（FireFox）、谷歌（chrome）、Safari（苹果）、Opera等

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

**浏览器市场份额**

在2020年，浏览器的霸主地位已经确立，Chrome凭借超简约的界面以及强大的扩展性夺得宝座，当然少不了国内浏览器大量使用chromium内核带来的二次推广的贡献

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]

**开发工具**

开发工具很多，用什么开发工具取决于你的个人喜好和业务所需平台。好的开发工具能够提升你的效率，但是无法提升你的技术实力。

![在这里插入图片描述][20201201092042435.png_pic_center]

**协助工具**

除了写代码的工具之外，我们还需要一些其他辅助类型的工具帮助我们更好的完成项目内容。比如 切图工具 量图工具 数据监测工具 代码管理工具等等, 当前我们只需要掌握PS和pxCook的使用。

![在这里插入图片描述][20201201092051636.png_pic_center]

前端全面技术构成  
大体分为：状态管理、UI 组件、小程序、跨平台、框架层、编程语言、工程化、监控、测试和服务端。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]

**网页&前端**

网页是构成网站的基础单元，是承载各种网站应用的平台。通俗地说，您每天通过浏览器甚至部分APP上网冲浪所看到的就是网页，网页主要由文字、图像、超链接、文本、多媒体等元素构成。

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及javaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。虽然现在前端技术栈百花齐放衍生出各种 工具 概念 技术 ;在工程化与现代化的路上高歌猛进,但本质上还是做网页。就跟我们能源技术发展到了核能阶段，依然只是为了“烧开水“。

**WEB前端发展史**

1991年8月6日 历史上第一个网页诞生了 互联网之父 蒂姆·伯纳斯·李 在alt.hypertext新闻组上贴了万维网项目简介的文章，这就是第一个运行在浏览器上的网页。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；这一年，Tim Berners-Lee创建了W3C；这一年，Tim的基友发布了CSS。还是这一年，为动态web网页设计的服务端脚本PHP以及笔者本人诞生。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 4]

随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得愈加丰富，因此早期网页的局限性也逐渐显露出来。网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。

1.所有的网页都基于HTML页面，因为没有任何手段可以控制局部内容的显示和隐藏，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。

2.计算任务只能在服务端实现。由于网速限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是会出现这样的场景：用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。

3.所有页面都是静态的，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

*  1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）, 看起来像是玩具的脚本语言。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 5]
 *  1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化。
 *  2006年，XMLHttpRequest被W3C正式纳入标准。John Resig发布了jQuery。
 *  2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代!
 *  2009年AngularJS诞生，随后被谷歌收购。
 *  2009年Ryan Dahl发布了NODE，新的时代在这一天悄然开启。
 *  2010年backbone.js诞生。
 *  2011年React和Ember诞生。
 *  2014年，第五代HTML标准发布。2014年Vue.js诞生, 前端进入了新时代。

**当下**

如今前端工程已经不再是角落里的小可怜，在最新2019年的GitHub的数据统计中显示 前端的主力语言 javaScript 早已稳稳的拿下了最受欢迎（使用最多）的语言排行榜 第一

![在这里插入图片描述][20201201092142616.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 6]

**未来**

随着5G的到来以及Web APP基于浏览器拥有跨平台的天然优势，开发周期，开发成本，维护成本全面下降，传统Native App面临严峻挑战。Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API、Hybrid、nw.js、Electron、react native、weex如雨后春笋一般，只要你能看到的领域。我们终将插足！

模块化、组件化、前后端分离、工程化、全栈开发、微服务。每天都有大量的开发者在为前端的发展做出贡献。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 8]

**前端工程师的待遇和发展**

初中级薪资待遇大概为： 1线城市 15K左右 2线城市 10k左右 三线城市8K左右 18线小城市 6-8k 在各行业横向对比也算是中等水平。

\[前端工程师薪资一览\]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 9]

职业发展路线也广阔，你可以选择在一个业务领域深入耕耘，也可以选择全面提升技术栈深度和广度成为全栈工程师，先天条件比较好的可以深入架构研究 进行 算法 架构 AI 图形等领域拓展。也可以走技术管理路线，产品路线。记住一句话 技术只是敲门砖 想要有更多的收获必然要靠自己去打拼，坐吃山空不管什么行业都必然会被淘汰！

**如何学好前端开发是关键：**

前端技术每年都会不断更新，自学前端容易学不到最前沿的课程，学习前端开发建议大家还是要选择培训为好，推荐爱创课堂，是一家专门做前端教育的学校，爱创课堂是一家以就业为导向的前端培训学校，所学习的就是企业所需要的，培养企业最需要的前端工程师为企业理念，授课以实战课程为主，更多的学习大项目对以后工作有帮助，毕业后轻松就业！

一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
    那么如何系统的学习企业实用的web前端技术呢，
    前端学习培训、视频教程、学习路线，可以添加威信：kaixin666haoyun 分享给大家前端学习资料。相信从中会受到启发，
    找到学习的方向和目标。如大家对前端还有不了解的问题，可以持续关注我。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/d8c87b2a6a054d6e9b97e5ccb998c03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/dd72bca3cd3a40c084a303689cd99a5d.png
[20201201092042435.png_pic_center]: /images/20210813/4d8e79ffc5dc4ff4aa661fdce81c5fef.png
[20201201092051636.png_pic_center]: /images/20210813/7eb1a37b2e56442780ab4732cbe8b015.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/d67862b357e94e4ab1e3599a6f37e264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/85700105b83446be80d04ae3299679cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210813/1aa2c9e35e5841b3a4ea549513eaa3c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210813/ebb54b69da1c4168af8a5a17334c64d0.png
[20201201092142616.png_pic_center]: /images/20210813/7355d9738e294357a35dd1834f74d280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210813/be5b300f257d4dde93905f432e67dc52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210813/24f8b0a09fa14b929f3672a80b1d8e87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210813/112930e30e524d3e9a47b46cd12a064e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20210813/73fca7ce19314066955e2df5bc500b0b.png