利用 Cloudflare 为网站进行加速(使用cloudflare导致网站巨慢)
zhezhongyun 2025-03-28 23:26 56 浏览
现在很多公司都通过搭建官方网站的方式,来宣传自己的公司以及相关的产品。但是由于网友所处的位置不同,再加上网络环境的差异,会造成访问速度出现参差不齐的情况。通常为了解决这样的问题,都是配合CDN服务来进行加速,下面就来看看通过Cloudflare 如何完成加速操作。
设置加速网站的域名信息
首先通过浏览器打开 Cloudflare 服务的官方网站(
https://www.cloudflare.com/),接着点击右上角的链接注册一个相关的账户,注册完成后登录到网站的后台,就可以进行相关的配置操作了。现在点击后台管理页面右上角的“Add your site”按钮,在弹出的对话框中设置自己的域名,比如笔者这里设置的就是“appwan.ml”。设置完成以后点击“Add site”按钮完成添加,这时直接点击提示框中的“Next”按钮,然后在收费环节选择“FREE”这个套餐。再点击“Confirm Plan”按钮,就可以进入到域名解析的环节(图1)。
通常 Cloudflare 服务会自动完成设定域名的解析操作,如果没有自动完成的话,那么我们就在列表的“name”输入框中设置域名的信息;接着在“IPv4 address”输入框里面设置域名对应的IP地址,然后点击“Add Record”按钮就可以将它添加到列表里(图2)。点击下面的“Continue”按钮,就会看到网页中给出了一个DNS设置提示框,最后根据提示对自己的DNS服务商设定的DNS信息进行修改即可。
更改解析完成加速配置
由于笔者这里使用的是 Freenom 提供的免费域名(https://my.freenom.com),因此先打开该域名提供商的官方网站并且登录到管理后台;接着点击“Services ”菜单中的“My Domains”命令,在列表中找到要进行设置的域名后,点击后面的“Manage Domain”按钮;然后在弹出的网页点击“Management Tools”命令,再在弹出的菜单里面选择“Nameservers”选项 ,再勾选第二条“Use custom nameservers (enter below)”选项。
将刚刚复制的DNS地址分别粘贴到“Nameserver 1”和“Nameserver 2”输入框里面,最后点击“Change Nameservers”按钮完成DNS地址的修改操作。修改完成以后返回到 Cloudflare 服务的管理后台,点击最下方的“Continue”按钮就可以完成配置操作。由于笔者更换了 DNS 地址的原因,所以域名需要重新进行解析才可以进行访问,当域名解析完成以后该服务就会自动帮助网站进行加速操作。
小提示:点击 Cloudflare 服务的后台管理页面,点击工具栏中的“Overview”图标后提示“Status: Active”,就表示网站的域名解析已经成功完成了。
压缩文件多措施并举
平时我们在传输一些体积较大的文件时,首先会通过压缩软件对文件进行压缩,从而方便快速进行传输。而通过 CloudFlare 服务也可以起到类似的效果,首先点击后台工具栏的“Speed”按钮,将“Auto Minify”选项中 JavaScript、CSS、HTML 等三个选项都勾选上(图1)。这样 CloudFlare 服务会将这些文件进行压缩,从而使得这些文件的体积变得更小,最终使得网站的载入速度变得更快。如果开启这个功能以后网站发生问题,比如出现网页无法正常的进行显示,或是某些功能无法正常的进行操作,那么就建议将这个功能关闭。
由于现在很多网站都是利用知名的网站程序搭建的,而这些网站程序在编写的过程中又大量使用了公开的库资源,所以改变这些资源库的调用路径也可以起到加速的作用。现在拖动浏览器的侧边栏,在网页的下方可以看到一个名为“Rocket Loader”的功能,该功能会利用 JavaScript 脚本来改善网页的载入速度。不过这个功能会对网页原始的代码进行调整,所以如果用户的网页里面插入了广告服务链接的代码或者是访问数据统计的代码,那么就建议不要开启该功能。如果用户想开启该功能的话,只需要选择“on”选项即可。
抓取快照保证网站运行
通常企业架设网站的服务器都是租用网络运营商的,但是这些服务器的运行并不能保证百分之百不出问题,偶尔出现宕机的情况也是有可能的,这样就会造成自己的网站无法访问的情况。为了避免这种情况发生,我们可以选择 CloudFlare 服务后台管理页面的“Caching”按钮,在出现的页面中找到“Always Online”选项并激活该功能就可以了(图2)。
该功能会像我们常见的搜索引擎那样,不停地对网站的页面进行抓取,从而创建相应的快照信息保存到 CloudFlare 服务的服务器里。这样一旦网站存储的服务器发生宕机的情况,那么就可以通过访问备份在 CloudFlare 服务器中的网页,从而使得用户正常访问浏览网站。不过该功能也有一个明显的缺陷,因为 CloudFlare 服务会不断地扫描网站页面创建快照,因此会增加服务器的负担。
小提示:谷歌浏览器从68 版本开始,将所有使用 HTTP 协议的网站都标记为“不安全”。而通过 CloudFlare 服务的管理页面,就可以申请到免费的加密链接证书。
(CP)
相关推荐
- 3 分钟!AI 从零开发五子棋全过程曝光,网友:这效率我服了
-
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...
- 一行代码实现display"过渡动画"原理
-
作者:Peter谭老师转发链接:https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章,提到如何让display出现过渡动画,却没有仔...
- 脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下
-
AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...
- 浏览器的渲染机制、重绘、重排
-
1、什么是重排和重绘网页生成过程:HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树,生成一棵渲染树(RenderTree)生成布局(flo...
- 托福写作高频考题写作思路&词汇丨考虫独家
-
科技话题与媒体话题是托福写作的常考话题很多考生对这两类话题里的专有词汇表达也许很不了解所以今天就跟随考虫托福写作老师刘云龙老师一起来学习在这些话题的写作里你可以使用哪些有用的表达。希望大家有收获!记得...
- 在优麒麟上使用 Electron 开发桌面应用
-
使用Web标准来创建桌面GUI,上手快、成本低、跨平台、自适应分辨率,这些都是Electron的优势。作者/来源:优麒麟Electron是由Github开发,用HTML、CSS和...
- php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒
-
抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,商城积分抽奖,公司年末员工抽奖点击抽...
- 用 CSS 整活!3D 轮播图手把手教学,快乐代码敲出来
-
兄弟们,今天咱来搞点好玩的——用CSS整一个3D轮播图!咱野生程序员就是要在代码里找乐子,技术和快乐咱都得要!代码是写不完的,但咱能自己敲出快乐来,走起!一、先整个容器,搭个舞台咋先写一个...
- 实现一个超酷的 3D 立体卡片效 #前端开发
-
今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片,鼠标悬停的时候图片会跳出卡片,并将影子投射到背景卡片上,在视觉上有一个3D立体感。html主要分成3个部分:容器→背景层...
- Vue 3 Teleport与Suspense:解决UI难题的两个"隐藏大招"
-
模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了?"团队协作开发后台系统时,小张第N次遇到这个问题。多层嵌套的组件结构里,弹窗被overfl...
- 让交互更加生动!有意思的鼠标跟随 3D 旋转动效
-
今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS...
- 填坑:transform元素导致zindex失效终极方法
-
今天遇到了使用css3动画的元素层级被放大置顶的问题,ios浏览器上没问题,安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效,兄弟元素设置多高的z-index都盖不住解决办...
- 诡异的层级错乱:一个被transform隐藏的CSS陷阱
-
周五下午三点十七分,设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单,此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系,手指下意识地敲下z-index:9999,心里清楚这不过是程序...
- 动画篇--碎片动画
-
本文授权转载,作者:Sindri的小巢(简书)前言从最开始动笔动画篇的博客,至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章,发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...
- Nature:大洋转换断层处的拉张构造与两阶段地壳增生
-
Nature:大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一,全球总长度超过48000km(Bird,2003),它们的发现为板块构造理论的建立奠定了重要的基础(Wil...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)