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

栏目: CSS · 发布时间: 5年前

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

前言

事实上, 只有 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 )

合成雪碧图的工具有很多
本地工具： https://github.com/iwangx/sprite （国人写的）
在线工具 https://www.toptal.com/develo...

本地工具：

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

在线工具：

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

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的关键技术主要有 内容存储 和 分发技术 。--摘自百度百科

通过CDN引入的资源目前基本都是使用目前最新的 HTTP2协议 ，所以在性能上可以做到极致优化，感谢CDN。
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
UNPKG

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压缩

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]\.";

我的服务器nginx相关的配置:

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

2. 开启HTTP2

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

感受下多路复用

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

nginx服务器配置HTTP2

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

使用http2需要配合https使用
使用https需要ca证书阿里云https证书购买 (有免费的ca证书)

3. 开启缓存

添加Expires头（强缓存）

个人站点相关配置

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

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

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

nginx配置

server {
    add_header Cache-Control max-age=72000;
}

HTTP 1.1引入了Cache-Control头来克服Expires头的限制
要求服务器和客户端的时钟严格同步
一个长久的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相关配置
高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

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

`附：Vue首屏加载时间过长详细优化方案`

首先附一张优化过后的图
首屏加载时间 从原来的 10s 到 2s ，测试的个人站点

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

注：我在优化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需要在 webpack 和 index.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

devtool | webpack中文网你可以根据官网来对开发环境和生产环境进行详细配置
当然也可以像我一样直接 productionSourceMap: false 干掉生产环境的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

请参考服务端优化第二条

结语

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

新媒体十讲

范卫锋 / 中信出版社 / 2015-8 / 38.00元

“新媒体参谋长”范卫锋解答：媒体人如何转型？怎么创业？如何看准新媒体项目进行投资？作为“新媒体的参谋长”，本书作者范卫锋将十余年从业亲历的经验教训、行业内幕串联成册，从定位、突破、扩张、商业模式、价值几个方面剖析新媒体策略，解密国内媒体圈转型、创业、投资的实操法则。案例信手拈来，观点鞭辟入里，打造出国内第一本由专业新媒体投资人撰写的新媒体实战兵法，涉及媒体人转型、新媒体实操、媒体公关营销、......一起来看看《新媒体十讲》这本书的介绍吧!

码农工具

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

前言

一、代码相关优化

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

2. 将脚本放在底部

3. 减少HTTP请求

1) CSS Sprites (雪碧图)

本地工具：

在线工具：

2) 内联图片和脚本

3) 合并脚本和样式表

4. 使用外部Javascript和css

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

6. 代码压缩

1) Gzip 压缩

2) 代码压缩

二、服务器相关优化

1. 开启 `gzip` 压缩

2. 开启HTTP2

nginx服务器配置HTTP2

3. 开启缓存

添加Expires头（强缓存）

Max-Age和mod_expires

配置ETag（协商缓存）

`附：Vue首屏加载时间过长详细优化方案`

1. gzip压缩

2. 使用CDN内容分发网络

3. 配置sourceMap

4. 使用HTTP2

结语

新媒体十讲

HTML 压缩/解压工具

随机密码生成器

HEX HSV 转换工具

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

前言

一、 代码相关优化

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

2. 将脚本放在底部

3. 减少HTTP请求

1) CSS Sprites (雪碧图)

本地工具：

在线工具：

2) 内联图片和脚本

3) 合并脚本和样式表

4. 使用外部Javascript和css

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

6. 代码压缩

1) Gzip 压缩

2) 代码压缩

二、 服务器相关优化

1. 开启 gzip 压缩

2. 开启HTTP2

nginx服务器配置HTTP2

3. 开启缓存

添加Expires头（强缓存）

Max-Age和mod_expires

配置ETag（协商缓存）

附：Vue首屏加载时间过长详细优化方案

1. gzip压缩

2. 使用CDN内容分发网络

3. 配置sourceMap

4. 使用HTTP2

结语

新媒体十讲

HTML 压缩/解压工具

随机密码生成器

HEX HSV 转换工具

一、代码相关优化

二、服务器相关优化

1. 开启 `gzip` 压缩

`附：Vue首屏加载时间过长详细优化方案`