实践中的电商前端优化 | 易学教程

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

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

欢迎一起交流

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

正文如下

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

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

如何选择？

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

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

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

缓存一定要加！

因为CDN真的很贵。。。

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

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

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

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

你可以这么干：

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

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

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

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

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

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

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

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

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

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

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

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

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

代理webview发送ajax请求，据说这可以省去三次握手的时间？
iOS中使用WKWebView代替UIWebview，UIWebview是iOS8.0以前的产物，针对iOS8.0以后的系统建议使用WKWebView，经过实际测试，性能大概能够提升40%，同时稳定性有很大程度的提升，几乎是质的提升。
webview支持加载webp格式图片。
静态资源预加载，除了localstorage的缓存机制，我们也可以利用客户端针对前端静态资源进行缓存，在WIFI环境下，我们可以预先将静态资源下载至本地。