7.关于cdn、页面静态化

本文介绍了CDN的工作原理,如何配置阿里云CDN,以及缓存控制的Cache-Control响应头。讨论了ETag和Last-Modified的再验证机制,并阐述了静态资源的部署策略,包括版本号、摘要部署和摘要做文件名部署。最后,探讨了全页面静态化,利用PhantomJS模拟浏览器执行JavaScript,实现服务端渲染HTML并推送到CDN。
摘要由CSDN通过智能技术生成

我们之前一直都在介绍动态请求的加速,接下来讲一下静态请求,也就是cdn。

当请求来到服务器上时,如果是访问静态资源,那么就将请求解析到cdn加速域名中,再由cdn(海量的就近加速节点)就近看有没有存静态资源,有的话直接返回,没有的话去指定的http地址中抓取数据返回并缓存起来,下次就可以直接返回了。

接下来配置一下,这里用的是阿里云的:

在cdn上添加配置,ip就是nginx的ip:

接下来在域名解析中添加cname的记录:

访问即可,压测:


cache control响应头

随便找一个网站看下参数,可以看到cache control是响应头返回的。

他的作用是服务端告诉客户端这个http的response可不可以缓存,以什么样的策略缓存。他有几种状态:

private:客户端可以缓存

public:客户端和代理服务器(例如nginx、cdn等)都可以缓存

max-age=xxx:缓存的内容将在xxx秒后失效

no-cache :强制向服务端再验证一次,这个的意思是客户端会缓存起来,但是下次请求的时候会向服务端验证这个缓存能不能用,再决定是否用这个缓存

no-store:不缓存请求的任何返回内容

可以看下图:

什么是再验证一次?也就是有效性判断,那么怎么进行

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它通过使用组件的方式来构建应用程序,使得开发更加模块和可维护。Vue CLI是Vue.js官方提供的脚手架工具,可以帮助我们快速搭建Vue项目并进行开发、构建和部署。 Vue.config.js是Vue CLI 3.x的配置文件,用于配置Vue项目的构建和开发过程中的各种选项。在Vue.config.js中,我们可以进行各种修改,比如代理设置等。通过修改Vue.config.js,我们可以根据项目需求进行自定义配置,以满足特定的开发和构建需求。 关于CDN(内容分发网络),它是一种用于加速静态资源加载的技术。在Vue项目中,我们可以使用CDN来引入Vue.js及其相关的库和插件,以提高页面加载速度和性能。 具体来说,在Vue项目中使用CDN可以通过以下步骤实现: 1. 在HTML文件的<head>标签中添加相应的CDN链接。 2. 在Vue.config.js中进行相关配置,比如配置externals选项来告诉Vue不要将CDN中已经存在的库打包进最终的构建文件。 通过使用CDN,我们可以从远程服务器加载Vue.js及其相关资源,而不需要将它们打包到我们的项目中。这样可以减少我们的构建文件大小,并加快页面加载速度。 注意:使用CDN需要确保你的项目能够访问到CDN链接,否则将无法正常加载相关资源。另外,使用CDN可能会导致一些限制,比如不能使用本地文件的相对路径等。 总之,通过使用Vue.config.js和CDN,我们可以更灵活地配置Vue项目,并提高页面加载速度和性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值