利用 Cloudflare 为网站进行加速(使用cloudflare导致网站巨慢)
zhezhongyun 2025-03-28 23:26 45 浏览
现在很多公司都通过搭建官方网站的方式,来宣传自己的公司以及相关的产品。但是由于网友所处的位置不同,再加上网络环境的差异,会造成访问速度出现参差不齐的情况。通常为了解决这样的问题,都是配合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)
相关推荐
- JavaScript做个贪吃蛇小游戏(过关-加速),无需网络直接玩。
-
JavaScript做个贪吃蛇小游戏(过关-则加速)在浏览器打开文件,无需网络直接玩。<!DOCTYPEhtml><htmllang="en"><...
- 大模型部署加速方法简单总结(大模型 ai)
-
以下对大模型部署、压缩、加速的方法做一个简单总结,为后续需要备查。llama.cppGithub:https://github.com/ggerganov/llama.cppLLaMA.cpp项...
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
-
近日,在安徽医科大学第一附属医院心血管内科负责人暨北京安贞医院安徽医院业务副院长喻荣辉教授的鼎力支持和卓越带领下,凭借着先进的VitaFlowLiberty(R)Flex经导管主动脉瓣可回收可...
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
-
微信8.0更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和...
- 让div填充屏幕剩余高度的方法(div填充20px)
-
技术背景在前端开发中,经常会遇到需要让某个div元素填充屏幕剩余高度的需求,比如创建具有固定头部和底部,中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展,有多种方法可以实现这一需求。实现步骤...
- css之div内容居中(css中div怎么居中)
-
div中的内容居中显示,包括水平和垂直2个方向。<html><head><styletype="text/css">...
- 使用uniapp开发小程序遇到的一些问题及解决方法
-
1、swiper组件自定义知识点swiper组件的指示点默认是圆圈,想要自己设置指示点,需要获得当前索引,然后赋给当前索引不同的样式,然后在做个动画就可以了。*关键点用change方法,然后通过e.d...
- 微信小程序主页面排版(怎样设置小程序的排版)
-
开发小程序的话首先要了解里面的每个文件的作用小程序没有DOM对象,一切基于组件化小程序的四个重要的文件*.js*.wxml--->view结构---->html*.wxss--...
- Vue动态组件的实践与原理探究(vue动态组件component原理)
-
我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理。ps.本文项目使用VueCLI...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> tabs
-
目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例编辑1->创建Tabs在pages/index目录...
- CSS:前端必会的flex布局,我把布局代码全部展示出来了
-
进入我的主页,查看更多CSS的分享!首先呢,先去看文档,了解flex是什么,这里不做赘述。当然,可以看下面的代码示例,辅助你理解。一、row将子元素在水平方向进行布局:1.垂直方向靠顶部,水平方向靠...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> swiper
-
目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...
- CSS:Flex布局,网页排版神器!(css3 flex布局)
-
还在为网页排版抓狂?别担心,CSS的flex布局来了,让你轻松玩转各种页面布局,实现网页设计自由!什么是Flex布局?Flex布局,也称为弹性布局,是CSS中的一种强大布局方式,它能够让你...
- 移动WEB开发之flex布局,附携程网首页案例制作
-
一、flex布局体验传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.1flex弹性布局:操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本,不支持或仅部...
- 2024最新升级–前端内功修炼 5大主流布局系统进阶(mk分享)
-
2024最新升级–前端内功修炼5大主流布局系统进阶(mk分享)获课》789it.top/14658/前端布局是网页设计中至关重要的一环,它决定了网页的结构和元素的排列方式。随着前端技术的不断发展,现...
- 一周热门
- 最近发表
-
- JavaScript做个贪吃蛇小游戏(过关-加速),无需网络直接玩。
- 大模型部署加速方法简单总结(大模型 ai)
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
- 让div填充屏幕剩余高度的方法(div填充20px)
- css之div内容居中(css中div怎么居中)
- 使用uniapp开发小程序遇到的一些问题及解决方法
- 微信小程序主页面排版(怎样设置小程序的排版)
- Vue动态组件的实践与原理探究(vue动态组件component原理)
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> tabs
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- 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)