首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

类似bootstrap这种js或者css引入用cdn好呢还是下载到本地好呢?

在云计算领域中,使用CDN(Content Delivery Network,内容分发网络)或下载到本地都各有利弊,具体要根据实际场景和需求来选择。下面我们来探讨一下这两种方式的特点:

使用CDN的好处:

  • 内容加速:通过在全球范围内的多台服务器上缓存常用资源,用户可以从最近的服务器访问资源,减少延迟时间。
  • 加速请求:CDN可以在多个地理位置同时响应请求,提高请求速度和并发量。
  • 减轻源站压力:CDN可以将大量用户请求分布到不同的服务器上,降低源站服务器的压力,提高网站的可用性。
  • 故障切换:CDN可以在多个地理位置同时提供故障切换功能,从而减少因单个位置出现故障而导致的访问问题。

使用CDN的劣势:

  • CDN的费用:虽然CDN可以帮助减少源站服务器的负载,但是其费用可能会因不同服务提供商而异,需要考虑到成本问题。
  • 缓存策略的限制:CDN的缓存策略可能会导致过期或不必要的资源仍然存储在CDN中,从而造成资源浪费。
  • 文件大小的限制:CDN对每个资源的最大限制可能不适用于某些特定场景。

下载到本地的好处:

  • 定制性更强:用户可以控制资源的位置,可以将其存储在后端的服务器上,或者通过其他方式存储。
  • 可以避免使用CDN时可能带来的缓存策略限制,以及过期资源的浪费问题。

下载到本地的劣势:

  • 增加源站服务器的负载:将所有资源直接下载到本地可能会导致源站服务器的负载增加。
  • 维护成本较高:需要花费更多的精力来管理服务器上的资源,包括更新、修复、删除等操作。

综上所述,选择CDN或下载到本地要根据实际需求和技术场景来判断,建议结合成本、性能优化、资源更新等因素来综合考虑。对于大型资源库和网站来说,CDN通常是一个更好的选择,而对于较小的资源和本地服务来说,从源站下载可能更为适当。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于SpringBoot打造在线教育系统(4)-- SpringBoot集成ElementUI

1.UI选型 终于开始画页面了,什么框架好呢?...我反正是懒得全部自己手写css,我们可以挑一个好用的框架,bootstrap有点太老了,easyUI就更加不用说了,虽然我曾经也是easyUI的死忠粉。...引入资源 我们需要一些资源,引入进来,为了快速看到效果,直接CDN又很慢,所以我们不妨直接把资源下载下来,保存到本地: ?...因为我们不打算webpack那一套,希望做成前后端不分离的模式,所以必须将elementUI本地化,其中的过程很痛苦,网上找了很多说法,都不能用!最终还是自己琢磨了一番才搞定,太难了我。...注意,这边我又吃了没文化的亏,我以为直接copy就完事了,谁知道这个例子的代码只是一个大概的演示,很多css还是得自己搞上去才有的!

