说起前端优化,涉及到的东西太多,前端总是和用户体验这个词语密切关联,简单地说,一切的前端优化是为了让用户使用起来更爽,什么叫做爽快地浏览网页、爽快地使用APP?

1、界面布局,设计的美观程度,这一点不用多讲

2、速度!速度!速度!天下武功,唯快不破,当用户浏览你的网页、使用你的APP时,在网络环境正常的情况下,能够飞速加载,以最快的速度将内容显示出来,就能带来更好的使用体验!就像很多人对手机的选择,人们往往认为iPhone使用起来更加流畅,不卡,这就是最直接、最简单的理由。

“最新研究表明,大多数用户期望的网站加载时间是3秒,超过3秒就会有57%的用户离开。”

而很多前端开发工程师还仅仅停留在功能的实现上,这里我将以几个实际做过的例子来展示我是如何进行前端优化的。(以下的内容仅仅是本人粗浅的观点与不成熟的实践,欢迎大家批评指正,共同探讨。由于篇幅有点长,我将分为几个部分陆续更新

一、我的个人网站-佳前端

网站需求:搭建自己的博客 + 多项目线上部署 + 微信小程序线上部署

所以在服务器的选择上,必须是拥有独立IP的云主机,在去年的时候,我还在使用西部数码的虚拟主机服务,但后来随着我的需求变化,服务器升级为云主机,依旧选择西部数码服务商,但前几个月服务器出现了几次诡异的问题,虽然客服帮我解决,但觉得稳定性还欠缺,并且价格比较高,接下来又比较了几家服务商,觉得腾讯云服务器价格比较便宜,并且在成都有服务器节点,所以一次性买了半年多的。之前我的网站域名为liujiaweb.cn,后来终于把liujiaweb.com抢到手,心理上还是隐隐觉得.com比.cn看起来更正式、逼格更高一些。

先把腾讯云的配置贴出来:



由于是个人使用,又要控制价格,所以配置基本上算最低配置,单核+1G内存,带宽只有2M。

首先解决服务器负载与性能的问题,系统环境为Linux + Nginx,性能比Windows好很多,以下为服务器状态:



服务器的带宽只有2M小水管,当图片较多时,用户端的资源加载就非常慢,所以必须“借力”,使用第三方服务商的CDN融合加速对象存储

在这里,我用说人话的方式来解释一下什么是CDN融合加速对象存储

CDN融合加速:我举个简单的例子,你家在成都,你从网上购物,店家的地址在上海,普通的购物流程为,付款成功后,店家给你从上海给你快递邮过来,这个过程就需要好几天,这一种情况可以理解为普通的网站访问过程;

假如还有一种情况,店家不仅在上海有一个仓库,而且在成都也有一个仓库,并且货源都是一致的,那么你的地址在成都附近时,店家就近从成都仓库发货,你的地址在上海附近时,店家就从上海仓库发货,聪明的小伙伴能看出,京东采取的就是这种方式,这种情况就可以理解为CDN融合加速。普通情况下,你的服务器在某个地方,全国各地的朋友上网访问时,就必须将请求发送到你的服务器上,如果距离近,那么很快就能显示出来,如果距离远,就要稍等一会,你的服务器只有1台,这时候借助CDN加速服务,就相当于把你服务器上面的内容,同步复制到了全国各地,大江南北都有,那么不论在哪个城市访问,都会优先寻找距离最近的CDN服务器,把你的内容传输过去。

我的具体使用:

提供CDN的服务商,大概有 阿里云、腾讯云、又拍云、七牛云 等等,我的使用需求非常简单,价格低(最好能免费),在我服务器已有内容的前提下,如何中途接入并不影响原有业务,以及使用时的方便程度。

综合比较下来,只有七牛云符合我的要求,理由:

1、七牛云的对象存储及CDN下载流量每个月都会赠送一定量的免费额度,虽然我用HTTPS,但也很划算;

2、七牛云最牛逼的地方,就是镜像存储,也就说能实时将你服务器的内容同步到七牛云上面,这对于后期二次接入的情况,真的是大杀器,因为这样一来,原有的上传业务逻辑不需要变动,依旧上传到自己的服务器上面,七牛云会自动复制到七牛云存储上面,非常方便!




 

接下来在融合CDN的域名管理里面启用一个新的二级域名,我这里命名为resource.liujiaweb.com,以便于作业务的区分处理


这时候,就相当于 resource.liujiaweb.com 这个域名对应着七牛云的云存储服务器,我网站上所有的静态资源会通过此域名访问,达到CDN加速的效果;

我的博客采用wordpress搭建,所以使用wordpress的七牛云存储插件,实现一键配置:

现在就全部配置完成了,当我使用wordpress发布文章时,所有的图片资源在我的腾讯云服务器上存储一份,另外七牛云存储也会自动复制一份,当文章发布后,文章内的图片等静态资源,全部通过七牛云存储及七牛云CDN进行访问,达到加速的目的。

通过chrome的控制台查看请求情况,可见主站依然在自己的腾讯云服务器上,静态资源已经从七牛云存储CDN请求:





由此可见,使用七牛云存储CDN加速成功!

当然我还使用了一些缓存管理的插件及代码压缩的插件,使得文件进一步得到了压缩,有了缓存,二次访问时有更快的加载速度。


 

最终网站的加载及性能分析:


当然,这只是我个人网站的优化,同时我也启用了HTTPS,也算是未来的趋势吧。

在下一篇博文中,我会以实际商业项目-小程序作为案例进行一些技术总结,看点:

1、项目中,图片尺寸的精确匹配及资源的最大化利用(已更新, 点击查看

2、如何做一个高性能的页面“预加载”

3、小程序授权方式的改变与用户体验