高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

前言

事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余80%-90%的最终用户体验。 --Steve Souders

在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业出版社。

一、 代码相关优化

1. 将样式表放在首部-使用link标签将样式表放在文档的HEAD中

  • 遵循HTML规范,将样式表放在头部,可以有效避免白屏无样式内容的闪烁
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <!-- 使用link标签将样式表放在文档的HEAD中 -->
  <link rel="stylesheet" href="example.css">
</head>

<body></body>

</html>

2. 将脚本放在底部

  • 将脚本放在顶部会造成的影响: 脚本阻塞对其后面内容的显示; 脚本会阻塞对其后面组件的下载;
  • 将脚本放在底部</body>标签之前, 类似于document.body.appendChild(yourScript), 不会阻塞页面内容的呈现,而且页面中的可视组件可以尽早下载。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <link rel="stylesheet" href="example.css">
</head>

<body>
  <!-- 将脚本放在底部 -->
  <script src="example.js"></script>
</body>

</html>

3. 减少HTTP请求

1) CSS Sprites (雪碧图)

多个图片合成一张图片,通过background-position来定位所需要的图片。每次请求的话只需要请求一张图片减少http请求。(如果使用图标的话建议使用svg,也可以使用iconfont)

本地工具:

在线工具:

2) 内联图片和脚本

  • 通过内联图片和脚本无需额外的HTTP请求,图片小于10K的可以设置内联为base64位。
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4SUJRXhpZgAATU>

3) 合并脚本和样式表

  • 一般来说,使用外部脚本和样式表对性能更有利,然而如果将模块化的代码分开放到多个小文件中,会降低性能,每个文件都会导致一个额外的HTTP请求

4. 使用外部Javascript和css

Good

<link rel="stylesheet" href="example.css">

<script src="example.js"></script>

bad

<style>
// code
</style>

<script>
// code
</script>
  • 使用外部Javascript和Css的主要作用有: 可以配置缓存有利于组件重用

5. 使用CDN (内容分发网络 Content Delivery Network)

CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡内容分发调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储分发技术。--摘自百度百科

6. 代码压缩

1) Gzip 压缩

gzip压缩可以节省50%-70%的网络开销

浏览器支持的压缩类型可以通过network的Accept-Encoding: gzip, deflate来查看。支持deflate的浏览器也支持gzip,但很多浏览器支持gzip却不支持deflate,因此gzip是最理想的压缩方法

  • node端 使用compression如果是webpack项目可以看下面的Vue首屏加载时间优化方案里的gzip压缩
// npm install compression --save-dev
const compression = require('compression')

2) 代码压缩

前端打包压缩的有grunt,gulp,webpack,可以对HTML,CSS,Javascript代码压缩

二、 服务器相关优化

本文中使用nginx服务器进行相关配置,使用apache同样可以做到相关优化,具体操作请另Google

1. 开启gzip压缩

gzip on; # 开启Gzip
gzip_static on; # 开启静态文件压缩
gzip_min_length  1k; # 不压缩临界值,大于1K的才压缩
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

2. 开启HTTP2

HTTP2在前端性能上主要表现在:请求和响应的多路复用、头部压缩

nginx服务器配置HTTP2

3. 开启缓存

添加Expires头(强缓存)

个人站点相关配置

nginx配置

location ~.*\.(svg|woff|js|css){
    root /yourFilePath;
    expires 1d;
}
  • Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止 HTTP规范中简要地称该头为“在这一日期时间之后,响应将被认为是无效的”。它在HTTP响应中发送
expires: Thu, 30 May 2019 20:51:42 GMT
  • 上面的Expires头告诉浏览器该响应的有效性持续到2019年5月30日为止。如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片,将HTTP请求的数量减少一个

Max-Age和mod_expires

  • 个人站点的css文件使用强缓存cache-control: max-age

