2分钟,我把网站性能优化了3倍!

大家好,我是鱼皮,最近有同学反映我做的 面试刷题网站 (mianshiya.com)页面加载速度有点慢,所以我决定先简单优化一下。

其实我只做了 1 件小事,花了两分钟左右,就把网站的加载速度从 5 秒左右优化到了 1.5 秒!从时间成本和效果来看,这已经是一个质的飞跃了。

那我究竟用了什么黑科技呢?给大家简单分享一下。

关于面试刷题网站的介绍

网站加载速度优化

我用到了两个技术,分别是 CDNHTTP/2 ,这里重点讲下前者。

先说说 CDN,即内容分发网络。原本,我们的网页文件都是放到单个服务器(或集群)上的,来自天南地北的所有用户都只能从这台服务器上获取网站。这样有几个缺点:

  1. 单个服务器压力过大

  2. 如果服务器故障,所有用户都将无法访问(单点故障)

  3. 离服务器越远的用户,访问速度越慢

而 CDN 的作用就是帮助我们把原服务器上的文件分发到多个不同地域的网络节点上,当用户访问网站时,只需要从离他们最近的节点获取网页文件即可(如果获取不到,CDN 会自动从源站拉取文件,俗称 回源 )。

因此,使用 CDN 可以分摊单台服务器的负载、减少网站文件传输时间、为网站提升了一定的容错能力。如果前段时间西安某程序用了 CDN,可能也不会闹出事故了。

放一张对比网络拓补图,一目了然:

8ff88b8d68b06d394f538882d5709e86.png

如何给网站开启 CDN 呢?我们普通人是很难自己搭建 CDN 的,一般都是使用云服务商提供的 CDN 服务。像我肯定是用腾讯云了,因为我的网站前后端全部放在了腾讯云上,CDN 配置更轻松、回源更快速、有问题也相对好解决。

1f9b45d08fbcf23c2cd31966bc4c3e69.png
腾讯云 CDN 配置

通过上图左侧的列表,我们可以看到 CDN 相关的配置是非常非常多的。

首先要配置一个 CDN 域名,一般是自己的二级域名(xxx.com)再加上 cdn / static 之类的前缀,比如:cdn.yupi.com。

然后要给该域名配置 回源地址回源 HOST ,如果 CDN 还没有缓存你的文件,则会从该地址拉取源文件。回源 HOST 主要是为了告诉源站你是谁、是谁要从我这拿文件,从而返回给你正确的资源。

9032af3de233a04724c96d86aa895dfe.png

还可以进行访问控制,比如只允许特定自己域名的网页来请求文件,从而防止文件被其它网站盗用,刷了你的 CDN 资源用量(扣你的钱)。

f366edfa33c884fb9dc8409163ae0feb.png

还可以配置 IP 访问频率限制,可以防止单个 IP 地址的用户攻击你的网站,也可以一定程度上限值流量,给自己省点钱。虽然 DDOS 还是防不住,但总比没有要好。

50e749378a7c5724f7f261df562c5edb.png
IP 访问限频

使用 CDN 的话,还得注意下缓存时间的设置,相对不发生变化的网站静态文件,缓存时间可以设置长一点。而动态网页(页面内容动态更新)一般不要缓存,否则用户看到的都是同样的内容。

e15cdc44fa6f8c7202bf9e6a615fd4af.png

这里建议大家每次更新网站静态文件时,给文件生成一个随机的后缀,可以防止更新网页文件后 CDN 没更新导致的用户看不到最新页面的问题。现在很多的前端框架和打包工具一般都会自动帮你生成文件后缀了,也不用做什么额外工作,比如我用的 UMI 框架 + Webpack 打包工具,生成的文件如下:

38f26e3c4ac34e02a432f2d2c74e357d.png

除了给网站加速外,如今的 CDN 还推出了一些派生能力,比如:

  • DCDN:全站加速,不仅能加速静态资源,还能通过路由优化来加速动态内容。适用于实时性要求比较高的动态数据,可以给接口加速哦~(理解不了的话就想想家里的梯子 🪜)

  • SCDN:安全加速,给 CDN 加上一层防护能力,应对 DDOS、CC 等攻击。

