『壹』 有哪些值得一讀的優秀開源 JS 代碼
jQuery
jQuery 是一個無需介紹的庫。它憑一己之力讓跨瀏覽器網站使用成為現實，同時把 web 帶到今天的位置。Web 標准已經被大多數瀏覽器製造商採納並真正地尊重，jQuery 是其中的原因之一。jQuery 基金會的使命是「通過開源軟體的開發和支持，以及開發社區的合作，改善開放的 web，讓每一個人都可以訪問它。」
jQuery 是世界上最常用的 javaScript 庫，所有應用程序都應該使用它，除非你不在意程序員的工作效率。它使得 DOM 遍歷、事件處理、動畫、AJAX 在所有瀏覽器上變得更簡單、更容易。
何時使用 jQuery？一直使用，除非你想使用一個像 Zepto 的輕量級版本。
GitHub:https://github.com/jquery/jquery/jquery
AngularJS
Angular 是流行的企業級框架，許多開發人員都在使用它來構建和維護復雜的 web 應用程序。Angular 的人氣非常高，包括 Domino』s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企業都在使用它。Angular 是一個由谷歌支持的開源框架。Angular 自稱是 HTML 的一個擴展，用來構建復雜的 web 應用程序。另外如果你熟悉 TypeScript， Angular 2就是用它構建的。
Angular 是一個 MVC 類型的框架。它提供了模型和視圖之間的雙向數據綁定。該數據綁定允許每當數據改變時，兩邊自動更新。 它使你能夠構建可復用的視圖組件。它提供了一個服務框架，使得後端-前端服務通信更容易。最後，它只是普通的 JavaScript。
何時使用 AngularJS？當你正在構建一個復雜的 web 前端應用程序，同時需要一個模塊化的框架來處理一切時。
GitHub:https://github.com/angular/angular.js
React
React 是今年最受歡迎的 JavaScript 項目！每個人都似乎在談論 ReactJS。去年我參加的每一個會議，至少有好幾個議題是關於 React 和同家族的其他庫（Flux, Rex）的。React 是開源軟體，主要由 Facebook 開發，其他大型科技公司也有貢獻。React 自稱是一個用於構建用戶界面的 JavaScript 庫。
React 主要是 MVC 中的 V。它的重點完全在 MVC 的 V 部分，忽視應用程序架構的其餘部分。它提供了一個組件層，使得創建 UI 元素，組合元素變得更容易。它使用虛擬 DOM，因此優化了渲染，且允許從 node.js 渲染 React。此外，它實現了單向響應的數據流，因此比其他框架更容易理解和使用。
作為 MVC 中的 V，很多項目將 React 結合 Angular 或 Ember 這樣的框架使用。
何時使用 React？當你想要一個強大的視圖層，但不需要在應用程序的其餘部分使用一個復雜的框架，或者你在 Angular、Backbone 或 Ember 應用上需要一個視圖層時。當你正試圖建立一個同構 web 框架時。
GitHub:https://github.com/facebook/react
Backbone
Backbone 是一個著名的簡易框架，適合單個 JavaScript 文件。Backbone 已經存在有一段時間了，是以 CoffeeScript 和 Underscore 聞名的 Jeremy Ashkenas 所開發的。對於一些為小型 web 應用尋找一個結構簡單的框架，而不想引入如 Angular 或 Ember 這些大型框架的團隊，Backbone 特別受歡迎。
Backbone 提供一個完整的 MVC 框架以及路由。模型允許鍵-值綁定和數據變化的事件處理。模型（和集合）可以連接到RESTful API。視圖具有聲明式事件處理，路由在處理 URL 和狀態管理上做的很出色。它包含你創建一個單頁面應用程序所需要的一切，且沒有提供太多東西，沒有不必要的復雜度。
何時使用 Backbone？Backbone 是我創建簡單 web 應用程序的首選框架。
GitHub:https://github.com/jashkenas/backbone/
Ember
Ember 是一個固執的 web 應用程序框架，關注程序員的工作效率。Ember 比較流行，它的核心團隊包括像曾是 Ruby on Rails 和 jQuery 核心團隊成員的 Yehuda Katz 的聰明人。Ember 自稱是「一個用於創建大規模 web 應用程序的框架」，且不浪費你的時間。它很固執，為你提供了很多選擇。
Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，當數據變化時自動更新，就像 Angular，Backbone 和 React 一樣。它包含 web組件 的思想，讓你使用自己標簽擴展 HTML（就像 Angular 一樣）。它也有一個知道如何與你的 RESTful API 一起工作的路由和模型引擎。
何時使用 Ember？當你只需要一個可以運行的框架時。當你因為預算緊張或工期很短而不需要靈活性時，請使用 Ember。
GitHub:https://github.com/emberjs/ember.js
Underscore &lodash
有時候 JavaScript 內置的功能導致程序員的效率並不高。總是缺少一個工具函數或一個可以簡化代碼的函數。Underscore（和 lodash）是一個 JavaScript 庫，它提供了一整套工具函數，不需要對內置 JavaScript 對象打補丁。兩個庫均提供超過 100 個功能助手和其他專用功能，包括 map，filter，invoke，rece，template, throttle, bind, extend, pick, clone 等更多的函數。
何時使用 Underscore？當你需要一個單獨的 JavaScript 文件，來立即提升程序員的工作效率時。
GitHub:https://github.com/jashkenas/underscore
何時使用 lodash？當你需要模塊化和性能稍強版本的 Underscore，同時更容易地支持 AMD 和社區插件時。
LodashGitHub:https://github.com/lodash/lodash
D3.js
數據可視化和圖表是一種常見的 web 應用程序需求。D3.js 是任何數據操作和可視化的事實標准。它是 GitHub上最受歡迎的項目之一，被數以百計的組織使用。大量的圖形，圖表和可視化庫在 D3 上構建。
D3 允許你操作任何來源的數據文檔，轉換成 DOM 或/和 SVG 或/和 CSS。D3 關注現代 web 標准，確保你不受任何專有格式的約束，比如 Flash 和 Silverlight。
何時使用 D3.js？在你需要任何形式的可視化的時候。
GitHub:https://github.com/mbostock/d3
Babylon.js
想要構建完全符合現代 web 標准且跨瀏覽器的視頻游戲嗎？看看 Babylon.js，它是基於 WebGL 和 JavaScript 的 3d 游戲引擎。你可以創建令人難以置信的包含物理、音頻和粒子系統等等的高質量游戲。
何時使用 Babylon.js？無論何時，只要你想做一個視頻游戲或任何類型的復雜三維場景，都能用上。
GitHub:https://github.com/BabylonJS/Babylon.js
Three.js
想要構建一個 3D 可視化場景，但不需要一個完整的游戲引擎？three.js 提供了一個輕量級的 3d 庫，允許渲染 3d 為 HTML5 畫布、SVG 和 WebGL。它是相當簡單的庫，在 three.js 的展示里有數百個優美的例子。
何時使用Three.js？當你需要一個能輸出為 Canvas 的簡單的 3D 可視化場景時。
GitHub:https://github.com/mrdoob/three.js/
Mocha& Chai
JavaScript 在很長一段時間內是非常煩人的。測試任何代碼通常都被認為是惱人的，但它卻是每個開發人員都應該做的事情。每個開發人員似乎總是蔑視和忽略它，而不測試他們的代碼。這個惱人的東西有一個解決辦法，那就是 Mocha 和 Chai。兩個庫的名字都來自美味的熱飲料，它們都能幫你測試代碼，但方式不同。
Mocha 是一個 JavaScript 測試框架，使得你在 node 模塊和瀏覽器 app 中測試非同步代碼變得更容易。Mocha 測試可以串聯運行，可以為正確的測試用例添加異常跟蹤的能力。
Chai 是一個行為驅動開發/測試驅動開發的斷言庫，可以搭配 Mocha 使用。它可以把你需要測試的東西用可讀的風格簡單地表達出來。
何時使用 Mocha & Chai？總是！請測試你的代碼，讓世界變得更美好。
Chai GitHub:https://github.com/chaijs/chai
Karma
既然已經把 Mocha 和 Chai 包含在這個列表中了，如果不包含用來運行這些測試或設置持續集成測試的測試運行器，那將是不完整的。Karma 是一款旨在幫助你在不同的瀏覽器上自動運行測試的工具。它可以幫助你在所有瀏覽器上運行 Mocha 和 Chai 測試。
不是每個瀏覽器都運行在所有平台，但幸運的是可以使用一些免費工具來測試其他瀏覽器，看看 Browser Screenshots。如果你正在 OS X 上運行代碼，想測試 Edge 或 IE，可以 免費 使用這個工具。
何時使用 Karma？當你的應用程序有一個完善的測試套件，並希望確保測試在所有瀏覽器上通過時。
GitHub:https://github.com/karma-runner/karma
PhantomJS
運行完整的瀏覽器來測試你的代碼比較耗內存和 CPU。PhantomJS 允許你運行一個輕量的 WebKit —— Safari 和Chrome（現在是 Blink）後台的渲染引擎。它允許你通過 JavaScript API 運行測試，捕捉截圖，監控網路和自動瀏覽頁面。
何時使用 PhantomJS ?當你需要進行更多的測試，操作頁面和監視網路請求時。
GitHub:https://github.com/ariya/phantomjs
Grunt & Gulp
為生產環境構建網站，通常涉及到提高性能的任務，比如 JavaScript 和 CSS 的壓縮， CoffeeScript/TypeScript 的編譯，單元測試，語法檢查。也許你已經有一個為網站發布到生產環境的工具鏈，如果沒有，你可以使用任務運行器，比如 Grunt 或Gulp。兩者都有大量關於網站的任何轉換的插件，為發布到生產環境做好准備。
何時使用 Grunt？當你喜歡寫配置文件同時不介意你的任務運行器生成中間文件時。
Grunt GitHub:https://github.com/gruntjs/grunt
何時使用 Gulp？當你喜歡在配置上寫代碼和利用 node.js 的流功能來加快任務執行時。
Gulp GitHub:https://github.com/gulpjs/gulp
Babel
JavaScript 語言正在迅速發展。ECMAScript2015 於去年夏天發布，它的許多新特性在最新的瀏覽器上實現了。如果你想看看 ECMAScript 2015 的兼容性，你可以看看來自 @kangax 的這個 表。你會注意到，最新版本的 Edge，Firefox 和 Chrome 已經幾乎完全兼容了。
我們並不是生活在一個完美的世界。作為開發人員，我們需要繼續支持舊的瀏覽器，它們沒有最新最好的 JavaScript 特性。我們要推進 web 和改善我們的代碼庫。Babel 是一個 JavaScript 編譯器，用於把最新的 JavaScript 標准編譯成可在 IE9 等老瀏覽器上運行的兼容ES5的 JavaScript。它有一些插件，使得 React 開發更容易，甚至可以使用一些不屬於該規范的特性（例如ES7）。
何時使用 Babel？當你想使用新的 JavaScript 語言特性，同時還要支持老版本瀏覽器時。
GitHub:https://github.com/babel/babel
引自：
最佳的 JavaScript 前端框架、庫和工具
http://web.jobbole.com/84644/
『貳』 百度js和css合並壓縮是如何做的
簡單來說是通過插件實現，當然現在淘寶出的伺服器（nginx修改版）自帶有這個功能。 通過一個url地址里寫上每個js或者css 路徑，然後插件通過路徑將js/css 進行gzip形式壓縮，最後組合成一個文件輸出。你能看到的輸出格式是php後綴，但是輸出文件的表頭是js/CSS 這樣瀏覽器也就當是js/css來解析了。
合並代碼工具我推薦minify （PHP），這個比較早，也很簡單。
壓縮的話網上有很多地方都提供在線壓縮
簡單說說 JS壓縮：
1. 長變數變數名 壓縮為短變數名，去空格，去注釋
2. 可以將 new Array() 改寫為 []， new Object 改寫為{} 雲雲
3. 使用eval， 關鍵詞等等 的復雜邏輯 也可以壓縮
這樣處理過後，如果覺得還是太大了，還可以採用服務端的gzip壓縮傳輸
『叄』 前端為什麼需要構建工具
注: 在知乎上面幾年前回答的問題，搬過來給你看看吧
1. 【調試伺服器】首先如果你是一個准備做WEB開發實踐的，不管前端、後台，首先需要了解一兩種伺服器apache，tomcat，nginx啥的，至少能夠配置一個基本的本地服務和修改索引路徑，前端頁面使用http/https協議訪問，而不是本地文件協議（file協議下很多jsAPI都是受限的）。
2. 【調試自動更新】伺服器搭建好了，那麼現在開始調試網頁，然後你修改一點代碼，去瀏覽器裡面F5刷新頁面看看效果，再修改一點代碼，再去瀏覽器裡面F5刷新頁面看看效果...如此循環往復， maybe讓工具幫助你檢測本地文件修改然後實時刷新網頁更靠譜。
3. 【換種方式寫代碼】然後就是寫代碼了，less/sass是不錯的css組織工具，ES6也能讓你的javascript代碼顯得更嚴謹和邏輯清晰，要是能夠在訪問頁面的時候實時獲取css/babel(es6編譯器)編譯結果神馬的應該顯得很cool。
4. 【模塊化】當然在完成邏輯相對復雜的交互功能時候，可能需要你組織非常復雜的代碼功能，這個時候了解一下模塊化的開發思想顯得很有必要require.js事實上更早，也更廣泛一點，sea.js在國內也不錯。
5. 【模板引擎】然後就是對於js生成HTML(或者其他什麼的)的一種包裝方式, 即：js模板引擎(handlebars,jade)， 你可以嘗試在開發時候使用這樣的模板工具生成自己想要的HTML文檔什麼的，也是一種不錯的體驗，這個就像你用less寫css代碼一樣，或者說用php，jsp這樣的服務端語言工具生成實時HTML頁面。
6. 【代理調試】有的時候你開發的東西並不只是前端代碼，牽扯到跟服務端應用之間的數據交互，難免需要使用ajax，ajax這貨基於安全考慮是不允許跨域的，因此可能需要通過代理的方式實現數據調試這樣的工具也有不少，nginx伺服器是其中的佼佼者。
7. 【資源合並優化】OK， 如果到完成開發階段，你需要提交自己開發的代碼到線上伺服器了，在提交之前，你需要考慮將開發的資源進行最優化(合並，壓縮神馬的)， js方面有uglify，css有cssmin神馬的，圖片壓縮還可能根據不同的類型進行不同程度和配置的壓縮，這些事情交給別個工具處理顯得很有必要，要是能夠一鍵處理那簡直了， 網路的fis，業內最流行的grunt.js、gulp.js神馬的，事實上它們在配置化編譯LESS/Coffee這類工作在自己的流程中也很在行。
8. 【Combo】使用非同步模塊化開發帶來的弊端就是對於大量零碎依賴文件需要分別開辟多個http鏈接去獲取，這可不是一個好現象，要知道單個瀏覽器單域名並發獲取資源的數量是很有限的， 因此例如KISSY就支持了簡單配置一個combo參數來組織一個獲取nginx的 http-concat格式資源的路徑，當然這樣的動態合並模式也適用於普通的資源請求合並。
9.【資源緩存和更新】 CDN 能夠確保你已經發布到伺服器上的資源以最快的響應時間到達瀏覽器，但是帶來的問題是，你的代碼更新，CDN則傻乎乎的不理你，除非你在使用的地方告訴它需要更新了( 時間戳、MD5文件名啥的 )。
事實上，我覺著凡是重復進行的工作總有可以程序和代碼可以替你完成的部分，前端開發中這種事情尤其多，工具啥樣的自己去定義才最合適自己，而nodejs的出現使得前端自己可以方便的開發這類東西（上面的less、coffee、uglify、gruntjs、fis、gulp這些個單詞可以說：都依賴nodejs）。
PS: 感興趣可關注 f2e-server， 網路搜索關鍵字第一個就是官網。