回到目录

[前端知识体系] 概览

2016-10-15

前端是一个相对比较新的行业,互联网发展早期(1995年~2005年)是没有专业的前端工程师的。随着互联网的发展,大约从2005年开始,正式的前端工程师角色被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想、设计模式、工具和平台都快速发展,对前端工程师的技能要求也越来越高。 -- source

最近不是有篇文章很火吗?叫 在 2016 年学 JavaScript 是一种什么样的体验? ,前端有个摩尔定律:「每隔 18 个月,前端技术就要难一倍」。

作为一名已经没有经历过 Table 布局的新时代前端工程师,享受了技术发展硬件升级的红利,赶上了前端繁荣的大时代,却也深感焦虑。焦虑来自于自己学的用的还远远还不够,焦虑来自这个行业发展的速度;但是浮躁过后也不禁深思,有什么前端的知识体系可以相对稳定地沉淀下来并让新人得以受用?

有,当然有,我就不搬出 Github 那些 脑图 了,未来的每一篇都由自己结合工作经历或亲手实践而来,毕竟一手的才是自己的。同时我的观点就是:只要基础扎实,任何新技术的掌握都不是大问题,故不必焦虑有很多新的技术没有去学习和实践,当需要的时候可以快速拾起那么你就是称职的。

知识点 进度 简介
基础 自我认知 100% 什么是前端工程师,TA 的工作内容是什么,前端开发处于项目流程中的哪一环,前端工程师的价值是什么?关于价值的自我反问在工作两三年后逐渐萦绕脑海不能散去。前端工程师,何去何从?
设计还原 100% 虽然这是开发历程里最基础的一环,但鲜有被提及,向来未被足够重视。这里主要讲在追求像素级还原的路上可以做的东西。包括设计稿、网页的 Checklist,以及如何较优地进行还原度对比。
兼容性 100% 来源于不同内核和不同版本的浏览器对 HTML 标签、样式属性、JS API 的解析和支持度导致的问题。除了加深对不同浏览器机制的深度了解,同时衍生出来两个概念「渐进增强」和「优雅降级」
多屏适配 0% 涵盖 PC 端、移动端的不同屏幕尺寸的布局优化,涉及流式布局、弹性布局(自适应布局)、等比例缩放等方式。与之相关的技术名词有 media query、viewport、transform、rem、flexbox、deviceRatioPixel。
图片格式 0% 网页无法缺少图片,但图片历来都是流量大户,图片格式选取、图片的压缩、图片的加载对成本节约乃至用户体验至关重要。
预处理器 0% 涵盖 HTML、CSS 和 JavaScript 预处理器,HTML 的模板引擎如 Jade、Jinja,CSS 预处理器如 Sass、Less 和 Styles,JavaScript 模板引擎如 mustache、handlebars、artTemplate。这些都是提升效率和代码可维护性的扩展。
模块加载 100% JavaScript 文件的组织在大型项目中逐渐凸现问题并被重视,随之出现了一些「模块加载器」,如 RequireJS 和 Sea.js。但随着下一代标准 ES6 的逐渐成熟和普及,模块加载器越来越不需要了,模块在线编译和预编译工具应运而生。
必备知识 0% 这里的必备知识主要还是 JavaScript 相关内容,涵盖正则表达式、闭包、组件化方式、内存泄露 等
进阶 缓存 0% 这是前端性能优化的最集中的部分,所用的方式也是五花八门。服务器端、浏览器端、客户端都涉及缓存,缓存是良好体验的必要手段,但也有副作用。所以也要有必要的缓存破坏(cache buster)
动画的意义 100% 是动画让网页变得如此有趣,特别是在如今缤纷多彩的网页中。自然的动画是人类的诉求,动画的意义究竟是什么?这里与你探讨。
动画的实现 100% 网页动画实现是一个新型的领域,在这之前的动画都是通过视频、GIF 等方式来承载。在网页中实现动画的方法有非常多,各有千秋各有优劣,如何选择最合适的?
动画的原则 0% 实现动画需要遵循什么原则?如何让动画更加自然?怎样设置动画的参数?动画是一门大学科,它跟影视动画制作有共同之处,这里讲述动画设计的原则和方法论。
动画性能优化 0% 动画实现方式的不同导致了其性能的优劣,而手机的性能相比 PC 要差的多,所以如果想要在手机端得到最佳的动画效果,就需要了解动画渲染原理,通过合理的分析工具进行性能排查,并将动画效果优化最最佳状态。
跨域 0% 跨域是前端开发中遇到的常见问题,字体、Ajax 等经常会遇到。
HTTP(S) 0% 2016 年前端启动了大规模的 HTTPS 切换浪潮,HTTPS 带来了更多的安全和性能提升。
ES6 与编译器 0% ES6 是新一代的 JavaScript 标准,带来了很多革新。同时 TypeScript、CoffeeScript、Dart 等 JavaScript 编译器同样值得关注。
搜索引擎优化 0% 涵盖了 SEO 和 ASO,未来的新战场在各大应用商场上,特别是苹果的 App Store。
高级 HTML 0% 怎样才算精通 HTML?
CSS 0% 怎样才算精通 CSS?
渲染 0% 了解与你朝夕相对的浏览器的工作原理,明白页面的渲染流程。对于你理解与解决问题,优化性能有着非常重要的作用。
安全 0%
运维 0%
架构 0% 前端工程、单元测试
算法 0% 排序、去重
前端工程 0% 时至今日,前端已然不是一个简单的工作,业务的复杂度已经推进前端发展出了一套体系,编码工作也需要大量的工程化过程去提升我们的效率和约束开发流程。
设计模式 0%