不过 CDN 肯定是要花费成本的,一般是按流量计费,所以建议大家上 CDN 前先思考是否有必要。比如你的网站前期用户不多、或者用户都在你服务器的机房里面关着,那大可不必增加一笔消费了。

我之前没做 CDN 主要也是考虑到前期规模小、不值得,但通过统计分析后发现,目前网站用户已经覆盖了全国各地,还是用 CDN 好一些,给大家更好的体验。而用了 CDN 后,我的网站首次加载时长从 5 秒降到了 3 秒左右,不得不说,真香!

之后,在腾讯云的 CDN 配置页面,我很惊喜地发现了 HTTP/2 的开关:

9e58280018e1211e241585b3be4a7731.png

HTTP/2 作为最新的 HTTP 协议,相对于现在最广泛应用的 HTTP 1.1,大幅提升了 Web 性能,进一步减少了网络延迟。

HTTP/2 的水可是很深的,什么特么二进制、多路复用、数据流、服务器主推,我是看一遍头疼一遍,后面再单独出篇文章给大家讲讲吧。现在直接用起来,快就完事!

开启 HTTP/2 后,我的网站加载速度直接从 3 秒提升到了 1.5 秒左右,如果不是有一些图片资源,还能更快!

6ba4e8ec5b603eb095038fca1adffc29.png

以上就是本期分享,如果大家喜欢实践类的知识分享,求点个 赞 + 在看 吧,感谢大家 ❤️

关注鱼皮的面试鸭,就能一键使用刷题网站啦:

往期推荐

编程导航出新专栏啦!

刚看到份百万阅读的学习路线,太牛逼!

我爆肝 1 个月的新项目上线啦!

我一直在用的良心软件,限时送 50 个会员!

离开学校后,我才明白

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292819.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP: 深入了解一致性哈希

2019独角兽企业重金招聘Python工程师标准>>> 学习网址如下所示: http://www.frostsky.com/2014/03/php-consistenthash/ http://www.cnblogs.com/jackluo/archive/2013/06/27/3158847.html http://blog.csdn.net/cywosp/article/details/23397179/ 转载于:https://m…

开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]

转自:http://blog.sina.com.cn/hyiyun 近些天,有网友的电脑出现:开机后屏幕一片漆黑,但屏幕中央显示有鼠标指针,并且可移动。按键盘上的不论什么键都没有反应,鼠标也仅可移动,单、双击都无效。说…

java23种设计模式个人整理_java23种设计模式-行为型模式之模板方法模式

定义:Define the skeleton of an algorithm in an operation,deferring some steps to subclasses.Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithms structure.定义一个操作中的算法的框架,而…

贪心算法之最小堆实现霍夫曼编码

贪心算法之最小堆实现霍夫曼编码 实现之前需要学习的地方: 如果你不了解堆、堆的插入、堆的删除,可以先看下我前面几篇博客 http://blog.csdn.net/u011068702/article/details/52712634 最详细的最小堆构建、插入、删除的过程图解 http://blog.csdn.net/u011068702/artic…

react学习系列之states与props

state React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用…

用VS studio 2008做sql server 报表出现乱码

找了半天,没有发现那里可以修改编码。后面又在网上搜索解决办法,答案少之又少,云里雾里。 后来在csdn上搜索到一片关于水晶报表的乱码解决方案,一试,同样可以解决。 其实并不是编码的问题, 而是因为所选字体不包含中文…

MASA Framework - 整体设计思路

源起年初我们在找一款框架,希望它有如下几个特点:学习成本低只需要学.Net每年主推的技术栈和业务特性必须支持的中间件,给开发同学减负,只需要专注业务就好个人见解:一款好用的框架应该是补充,而不是颠覆或…

​怎么用藏头诗向女友表白......

