=============================================================
==========================前端CDN公共庫=========================
=============================================================

為什麽使用前端CDN公共庫：

使用前端CDN增加網頁的並行載入速度，減少本地服務器的負擔，節省流量。我們把靜態資源放到自己的服務器上面固然好像安全可靠，不過我們不是每臺服務器的速度都像cdn速度一樣快；根據雅虎的性能建議，把靜態資源放到不同的域名下還能加快加載速度(一個瀏覽器對與同一域名的並行下載的個數默認是2個， HTTP.1.0中規定的是4個。這樣，我們可以使用不同的域名來提升下載的速度)。一般的js和css公用庫我們都可以找到CDN資源。js放的位置由你決定，雅虎的建議是放在緊靠</body>前面(將腳本放在底部加載，即使請求時間較長，對頁面的影響也很小。體驗最佳)。

前端CDN公共庫調用方法和使用本地網站的資源一樣，如：<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
但是你也許會擔心CDN某天會連不上，那你也可以在添加一個本地靜態資源的調用：

<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    !window.jQuery && document.write(‘<script src="/static/js/jquery/3.1.0/jquery-3.1.0.min.js"><\/script>‘); //
 
 如果某天CDN不可用，就加載本地資源替代文件
</script>

前端CDN公共庫實際項目使用推薦：

