一次移动端性能分析与优化


刚进这个项目组三周左右,突然有一天项目经理跑过来跟我说有一个扫描二维码打开之后的页面加载很慢,前端工程部的总监给了一些意见,需要让我配合做一些优化。下面是前端工程部给出的优化建议:

  • 1.手机端打开慢是因为文件请求多,小文件数量多。解决办法是让客户采用七牛CDN放置静态文件, 如Js、Css、Html和图片。
  • 2。服务端压缩图片长宽尺寸和体积。这部分需要整体考虑下,之前项目组已完成封面图片压缩。需要继续处理页面内容图片压缩。这部分由Java开发人员解决。

看了一下页面发现加载速度慢,白屏时间长,加载完之后流畅性有待加强。看到这个之后感觉这个优化手段应该没有什么效果,应该跟前端的代码优化,优化代码才是重点。

后来我就开始了一系列的分析与优化过程。

首先监控移动端加载网页的速度,从手机浏览器抓包看加载速度,找到加载最慢的资源

由于3G网络稳定性所以几次请求花的时间有所不同,在2G网络下面速度应该更慢了,不过从上图还是可以看出js每次请求都是相对较慢的,而且浏览器没有缓存js数据,每次都是重新从服务器去获取,这个是问题的一个重点。 从上面的图片可以看出图片的加载速度是很快的,而且已经cache了。 后台的数据接口速度也是挺快的,所以问题主要还是在前端的代码问题上。

加载速度问题基本清楚之后,再来看一下白屏的问题是如何产生

通过反复访问可以看到,白屏的时候会看到一个loader_logo.gif一直在那里加载,是因为页面需要等到所有的资源全部加载完成之后才会看到页面,不然就是一个背景为白色的等待动画,并不是一边请求一边渲染,而是等到资源统统加载完毕页面渲染完毕之后用户才看到页面 所以让我们感觉很慢。

针对之前前端部总监给出的优化方案 说一下我自己的想法:

  • 方案1 我感觉可以做:要花钱(客户可能不想花钱,不打算做这个方案,呵呵),这样做需要静态资源单独部署在七牛云进行CDN加速 或者 七牛云镜像了我们整个网站的静态资源,访问的静态资源都是请求到七牛云上面的静态资源达到一个加速的效果

  • 方案2的话前端后台都可以做,不过出于服务器性能和用户体验考虑,这部分的压力应该是放在客户端,在上传图片到服务器之前就应该压缩了。 例如:用户上传一个5M的图片,我们不管前端处理还是后台处理,最终都是要压缩的,比如压缩到了500K,最终我们保存在服务器上面是500K的图片,但是用户在上传的时候耗费了5M的带宽,时间变长,用户体验下降。 再比如 有500个用户都在上传图片,服务器需要处理500张5M的图片,但是这个压力如果是在浏览器端就有500个浏览器分担这个压力,不用把这个压力放在服务器端。 所以我感觉这个处理还是放在移动端比较好。纯js的图片压缩可以看看github上面这个工具localResizeIMG3

我想到的优化主要针对当前这一个页面进行前端性能优化

  • 1.合并可以合并的js,css,减少http请求,不用重复利用的代码可以直接写到页面。
  • 2.检查删除不必要的js,css,在代码层面做优化
  • 3.按需加载,建议去掉等待动画,首先加载首屏的数据再加载后面的或者后面的需要的时候在加载
  • 4.浏览器缓存,针对浏览器缓存做优化,缓存不经常变动的静态资源js,img,css。

后来就让做前端的同事按照这个方案去做了。

bbear

继续阅读此作者的更多文章