1 遇到不好使的水龙头时▼2 今天去你家玩好不好(素材来源网络,侵删)▼3 男朋友多会拍照(素材来源网络,侵删)▼4 干饭人有多难▼5 麻将的内涵!(素材来源网络,侵删&…

cvtcolor python opencv_二值分析 | OpenCV + skimage如何提取中心线

点击上方蓝字关注我们微信公众号:OpenCV学堂关注获取更多计算机视觉与深度学习知识问题前几天有个人问了我一个问题,问题是这样的,他有如下的一张二值图像:怎么得到白色Blob中心线,他希望的效果如下:显然Op…

求字符串里里面字符出现的次数和出现哪些不同的字符的字符串

题目: 字符串里里面字符出现的次数和出现哪些不同的字符 such as 字符串“aaaabbbccd” 打印出出现a4次,b3次,c2次,d1次,出现的不同字符的字符串为“abcd”,或者按照规则打印字符串“4a3b2c1d” 代码: #include <stdio.h> #include <stdlib.h> #include &l…

[20140928]创建连接到MySQL的连接服务器

[20140928]创建连接到MySQL的连接服务器 首先要安装 mysql odbc然后 odbc下创建DSN&#xff0c;并且要在系统DSN下。最后执行exec sp_addlinkedserverserver XY,--这是链接服务器的名称srvproduct mysql,--这个你自己随便吧provider MSDASQL,--这是固定的&#xff0c;不能瞎填&…

又砸又烧,还要泼脏水,这谣言到底什么时候才没人信?发生这样的事真没想到.........

全世界只有3.14 % 的人关注了爆炸吧知识曾经看到一条新闻&#xff0c;说的是漂亮国人民怀疑口罩上的那个鼻梁条是5G天线&#xff0c;它不仅能控制人&#xff0c;还能致癌。“所以这就是他们计划杀死我们的方式&#xff0c;他们把5G电线放在了这里&#xff0c;就在这。”一名女子…

如何使用ASP.NET Core Web API实现短链接服务

前言在前面的文章中&#xff0c;我们介绍了hashids.net&#xff0c;可以将数值型Id加密成无意义的字符串。今天&#xff0c;我们来利用这一特点&#xff0c;实现短链接服务。原理短链接&#xff0c;顾名思义就是在形式上比较短的链接网址。借助短链接&#xff0c;可以用简短的网…

[LeetCode]--20. Valid Parentheses

Given a string containing just the characters ‘(‘, ‘)’, ‘{‘, ‘}’, ‘[’ and ‘]’, determine if the input string is valid. The brackets must close in the correct order, “()” and “()[]{}” are all valid but “(]” and “([)]” are not. public boo…

人生如梦

人生就像一场虚无的梦&#xff0c;可是我已经醒了&#xff0c;我只想过得真实一点

C语言atoi()函数:将字符串转换成int(整数)和sprintf和memset

atoi()函数 #include <stdio.h> #include <stdlib.h>int main () {int i;char buffer[256];printf ("Enter a number: ");fgets (buffer, 256, stdin);i atoi (buffer);printf ("The value entered is %d.", i);system("pause");re…

python 写入excel_一行一行整理EXCEL表太麻烦,试试python脚本,1秒写入数据

最近工作中&#xff0c;要整理数据&#xff0c;本来是以sql脚本录入&#xff0c;但是id、barcode等数据不好整理&#xff0c;因为这几个字段要唯一。所以想到用EXCEL表整理数据&#xff0c;再导入数据库中。整理的过程中&#xff0c;发现EXCEL一行一行的修改也挺麻烦&#xff0…

ORACLE 数据库安装后,PL/SQL的登录问题完美解决

windows7 64位系统 安装完oracle 后的用法如下分享链接&#xff1a;http://www.2cto.com/database/201307/226853.html#comment_iframe安装完PL/SQL后 。当你登陆时。你会遇到各种那个疼的问题。 例如&#xff1a;监听程序在CONNECT_DATA 中未获得SERVICE_NA 无监听程序 无法解…

3、AngularJS2 架构

2019独角兽企业重金招聘Python工程师标准>>> Angular 2 应用程序应用主要由以下 8 个部分组成&#xff1a; 1、模块 (Modules)2、组件 (Components)3、模板 (Templates)4、元数据 (Metadata)5、数据绑定 (Data Binding)6、指令 (Directives)7、服务 (Services)8、依…