如果是面向國內用戶，推薦使用新浪前端cdn庫 (http://lib.sinaapp.com/) (推薦，用的人多，多年了一直堅挺)
如果是面向國外用戶，推薦使用谷歌CDN (https://developers.google.com/speed/libraries/)

前端CDN公共庫的簡介：

目前國內的一些比較大的公共CDN服務：

百度公共CDN
官網：http://cdn.code.baidu.com/
Ps：百度的速度目前來說應該是和新浪差不多的。不過jQuery的版本比SAE少幾個，其他類庫應該都差不多。

新浪雲計算CDN公共庫
官網：http://lib.sinaapp.com/
Ps：網上有評測說新浪的速度比百度的要好。個人沒感覺出來。親測半夜的時候出現過幾次加載慢的情況（不知道其他站長遇到過沒有）。

又拍雲JS庫CDN服務
官網：http://jscdn.upai.com/
又拍雲主要專註於海量小文件的存儲與分發及圖片雲計算領域。又拍雲js庫提供了常用的JavaScript庫CDN服務。算是起步較早的cdn加速服務了。速度和穩定性也不錯。不過js庫有點少，有些前衛的js庫可能不提供。

七牛雲存儲開放靜態文件CDN
官網：http://www.staticfile.org/
像Google Ajax Library，Microsoft ASP.net CDN，SAE，Baidu，Upyun 等 CDN 上都免費提供的JS庫的存儲，但使用起來卻都有些局限，因為他們只提供了部分JS 庫。但七牛雲存儲提供一個盡可能全面收錄優秀開源庫的倉庫，並免費提供 CDN 加速服務。

360網站衛士CDN前端公共庫
官網：http://libs.useso.com/
只需替換一個域名就可以繼續使用Google提供的前端公共庫和免費字體庫,讓網站訪問速度瞬間提速。
Ps：360的步伐現在是越來越快了。各種技術和提供的服務更新的速度是飛快的。360CDN服務也是最近才推出的（貌似主要還是Google被墻了 的原因）。提供了大多數的前端js庫，還在自己的服務器上面緩存了Google的前端公共庫和免費字體庫，這個算是其他國內的cdn公共庫沒有的。速度和穩定性也不錯，當然相比較而且還是略遜於百度和新浪(親測有些地方寬帶線路會斷線，可能也是很少部分吧)。畢竟提供服務還沒多久。具體使用方法可查看WordPress利用360CDN公共庫解決Google Open Sans字體無法加載(http://jingyan.baidu.com/article/9113f81b2248802b3314c75f.html)。
最新備註：360cdn公共庫不靠譜，不要在用了，現在你訪問http://libs.useso.com/waf_verify.htm要求輸入驗證碼，說流量太大頂不住。

總結：上面這幾個，百度雲依托龐大的機房線路，速度應該是最快的， 新浪雲口碑好，歷史悠久，積累的用戶量多。又拍雲的服務太少，幾乎不用考慮。阿裏雲據說也提供了公共CDN服務，但目前官網找不到具體服務頁面，暫時不說了。

目前國外的一些比較大的公共CDN服務：

CDNJS
官網：http://www.cdnjs.com/
國內鏡像：http://www.cdnjs.cn/
CDNJS提供非常完整的 JavaScript 程式庫，無論是熱門或是冷門的一應俱全。若你覺得它們缺少哪些好用的函式庫，也可以自行提交到網站裏，通過審核後就
CDNJS 就會為你分流 js文件！這項服務是結合 CloudFlare、Pingdom 與 S3Stat的，穩定性與速度自然不在話下。
Ps：CDNJS應該算是最完整的的JS庫了。存儲了大部分主流的 JS 庫，甚至 CSS、image 和 swf，不過很多國內優秀開源庫是沒有的。很多國外前衛的Js庫在CDNJS大都能找到。國內的速度雖然比不上其他的幾個國內的CDN服務，但是相對來說 其實還可以。
當然你也可以使用國人提供的CDNJS國內鏡像網站的又拍雲路徑來引用相關JS和CSS文件。CDNJS國內鏡像托管在又拍雲存儲，但是各種JS或者CSS類庫比又拍雲自己出的JS庫豐富很多,而且每天同步更新且支持https協議。

Google Hosted Libraries
官網：https://developers.google.com/speed/libraries/
Google出品，必屬精品了。雖然最近Google全線產品被墻了，連基本的Google搜索服務都無法使用了。但是谷歌的公共CDN公共庫應該是 最強大的了，像其中的前衛的各種代碼類庫和Google Web Font 字體庫，國內幾大公共CDN服務幾乎都不提供支持。
Ps：當然， Google打不開怎麽辦？除了使用國內的cdn庫，也沒有什麽好辦法了。如：國內cdn不提供的js庫使用七牛雲存儲cdn加速服務、Google Fonts Open Sans字體庫使用360CDN公共庫代替等。

Microsoft ASP.net CDN
官網：http://www.asp.net/ajaxlibrary/cdn.ashx
ASP.NET開發團隊推出的一個新的微軟Ajax CDN（Content Delivery Network，內容分發網絡）服務，該服務提供了對AJAX庫（包括jQuery 和 ASP.NET AJAX）的緩存支持。該服務是免費的，不需任何註冊，可用於商業性或非商業性用途。
Ps：微軟出品，自然不會太差。雖然在天朝，速度依然不會太慢（當然比不上國內的其他cdn）。

jsDelivr
官網：http://www.jsdelivr.com/
MaxCDN是一家價格相對比較便宜的CDN公司，在全球分布著眾多的節點。 jsDelivr是基於MaxCDN的一個免費開源的 CDN 解決方案，用於幫助開發者和站長。jsDelivr包含 JavaScript 庫、jQuery 插件、CSS 框架、字體等等 Web 上常用的靜態資源。
Ps：每一款CDN的節點數量都是大家所關心的，jsDelivr總共提供著13個節點。加載速度和CDNJS基本差不多，國內用戶建議使用國內CDN服務最佳。大家可以自己測試看看。

總結：這些CDN公共庫大都各具特色。大家可以自己選擇性去使用。速度和穩定性以國內的百度和新浪為最佳（當然這是個人意見）。鑒於Google已經被墻，所有關於Google的服務大家還是盡快轉移陣地，使用國內的CDN公共庫服務吧。

參考文章：
http://www.51xuediannao.com/jiqiao/cdn_lib.html
http://www.admin10000.com/document/4614.html

=============================================================
=========================網站性能測試工具=========================
=============================================================

Google Page Speed
類型：瀏覽器插件
谷歌網頁速度測試是一個開源的Firefox / Firebug插件。 網站管理員和Web開發人員可以使用該工具來評估其網頁的性能並獲取有關如何改進它們的建議。

YSlow
類型：瀏覽器插件
YSlow用來分析網頁性能，並在高性能網頁規則基礎上建議如何改善。

PageTest
類型：瀏覽器插件
Internet Explorer的插件，常用來顯示瀏覽器加載內容時發出的請求並提供了該進頁面性能的建議。

Pylot
類型：瀏覽器插件
開源的測試工具，可以測試網站的性能和可擴展性。 它運行HTTP負載測試，這是有用的容量規劃，基準，分析和系統調整。

Pingdom
類型：在線測試網站
測試地址：https://www.pingdom.com/
功能介紹：測試網站所有對象的加載時間（HTML，images，JavaScript，CSS，嵌入式框架等）。 您還可以檢查網站每個元素的加載速度並改善加載緩慢的項目。 在測試結果中，可以看到網站每個元素的加載時間報告，元素的大小和元素的總數量。

GTmetrix
類型：在線測試網站
測試地址：https://gtmetrix.com/
功能介紹：結合了最流行的Firefox性能組件YSlow的和谷歌網頁速度測試工具。 Gtmetrix給你提供改進網站速度的建議，雖然YSlow的和谷歌網頁的速度測試的建議是針對Firefox的，也可以適用於其他瀏覽器。

Site-Perf
類型：在線測試網站
測試地址：https://gtmetrix.com/
功能介紹：它模擬瀏覽器下載圖片，CSS，JS和其他文件，在報告中你可以看到先加載網站的哪些頁以及加載時間。 這是十分有用的性能報告，可以用來查找到提高你的網站的載入速度需要改善的元素。

參考文章：
http://www.cnblogs.com/lhb25/archive/2010/12/26/1917047.html

=============================================================
==========================前端資源下載站=========================
=============================================================

代碼筆記 - 分享喜愛的代碼 做勤奮的人，為前端人員提供建站常用的jQuery,jQuery插件,jQuery特效,JS特效,網頁特效等大多數資源
官網：http://www.daimabiji.com/

懶人建站 - 專註於網頁素材下載，提供網站模板素材、圖片素材、ps素材、素材庫等，服務於【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。
官網：http://www.51xuediannao.com/

懶人圖庫 - 專註於提供網頁素材下載，其內容涵蓋網頁素材，矢量圖素材，JS代碼，psd素材，導航菜單，PNG圖標等，讓任何一個網頁設計師都能輕松找到自己想要的素材！
官網：http://www.lanrentuku.com/

懶人之家 - 致力於網頁腳本代碼以及Flash素材的收集與整理，努力為國內前端工作者提供最全面的素材，幫您節約時間做更多的事情！
官網：http://www.lanrenzhijia.com/

模板王 - 精選上萬個網頁模板免費下載,提供個人網站模板,企業網站模板,DIV+CSS模板,響應式網站模板,手機網站模板等免費網頁模板下載大全。
官網：http://js.mobanwang.com/

酷站代碼 - 網頁特效,js特效,jQuery特效,js代碼大全,幻燈輪播圖插件,網站模板素材下載
官網：http://www.5icool.org/

A5源碼 - 提供海量免費網站源碼下載,源碼模板,源碼插件,JS代碼,建站教程,站長工具和常用軟件下載,專註於服務中國站長
官網：http://down.admin5.com/texiao/

阿裏西西 - 國內專業的網頁制作教程和web開發資源下載的網站，主要提供網頁制作教程、js網頁特效代碼、廣告代碼、網站源碼、網頁模板、站長資訊及酷站、網頁編程開發教程等內容。網站自2004年上線至今已有11年，世界排名1萬名內，在同行業網站和web開發愛好者群體中具有較高口碑和知名度。
官網：http://js.alixixi.com/

=============================================================
=========================自己搭建靜態資源CDN=======================
=============================================================

訪問地址示例：
css: http://a1.sochishun.cn/static/css/normalize/3.0.1/normalize.min.css
bootstrap: http://a1.sochishun.cn/static/framework/bootstrap/3.3.7/css/
chart: http://a1.sochishun.cn/static/plugin/chart/chartjs/1.0.0/

文件目錄規劃：
|--adminlte/
|--css/
| |--normalize/
|--font/
| |--font-awesome-4.7.0/
| |--googlefonts-v9/
| |--ionicons-2.0.1/
|--framework/
| |--bootstrap-3.3.7-dist/
| |--jquery-ui-1.12.1/
|--js/
| |--chart/
| |--colorpicker/
| |--cookie/
| |--datagrid/
| |--datetime/
| |--dialog/
| |--editor/
| |--form/
| |--jquery/
| |--layout/
| |--lightbox/
| |--map/
| |--mobile/
| |--mouse/
| |--slider/
| |--sliderbar/
| |--transition/
| |--tree/
| |--treegrid/
| |--uploader/
| |--xsui/
|--theme/
| |--common/

=============================================================
========================常用前端插件下載和介紹=======================
=============================================================

說明：評測文章默認只列了標題，因為文章地址肯能會失效。使用方法：復制文章標題到搜索引擎查找，即可獲得可用的頁面地址。

########圖表(Chart)插件庫########
推薦插件：
Echarts: 百度前端團隊做的基於html5-canvas的開源圖表繪制組件。
Morris.js: 一個小巧的、效果漂亮的JavaScript庫，用於可視化時間序列數據。
jQuery Sparklines: Sparklines能夠在HTML或者Javasript中生成很小的行間圖表，對於顯示迷你圖表特別有優勢。因為它只使用1行來完成圖標生成。另外一個非常不過得特性是自刷新。你可以看到它的鼠標移動撲捉在線演示。
jqPlot: 最好的jQuery圖表免費插件之一。大量的選項提供給你，你甚至可以設置陰影和拖拽操作。甚至可以自動計算趨勢線。個人覺得甚至可以和highcharts媲美。

評測文章：
10 個 jQuery 圖表插件推薦
5個最頂級jQuery圖表類庫插件-Charting plugin：http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html
開源項目首頁 > jQuery 插件 > jQuery圖表：http://www.oschina.net/project/tag/275/jquery-chart
10款免費而優秀的圖表JS插件

########日期選擇器(DatePicker)插件庫########
推薦插件：
My97DatePicker：My97DatePicker是一個更全面，更人性化，並且速度一流的日期選擇控件。具有強大的日期範圍限制功能；自定義事件和豐富的API庫；多語言支持和自定義皮膚支持；跨無限級框架顯示和自動選擇顯示位置。
jQuery UI Datepicker：jQuery UI Datepicker是一個簡潔，快速，輕量級，漂亮的日期選擇控件。DateInput可自定義日期的顯示格式。
jeDate：jeDate除了包含日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前後若幹天返回、時分秒選擇、智能響應、自動糾錯、節日識別，操作等常規功能外，還擁有更多趨近完美的解決方案。 目前只適合PC端。
jQuery-Timepicker-Addon：改進了jQuery UI自帶的Datepicker，支持時分秒功能

評測文章：
25 個最棒的 jQuery 日期時間選擇器
17個Javascript日期選擇器

########顏色選擇器(ColorPicker)插件庫########
推薦插件：
colorpicker: ColorPicker是一個可靈活定制沒有依賴於任何JS框架的JavaScript高級顏色選擇器。它能夠在6種不同的顏色模式中顯示整個調色板（約~16.78 mil. colors）。這個顏色選擇器有4種從簡單到高級大小和功能不同的選擇面板。面板外觀可以利用CSS更改，可拖拉也可以固定。

評測文章：
10個精選的顏色選擇器Javascript腳本及其jQuery插件：http://www.chinaz.com/free/2011/1216/226801.shtml
開源項目首頁 > jQuery 插件 > jQuery顏色選擇插件：http://www.oschina.net/project/tag/287/color-picker
11個JavaScript顏色選擇器插件

########對話框/彈窗(Dialog)插件庫########
推薦插件：
Layer: layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕松地擁有豐富友好的操作體驗。

評測文章：
jQuery Dialog系列插件：五款彈出對話框、遮罩層
10 個實用的 jQuery 彈出對話框插件
jquery Dialog - 彈出窗插件：http://www.cnblogs.com/xiaoyao2011/archive/2011/10/16/2213832.html

########焦點輪播圖(Silder)插件庫########
推薦插件：
Unslider：Unslider 是一款非常輕量的 jQuery 插件（壓縮後只有 1KB），能夠用於任何 HTML 內容的滑動。可以響應容器的大小變化，自動排布不用大小的滑塊。可以通過整合 jQuery.event.swipe 來讓其支持觸屏設備的滑動功能。
jquery.luara：luara幻燈片插件，用於設置焦點幻燈片的插件，實例中列出了三種最常用的效果，漸隱、上滑、左滑，可以設置切換的時間間隔。

評測文章：
12款經典的白富美型 jQuery 圖片輪播插件：http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html
10款實用焦點圖及圖片jQuery插件下載推薦
9款jQuery帶縮略圖焦點圖插件賞析
7款jQuery圖片輪播滑動插件

########燈箱(Lightbox)插件庫########
推薦插件：
Lightbox2
jQuery LightBox

評測文章：
20款美化網站的 jQuery Lightbox 燈箱插件
分享30個最佳 jQuery Lightbox 效果插件
15 個jQuery Lightbox 插件用於增強圖片查看功能

########其他綜合插件庫###########
評測文章：
20+功能強大的jQuery/CSS3圖片特效插件：http://www.oschina.net/question/945575_128647

########移動端(Mobile)插件庫########
推薦插件：
swiper：Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

CDN公共庫、前端開發常用插件一覽表(VendorPluginLib)