此文章列举一些我在项目中用过的优化手段
1.从减少http请求出发的优化
- css、js的并包（在保持模块化的情况下实现并包，不然就失去了合并的意义，以往通过seajs、requirejs来实现模块化的加载，现在可通过webpack、gulp的相应loader来实现合并。最近还有一个新的rollup，能够大幅度减少无用的代码）
- css sprite图（减少小icon的请求，把页面中的icon都放在一个图片中，通过background-position来决定显示哪个部分，一般通过构建工具来实现。以往项目中我都用gulp.spritesmith来合并雪碧图，他还支持2倍图的合并，挺好用的）
- 数据缓存（有些数据接口是会被经常请求，但是该数据不会经常变动，这时候可以考虑缓存下来，减少重复请求。比如在一个页面中划过一个头像会动态加载该用户信息，这时候可以考虑把数据存在变量中，下次用户再次滑动该头像时，直接重缓存中获取，能够提高用户体验并减少服务器压力。不过数据缓存一定要注意与业务逻辑的解耦。什么数据接口适合缓存呢？这需要取决你的接口数据，如果某个数据接口的数据对用户操作非常敏感，比如订单信息，用户可能会增加或者删除订单，这时候就不疑使用缓存了，容易造成客户困扰。）
+前端缓存（这指的是资源的强缓存和协商缓存。说实话，这很难说是不是前端的优化手段，因为前端人员不需要做什么代码上的改动，浏览器自身会根据上一次请求资源的返回头来判断是否进行缓存，不过这的确减少了http请求，所以就列在这里了）
+base64图片（使用base64化的图片能减少图片请求，但是这会增大代码体积。多大的图片采用base64？这个度不好把握。vue内置了图片进行base64，当图片小于大约是9kb时候使用base64）
2.从代码角度进行的优化
- 减少dom操作（我们知道，dom操作是非常耗性能的，他会触发浏览器的回流、重绘操作。因而尽可能减少dom的操作，采取在外部创建dom副本，在这个副本上进行操作，然后替换的方式来减少页面的回流、重绘次数）
- throttle & debounce （在频繁触发某个函数的时候，你可能就要做这些优化了，比如图片懒加载中会有一个滚动监听。用户在滚动的时候一直会触发该滚动函数，如果滚动函数在16ms（大约时间）内无法完成函数执行的话，会造成卡顿，影响用户体验。这时候你就可以用throttle & debounce 来进行优化，具体用哪一种则取决于你要的效果。在图片懒加载中我比较偏爱debounce～，此文章就不展开这两种方式的讨论。）
3.减少dns查询（我们可能会用多个资源域名来提高页面的并行下载上限。但增加域名但同时也加大的dns的查询。这时候可以通过减少域名的方式来减少dns查询。一般保留2-4个为最佳，但是淘宝用了14个dns。。。可能是业务需求吧。相比减少dns查询，使用dns预解析更佳符合业务需求。通过link的prefetch属性来预先解析dns）
4.延迟加载（最常见的应该是首屏渲染，分屏异步加载了）
5.预加载（在空闲时间提前加载可能会用到的组件、控件）
6.通过多域名来实现cookie free（资源文件请求使用不同的域名，这样由于同源策略，在做资源请求的时候就不会带上cookie，从而减少带宽消耗）
网友评论