[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 軟技能 溝通，團隊合作，知識管理與分享，交互設計，可訪問性設計，可用性設計，需求分析，產品迭代