《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.2 Bootstrap CDN

简介:

本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第2章,第2.2节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.2 Bootstrap CDN

在前面的示例代码中,我们对HTML5 shiv元素和respond.js文件使用了CDN。
所谓CDN,就是一个通过互联网部署在多个数据中心上的大型的分布式服务器系统。使用CDN意味着可以节省大量带宽,因为我们不再需要从自己的服务器上下载文件。我们可以受益于性能上的显著提升,因为浏览器可以并行地加载从CDN下载的各种文件,由于这些文件处在不同的域中,下载时不需要一个一个进行排队。此外,CDN提供的数据中心会更接近用户,也就是说,CDN通常是根据用户的位置和更快的路由速度来选择服务器的。因此,文件自然可以得到更快的加载。在某些情况下,CDN还会抽取出文件加载的需求。比如说,有大量的网站使用了Bootstrap CDN,如果网站的用户之前已经访问过其中的某一个网站,浏览器就会使用这些Bootstrap文件的相同副本,不需要再次从网上加载Bootstrap,从而提升网站的性能。
下载示例代码 本书的示例代码可以从华章网站(www.hzbook.com)下载。
加入CDN链接之后,前面这个例子的代码基本结构如下:
image

如果使用CDN的话,必须保持网络通畅;如果处于离线状态,一定要使用下载到的ZIP文件中的Bootstrap CSS和JavaScript文件。我们可以通过以下链接下载离线状态下使用的压缩版和未压缩版的jQuery JavaScript文件:http://jquery.com/download/
此外,我们还要在GitHub网站下载respond.js文件并在项目中引用它。respond.js文件的下载链接是:https://github.com/scottjehl/Respond
请单击图2-3中的Download ZIP(下载ZIP)按钮。

image

解压respond.js zip文件后,在解压出来的文件中,进入dest目录并复制respond.min这个JavaScript文件,然后把它放在JavaScript目录中并引用该文件。不过,网站只有在线上才能发挥作用,所以在Web项目中使用CDN是一种好的实践。
在本书中,我们会在一些章节中使用CDN,这样你就应该不会被HTML文档中的各种代码弄得摸不着头脑。为了清晰起见,避免过于复杂,我们会坚持使用CDN方法。

相关文章
|
8月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
79 0
|
存储 前端开发 JavaScript
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
36 3
|
3月前
|
缓存 负载均衡 网络协议
|
4月前
|
安全 CDN
阿里云CDN产品解读及全站加速在游戏行业的最佳实践!
阿里云CDN(内容分发网络)为全球用户提供快速、稳定、安全的内容分发加速服务,显著提升访问响应速度和成功率
110 13
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
32 2
|
6月前
|
开发框架 前端开发 JavaScript
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
|
5月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
37 0
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
5月前
|
域名解析 缓存 网络协议
工作十年,很多网工连 CDN 原理都没搞懂!
工作十年,很多网工连 CDN 原理都没搞懂!
184 0