CDN公共库前端开发常用插件一览表(VendorPluginLib)
Posted sochishun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CDN公共库前端开发常用插件一览表(VendorPluginLib)相关的知识，希望对你有一定的参考价值。
=============================================================
==========================前端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)。
替换方法：
google字体库：fonts.useso.com
google公共库：ajax.useso.com
常用前端公共库：libs.useso.com
最新备注：360cdn公共库不靠谱，不要在用了，现在你访问http://libs.useso.com/waf_verify.htm要求输入验证码，说流量太大顶不住。
360停止服务，现在换为中科大的CDN：
ajax.googleapis.com => ajax.lug.ustc.edu.cn
fonts.googleapis.com => fonts.lug.ustc.edu.cn
themes.googleusercontent.com => google-themes.lug.ustc.edu.cn
fonts.googleapis.com 字体问题的本地化解决办法：(参考自: http://www.cnblogs.com/manzb/p/7047914.html)
将字体下载到本地，将local.google.fonts.css放置到本地文件夹下，将
@import url(http://fonts.googleapis.com/css?); 改为 @import url(\'local.google.fonts.css\');
本地字体库以及local.google.fonts.css文件下载链接：[local.google.fonts.zip]
总结：上面这几个，百度云依托庞大的机房线路，速度应该是最快的， 新浪云口碑好，历史悠久，积累的用户量多。又拍云的服务太少，几乎不用考虑。阿里云据说也提供了公共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开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
|
版权声明：本文采用署名-非商业性使用-相同方式共享(CC BY-NC-SA 3.0 CN)国际许可协议进行许可,转载请注明作者及出处。 |
以上是关于CDN公共库前端开发常用插件一览表(VendorPluginLib)的主要内容，如果未能解决你的问题，请参考以下文章