从 10 多秒到 1.05 秒！前端性能优化实践 _性能优化

文章插图

作者：子木
转发链接：segmentfault.com/a/1190000015052545
前言关于性能优化是个大的面，这篇文章主要涉及到前端的几个点，如前端性能优化的流程、常见技术手段、工具等。
提及前端性能优化，大家应该都会想到雅虎军规，本文会结合雅虎军规融入自己的了解知识，进行的总结和梳理。
雅虎军规首先，我们先来看看“雅虎军规”的35条：

尽量减少 HTTP 请求个数——须权衡
使用 CDN（内容分发网络）
为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。
避免空的 src 和 href
使用 gzip 压缩内容
把 css 放到顶部
把 JS 放到底部
避免使用 CSS 表达式
将 CSS 和 JS 放到外部文件中
减少 DNS 查找次数
精简 CSS 和 JS
避免跳转
剔除重复的 JS 和 CSS
配置 ETags
诗 AJAX 可缓存
尽早刷新输出缓冲
使用 GET 来完成 AJAX 请求
延迟加载
预加载
减少 DOM 元素个数
根据域名划分页面内容
尽量减少 iframe 的个数
避免 404
减少 Cookie 的大小
使用无 cookie 的域
减少 DOM 访问
开发智能事件处理程序
用代替 @import
避免使用滤镜
优化图像
优化 CSS Spirite
不要在 html 中缩放图像——须权衡
favicon.ico要小而且可缓存
保持单个内容小于25K
打包组件成复合文本

如对雅虎军规的具体细则内容不是很了解，可自行访问这篇优质文章：前端性能优化之雅虎35条军规了解详情。
压缩合并对于前端性能优化自然要关注首屏打开速度，而这个速度，很大因素是花费在网络请求上，那么怎么减少网络请求的时间呢？

减少网络请求次数
减小文件体积
使用 CDN 加速

【从 10 多秒到 1.05 秒！前端性能优化实践】所以压缩、合并就是一个解决方案，当然可以用 gulp 、 webpack 、 grunt 等构建工具压缩、合并。
JS、CSS 压缩、合并例如：gulp js、css 压缩、合并代码如下：

//压缩、合并jsgulp.task('scripts', function () {    return gulp.src([        './public/lib/fastclick/lib/fastclick.min.js',        './public/lib/jquery_lazyload/jquery.lazyload.js',        './public/lib/velocity/velocity.min.js',        './public/lib/velocity/velocity.ui.min.js',        './public/lib/fancybox/source/jquery.fancybox.pack.js',        './public/js/src/utils.js',        './public/js/src/motion.js',        './public/js/src/scrollspy.js',        './public/js/src/post-details.js',        './public/js/src/bootstrap.js',        './public/js/src/push.js',        './public/live2dw/js/perTips.js',        './public/live2dw/lib/L2Dwidget.min.js',        './public/js/src/love.js',        './public/js/src/busuanzi.pure.mini.js',        './public/js/src/activate-power-mode.js'    ]).pipe(concat('all.js')).pipe(minify()).pipe(gulp.dest('./public/dist/'));});// 压缩、合并 CSSgulp.task('css', function () {    return gulp.src([        './public/lib/font-awesome/css/font-awesome.min.css',        './public/lib/fancybox/source/jquery.fancybox.css',        './public/css/main.css',        './public/css/lib.css',        './public/live2dw/css/perTips.css'    ]).pipe(concat('all.css')).pipe(minify()).pipe(gulp.dest('./public/dist/'));});

然后，再把压缩、合并的 JS、CSS 放入 CDN，看看效果如何：

文章插图

文章插图

以上是 lishaoy.net 清除缓存后的首页请求速度。
可见，请求时间是 4.59 s ，总请求个数 51 ，而 js 的请求个数是 8 ， css 的请求个数是 3 （其实就 all.css 一个，其它 2 个是 google浏览器加载的），而没使用压缩、合并时候，请求时间是 10 多秒，总请求个数有 70 多个， js 的请求个数是 20多个，对比请求时间性能提升 1倍多。