切圖

• Photoshop
  • 切圖插件Cutterman
  • 標注插件Parker
  • 圖片壓縮ImageOptim/HummingBird

HTML

• HTML 基礎
  • 基礎標簽技術性
  • 語義化及SEO
  • meta屬性 - 移動端viewport設置
  • 塊級元素/行內元素
• HTML 媒體
• HTML API
  • SSE/Web Works/拖放(了解)
  • 存儲/定位/全屏/頁面狀態(是否當前瀏覽)
• 全局屬性
  • contenteditable（是否允許編輯）
  • draggable（是否允許拖動）
  • drapzone（被拖動的目標被拖放到元素中會發生什么）
  • hidden
  • spellcheck（拼寫檢查）
  • id/class/title/dir/tabindex/lang
• HTML 圖形 - SVG/Canvas(了解)
• 快速編輯 Emmet

CSS

• CSS選擇器(了解寫法對瀏覽器性能的開銷)

• CSS核心點

  • 浮動與清除浮動
  • 居中
  • 透明濾鏡
  • 布局
    • display/position
    • float
    • flex
    • overflow

• 基礎樣式

  • 背景/邊框/文本/字體/連接/表格/輪廓/3D
  • 用戶界面
    • 盒模型
  • transform 變換
    • transform（二維變換，平移、縮放、扭曲）
    • transforn-origin
  • transition 過度
    • transition-property：檢索或設置對象中的參與過渡的屬性[all]
    • transition-duration
    • transition-timing-function
    • transition-delay
  • animation 動畫

• CSS引用方式

  • 外部樣式表
  • 內部樣式表
  • 內聯樣式表

• 常用布局 (了解HTML書寫順序對網頁渲染性能的影響)

• CSS hack (常用的有總結)

• CSS前處理器

  • Scss

• CSS后處理器

  • PostCss/Autoprefix

• BEM命名法(面向對象的CSS)

JavaScript

• Js引用方式
  • 外部/內聯
• Script異步加載方式
  • async - 異步下載, 下載完畢后立即執行
  • defer - 異步下載, 等待DOM解析完畢觸發DOMContentLoaded事件之前
• 數據類型
  • 數值類型
  • 引用類型
    • Object
    • Array 基礎屬性/方法
    • Date 基礎屬性/方法
    • RegExp 常用實例
    • String 基礎屬性/方法
  • 類型檢測 - typeof/instance of/Object類型拆分
  • 深淺拷貝 (總結過)
• 函數
  • 理解this
  • 作用于及作用域鏈
  • 類 (原生寫法/ES6)
  • call/apply - 綁定this的
  • 閉包
  • 模塊化 - ES6
• Math - 常用方法
• DOM
  • DOM基礎操作(需要不定時查看文檔)
  • 事件綁定/代理/隊列
• BOM
  • 獲取瀏覽器參數
• JSON - 對象的深拷貝
• 其他
  • setTimeout 異步
  • setInternal/requestAnimationFrame
  • try/catch
• ES6 (掌握及使用了70%)
• 加密庫 - md5/base64/sha1

綜合

• 頁面性能優化及調試(雅虎軍規)
• 緩存處理
• 調試
  • PC: Chrome
  • Mobile: 微信開發者工具/二維碼/
  • 線上抓包: Charles
  • API測試: Postman
• 跨域處理

前端自動化

• Gulp(很熟悉, 能直接寫任務)
• Webpack(知道原理, 正在使用)
• 依賴管理: npm/cnpm/yarn

IDE: WebStorm/Brackets

版本管理

• SVN(CornerStone)
• Git(SourceTree/GitHub Desktop)

框架

• jQuery/zepto
• Angular1.x/Vue2.x
• Leaflet
• IONIC1.x
• Lodash/Moment/...

軟技能

• 寫作能力(正在鍛煉)
• 協作(能一個人做完的不交給兩個人做)
• 溝通(需要磨合)

想學的

• Weex
• IONIC 2.x
• Nodejs - 達到熟練的程度

今年計劃

• Vimo: 基于Vue2.x的移動端Hybrid框架(完成40%)
• Vida: 基于Vue2.x的桌面框架(未開進行)
• 深入了解Nodejs的中途島模式(未開進行)
• 發布50篇技術文章(不是硬性的)