server {
    add_header Cache-Control max-age=72000;
}
  • 在解释缓存如何很好地改善传输性能之前,需要提及除了Expires 头之外的另一种选择。HTTP 1.1引入了Cache-Control头来克服Expires头的限制
  • 因为Expires头使用一个特定的时间,它要求服务器和客户端的时钟严格同步。另外,过期日期需要经常检查,并且一旦未来这天到来了,还需要在服务器配置中提供个新的日期。
  • Cache-Control使用max-age指令指定组件被缓存多久, 如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本,这就避免了额外的HTTP请求。一个长久的max-age头可以将刷新窗设置为未来10年
Cache-Control: max-age=315360000
  • Expires 和Cache-Control max-age.如果两者同时出现,HTTP规范规定max-age指令将重写Expires头
  • 建议使用Cache-Control max-age,如果使用expires你需要担心它带来的时钟同步配置维护问题。

配置ETag(协商缓存)

Vue官方文档的Expires相关配置

浏览器必须产生这个HTTP请求,执行有效性检查, 但这仍比简单地下载所有已过期的组件效率要高(对比强缓存)。如果浏览器缓存中的组件是有效的(即它能够和原始服务器上的组件相匹配),原始服务器不会返回整个内容,而是返回一个304 Not Modifed状态码。

附:Vue首屏加载时间过长详细优化方案
  • 首先附一张优化过后的图
  • 首屏加载时间从原来的10s2s,测试的个人站点

注:我在优化vue项目的时候使用的是vue@2.6.6, vue-cli@3.4。 如果是cli2的项目影响也不大,优化的方案是结合服务端和webpack的。

vue-cli脚手架默认配置已经大幅度优化了前端整体的性能,在此基础上,我又使用了三个优化项增加了大幅度提升

1. gzip压缩

  • 结合服务器相关优化第一条:开启gzip压缩
  • 下面是前端项目中vue.config.js中的配置
// 需要 npm install compression-webpack-plugin --save-dev
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 定义当前环境
const ENV = process.env.NODE_ENV || 'development'

module.exports = {
    configureWebpack: config => {
        // 如果是开发环境的话,开启压缩
        if (ENV === 'production') {
            //  参数配置文档: https://www.webpackjs.com/plugins/compression-webpack-plugin/
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: /\.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
        }
    }
}

2. 使用CDN内容分发网络

index.html文件中通过环境来判断是否引入cdn文件,在vue.config.js文件中webpack通过环境判断是否使用cdn引入文件的全局变量

  • 使用CDN需要在webpackindex.html进行相关配置

第一步 配置vue.config.js,只需要在刚才配置Gzip压缩的基础上再加一段代码

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
    configureWebpack: config => {
        if (ENV === 'production') {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: /\.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
            // 配置externals就是当使用CDN进入的js文件在当前项目中可以引用
            // 比如在开发环境引入的vue是import Vue from 'vue', 这个大写的Vue就是对应的下面的大写的Vue
            config.externals = {
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'axios': 'axios'
            }
        }
    }
}

第二步 配置index.html,在body里使用EJS语法判断是否为生产环境

<body>
  <div id="app"></div>
  <% if (NODE_ENV === 'production') { %>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <% } %>
</body>

3. 配置sourceMap

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
    configureWebpack: config => {
        if (ENV === 'production') {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: /\.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
            config.externals = {
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'axios': 'axios'
            }
        }
    },
    // 禁用生产环境的sourceMap
    productionSourceMap: false
}

4. 使用HTTP2

请参考服务端优化第二条

结语

前端性能优化至关重要,文中提及的是我认为比较重要的几点,以后遇到更好的方案会补充进来。当然你也可以在评论区留言我们一起探讨,有错误的地方欢迎指出。

原文链接:segmentfault.com

上一篇:web-worker-manager
下一篇:[译] 在你学习 react 之前必备的 javascript 基础

相关推荐

  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    25 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    2 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    3 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    2 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前

官方社区

扫码加入 JavaScript 社区