前端项目中CDN的一些问题【性能优化篇】

这篇具有很好参考价值的文章主要介绍了前端项目中CDN的一些问题【性能优化篇】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. CDN的概念

CDN(Content Delivery NetWork,内容分发网络),是指利用最靠近每位用户的服务区,更快的将资源发送给用户。
前端项目使用 cdn失败,面试题,前端,性能优化

  • 提高用户的访问速度
  • 减轻服务器压力
  • 提高网站的稳定性和安全性

2. CDN的作用

CDN一般用来托管Web资源(文本、图片和视频等),可供下载的资源,应用程序。使用CDN来加速这些资源的访问。

  1. 性能方面:
    • 用户可以更快的请求资源
    • 资源请求的任务分配给了CDN,减轻了服务器的负载
  2. 安全方面:
    • 防御DDOS:通过监控分析异常流量,限制其请求频率
    • MITM: 从源服务器到CDN节点到ISP,全链路HTTPS通信

中间人攻击(Man-in-the-middle attack,MitM)会在消息发出方和接收方之间拦截双方通讯。举例来说,Wi-Fi 路由器就可以被破解用来进行中间人攻击。

3. CDN的原理

3.1 用户未使用CDN缓存资源的过程

  1. 浏览器通过DNS对域名进行解析,得到此域名的IP地址
  2. 浏览器根据IP地址,向域名的主机发送请求数据
  3. 服务器向浏览器返回响应数据

3.2 用户使用CDN缓存的过程

  1. 本地DNS系统解析请求的URL,发现URL对应的是一个CDN专用的DNS服务器,DNS系统会将域名解析权交给CNAME指向的CDN专用的DNS服务器
  2. CDN专用DNS服务器将CDN的全局负载均衡设备IP地址返回给用户
  3. 用户向CDN的全局负载均衡设备发起数据请求
  4. CDN全局负载均衡设备根据用户的IP地址,以及用户请求的URL,选择距离用户最近的设备,告诉用户向这台设备发送请求
  5. 区域负载均衡设备选择一台合适的缓存服务器来提供服务,将该缓存服务器的IP地址返回给全局负载均衡设备
  6. 全局负载均衡设备吧服务器的IP返回给用户
  7. 用户向缓存服务器发起请求,缓存服务器返回响应请求。
    前端项目使用 cdn失败,面试题,前端,性能优化

4. CDN为什么快?

用户访问 CDN 资源时,比如一个图片资源的URL,会先对URL进行域名解析,解析的过程中发现URL是CDN专用DNS服务器,会将DNS解释权交给CNAME指向的CDN专用的DNS服务器。然后找到CDN全局负载均衡系统,然后全局负载均衡系统选择距离我们最近的设备,告诉我们向这台服务器发送请求,区域负载均衡器选择一台合适的缓存服务器来缓存请求,

参考文献

https://cloud.tencent.com/developer/article/1644270
https://www.yuque.com/cuggz/interview/lph6i8#40cbae254f99a3f15afff95e3993b6eb文章来源地址https://www.toymoban.com/news/detail-769678.html

到了这里,关于前端项目中CDN的一些问题【性能优化篇】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。   上两篇中我们分享了如何利用 数据库主键 和 表格设置默认不加载数据 来提升应用系统访问的性能。在本篇中一起来看看如何

    2023年04月10日
    浏览(50)
  • 如何再vue项目中使用cdn(以使用天地图得cdn获取当前位置为例)

    http://lbs.tianditu.gov.cn/api/js4.0/examples.html 在其中可以了解天地图的基本使用教程 但其中的教程均为h5引入cdn的方式 以h5定位为例来改成vue项目 源码: 如

    2024年02月10日
    浏览(53)
  • vue项目中使用CDN引入

    CDN(内容分发网络)指请求资源的方式,即通过script头去请求对应的脚本资源的一种方式,项目里配置之后不需要通过npm包管理工具去下载配置的包。 目的:将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将

    2024年02月11日
    浏览(55)
  • 秒懂边缘云 | CDN基础入门:CDN缓存配置及优化

    作者:辰舒 使用CDN加速静态资源时,CDN会将源站上的资源缓存到距离客户端最近的CDN节点上。当您访问该静态资源时,可直接从CDN的缓存节点上获取,有效避免通过较长的链路回源,提高资源访问效率。在本章节中,我们共同学习如何通过合理配置CDN缓存功能来提升业务缓存

    2024年02月20日
    浏览(40)
  • CDN与前端技术

    本文分享自天翼云开发者社区 《CDN与前端技术 》,作者 : 张 ****亮 CDN(Content Delivery Network)是一种广泛应用于网络加速和内容分发的技术。它通过在全球各地部署服务器节点,将静态资源如图片、CSS和JavaScript文件等缓存到离用户最近的节点上,从而提供更快速和可靠的内容

    2024年02月15日
    浏览(39)
  • Vue打包优化篇-CDN加速

    在没有使用cdn加速之前打包后数据如下,可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大,假设再来很多依赖项是不是更大,同时也会影响单页面应用首屏加载速度,所以这里采用一种打包优化手段之一来分离依赖项。 首先项目中需要使用依

    2023年04月08日
    浏览(34)
  • vite配置cdn优化打包体积

    大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。 本文关于 vite2 vue3 + Ts 项目如何cdn引入 element plus 做一个简单教程,我们可以通过两种方式引入配置cdn。 由于 vite 的核心基于 rollup 和 webpac

    2024年02月05日
    浏览(44)
  • 为应用程序接入阿里云CDN优化网站访问速度

    网站接入CDN的前提必须域名要备案,否则无法使用。 如果你的域名没有进行备案,但是你有真实的域名,在配置CDN的时候加速区域可以选择全球非中国大陆,通过这种配置可以去验证CDN的效果,配置完成后,

    2024年02月11日
    浏览(67)
  • 用webpack做一些前端打包时的性能优化

    一.webpack 的五个核心概念 1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名 3.loader :loader让webpack能够去处翻译理那些非js文件(img css…) 4.Plugins :Plugins插件可以用于执行范围

    2024年02月12日
    浏览(50)
  • CDN加速要怎么使用?一分钟教你使用CDN

    互联网行业的发展脱离不开越来越多人生活习惯的变动,比如以前我们在线下购物,现在我们在线上抢购,虽然以前的经营模式并没有产生变化,但因为互联网的进军,大众的生活已经不能没有网络了。但光有网络没有足够好的服务肯定是不行的,因为越来越多的网民出现,

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包