DaraW

Code is Poetry

记一次前端性能优化实战

前言

这学期开学时去找了信息化中心的老师,说明了自己想往Node和Python方向走的想法,退出了信息化中心的学生工作室。
然而上周六老师又找到了我,他们对一个电商网站项目的前端性能很不满意,希望我能给他们做一套性能优化方案。

需求

和老师面谈后,确定了需要下面几个主要需求:

  • 合并css/js文件减少http请求
  • 压缩css/js文件减少流量
  • 原来的模板中每个小icon都是一张图片,用雪碧图/base64减少http请求
  • 大图懒加载,减轻后端压力

方案

常见的构建方案就是grunt,gulp,webpack,make,npm script,还有国内百度的fis。
经过了筛选省下了gulp和fis3两个选择,不得不说fis3已经做好了一套默认方案,几乎和信息中心的要求相符,然而经过测试发现这个项目使用gulp构建更加快一些。
确定了gulp后,接下来就是对照需求选插件了。

  • 开发时实时监听变化自动刷新
    借助gulp-livereload插件和chrome的livereload插件,gulpfile中创建名为watchtask,监听文件变动浏览器自动刷新,解放浏览器的刷新按钮和键盘的F5。
  • 合并js/css文件
    为了方便开发时多个文件引入,和模块化的开发,一开始使用了gulp-usemin插件,使用起来确实挺方便的,然而发现在多个页面构建时就废了,查了一下发现npm建议使用gulp-useref代替。
    然而接着发现gulp-useref不能将外联转化为内联,而且在流中处理了文件名后不会像gulp-usemin自动修改引用文件的地址,好在有gulp-rev-replace插件可以自动在流中修改html文件中的引用地址。
    而将外联文件合并为内联文件则可以用gulp-inline-source插件,和gulp-usemin差不多。
  • js/css文件压缩
    分别用gulp-uglifygulp-cssnano插件,这个没什么好说的。
  • 版本更迭css/js文件冗余
    常见的有文件名加时间戳和hash两种方案,选哪个倒感觉无所谓了,这边用gulp-rev插件实现hash冗余文件,服务器端静态资源半年清理个一次也就差不多了。
  • 小图优化
    常见的就是把小图转成字体文件,SVG,雪碧图,base64这几种方案。
    这边选择了base64,其实base64有利有害,合并进css文件会变大1/3左右,而且css文件太大后会延长css文件渲染时间。这边我设定的5KB为阈值,css文件大概增加了100k,影响不大,图片跟着css文件一起缓存,倒也不错。
  • 大图懒加载
    由于原来就使用了jquery,于是用了百度改过的jquery图片懒加载插件,这里遇到了一个大坑。
    假设html中有两个div,通过css将第一块放在左边当作侧栏,第二块放在右边当作主栏,将所有图片都做懒加载处理,如果左栏高度过高,左栏看完了右栏才能开始加载。
    鹅厂的大牛张鑫旭曾经也写过一个这样的插件。这类的插件原理都类似,大致看了下源码,猜测是插件设计时没有想到这种场景,所以出现了这种蜜汁bug。
    突然想起来,百度说他的百度地图和糯米都用了这个插件,那不如去看看他们怎么解决的。
    看了下糯米的页面,原来他们不对侧栏做懒加载处理。我取消了侧栏的懒加载处理,果然就正常了。

未完待续

这是第一次将这些优化方案在这样一个较大的项目中使用,这个项目还没有结束,如果有新的变化视情况来更新。

Proudly powered by Hexo and Theme by Hacker
© 2019 DaraW