React 首页加载慢问题性能优化案例详解

学习了一段时间React，想真实的实践一下。于是便把我的个人博客网站进行了重构。花了大概一周多时间，网站倒是重构的比较成功，但是一上线啊，那个访问速度啊，是真心慢，慢到自己都不能忍受，那么小一个网站，没几篇文章，慢成那样，不能接受。我不是一个追求完美的人，但这样可不行。后面大概花了一点时间进行性能的研究。才发现慢是有原因的。

React这类框架？

目前主流的前端框架React、Vue、Angular都是采用客户端渲染（服务端渲染暂时不在本文的考虑范围内）。这当然极大的减轻了服务器的压力。相对的浏览器的压力就增加了。这就意味着大量的js文件需要在本地运行。而从服务器下载这些大的js文件需要时间。再运行这些js又需要时间。这是首页加载慢的本质原因。当然只是首页，因为后续有缓存的存在，相对就很快了。那么如何提升速度呢？无非从两个方向入手

  • 提高下载静态资源的速度
  • 优化代码提高运行速度

在具体优化之前先说说我博客网站的服务器配置。

  • 阿里云服务器ECS
  • 系统Ubuntu 16.04
  • CPU：1核
  • 内存：1GB
  • MYSQL数据库
  • Nginx版本1.16.1

测试环境采用火狐浏览器,优化之前访问速度是这样的

是不是很慢，慢到怀疑人生。一篇两千多字的博文页面加载完需要6s的时间，下面我们就从我自己的博客出发一步一步的进行优化。

提升下载静态资源的速度

提升下载静态资源的速度的方法有很多。升级HTTP1.1到HTTP2.0,开启gzip数据压缩，上cdn等，这些都是最有效提升速度的方法。自己的网站也主要从这些方面去一一的优化来提高速度的。

升级HTTP1.1到HTTP2

没有升级之前是这样的

升级到HTTP2.0之后是这样的

那么怎么升级呢？升级也是需要条件的。

  • openssl 1.0.2+ （OpenSSL 1.0.2 开始支持 ALPN）
  • Nginx 1.9.5+

不知道nginx和openssl版本的可以通过
nginx -V
查看,以上的条件满足后，那就简单了，只需要在nginx配置文件中添加http2

server {
   listen 443 ssl http2
   .
   .
   .
}

即可，是不是很简单，然后再重启一下nginx服务器就可以了。（该升级对访问速度的提升不大。）

开启gzip数据压缩

从上面的图中可以看出，传输列和大小列数据都是相等的，也就是说文件多大，就传输多大，完全没有压缩，像其中1.4M这样的大文件，压缩就很有必要了。更何况这还是一个简单的博客网站。这是拖慢速度的元凶之一。所以我们很有必要进行gzip压缩。那么我们怎么开启gzip呢？是不是很难？其实也很简单，nginx原本就支持，我们只需要简单的配置就好。同样的修改nginx配置文件

server {
    listen 443 ssl http2
    #...中间省略很多
    gzip on;
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types text/css text/xml application/javascript application/json;
}

其中

  • gzip on表示gzip压缩开启。
  • gzip_buffers 32 4k表示处理请求压缩的缓冲区数量和大小，可以不设置，使用默认值就好。
  • gzip_comp_levelgzip压缩级别,到了等级6之后就很难提高了。
  • gzip_min_length当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩
  • gzip_types压缩类型

同样的再重启一下nginx服务器就好

从图中可以看出，大大的提升了速度。再观察传输和大小这一栏，两者大小差异就很大了。完成了这两步，速度已经从以前的6s减少到2秒左右了。
（该升级对访问速度提升最大。）

注意： 当然更好的方法是使用cdn加速。把静态资源cdn化。更能大大的提升速度。

优化代码提高运行速度

在多次请求测试中。发现依旧有很多文件很小，但是运行起来却相当耗时，当然这和React创建DOM树等操作有关，不过我们还是可以再看看代码上有没有其他可以优化的空间。对于这么一个小网站来说也太慢了，我想我写的代码一定有很耗时的操作，果不其然。网站中这段代码

