[TOC] ## 前言 也许你已经认为你是一名称职的前端工程师，可以根据设计图完成页面，并且可以用js完成下简单的页面交互和数据传递，偶尔还可以自豪的改下jq插件的功能或者样式。但是如果仅仅是这样，还远远不够。 ### 一 前端基础 #### html >1. 你的页面中是否只有div,span,label,input,a,ul,li.button.select这些，有那么多的h5标签你是否尝试了解并且真的去使用，局限于div去布局是远远不够的。 新增的 >2. 新增的h5的属性你是否清楚，如果你的部分局限于checked,selected,id,class,onclick,那也还差的很远，尝试着了解下for,pattern,placehoder,autofocus,autocomplete,dbclick,ondrap,contediable等 >3. 新增的媒体标签，video,audio你是否使用过，表现如何，页面中如果需要该如何使用，如何控制，如何做兼容；新增的canvas画布标签基础的教程看过没，如果实现简单的画布制作与修改，完成画布级别的动画 >4. 你的dom结构是否精简，语义化（语义化是重点），重点区域是否做了批注，便于维护。 >5. 代码格式规范，包括合理嵌套，标准的h5模板，属性以及标签的规则等。 #### css >1. 引入方式是采用外链，经过压缩和md5命名，有基本的浏览器兼容代码 >1. 样式考虑到了继承和默认值，并非所有的样式全部指定样式实现 >1. 选择器部分，基于基本的10类选择器有了基本的了解，做出了合适的选择与使用，提高了选择效率，避免了兼容问题。 >1. 代码简化，属性复写，公共样式抽离。 >1. 模块化，组件化的样式抽离，合理的布局与常用的布局、居中、文本处理方式等 >1. 样式名称命名，语义化，便于二次使用，不会造成样式上污染，区分了业务和公共部分 >1. less，sass,postcss等预处理器的使用 >1. css3中新增属性的使用，包括背景多背景，背景裁剪，盒阴影，盒子阴影，动画，变形，渐变，旋转 >1. css3中，grid以及flex的布局或者盒模型的了解以及使用 #### javascript >1. 引入方式是采用外链，js语法规范，经过压缩和md5命名 >1. 你所熟练使用的jq的版本，jq涉及到语法，jq的核心思想，jq与js的区别 >1. js的语法构成，基本数据类型，基本的内置对象以及常用的内置对象方法 >1. js基本语句，数学运算，逻辑运算 >1. js类与函数的集成，闭包，模块规范与模块编写 >1. js的插件的核心与实现机制 >1. js基于对象程序设计，原型链的实现 >1. 浏览器对象的常用方法 >1. jdom的基本语法以及绑定事件的原理 ### 二 其他角度 #### 2.1 浏览器调试工具：（以下所列仅供参考，希望能给你一些有益的启示） firebug,developer tools,web Inspector 等，用途如下： * 查看页面dom渲染情况，层级结构 * 查看样式的渲染以及继承情况，改变调整样式，并且可以自行改变元素的状态。 * 查看盒模型，分析排版。 * 查看资源文件以及依赖。 * 查看http的加载，网络性能，浏览器端的性能优化。 * 脚本的调试以及开发。 * 网络存储，页面路由，页面传参，网络通讯等。 * gpu渲染与优化。 #### 2.2.开发工具： sublime\hb\ws\atom\eclipse\notepad++\editplus #### 2.3 切页面： ps,axure 的基础知识 #### 2.4 编程知识： 数据结构，mvc，mvvm,面对对象或者切面的编程，js设计模式，js编程模式 #### 2.5 web通讯技术： http状态码，tcp/ip协议，计算机基础 #### 2.6 版本管理 git,svn------github,gitlab等 #### 2.7 前端规范： h5,css3,es6,web标准，代码验证 #### 2.8 前端构建： gulp,grunt,fis,webpack #### 2.9 web优化： 减少请求，压缩，性能优化，代码优化，格式优化 #### 2.10 web兼容： 多系统，多浏览器，多分辨率，多设备，多网络情况 #### 2.11 nodejs方向 服务器，路由，底层操作， #### 2.12 软技能 沟通，团队合作，知识管理与分享，交互设计，可访问性设计，可用性设计，需求分析，产品迭代