实践中的电商前端优化

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

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

欢迎一块儿交流

欢迎关注个人我的公众号，不按期更新本身的工做心得。

正文以下

前端性能

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：若是你对前端性能优化有本身的想法，欢迎骚扰我。咱们之间也许只差一杯焦糖玛奇朵。