实践中的电商前端优化

2019年8月31日 181次阅读 来源: Youwei

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

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

迎接一同交换

迎接关注我的个人民众号，不定期更新本身的事情心得。

《实践中的电商前端优化》

正文以下

前端机能

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：假如你对前端机能优化有本身的主意，迎接骚扰我。我们之间或许只差一杯焦糖玛奇朵。

    原文作者：Youwei
    原文地址: https://segmentfault.com/a/1190000007324467
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