const markdownHtml = marked(content_mark || '');

把markdown转成html过程中需要耗费些时间，如果文章内容很大，这个时间也是不容忽视的。
测试了这篇JS数组转字符串实现方法解析字数比较多的文章，竟然花费了我整整100多ms，按照惯例这也是不能容忍的。

这种情况我们在保存markdown的时候就可以直接保存两份数据，一份原markdown数据，一份markdown转成html后的数据。页面渲染的时候直接获转换后的html代码，这样节约了转换时间。

我们还可以利用React的懒加载，在用webpack打包的时候进行代码的分割，减少首屏加载的体积。

当然加载过程中提升用户体验也是重要的一环，虽然不能有效的提升运行速度，但可以使用户更加愉悦。所谓欢乐不觉时光过嘛。

到此这篇关于React 首页加载慢问题性能优化案例详解的文章就介绍到这了,更多相关React 首页加载慢问题性能优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React性能优化系列之减少props改变的实现方法

    React性能优化的一个核心点就是减少render的次数.如果你的组件没有做过特殊的处理(SCU -- shouldComponentUpdate或使用PureComponent),那每次父组件render时,子组件就会跟着一起被重新渲染.通常一个复杂的子组件都会进行一些优化,比如:SCU 使用PureComponent组件.对于SCU基本上进行的也都是浅比较,深比较的代价太高. 对于这些被优化的子组件,我们要减少一些不必要的props改变:比如事件绑定.对于那些依赖于配置项的组件,我们更是减少

  • 详解使用React.memo()来优化函数组件的性能

    React核心开发团队一直都努力地让React变得更快.在React中可以用来优化组件性能的方法大概有以下几种: 组件懒加载(React.lazy(...)和<Suspense />) Pure Component shouldComponentUpdate(...){...}生命周期函数 本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法: React.memo. 无用的渲染 组件是构成React视图的一个基本单元.有些组件

  • react性能优化达到最大化的方法 immutable.js使用的必要性

    react性能优化达到最大化的方法 immutable.js使用的必要性

    一行代码胜过千言万语.这篇文章呢,主要讲述我一步一步优化react性能的过程,为什么要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutable那么本文非常适合你.那么我开始吧! 1.对于react的来说,如果父组件有多个子组件 想象一下这种场景,一个父组件下面一大堆子组件.然后呢,这个父组件re-render.是不是下面的子组件都得跟着re-render.可

  • React函数式组件的性能优化思路详解

    优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 reconction. 减少计算的量.主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用. 在使用类组件的时候,使用的 React 优化 API 主要是:shouldComponentUpdate和 PureComponent 那么在函数式组件中,我们怎么做性能

  • 浅谈React组件之性能优化

    高德纳: "我们应该忘记忽略很小的性能优化,可以说97%的情况下,过早的优化是万恶之源,而我们应该关心对性能影响最关键的另外3%的代码." 不要将性能优化的精力浪费在对整体性能提高不大的代码上,而对性能有关键影响的部分,优化并不嫌早.因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构,将来要改变的时候牵扯更大. 1. 单个React组件的性能优化 React利用Virtual DOM来提升渲染性能,虽然每一次页面更新都是最组件的从新渲染,但是并不是将之前的渲染内容全部抛

  • 浅谈react性能优化的方法

    React性能优化思路 软件的性能优化思路就像生活中去看病,大致是这样的: 使用工具来分析性能瓶颈(找病根) 尝试使用优化技巧解决这些问题(服药) 使用工具测试性能是否确实有提升(疗效确认) 初识react只是为了尽快完成项目,后期进行代码审查时候发现有很多地方需要优化,因此做了个小结. Code Splitting shouldComponentUpdate避免重复渲染 使用不可突变数据结构 组件尽可能的进行拆分.解耦 列表类组件优化 bind函数优化 不要滥用props ReactDOMSe

  • React 首页加载慢问题性能优化案例详解

    React 首页加载慢问题性能优化案例详解

    学习了一段时间React,想真实的实践一下.于是便把我的个人博客网站进行了重构.花了大概一周多时间,网站倒是重构的比较成功,但是一上线啊,那个访问速度啊,是真心慢,慢到自己都不能忍受,那么小一个网站,没几篇文章,慢成那样,不能接受.我不是一个追求完美的人,但这样可不行.后面大概花了一点时间进行性能的研究.才发现慢是有原因的. React这类框架? 目前主流的前端框架React.Vue.Angular都是采用客户端渲染(服务端渲染暂时不在本文的考虑范围内).这当然极大的减轻了服务器的压力.相对的浏

  • JavaScript 文件加载与阻塞问题之性能优化案例详解

    JavaScript 文件加载与阻塞问题之性能优化案例详解

    上来先给一个问题:在书写html页面时,当你要从外部引入js文件时,script标签会放置在哪个位置呢,放置位置不同对页面加载有影响吗? 默认情况下,浏览器是同步加载 JavaScript 脚本:即渲染引擎遇到 script 标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器"卡死",出现短暂的空白,没有任何响应.这会造成很不好的用户体验,解决这个问题有两种方案:

  • 原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

  • Tensorflow 2.4加载处理图片的三种方式详解

    目录 前言 数据准备 使用内置函数读取并处理磁盘数据 自定义方式读取和处理磁盘数据 从网络上下载数据 前言 本文通过使用 cpu 版本的 tensorflow 2.4 ,介绍三种方式进行加载和预处理图片数据. 这里我们要确保 tensorflow 在 2.4 版本以上 ,python 在 3.8 版本以上,因为版本太低有些内置函数无法使用,然后要提前安装好 pillow 和 tensorflow_datasets ,方便进行后续的数据加载和处理工作. 由于本文不对模型进行质量保证,只介绍数据的加

  • Oracle分页查询性能优化代码详解

    对于数据库中表的数据的 Web 显示,如果没有展示顺序的需要,而且因为满足条件的记录如此之多,就不得不对数据进行分页处理.常常用户并不是对所有数据都感兴趣的,或者大部分情况下,他们只看前几页. 通常有以下两种分页技术可供选择. Select * from ( Select rownum rn,t.* from table t) Where rn>&minnum and rn<=&maxnum 或者 Select * from ( Select rownum rn,t.* fro

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • Java使用路径通配符加载Resource与profiles配置使用详解

    序言 Spring提供了一种强大的Ant模式通配符匹配,能从一个路径匹配一批资源. Ant路径通配符 Ant路径通配符支持"?"."*"."**",注意通配符匹配不包括目录分隔符"/": "?":匹配一个字符,如"config?.xml"将匹配"config1.xml": "*":匹配零个或多个字符串,如"cn/*/config.xml&

  • android加载系统相册图片并显示详解

    1,下载ImageLoad.jar包放入项目libs文件夹中,并点击右键->add as Library 2,首先记得在Manifest.xml注册权限(注:6.0以后的版本要在代码中动态注册权限) <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.R

  • Tensorflow加载模型实现图像分类识别流程详解

    Tensorflow加载模型实现图像分类识别流程详解

    目录 前言 正文 VGG19网络介绍 总结 前言 深度学习框架在市面上有很多.比如Theano.Caffe.CNTK.MXnet .Tensorflow等.今天讲解的就是主角Tensorflow.Tensorflow的前身是Google大脑项目的一个分布式机器学习训练框架,它是一个十分基础且集成度很高的系统,它的目标就是为研究超大型规模的视觉项目,后面延申到各个领域.Tensorflow 在2015年正式开源,开源的一个月内就收获到1w多的starts,这足以说明Tensorflow的优越性以及

  • React router动态加载组件之适配器模式的应用详解

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data'; function App(){ return ( <Router> <Switch> <Route exact path="/" render={() => (<Redirect to="/center" />)}

随机推荐