实践中的电商前端优化

前端优化已经是一个被写烂的题材了。

虽千万人吾往矣，这里我仅分享我的一些实践经验。

欢迎一起交流

欢迎关注我的个人公众号，不定期更新自己的工作心得。

正文如下

前端性能

1. 模块化

严格来说，代码模块化并不能带来性能上的提升，但我还是将模块化提出来，因为它真的很重要，重要到几乎所有的优化都与它息息相关。

常见的模块化方案有：AMD、CMD、UMD、ES6

如何选择？

1. 团队习惯

2. 个人偏好

3. 业务需要

我靠！你怎么能把业务需要放在最后一个考虑？

因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果。

而且我觉得 软件开发中的以人为本 用在这里刚好合适，其他地方就只能 呵呵了。毕竟业务高于一切，这是操守。

2. 缓存

缓存一定要加！

缓存一定要加！

缓存一定要加！

因为CDN真的很贵。。。

没有CDN？那就更得加缓存了！！！

缓存有很多方式，最为常见的就是下面这两种了

1. 浏览器304缓存

2. localstorage本地存储

业界，一直有关于304缓存与localstorage性能的争议，这里我们不讨论两者的差异，或性能问题。

我一向以业务导向选择方案，这里我选择的是localstorage，如果你愿意，你可以通过localstorage将缓存玩出一朵花出来。

你可以这么干：

1. 通过localstorage存储js、css资源；

2. 资源版本控制；

3. 只要你愿意，localstorage也可以控制缓存时间！通过写一小段js代码来实现；

4. 在活动期间可以提前将活动相关资源缓存至localstorage，减轻活动当日的CDN消耗，同时在提升用户访问速度的同时，降低服务器端压力。

PS：localstorage针对开发环境确实有点恶心，不过你可以在框架底层写一小段代码来支持不同环境下的缓存控制，例如：针对开发环境域名，禁止缓存，针对某个URL参数禁止缓存等。当然，你也可以和我一样写一个chrome插件来控制缓存，高兴就好！

所以，我的建议是能使用localstorage就是尽量使用localstorage。如果你司没事也会搞一搞大促什么的，你就知道CDN有多贵了。

后续应该会将我们针对localstorage的一套方案开源出来。

3. 懒加载

图片懒加载

如果你是做Hybrid开发，这真的有必要！

另外，写一个图片懒加载插件有多难？，这里已经有人给出答案了，点击查看

JS 懒加载

模块化带来的其中一个好处就是我们可以针对js资源进行懒加载控制，RequireJS、SeaJS？你高兴就好。

这里我们采用的是RequireJS，要问我为什么，也许是因为我们使用的是AMD方案吧！要问我为什么使用AMD方案，我只能告诉你，因为我高兴！以人为本不是嘛~

4. 前端模板渲染

相比拼接字符串，jQuery.append ，我们有了另一种选择，前端模板。

前端模板方案有很多。这里我推荐腾讯的 tmodjs 。他的优势在于可以将前端模板预编译成js文件，同时支持模块加载。

如果你要问我为什么不能拼接字符串，又或者jQuery.append为什么不好，这也许是我下一篇文章的主题了。至少不是今晚的。或者你可以去研究一下浏览器的渲染机制呢？

5. DOM怎么写很重要

浏览器有个机制叫做重绘，任何改变dom元素位置的操作都会引发浏览器重绘操作，这是无法避免的。重绘是浏览器性能优化的一个重点，特别是针对webview的优化。

既然我们不能避免，那么我们能够做什么呢？

虽然我们不能避免浏览器重绘的发生，但是我们可以通过精确的控制dom元素，来达到使浏览器的重绘范围最小化的目的，这里我们可以借助浏览器的开发者工具针对页面进行调优。

关于调优也可以写一篇文章了，如果你感兴趣，我们可以私下聊一聊。

客户端性能

1. 代理webview发送ajax请求，据说这可以省去三次握手的时间？

2. iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的产物，针对iOS8.0以后的系统建议使用WKWebView，经过实际测试，性能大概能够提升40%，同时稳定性有很大程度的提升，几乎是质的提升。

3. webview支持加载webp格式图片。

4. 静态资源预加载，除了localstorage的缓存机制，我们也可以利用客户端针对前端静态资源进行缓存，在WIFI环境下，我们可以预先将静态资源下载至本地。

服务端性能

1. 服务端渲染

在一个把前后端分离奉为葵花宝典的时代，提一句服务端渲染显然是不合适的。

可是如果考虑到客户端弱爆了的Webview，也许这是一个不错的选择，毕竟服务端的性能要好很多。针对已经前后端分离的项目，我建议可以尝试使用Node.js针对页面进行直出，也是一个不错的选择，Node.js的性能这里就不需要我累述了吧！

By the way, 首屏数据服务端输出，配上懒加载一起，不要太爽哦。

2. 一个快速响应的接口

一个快速响应的接口真的很重要！！！

你可以通过优化代码，优化sql，优化缓存（redis Or memcached?），优化Nginx配置？double 服务器？

Come On 总有点能做的！

总之~不要局限了自己。We Are Developer , Not 页面仔！OK？

3. 图片转webp

由于webp格式的图片并不是所有环境都支持，这时候需要配合不同的客户端动态返回相应格式的图片。

PS：如果你对前端性能优化有自己的想法，欢迎骚扰我。我们之间也许只差一杯焦糖玛奇朵。