not a better man

前端技术

vipkid学习中心页面优化记录

学习中心首页

来vipkid半年多,一直参与学习中心项目的开发,学习中心是一个复杂的项目,项目包含积分商城,激励活动,学生图书馆,学生预习视频,而每个小项目包含带的内容又挺多,采取开发框架是vue2.x框架。随着项目的进行,项目的优化也在进行之中。

对于前端应用来说,最重要的就是网络延时,页面的显示时间越快。我们从协议层,页面加载资源,域名预解析,代码分割层面对前端应用进行了优化,至于图片压缩,代码压缩这些基本手段,不在本文考虑的范围之内.

代码分割

学习中心为单页面应用,没有进行代码分割之前,将js代码分为了vendor.js和app.js两个代码,vendor.js为常用的库代码包含vue库,打点库,vue-router库等代码,app.js代码包括所有页面逻辑的代码,未进行代码分割之前,导致app.js代码压缩之后的体积有2.3M大小,使用chrome Devtools开发工具查看,app.js文件加载时间需要1.5s左右(即使在cdn上),这对于用户体验是很糟糕的,这个时候需要使用上代码分割的功能,与组内同学商量,以路由为基础单位对代码进行分割。构建工具我们采用的是webpack。这样使用“syntax-dynamic-import插件“ ,结合import 关键字,可以进行代码分割。路由段的代码如下所示: 

通过这种方式,每个路由对应的组件就代码独立成一个个js文件。通过这种方式,首屏加载的时间减少了1.3s。我们可以从下面视频中看到

首页代码在网络上传输体积只有144KB,整个js下载时间如下图所示

js的内容下载时间为196.05ms,但是TTFB(在等待接受首字节时间)为535.37ms,这个是tcp建立连接到发送数据的时间,这个时间与index.html加载时间,cdn服务的性能,cdn服务位置有关,除了优化加载index.html的速度。解析cdn的dns速度。

预解析DNS

学习中心请求的静态资源分布在阿里云,七牛云上,在首屏上有些资源并没有使用,但是在其他路由上会用到对应的资源,如数字图书馆图书的图片会用到teacher-media.vipkid.com.cn上的资源,在index.html文件中手动添加对应预解析标签


<link rel="dns-prefetch" href="//s.vipkidstatic.com">
<link rel="dns-prefetch" href="//guidevideo.vipkid.com.cn">
<link rel="dns-prefetch" href="//resource.vipkid.com.cn">
<link rel="dns-prefetch" href="//teacher-media.vipkid.com.cn">
<link rel="dns-prefetch" href="//image.vipkid.com.cn">

这样当跳的其他页面时,不需要解析域名对应的IP地址了,预解析的dns。我们可以输入chrome://net-internals/#dns 清除dns缓存,然后重新刷新https://lc.vipkid.com.cn网址,打开chrome://net-internals/#dns  如下图所示。

在首屏没有使用的teacher-meidia.vipkid.com.cn ,teacher-media.vipkid.com.cn,resourece.vipkid.com.cn等域名上的资源,通过域名预解析,缓存以后,在过期时间内就不需要再次解析域名了,这样减少了域名解析的时间

启用http2协议

http1.1的pipeline会导致会在http层出现队首阻塞,为了更快的加载资源,浏览器一般会在一个域名上开启6-7个tcp连接,并行加载资源,但是使用http2协议,一个域名上的资源只需要建立一个tcp连接,http2协议的多路复用,避免出现队首阻塞,这样针对多张小图片,我们无需使用css sprite来解决tcp连接多的问题,这样对缓存的控制更加细化。现在基本上大多数cdn服务上都支持http2协议,但是七里云国外的cdn服务支持http2协议,国内的并不支持http2协议,而且后台并没有对应的配置,只能与七牛云去协商,让其去改进,cdn启用http2服务,在网络上感觉资源的请求与响应是并行了,

此外http2服务压缩http协议的头部, 我们看同样的资源,在http1.1下

相同的资源,传输的大小变小

目前优化的主要如上,但是tcp连接的往返时间,tcp的队首阻塞的问题,目前没有进行解决,这个只能不使用tcp协议,但是在目前的环境下无法进行,有些公司已使用quic + http2协议来减少网络延迟问题,如腾讯的QQ空间团队。

发表评论