前端优化方案

这些年开发过程中遇到的一些优化问题。暂作记录。

1，ui图片资源使用雪碧图。

该优化可以明显减少网络访问次数，使用ps 或自动化工具将频繁使用的ui元素或表情元素整合为一张图，然后通过代码或整合工具按区域截取图像。

2，图片，音视频资源尽量使用专用图片服务器。

使用专用的静态资源服务器，减少对主服务器的性能和网络消耗。国内外有许多专业的静态资源服务器，比如七牛什么的，便宜好用。

3，域名拆分，为域名分流。

将域名拆分，达到域名分流效果。也可以配合反向代理将不同模块指向不同服务器以达到优化效果。

4，使用cdn，从最近节点下载资源。

访问网址时，域名解析过后就是cdn寻址，如果附近没有节点就向上查询直到根节点。比较初级也是比较普及的技术。

5，合并js，css文件。减少请求次数。

合并js、css文件意味着减少http请求。使用gulp、webpack、grunt 都能轻松实现。

6，混淆js文件。

这里的混淆同时也有压缩的意思。比如一个名叫getServerName()的方法，经过混淆压缩处理变成了a()。这就等于通过减少字符达到文件减肥的作用。不要以为只是减了几个字符而已，代码越庞大越复杂，减肥效果越明显。而且这样也可以达到一定的混淆作用。当然这种级别的混淆在高手眼里如果纸盒子一般一捅就破，所以业内有很多高手研究了更高级更难懂的混淆。但不论如何混淆，代码终究还是暴露的，所以不要太纠结于此。后续会有详细介绍。

7，服务端开启资源传输压缩 gzip。

经测试，服务端开始gzip可以优化网络传输速度。这是典型的服务端性能换网络性能。

8，尽量不要使用png

png文件更大。如果可以，尽量使用svg、gif或jpg。jpg用ps输出处理质量尽量不要超过6。如果有矢量源文件可以考虑转为svg格式。这样不仅有效缩小文件还提升了图片质量。

9，webGL简单的模型尽量使用片元绘图接口绘制

尽量不使用obj等模型软件输出格式。如果必须使用模型文件，babylon或json格式会使文件更小bug更少。（注意内外两面的输出）

10，canvas动画缓存

canvas动画如果有可能会使用大量相同图形，那么应该为该图形单独绘制一个缓存画布，可以大幅提升流畅度。

11，touch事件默认有延迟。会影响交互体验。

touch事件需要设置默认为defult，否则会有触发延迟。很多触摸控制插件都解决了延迟问题。

12，为防止错误操作导致拖拽图片，可以使用canvas读取图片。当然还有很多其他办法。

13，减少不必要的闭包

减少不必要的闭包，追踪可能会循环调用的闭包，以免循环调用发生内存泄露。

14，避免回调地狱，以防维护成本过高。

使用es6提供的promise，snyc或者自己写一个promise的方法都能很好的解决。

15，遍历一个数组或对象的方法有很多。foreach、map、forin等等。但是。for的效率最高。

16，在移动端加入webgl和深度学习功能，是个十分冒险的行为。

虽然当前正是h5和混合应用的春天，但经过亲测，移动端硬件和浏览器的性能与pc端相比实在相差太多了。就算是当下旗舰晓龙835也不能保证可以流畅运行一个复杂些的场景。这种直观的差异最终会反馈给不同终端的用户，从而严重影响他们的使用体验。所以这种既吃cpu又吃gpu的网页应用最好能通过原生方式解决。