小程序开发之快速实现运营需求

作为一枚前端,我想在我们的日常中,除了不断的积累各种语言框架外,我们更多的时候是给产品、业务提供切实、可行的解决方案,并最大程度上简化我们的后期维护工作。 本文以小程序端的两个场景为例,简述下我们在解决运营类数据的思路和方案。欢迎拍砖。 场景一:京东有礼小程序首页,动态实时更新页面数据     京东有礼小程序的首页,是为用户呈现的礼品卡列表。我们的需求是可以动态、实时更新礼品卡列表,比如春节期间推出一批拜年的卡面,而元宵节时更换为猜灯谜的卡面,平日再更换一批其他的卡面。这里我们称这些被动态实时更新的数据为运营类数据。 这其实是一个很简单的问题,即需求方在后台维护这些运营数据 => 后台提供数据接口 => 前端调用并渲染,就可以了。不过,当时后端没有维护“运营数据”的系统,在一周内完成系统并提供数据接口的方案基本被 pass 掉了。 当时适逢小程序推出 web-view 的解决方案,而在PC 和 M 端,需求方有通过运营活动平台搭建的活动链接,如果能够直接使用现有的活动链接,似乎也可以解决问题。不过 web-view 对业务域名做了限制,而我们搭建的活动页涉及到的域名、登录、领券等功能,未知风险不可控,一周内也未必能搞定,也放弃。 有趣的是,我们在考虑web-view方案的时候,发现运营活动平台可以提供数据接口!!活脱脱一个“配置系统”呀。很快我们确定了方案:在现有活动页的基础上,新增列表的数据结构,读取配置接口,渲染数据。 数据区域划分如下: 数据结构如下,数据结构如下,其中首焦、楼层通过groupName区分,首焦、楼层数据即是每个list的内容:

这样一来,从需求提出到实现,我们用了不到一天的时间。后来需求迭代更新时,增加了一个首焦图,和春节红包抽奖活动,我们在此基础上增加字段,只需在源码基础上增加一条判断和一次循环,就可以搞定需求,非常快捷,满足了产品的快速迭代,减少了前端的工作量,基本没有动用后端资源。 场景二:京东图书首页的多场景个性化实现。     京东图书小程序,承载着京东实体书,活跃在众多公众号的首页。比如我们的公众号首页,可以快速链接到京东图书的小程序。那么需求来了,我们每个公众号的受众群体存在着差异性,那我们怎么给用户提供精准的数据以便用户快速获取所需图书呢? 我们的方案就是为不同的公众号实现自己定制的京东图书小程序的首页,如下两张图中,分别是不同的公众号对应的不同京东图书的首页的活动页面,实现了多场景个性化的定制。 公众号一: 公众号二: 在收到该需求时,我们已经实现了通过 web-view 接入 H5 的方式,运营页面内容已经更加灵活。那如何实现这种差异性的展示呢? 有了场景一的启发,我们很快决定,借助活动平台,根据公众号的 appId 配置不同的 H5 url 链接。当数据约定完毕后,我们只需要在活动页根据数据,及当前小程序的 appId 进行匹配,待匹配成功后,将现在的 web-view 的 url 链接更新即可。 不过,我们在实现过程中也遇到了小程序的一些问题,即小程序只能获取特定场景下公众号的 appId,如下表所示: 以下是我们处理本次需求的流程图,其中也解决了小程序只能获取特定场景下公众号的 appId 的问题。 […]

浅析渲染引擎与前端优化

本文主要是两方面内容: 浅析浏览器内核的工作原理(以 WebKit 2 为例)。 浅析由浏览器内核想到的前端优化,或者说前端优化规则是从哪儿来的。 大家知道,大部分的 WEB 页面依托浏览器呈现,而浏览器能够将页面展示出来,基本依赖于浏览器的内核,即渲染引擎。今天以 Chrome 浏览器的内核 WebKit(更确切是 WebKit 分支 Blink,以下统称为 WebKit )为例,对渲染引擎如何展示页面做个简单、全面的了解。 浏览器的渲染引擎及其依赖模块 渲染引擎主要是将 WEB 资源如 HTML、CSS、图片、JavaScript等经过一系列加工,最终呈现出展示的图像。渲染引擎主要包含了对这些资源解析的处理器,如 HTML 解释器、CSS 解释器、布局计算+绘图工具、JavaScript 引擎等。为了更好地呈现渲染效果,渲染引擎还会依赖网络栈、缓存机制、绘图工具、硬件加速机制等。 浏览器的渲染过程 浏览器的渲染过程,主要包括两大部分:网页资源加载过程和渲染过程。 上图将整个网页渲染的过程做了大致的剖析。以下我们按照数据流向,逐一详细剖析每个过程。 一、域名解析 DNS 当我们在浏览器中输入 URL 后,浏览器首先会进行域名解析。一般情况下,一次 DNS 域名解析大概需要 60-120 ms,一次 TCP 的三次握手需要 1.5 个 RTT(round-trip time)。WebKit 的方案是 采用 DNS 预取技术和 TCP 预连接技术。 DNS 预取技术利用现有 DNS 机制,提前解析网页中可能的网络连接。即对用户浏览网页中存在的链接,用较少的 CPU […]

© 2018 JDC. All Rights Reserved.