(1)切割地圖
素描是最基本的前端技能。壹般我們基本上可以通過photoshop或者FireWorks得到設計師交付的設計圖紙，但是如果想要提高素描的效率，就不得不使用壹些小技巧，比如利用PS中的動作來實現“壹鍵素描”的功能。詳見我的文章:/P /p/b7690cc8893f，介紹了除了素描以外的其他實用方法和工具。
(2)編寫html/css/js
對於寫代碼的部分，首先要找到適合自己的IDE工具。建議不要使用notepad++或者dreamweaver。這些工具已經不符合前端的趨勢，所以我們無法優雅地鍵入代碼。這裏我主要推薦sublime text，atom或者webstrom，因為他們除了人性化的界面和高亮支持大部分語法之外，還可以安裝各種插件來擴展妳的IDE工具。在這裏，我主要介紹幾個提升開發效率的sublime text的插件:
其中，Element用於快速編寫html，比如輸入ul >；li之後，按tab鍵生成包含li標簽的ul標簽。官方文件是:B用於壹鍵排序樣式屬性；HTML-CSS-JS pretify可以壹鍵標準化我們的HTML/CSS/JS甚至JSON格式；SublimeTmpl可以快速創建新的HTML/CSS/JS文件；ColorPicker用於調用本地調色板函數。這些工具非常實用，可以在壹定程度上提高我們的編碼效率。
(3)前端自動化
說到提高開發效率，這裏不得不提壹些前端自動化工具。畢竟前端自動化是現在和未來的趨勢，可以大大減少前端不必要的工作量，讓我們可以專註於前端本身。
這裏我們可以使用npm來管理我們的項目包文件；用webpack打包壓縮我們的代碼；利用node.js實現本地服務器的構建；用karma和jasmine來測試我們的前端代碼。
善用前端自動化工具可以幫助我們處理很多瑣碎的事情，比如壹鍵壓縮代碼和圖片，壹鍵合並JS，檢測文件更新等。
前端模塊化
實現前端模塊化可以方便我們項目代碼的維護，實現按需加載，從長遠來看對我們提高項目的開發效率非常有幫助。
在ES6出來之前，應該說前端代碼本身並不具備實現模塊的功能，必須借助壹些插件庫來實現，比如require.js，sea.js等等。隨著ES6的普及，require.js和sea.js這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境中，我建議利用ES6的模塊化功能來實現我們的前端模塊化。
(E)前端組件
前端組件化的概念由來已久。我們可以把自己的代碼分成不同的組件來實現通用，方便維護，這樣也可以提高我們的開發效率。下面是流行的前端框架Vue的單個文件組件的概念圖:
當然，除了以上五點，還有很多地方需要為前端提高開發效率，任重而道遠。希望以上幾點能對剛認識前端的同學有所啟發，能親自實踐壹下。