实践中的电商前端优化

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

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

欢迎一起交流

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

正文如下

前端性能

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:如果你对前端性能优化有自己的想法,欢迎骚扰我。我们之间也许只差一杯焦糖玛奇朵

本文转载于:猿2048实践中的电商前端优化

原文地址:https://www.cnblogs.com/jlfw/p/12590786.html

时间: 2024-11-03 21:14:05

实践中的电商前端优化的相关文章

开源一个价值超过 100K 的电商前端

前言 这个项目本来是给一位客户开发的,由于某些原因,中止合作了,故现在开源出来,供大家参考.如果能够让大家在开发 WEB APP 的时候少走弯路,目的也就达到. 这个项目的设计目标是能够运行在微信上,并且能打包为 APP. 代码开源在 github 上,https://github.com/ansiboy/ChiTuStore 价值 开源的前端框架,但是较为完整的开源项目却没有,这个项目,包括了电商大部份的功能,非常具有参考价值,尤其是对于做电商前端开发的朋友. 讨论组&维护 对这项目感兴趣的同

C#大型电商项目优化(二)——嫌弃EF与抛弃EF

上一篇博文中讲述了使用EF开发电商项目的代码基础篇,提到EF后,一语激起千层浪.不少园友纷纷表示:EF不适合增长速度飞快的互联网项目,EF只适合企业级应用等等. 也有部分高手提到了分布式,确实,性能优化从数据库出发,初期就加索引,然后垂直拆分,水平拆分,读写分离,甚至是分布式事务,阳春白雪,格局很高.然而笔者希望通过渐进的过程来优化这个项目,我们缩小格局,从细节查看不同方案的优劣. 之前提过,使用EF最主要的原因是项目时间紧迫,EF搭建速度快,熟悉的同事也多,使用方便.这个决策确实帮助我们挺过了

电商前端工程师:国内WEB前端开发经验之路

一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是"初级"前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的"弄潮者",这在很大程度上影响我们对"技术本质"的洞察力,多

一次项目实践中DBCP数据库连接池性能优化

关于数据库连接池DBCP的关注源于刚刚结束的一轮测试,测试内容是衡量某Webserver服务创建用户接口的性能.这是一款典型的tomcat应用,使用的测试工具是Grinder.DBCP作为tomcat服务器常用的数据库连接池,其性能表现直接关乎应用的性能. 1.遇到的问题 当并发量增加到100时,该接口出现瓶颈,此时TPS接近400,如下图.但是服务端CPU和内存等资源并未达到瓶颈,服务器CPU使用率仅为30%,内存使用率为40%.监控到的javaMethod慢方法为incrAppAccount

东航电商前端技术周刊第五期20180724

今天我们将分享如下内容,希望能对小伙伴们有些许帮助: 1.通过改变类名渲染不同背景图的简洁写法: 2.项目中常会用到的点击弹出模态框禁止页面滑动: 3.axios post提交的Content-Type设置: 4.vue踩坑之路--axios post请求传参失败解决方案: 5.缓存相关知识整理: 6.关于微信清除缓存: 7.偶遇一个奇葩问题,避免大家踩坑: 不多说,直接上例子: 一.通过改变类名渲染不同背景图的简洁写法:(不重复书写background-size:100% auto) 起初为了

redis在实践中的一些常见问题以及优化思路

1.fork耗时导致高并发请求延时 RDB和AOF的时候,其实会有生成RDB快照,AOF rewrite,耗费磁盘IO的过程,主进程fork子进程 fork的时候,子进程是需要拷贝父进程的空间内存页表的,也是会耗费一定的时间的 一般来说,如果父进程内存有1个G的数据,那么fork可能会耗费在20ms左右,如果是10G~30G,那么就会耗费20 * 10,甚至20 * 30,也就是几百毫秒的时间 info stats中的latest_fork_usec,可以看到最近一次form的时长 redis单

C#大型电商项目优化(三)——扩展性与支付

上一篇文章引来不少非议,笔者并非对EF有看法,而是针对不同的业务场景和框架背景,挑选不同的方案.每个方案都有其优势劣势,挑选最快速,最简单的方案,是笔者的初衷. 看评论也是学习的过程,然而有些只做评价,却不道明原委的评论,也确实让笔者感受到了些许来自世界的恶意^_^ 开个玩笑,下面进入正题,之前系统的支付部分只需要支持支付宝和财付通,且支付代码是写在一个页面文件里的,也就是说,这个页面文件包含了支付宝和财付通的支付请求.支付同步回调和异步回调.且不说代码混乱可读性差,其可扩展性也实在不敢恭维.其

中俄贸易到跨境电商趋势

移动互联与新科技的交融,大数据推行,一站式全供应链效劳以及本土化推行都也许变成跨境电商将来的开展趋势.近来,Yandex大中华区总裁蔡学峰在本月举办的全球跨境电商光谷论坛上详细宣布了关于中俄电商买卖以及跨境电商将来趋势的观点.(Yandex是俄罗斯收集引擎的商场引导者,涵盖了全部平时日子有关的查找效劳,在俄罗斯商场占有率高达60%,本地有88%的网络用户都运用yandex的效劳途径.) 这些年,跨境电商这个范畴和商场议题中B2C的热度似乎盖过了B2B,而从实际买卖数据看来,我国出口电商B2B与B

电商峰值系统架构设计--转载

1.1 系统架构设计目录 摘要:双11来临之际,<程序员>以“电商峰值系统架构设计”为主题,力邀京东.当当.小米.1号店.海尔商城.唯品会.蘑菇街.麦包包等电商企业,及商派.基调网络等服务公司,分享电商峰值系统架构设计的最佳技术实践. 自2009年11月11日,淘宝商城(现名天猫)拉开网购狂欢节的序幕,各大电商的促销浪潮此起彼伏.此时的电商大战不仅是价格之争,更是技术的较量.如何设计电商峰值系统来更好地满足用户蜂拥而至的访问,如何在海量数据处理中实时发现有效信息并转化为商机,成为众多电商企业密