一次网站的性能优化之路 -- 天下武功，唯快不破

作者: 是夜尽天明呀 | 来源:发表于2019-03-17 22:33 被阅读0次

首屏作为直面用户的第一屏，其重要性不言而喻，如何加快加载的速度是非常重要的一课。

本文讲解的是：笔者对自己搭建的个人博客网站的速度优化的经历。

效果体验地址： http://biaochenxuying.cn

1. 用户期待的速度体验

2018 年 8 月，百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到：页面的首屏内容应在 1.5 秒内加载完成。

也许有人有疑惑：为什么是 1.5 秒内？哪些方式可加快加载速度？以下将为您解答这些疑问！

移动互联网时代，用户对于网页的打开速度要求越来越高。百度用户体验部研究表明，页面放弃率和页面的打开时间关系如下图所示：

页面放弃率和页面的打开时间关系

根据百度用户体验部的研究结果来看，普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢，用户就会失去耐心而选择离开，这对用户和站长来说都是一大损失。

百度搜索资源平台有 “闪电算法” 的支持，为了能够保障用户体验，给予优秀站点更多面向用户的机会，“闪电算法”在 2017 年 10 月初上线。

闪电算法的具体内容如下：

移动网页首屏在 2 秒之内完成打开的，在移动搜索下将获得提升页面评价优待，获得流量倾斜；同时，在移动搜索页面首屏加载非常慢（3 秒及以上）的网页将会被打压。

2. 分析问题

未优化之前，首屏时间居然大概要 7 - 10 秒，简直不要太闹心。

开始分析问题，先来看下 network ：

主要问题：

第一个文章列表接口用了 4.42 秒
其他的后端接口速度也不快
另外 js css 等静态的文件也很大，请求的时间也很长

我还用了 Lighthouse 来测试和分析我的网站。

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

未优化之前：

image.png

上栏内容分别是页面性能、PWA（渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO 五项指标的跑分。

下栏是每一个指标的细化性能评估。

再看下 Lighthouse 对性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间：

image.png

从上面可以看出，主要问题：

图片太大
一开始图片就加载了太多

知道问题所在就已经成功了一半了，接下来便开始优化之路。

2. 优化之路

网页速度优化的方法实在太多，本文只说本次优化用到的方法。

2.1 前端优化

本项目前端部分是用了 react 和 antd，但是 webpack 用的还是 3.8.X 。

2.1.1 webpack 打包优化

因为 webpack4 对打包做了很多优化，比如 Tree-Shaking ，所以我用最新的 react-create-app 重构了一次项目，把项目升级了一遍，所有的依赖包都是目前最新的稳定版了，webpack 也升级到了 4.28.3 。

用最新 react-create-app 创建的项目，很多配置已经是很好了的，笔者只修改了两处地方。

1. 打包配置修改了 webpack.config.js 的这一行代码：

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

// 把上面的代码修改为： 
const shouldUseSourceMap = process.env.NODE_ENV === 'production' ? false : true;

生产环境下，打包去掉 SourceMap，静态文件就很小了，从 13M 变成了 3M 。

1. 还修改了图片打包大小的限制，这样子小于 40K 的图片都会变成 base64 的图片格式。

{
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/,/\.jpg$/,/\.svg$/],
      loader: require.resolve('url-loader'),
      options: {
            limit: 40000, // 把默认的 10000 修改为 40000
            name: 'static/media/[name].[hash:8].[ext]',
      },
 }

2.1.2 去掉没用的文件

比如之前可能觉得会有用的文件，后面发现用不到了，注释或者删除，比如 reducers 里面的 home 模块。

import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
// import { home } from './module/home'
import { user } from './module/user'
import { articles } from './module/articles'

const rootReducer = (history) => combineReducers({
 // home, 
  user,
  articles,
  router: connectRouter(history)
})

2.1.3 图片处理

把一些静态文件再用 photoshop 换一种格式或者压缩了一下，比如 logo 图片，原本 111k，压缩后是 23K。
首页的文章列表图片，修改为懒加载的方式加载。

