小前端的自我修养之一（走马观花篇）

【小前端的自我修养】这系列文章记录的，是一个小前端的成长经验，会不定时的更新修正。
对刚入前端门槛的前端童鞋们或许会有用，经验和姿势丰富的老司机可以路过。
本文主要是走马观花地介绍一下一个前端工程师会接触的到东西，以后会慢慢展开。

前端工程师的日常？

• 切图：将设计稿根据页面功能提取出各种需要的图片、图标。
• 页面编写：html+css页面编写。
• JavaScript编写：实现各种页面动态交互效果。
• 兼容性调试：这占前端工程师的很大一部分时间。
• 性能优化：合并、压缩、CDN等……。
• 用户体验优化。
• 新技术调研。
• node.js后端编写。
• App开发：混合应用。

前端发展过程中，涉及那些知识和概念？

• HTML+CSS+JS: 前端最基础的东西。

• EDM邮件营销：发送的营销邮件使用html编写，是邮件更赏心悦目。

• 语义化 ：良好的编码习惯，便于阅读和搜索引擎SEO。

• SEO：搜索引擎优化。

• WAI-ARIA无障碍：通过特定的标签，使网页便于读屏软件阅读，方便视力有障碍的人使用。

• CSS Sprites：将多个小图标合并为一张大图，减少请求数。

• HTML5

• CSS3

• 响应式：是网站在各种宽度的屏幕小都能良好展示。

• CDN。

• IconFont: 使用矢量字体代替图标，相应的工具有阿里巴巴图标、icomoon、Font Awesome等……

• SVG Sprites。

• MVC、MVVM、MVP。

• WEBP: 谷歌(google)开发的一种旨在加快图片加载速度的图片格式,WebP 探寻之路。

• Retina: 在分辨率极高的设备中，让网页能很好的展示。相关文章： 走向视网膜（Retina）的Web时代。

• SPA：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

• Hybrid：Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。类似工具有：PhoneGap, Ionic。

• 预处理。紧接着出现各种预处理语言，包括用来编译为css 的less，用来编译为html的jade，用来便以为js的coffee script 等等……

• 模块化。最为火热的是requireJS, Sea.js. 以及相应的AMD规范, CMD规范, 以及对应得运行于node端的CommonJS规范。

• 前端组件化。所谓的组件化，值得是把一个比较独立的功能模块的css、js、html还有图片等等相关的资源独立出来，以达到复用的目的。

• 前端工程化。所谓前端工程化，就是借助工具，管理你的所有前端资源，你可以使用各种预处理语音，模块化工具，最后通过工程化工具将他们打包、压缩（当然不止这些功能）等。简单列举几个使用比较广的：grunt, gulp, webpack, FIS。

• 混合应用（Hybrid App）。所谓混合应用，就是用前端语言编写，然后通过相关工具比如phonegap等打包成App应用。混合应用的好处就是可以一套代码直接打包到多个平台（Android、IOS），开发成本和效率相对较高。缺点是运行在webview中，性能和体验比原生应用差，而且不是每一个原生应用有的功能它都能实现。

• W3C：万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。

• ECMAScript：Javascript规范。

• DOM。

• BOM。