【腾讯云前端性能优化大赛】前端首屏性能优化实战

在现在的网络环境下,用户访问网页时,如果首屏在3S以内是可以接受的,但是如果首屏在10S以上,绝大部分用户都不会继续等待,这样就会导致用户的流失,对于个人或者企业来说都是不可接受的,所以首屏优化已经成为网页必不可少的一部分。

以下优化针对Vue 2.X框架进行

优化方法:

(1)路由懒加载

由于Vue是单页面应用,在首次加载的时候就会加载所有的资源,资源过于多就会导致下载速度慢,直接影响了页面的首屏时间,网络较差时会导致很久打不开页面,所有可以进行路由懒加载,路由懒加载就是可以先将当前路由下的资源先加载,等到切换别的路由时再去加载对应的资源,加载的资源少了速度也就快了。

(2)关闭ProductionSourceMap

productionSourceMap是用于开发环境下进行调试错误的,能够精确到具体哪行报错,是能够让我们开发过程中很好定位错误的一个好工具,但是生产环境下是不需要开启的,反而在生产环境下开启可能会导致我们的源码泄露,所以可以在vue的配置中关闭productionSourceMap,如下

productionSourceMap: false

(3)开启Gzip压缩

如果项目比较大,打包后生成的文件就会比较大,如果每次加载页面都需要读取比较大的文件,那么就会让加载时候变得更长,所以需要将打包后的文件进行压缩:

//在vue配置中设置
productionGzip: true,
//在nodejs项目的 app.js 代码中引入
var compression = require('compression')
var app = express();
// 启用gzip
app.use(compression());

//还需要nginx的配合
#gzip
gzip on; #开启或关闭gzip on off
gzip_static on;
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 1k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_http_version 1.1;
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 7; #压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript; # 压缩文件类型
gzip_vary on; #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"        
配置完成后文件大小能被压缩至源文件的一半,甚至更多,大幅度提升了网页的加载速度。

(4)开启http2

为了保证网站传输数据的安全性,我们需要配置将http升级为https(http+ssl),而https因为安全验证等各种问题所以建立连接速度会不如http,所以我们可以将http1.1升级为http2,http2的加载速度能够提升50%以上

(5)CND加速

CDN的全称是Content Delivery Network,即内容分发网络,能够使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中。在做vue项目时可能会习惯性的在main.js中import所需的组件或插件,例如:

import Vue from 'vue'
import Vuex from 'vuex'
import element from 'element-ui'

这样所导入的组件或插件都是我们通过npm安装在项目里的,就会导致页面加载时速度十分缓慢,像elementUI这种导入了整个组件库是十分大的,我们可以将elementUI改为按需引入,例如:

import {
Card, Container, Header, Main, Aside,
Footer, Button, Menu, MenuItem, MenuItemGroup,
Submenu, Row, Col, Tag,Link,Icon,Drawer,Avatar,
Progress,Dialog,Input,Form,FormItem,Tooltip,Pagination,
Timeline,TimelineItem,Message,Dropdown,DropdownItem,DropdownMenu,
Upload,MessageBox,Alert,Breadcrumb,BreadcrumbItem,Backtop,Badge,
Tabs,TabPane,Popover
} from 'element-ui'

按需引入后文件大小能够有效的减少,但是访问起来的速度还不是理想速度,不太能满足需求,这个时候就可以将这些import全部替换为CDN连接的形式,例如:

index.html中引入
<!-- vue2 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
<!-- vuex -->
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.js"></script>
<!-- 引入elementUI组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
/*将main.js中的import给去掉,不然打包的时候还会将引入的组件或插件进行打包
除此之外还需要在vue配置文件中配置externals*/
externals: {
'vue': 'Vue',

'vue-router': 'VueRouter',

'ElementUI': 'ELEMENT',

'axios': 'axios',

}

需要注意的是vue必须在最上方,换成CDN形式引入后访问速度提升不少,除此之外,像一些图片、JS、CSS等静态资源我们可以上传到第三方(如七牛云、腾讯云),然后通过CDN的形式进行访问,速度也能提升不少。

(6)js导入的位置问题

页面加载页面是从上往下加载的,当加载js时,会阻塞其他资源的加载直到js加载完成,所以可以将js放到最后加载,保证dom能够成功被渲染,如下:

<body>
    <div id="app" ></div>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
    <!-- 引入Vuex -->
    <script src="https://xwjblog.cn/cdn/vuex/3.6.2/vuex.js"></script>
 </body>

如果需要将script放在head的话,可以给script加上异步async或defer:

<head>
    <!-- 引入Vue -->
    <script defer src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
    <!-- 引入Vuex -->
    <script defer src="https://xwjblog.cn/cdn/vuex/3.6.2/vuex.js"></script>
</head>

(7)图片懒加载

图片懒加载也就是图片延时加载,当访问一个页面的时候优先加载可视区域的图片,剩下的图片有需要时再进行加载,这样能减少网络请求,避免打开页面时请求过多的资源。

(8)图片优化

经过测试,带有数张图片和文本的页面明显比纯文本的页面加载速度要慢,所以当图片比较大或者数量比较多时,请求需要的时间也就长了,我们第一步可以进行图片的大小优化,在不影响图片的清晰度的前提下,尽量把图片压缩到最小。

除了压缩大小以外,我们可以选择png或者webp格式的图片:

  • png是便携式网络图片,是一种无损数据压缩位图文件格式,它的优点是压缩比高,色彩好,大部分地方都能够使用。
  • webp是谷歌推出的图片格式,它的优点是压缩率只有jpg的三分之二,大小比png小了45%,缺点是压缩时间长,兼容性不太好。

(9)预解析DNS

解析时间过长也会影响网页的首屏时间,预解析的实现:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!-- 用meta信息来告知浏览器, 当前页面要做DNS预解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />
<!-- 在页面header中使用link标签来强制对DNS预解析 -->
<link  rel="dns-prefetch" href="https://cdn.bootcdn.net">
本站内容大部分转载于网络,并由站长进行整理后发布,文章版权属于原作者。
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
【腾讯云前端性能优化大赛】前端首屏性能优化实战
在现在的网络环境下,用户访问网页时,如果首屏在3S以内是可以接受的,但是如果首屏在10S以上,绝大部分用户都不会继续等待,这样就会导致用户的流失,对于个人或者企...
<<上一篇
下一篇>>