55220
  • Bootstrap使用及环境搭建详解

    扯个题外话,如果你们团队中有10个前端开发人员,还是响应式导航栏为例子,我相信每个人的写法和思路都不同,有可能你ul列表,别人div,这就是导致思路不统一,需要沟通等问题,如果我们都用Bootstrap...(3)sass(针对 Sass 的项目中引入) 从 Less 到 sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入,一般情况用不到此包。...我们不难发现,简单来说只是换了一种方式支持Bootstrap,从本地文件方式,换到了网页方式。...BootCDN:https://www.bootcdn.cn/ 引入Bootstrap 我们需要引入的文件有以下: (1)css/bootstrap.min.css CDN: (2)js/bootstrap.min.js

    2.7K20

    前端构建工具 webpack 笔记

    ,并引入js 中 【没错,就是引入 js 文件中】 2)下载 css-loader 和 style-loader 本地软件包 同时,下载两个加载器 npm i css-loader style-loader...,供用户就近请求获取 好处:减轻自己服务器请求压力,就近请求物理延迟低,配套缓存策略 cdn 引入网址:BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 需求:开发模式使用本地第三方库...,生产模式使用 CDN 加载引入 1、在 html 中引入第三方库的 CDN 地址 并用模板语法判断 下面这个是 htmlWebpackPlugin 规定的用法,我们后面在 options 定义.../ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"> 2、配置 webpack.config.js...cdn 引入的地址 }), ] } // 生产环境使用相关配置 if (process.env.NODE_ENV === 'production') { // 外部扩展(让 webpack

    17010

    「jQuery」基础 - 03

    Bootstrap组件使用非常方便: 引入bootstrap相关cssjs 去官网复制html 代码演示 引入bootstrap相关cssjs <link rel="stylesheet" href...插件(JSbootstrap中的js插件其实也是组件的一部分,只不过是需要js调用功能的组件,所以一般bootstrapjs插件一般会伴随着js代码(有的也可以省略js属性实现)。...步骤: 引入bootstrap相关cssjs; 去官网复制html; 复制js代码,启动js插件。...代码演示 引入bootstrap相关cssjs <script src="...1.7.2 案例:toDoList 分析 刷新页面不会丢失数据,因此需要用到<em>本地</em>存储 localStorage 核心思路: 不管按下回车,<em>还是</em>点击复选框,都是把<em>本地</em>存储的数据加<em>载到</em>页面中,这样保证刷新关闭页面不会丢失数据

    2.8K30

    看太多简单易懂的教程,对你没有好处

    至少表现层(css)和业务层(js)所用到的技术就不一样了,但你不能cssjs都写呀,你的教程必须得有侧重点啊。不能真的用到什么就顺着往下讲什么,否则就讲跑偏了嘛。...例如你要讲的是js,但你的demo中需要用一些快速生成ui界面的东西,而这种东西可能是bootstrap或是一个类似的第三方的东西,但你只能是把它一带而过。...但做为读者的“我”来讲,可能bootstrap这类东西我根本就没用过,这就导致你文章中的demo,我实现不了。这也就直接导致我无法通过你这篇教程学到全部的东西。...但我为什么说,“总是看短教程不好呢”?...这种情况,薄的教程反而成为了你脑子里的学习题纲。 前端是复杂的,“你”必须习惯。如果想一味的在前端开发的知识当中寻找简单,这将使你学习流于形式,难有寸进。

    55350

    前端入门24-响应式布局(BootStrap)声明正文-响应式布局(BootStrap

    BootStrap 引入项目中使用有两种方式: 直接使用网上资源 将相关资源下载至本地使用 使用网上资源 第一种方式最简单,直接在 HTML 文档中声明 cssjs 文件来源即可,如: <link rel="stylesheet" href="https://<em>cdn</em>.bootcss.com/<em>bootstrap</em>/4.0.0/<em>css</em>/<em>bootstrap</em>.min.<em>css</em>...,最后再<em>引入</em> <em>BootStrap</em> 提供的 <em>bootstrap</em>.min.<em>js</em>。...将资源下载至<em>本地</em>使用 <em>这种</em>方式就比较折腾了,好处就在于资源文件都可以放在自己服务器上,无需依赖他人。...好,不管是手动去下载,<em>还是</em>接着 npm 下载,最后都需要将下载的资源放进项目中,那么,下载下来的这么多东西,该怎么<em>用</em>,哪些是有用的?

    3.6K20

    js打包时间缩短90%,bundleless生产环境实践总结

    module.css或者.module.scss命名的文件就默认开启了css module。此外,css最后的结果都是通过编译成js模块,通过动态创建style标签,插入到body中的。...在项目本身的代码中,如果引用了npm包,只需要将其指向一个cdn地址即可。这样处理后的,构建的代码就变成: 只有项目本身的代码(项目中对于三方插件的引入,直接使用三方插件的cdn地址)。...进一步想,如果我们使用了托管所有npm包(es module形式)的cdn地址之后,那么在本地开发或者线上构建的过程中,我们甚至不需要去维护本地的node_modules目录,以及yarn-lock或者...,在我们的项目中,在build的时候可以一个插件[snowpack-plugin-skypack-replacer][2],将build后的代码引入npm包的时候,指向skypack。...同一个项目,webpack构建bundle的情况需要60秒左右。 4.3构建产物体积对比 bundleless构建出的产物,一般来说也只有bundle情况的1/10.这里不一一举例。

    91000

    python自动化之BeautifulReport显示异常的解决方案

    我愉快的点开测试报告,出现了以下另我痛彻心扉的一幕~ 真的,大家相信我,领导也要相信我,昨天下午我下班前运行之后报告还是很完美的,非常好的。...另外href和src的bootstrap版本也需要一致哦。其他的同理。 最后再去我们报告或者是template.html里面替换掉。...弊端 1.需要绝对路径,如果是相对路径,你还需要在生成报告的地方将文件夹再次复制到同等的相对路径 2.发给别人,别人看不了,因为别人本地没有。 3.不能做永远的懒汉。...总结 解决方案一 在html报告或者BeautifulReport的template.html文件中: href替换的如下: <link href="https://<em>cdn</em>.bootcdn.net/ajax...弊端 1.需要绝对路径,如果是相对路径,你还需要在生成报告的地方将文件夹再次复制到同等的相对路径<em>下</em> 2.发给别人,别人看不了,因为别人<em>本地</em>没有。 3.不能做永远的懒汉。

    1K10
    领券