之前因为不想为了个懒加载功能而引用一个插件，所以想自己实现，看了网上关于图片懒加载的一些代码，再结合本项目，实现了一个图片懒加载功能，加入了 事件的节流（throttle）与防抖（debounce）。

代码如下：

// fn 是事件回调, delay 是时间间隔的阈值
function throttle(fn, delay) {
  // last 为上一次触发回调的时间, timer 是定时器
  let last = 0,
    timer = null;
  // 将throttle处理结果当作函数返回
  return function() {
    // 保留调用时的 this 上下文
    let context = this;
    // 保留调用时传入的参数
    let args = arguments;
    // 记录本次触发回调的时间
    let now = +new Date();

    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last < delay) {
      // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
      last = now;
      fn.apply(context, args);
    }
  };
}

// 获取可视区域的高度
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
// 用新的 throttle 包装 scroll 的回调
const lazyload = throttle(() => {
  // 获取所有的图片标签
  const imgs = document.querySelectorAll('#list .wrap-img img');
  // num 用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
  let num = 0;
  for (let i = num; i < imgs.length; i++) {
    // 用可视区域高度减去元素顶部距离可视区域顶部的高度
    let distance = viewHeight - imgs[i].getBoundingClientRect().top;
    // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
    if (distance >= 100) {
      // 给元素写入真实的 src，展示图片
      let hasLaySrc = imgs[i].getAttribute('data-has-lazy-src');
      if (hasLaySrc === 'false') {
        imgs[i].src = imgs[i].getAttribute('data-src');
        imgs[i].setAttribute('data-has-lazy-src', true); // 
      }
      // 前 i 张图片已经加载完毕，下次从第 i+1 张开始检查是否露出
      num = i + 1;
    }
  }
}, 1000);

注意：给元素写入真实的 src 了之后，把 data-has-lazy-src 设置为 true ，是为了避免回滚的时候再设置真实的 src 时，浏览器会再请求这个图片一次，白白浪费服务器带宽。

具体细节请看文件文章列表

2.2 后端优化

后端用到的技术是 node、express 和 mongodb。

后端主要问题是接口速度很慢，特别是文章列表的接口，已经是分页请求数据了，为什么还那么慢呢？

所以查看了接口返回内容之后，发现返回了很多列表不展示的字段内容，特别是文章内容都返回了，而文章内容是很大的，占用了很多资源与带宽，从而使接口消耗的时间加长。

列表

从上图可以看出文章列表接口只要返回文章的标题、描述、封面、查看数，评论数、点赞数和时间即可。

所以把不需要给前端展示的字段注释掉或者删除。

// 待返回的字段
      let fields = {
        title: 1,
        // author: 1,
        // keyword: 1,
        // content: 1,
        desc: 1,
        img_url: 1,
        tags: 1,
        category: 1,
        // state: 1,
        // type: 1,
        // origin: 1,
        // comments: 1,
        // like_User_id: 1,
        meta: 1,
        create_time: 1,
        // update_time: 1,
      };

同样对其他的接口都做了这个处理。

后端做了处理之后，所有的接口速度都加快了，特别是文章列表接口，只用了 0.04 - 0.05 秒左右，相比之前的 4.3 秒，速度提高了 100 倍，简直不要太爽，效果如下：

image.png

此刻心情如下：

2.3 服务器优化

你以为前后端都优化一下，本文就完了？小兄弟，你太天真了，重头戏在后头！

笔者服务器用了 nginx 代理。

做的优化如下：

隐藏 nginx 版本号

一般来说，软件的漏洞都和版本相关，所以我们要隐藏或消除 web 服务对访问用户显示的各种敏感信息。

如何查看 nginx 版本号？直接看 network 的接口或者静态文件请求的 Response Headers 即可。

没有设置之前，可以看到版本号，比如我网站的版本号如下：

Server: nginx/1.6.2

设置之后，直接显示 nginx 了，没有了版本号，如下：

Server: nginx

开启 gzip 压缩

nginx 对于处理静态文件的效率要远高于 Web 框架，因为可以使用 gzip 压缩协议，减小静态文件的体积加快静态文件的加载速度、开启缓存和超时时间减少请求静态文件次数。

