侧边栏壁纸
博主头像
秋码记录

一个游离于山间之上的Java爱好者 | A Java lover living in the mountains

  • 累计撰写 137 篇文章
  • 累计创建 297 个标签
  • 累计创建 45 个分类

为什么网站加载速度总是那么不尽如人意呢?(网站优化篇)

那些年,但凡一得空,便会去逛逛公园、爬爬山,让那颗浑浊的心灵,能在这大自然中洗涤。

公园树荫下,总是有那么多人,他们或坐于石凳与好友畅聊,或是往那石桌上摆下棋盘,你总能遇到对手。

既然选择放空自己,不管是与好友们闲聊,抑或是棋逢对手,就不要把生活中的不如意或当下的困境说出来,因为这里并不是宣泄消极情绪的好地方。

然而,快节奏生活的当下,鲜有人会在公园逛那么一个下午了。

快节奏的生活,逐渐使人们失去了耐心,同时也让人变得很容易烦躁。

即便是当下人手一部智能手机(更有甚者多达好几部),也不愿花几秒钟来等待访问某个网站,页面却一直处在加载中。用户会毫无犹豫的关掉这个网站。

因为等待让人觉得烦躁,这便是时下快节奏的生活所导致的!

用户评判一个应用(APP)、网站的体验效果好坏,其中很重要的一点便是,产品的响应速度是否能控制在用户接受的范围之内(除非你的应用或网站是知名的,如:阿里云、腾讯云等网站响应速度何止是慢。)

网站优化方案

无论是简单的企业门户网站,还是看似复杂的博客网站,它们总是由htmljavascriptcss图片文件等构成的,而呈现在用户眼前,便是通过这些文件拼凑而来的一个页面。

提升服务器带宽

在你访问网站时,网站文件所在的服务器在接受到你的指令后,是要将服务器上相对应的htmljavascript文件等响应给你,也就是浏览器请求这些资源(可以说从服务器下载这些资源)。

我们深知,但凡从网络上下载任何文件,它总是跟你的网速有关的,若你带宽100M的话,那么下载那是很快。当然咯,网站所搭载的服务器带宽若不是很好,网站加载慢那是再所难免的!这便是网站优化的方案之一,关于这一块,是需要花费的成本的。

使用 CDN

有没有那么一种可能,那就是你把服务器的带宽提升上去了,可用户访问你的网站,依旧是页面处于正在加载中。那可能是浏览器访问你的网站,需要请求很多javascriptcss文件等资源,虽然用户与你的网站服务器同属在国内,但不免由于地域的缘故。

为了解决用户在不同地域访问你的网站,能以用户所能承受的加载时间范围内,渲染出网站页面出来,那么,这样对用户来说,你的网站算是一个用户体验不错的网站。

我们既然知道了,导致网站加载慢的症结是javascript等资源,那么,我们可以将这些文件托管在距离用户较近区域的节点上,让用户在访问你的网站,不再是请求服务器的javascript等资源,而是从歫用户较近的节点上读取这些文件,从而使得用户所在的区域访问你的网站便快了。

没错,这便是内容分发CDN)。它不单是在国内每个区域设有节点,还遍布全球,你可以把原先放在服务器上的javascript等文件,迁移到CDN上,这样一来,继而减轻了服务器的”压力“,又能让你的网站在用户眼前加载起来快如闪电。当然咯,这也需要你额外付出成本的!

压缩静态资源

若你不想再额外花钱的话,那么,就要从javascriptcss等文件大小上来考虑,相对于网络传输来讲,当然是文件小一些,它自然快于大文件的传输速度了。

虽然,市面上有公共CDN,但那也都是些知名的第三方library,自己的网站,总是离不开自定义的javascriptcss等文件。

对于压缩方式可以选择,网上在线压缩,前提是你只定义了那么一两个javascriptcss文件。

可若是你为你的网站自定义了好些个javascriptcss,那么,在线压缩就不适合了,一来文件多了,处在起来还是比较麻烦的,二来文件一多,处理起这些繁杂的工作,总是让人很是烦躁。

既然在线压缩,处理多个文件,委实使人力不从心,那么,我们可以借助程序来实现文件压缩啊。

Gulp 压缩静态资源

至于gulp是什么呢? https://www.gulpjs.com 介绍说它是自动化构建你的项目,减少你浪费的时间,从而创造出更大的价值。(虽然口气有点大)

首先,你的确保你的电脑是否安装了node.js,如果没有,那么可以去 https://nodejs.com 进行下载安装。安装nodejs还是比较简单的,一路Next

若你的电脑已安装过nodejs的话,那么,你可以使用以下命令来检查,你电脑安装的nodejs版本。

node --version

nodejs高版本,都会在你安装了nodejs之后,同时默认的安装了npm(用于管理nodejslibrary,就像javamavengradlePHPcomposergolangmodule等一样),和npx,同样的话,可以使用以下命令来检查npmnpx的版本。

npm --version
npx --version

image-20240914161541288

随后,我们通过以下命令来全局安装gulp

npm install --global gulp-cli

创建项目

我们可以在一个空文件下,再次新建一个空文件夹,而后通过npm init来初始化项目,这条命令能为我们在当前文件夹下自动生成一个package.json文件。

npm init

之后我们再项目安装gulp依赖,来为项目实现自动化构建

npm install --save-dev gulp

创建 gulpfile.js文件来压缩静态资源

我们在项目根路径下,新建一个名为gulpfilejavascript文件,文件名必须叫gulpfile这个名称,若你问我为什么?那我只能回答你,那是因为gulp规定的,也就是gulp-cli会读取这个名为gulpfilejavascript文件,若你改成了其它名称,那么gulp-cli是无法找到名为gulpfile`文件的,那么也就无法进行下去了。

在编写gulpfile.js文件之前,我们的项目需要安装几个依赖,它们适用于压缩javascriptcss文件的。

npm install --save-dev gulp-uglify
npm install --save-dev  gulp-minify-css

安装好library后,那么,我们可以对gulpfile.js进行编辑了。

const { src, dest, series } = require('gulp');
const uglify = require('gulp-uglify');
const minifyCss = require("gulp-minify-css");

//在 gulp 里  这就是一个任务
function miniCss () {
  return src('src/css/*.css')
        .pipe(minifyCss())
        .pipe(dest('dist/css/'));
}

function  miniJs () {
  return src('src/js/*.js')
        .pipe(uglify())
        .pipe(dest('dist/js/'));
}
//导出任务  以便在 gulp-cli 中执行
exports.default = series(miniCss,miniJs)

编辑好了gulpfile.js文件后(别忘了,保存它),打开Terminal,进行入到当前项目路径下,也就是gulpfile.js文件所在的路径下。

image-20240914163804017

gulp

image-20240914164155433

海外云服务器安装 Redis 6.2.x (Ubuntu 18.04 记录篇三)
« 上一篇 2024-09-07
Windows构建基于 Chromium 的浏览器之环境准备篇安装 Visual Studio(103.0.5060.68 之一)
下一篇 » 2024-09-21

相关推荐