web前端⾏业调研报告_如何成为⼀名年薪30万的Web前端⼯
程师？
我理解下的前端知识体系：phodal/awesome-growth 《前端技能路线详解：真正的从⼊门到放弃》
前端技能路线详解：真正的从⼊门到放弃本⽂可能会严重打击你的⾃信⼼，请做⼼⾥准备。。。
在完整APP的迁移之后，终于可以好好写这些内容了。第⼀篇就是对之前的前端技能图谱进⾏⼀些细致的解释。当然这些是个⼈的经验，所以可存在⼀些区别，不过总的来说还是差不多的。
⼊门
在我理解下的基础知识，就是我们可以写⼀些基本的样式，并能对页⾯的元素进⾏操作。举例来说，就是我们⽤Spring和JSP写了⼀个博客，然后我们可以⽤jQuery来对页⾯进⾏⼀些简单的操作，并可以调⽤⼀些API。因此，我们需要基本的HTML / CSS知识。只是要写好CSS并不是⼀件简单的事，这需要很多实战经验。随后，我们还需要有JavaScript的经验，要不怎么做前端呢？
数字前端工程师和web前端
同时，我们还需要对DOM有⼀些基础的了解，才能做⼀些基本的操作，如修改颜⾊等等。在这种情况下，最简单的⽅案就是使⽤jQuery这样的⼯具。不过，如果可以⾃⼰操作DOM是再好不过的了。
中级篇
中级篇就更有意思了，现在我们就需要对页⾯进⾏更复杂的操作。Ajax和JSON这两个技能是必须的，当我们要动态的改变页⾯的元素时，我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器，RESTful就是必须要学会的技能。未来我们还需要Fetch API，ReactiveX这些技能。
除此我们还需要掌握好HTML的语义化，像DIV / CSS这也会必须会的技能，我们应该还会使⽤模板引擎和SCSS / SASS。⽽这个层⾯来说，我们开始使⽤Node.js来完成前端的构建等等的⼀系列动作，这时候必须学会使⽤命令⾏这类⼯具。并且，在这时候我们已经开始构建单页⾯应⽤了。
⾼级篇
JavaScript是⼀门易上⼿的语⾔，也充满了相当多的糟粕的⽤法。⼏年前⼈们使⽤CoffeeScript编成成JavaScript来编写更好的前端代码，现在⼈们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器⽀持不完善，但是他们是未来。同样的还有某些CSS3的特性，其对于某些浏览器来说也是不⽀持的。⽽这些都是基于语⾔本来说的，要写好代码，我们还需要掌握⾯向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为⼀合格的⼯程师，我们还需要把握好安全性(如跨域)，做好 授权(如HTTP Basic、JWT等等)。
⼯程化
这个标题好像是放错了，这部分的内容主要都是⾃动构建的内容。⾸先，我们需要有基本的构建⼯具，⽆论你是使⽤gulp、grunt，还是只使⽤npm，这都不重要。重要的是，你可以⾃动化的完成构建的⼯具，编译、静态代码分析(JSLint、CSS Lint、TSLint)、对代码质量进⾏分析(如Code Climate，可以帮你检测出代码中的Bad Smell)、运⾏代码中的测试，并⽣成测试覆盖率的报告等等。这⼀切都需要你有⼀个⾃动构建的⼯作流。
兼容性
虽然我们离兼容IE6的时代已越来越远了，但是我们仍然有相当多的兼容性⼯作要做。基本的兼容性测试就是跨浏览器的测试，即Chrome，IE，Firefox，Safari等等。除此还有在不同的操作系统上对同⼀浏览器的测试，某些情况下可能表现不⼀致。如不同操作系统的字体⼤⼩，可能会导致⼀些细微的问题。⽽随着移动设备的流⾏，我们还需要考虑下不同Android版本下的浏览器内核的表现不致，有时候还要⼀下不成器的Windows Phone。除此，还有同⼀个浏览器的不同版本问题，常见于IE。。
前端特定
除了正常的编码之外，前端还有⼀些⽐较有意思的东西，如CSS3和JavaScript动画。使⽤Web字体，可惜这个不太适合汉字使⽤。还有Icon字体，毕竟这种字体是⽮量的。不过Icon字体还有⼀些问题，如浏览器对其的抗锯齿优化，还有⼀个痛是你得准备四种不同类型的字体⽂件。因此，产⽣了⼀种东
西SVG Sprite，在以前这就是CSS Sprite，只是CSS Sprite不能缩放。最后，我们还需要掌握⼀些基本的图形和图表框架的使⽤。
软件⼯程
这⼀点上和⼤部分语⾔的项⽬⼀样，我们需要使⽤版本管理软件，如git、svn，⼜或者是⼀些内部的⼯具。总之你肯定要有⼀个，⽽不是2016.07.31.zip这种⽂件。然后，你还需要⼀些依赖管理⼯具，对于那些使⽤Webpack、Browserify来将代码编写成前端代码的项⽬来说，npm还是挺好⽤的。不过就个⼈来说，对于传统的项⽬来说我总觉得bower有些难⽤。我们还需要模块化我们的源码⽂件，才能使其他⼈更容易开始项⽬。
调试
作为⼀个⼯程师来说，调试是必备的技能。⼤部分浏览器都⾃带有调试⼯具，他们都不错——如果你使⽤过的话。在调试的过程中，直接⽤Console就可以输出值、计算值等等。如果你的项⽬在构建的过程中有⼀些问题，你就需要debugger这⼀⾏代码了。在⼀些调⽤远程API 的项⽬⾥，我们还需要⼀些更复杂的⼯具，即抓包⼯具。在调试移动设备时，像Wireshark、Charles这⼀类的⼯具，就可以让我们看到是否有⼀些异常的请求。当然在这个时候，还有⼀个不错的⼯具就是像Chrome⾃带的远程设备调试。对于移动⽹站来说，还要有Responsive视图。
测试
我遇到的很多前端⼯程师都是不写测试的，于是我便把它单独地抽了出现。对于⼀个前端项⽬来说，正常情况下，我们要有单元测试、功能测试，还有要⼀些UI测试来验证页⾯间是否可以跳转。对于依赖于第三⽅服务的应⽤来说，还要有⼀个Mock的服务来⽅便我们测试。如果是前后端分离的项⽬，我们还需要有集成测试。
性能与优化
要对Web应⽤进⾏性能优化，可能不是⼀件容易的事，有时候我们还知道哪些地⽅可以优化。这时候⼈们就可以使⽤Yahoo的YSlow，或者我最喜欢的Google PageSpeed来检测页⾯的⼀些问题，如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。我们还应该借助于NetWork这⼀类的⼯具，查看页⾯加载时，⼀些⽐较漫的资源⽂件，并对其进⾏优化。在⼀些情况下，我们还需要借助如Chrome的Timline、Profiel等⼯具来查看可以优化的地⽅。
设计
前端⼯程师还需要具备基本的UI技能。多数情况下拿到的只是⼀张图，如果是⼀个完整的页⾯，我们就需要快速分割页⾯布局。⽽依赖于不同的页⾯布局，如响应式、⽹格、FlexBox布局也会有不同的设计。⽽有些时候，我们就需要⾃⼰规划，制作⼀个基本的线框图(Wireframe)等等。
SEO
如果以搜索引擎作为流量来源，我们还需要考虑页⾯的内容，除⾮你⽤的是竞争排名。像Sitemap可能就不是我们考虑的内容，⽽我们还要考虑很多点。⾸先，我们需要保证页⾯的内容是对于搜索引擎是可见的，并且对应的页⾯还要有基本的Title、Description和Keyword。然后在⼀些关键的字体，如栏⽬标题等等可以⽤H2之类的⼤字的地⽅就不要放过。同时在页⾯设计的过程中，我们还需要考虑⼀些内部链接的建设。它即可以提供页⾯的可见度，⼜可以提⾼排名。最后，如果你是⾯向的是Google等⽀持结构化数据的搜索引擎，你还需要考虑⼀下MicroData / MicroFormat这⼀类东西。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。