笔者开启 gzip 压缩之后，请求的静态文件大小大约减少了 2 / 3 呢。

gzip on;
#该指令用于开启或关闭gzip模块(on/off)

gzip_buffers 16 8k;
#设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。16 8k代表以8k为单位，安装原始数据大小以8k为单位的16倍申请内存

gzip_comp_level 6;
#gzip压缩比，数值范围是1-9，1压缩比最小但处理速度最快，9压缩比最大但处理速度最慢

gzip_http_version 1.1;
#识别http的协议版本

gzip_min_length 256;
#设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。默认值是0，不管页面多大都压缩。这里我设置了为256

gzip_proxied any;
#这里设置无论header头是怎么样，都是无条件启用压缩

gzip_vary on;
#在http header中添加Vary: Accept-Encoding ,给代理服务器用的

gzip_types
    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
    text/javascript application/javascript application/x-javascript
    text/x-json application/json application/x-web-app-manifest+json
    text/css text/plain text/x-component
    font/opentype font/ttf application/x-font-ttf application/vnd.ms-fontobject
    image/x-icon;
#进行压缩的文件类型,这里特别添加了对字体的文件类型

gzip_disable "MSIE [1-6]\.(?!.*SV1)";
#禁用IE 6 gzip

把上面的内容加在 nginx 的配置文件 ngixn.conf 里面的 http 模块里面即可。

是否设置成功，看文件请求的 Content-Encoding 是不是 gzip 即可。

设置 expires，设置缓存

 server {
        listen       80;
        server_name  localhost;
        location  / {
            root   /home/blog/blog-react/build/;
            index  index.html;
            try_files $uri $uri/ @router;
            autoindex on;
            expires 7d; # 缓存 7 天
        }
    }

我重新刷新请求的时候是 2019 年 3 月 16 号，是否设置成功看如下几个字段就知道了：

Staus Code 里面的 form memory cache 看出，文件是直接从本地浏览器本地请求到的，没有请求服务器。
Cache-Control 的 max-age= 604800 看出，过期时间为 7 天。
Express 是 2019 年 3 月 23 号过期，也是 7 天过期。

注意：上面最上面的用红色圈中的 Disable cache 是否是打上了勾，打了勾表示：浏览器每次的请求都是请求服务器，无论本地的文件是否过期。所以要把这个勾去掉才能看到缓存的效果。

终极大招：服务端渲染 SSR，也是笔者接下来的方向。

3.1 测试场景

一切优化测试的结果脱离了实际的场景都是在耍流氓，而且不同时间的网速对测试结果的影响也是很大的。

所以笔者的测试场景如下：

a. 笔者的服务器是阿里的，配置是入门级的学生套餐配置，如下：

服务器配置

b. 测试网络为 10 M 光纤宽带。

3.2 优化结果

优化之后的首屏速度是 2.07 秒。

最后加了缓存的结果为 0.388 秒。

image.png

再来看下 Lighthouse 的测试结果：

image.png

比起优化之前，各项指标都提升了很大的空间。

4. 最后

优化之路漫漫，永无止境，天下武功，唯快不破。

本次优化的前端与后端项目，都已经开源在 github 上了，欢迎围观。

前端：https://github.com/biaochenxuying/blog-react

后端：https://github.com/biaochenxuying/blog-node

github 博客地址：https://github.com/biaochenxuying/blog

如果您觉得这篇文章不错或者对你有所帮助，请给个赞或者星呗，你的点赞就是我继续创作的最大动力。

欢迎关注以下公众号，学到不一样的武功秘籍 ！

关注公众号并回复福利可领取免费学习资料，福利详情请猛戳： Python、Java、Linux、Go、node、vue、react、javaScript

全栈修炼

一次网站的性能优化之路 -- 天下武功，唯快不破

1. 用户期待的速度体验

2. 分析问题

2. 优化之路

2.1 前端优化

2.1.1 webpack 打包优化

2.1.2 去掉没用的文件

2.1.3 图片处理

2.2 后端优化

2.3 服务器优化

3.1 测试场景

3.2 优化结果

4. 最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react