​如果你想在平台内做红包小程序，这些问题你一定需要了解。 [视频] 一、相关红包小程序可能需要选择社交红包类目。 1、哪些红包内容才需要设置社交红包类目呢？ 这个问题小编早有准备，详情可参考：什么小程序需要社交红包类目？ 2、社交红包类目具体申请流程如下： (1) 小程序涉及红包内容需选择社交红包类目，所需资质为：《增值电信业务经营许可证》，即ICP证。 (2) 在申请通过社交红包类目后，需按站内信指引开通安全红包商户号 (3) 商户号开通成功后并绑定小程序主体，再提交代码审核。 二、社交红包小程序有哪些内容是不能做的？ 1、社交红包小程序内暂不支持红包广场业务场景。即社交红包小程序的红包发放与领取仅限在群和好友中进行，禁止在无好友或群关系的场景传播，如基于LBS的红包广场。 违规示例： [图片] 2、红包类活动暂不支持朋友圈传播。 违规示例： [图片] 3、社交红包小程序暂不支持“回赏”类红包玩法。即A发一个红包给任何用户，任何用户需回包一个红包给A，才能拆开A的红包。 违规示例： [图片] 4、个人主体暂不支持社交红包。 违规示例： [图片] 5、社交红包暂不支持单笔交易支付金额突破商户号额度（当前商户号额度为204元）。 违规示例: [图片] 三、社交红包小程序暂不支持自定义功能红包？ 若小程序内涉及向用户提供含自定义功能的红包服务，表现形式包括但不限于：文本/图片/音频/视频等形式，请开发者接入微信公众平台内容安全API（imgSecCheck、msgSecCheck、mediaCheckAsync）能力，同时做好人工审核相关的内容过滤机制，校验用户输入的文本/图片/音频/视频等内容，拦截政治敏感、色情违法违规等相关信息内容，保证用户上传的内容安全，并及时处理违规内容/账户，降低被恶意利用导致传播恶意内容的风险。一经发现将根据违规程度对该小程序采取限制功能直至封号处理。 违规示例: [图片]

配置： 1、进入商户平台 在产品中心找到小程序红包 开通小程序红包功能 2、开通后在左边的APPID授权管理中关联该小程序APPID 3、进入小程序后台 在功能==》微信支付中确认关联并授权 4、回到商户平台APPID授权管理中确认关联 5、这是最容易忽略的一点 在商户平台 产品中心 小程序红包的产品设置中 拉到最下面 小程序红包权限中开通该小程序的红包功能 到此小程序红包配置完成 开发： 发送红包  var mdhbhe = Convert.ToInt32(fee * 100);                                 string mch_billno = mdminihb.Mch_id + DateTime.Now.ToString("yyyyMMdd") + GenerateNonceStr();                                 WxPayData hb = new WxPayData();                                 hb.SetValue("act_name", mdminihb.Act_name);//活动名称                                 hb.SetValue("mch_billno", mch_billno);//单号                                 hb.SetValue("mch_id", mdminihb.Mch_id);//发送红包的商户号                                 hb.SetValue("nonce_str", GenerateNonceStr());                                 hb.SetValue("notify_way", "MINI_PROGRAM_JSAPI");                                 hb.SetValue("re_openid", openid);                                 hb.SetValue("remark", mdminihb.Remark);                                 hb.SetValue("send_name", mdminihb.Send_name);//商户名称                                 hb.SetValue("total_amount", mdhbhe);//红包金额 单位分                                 hb.SetValue("total_num", 1);//红包数量                                 hb.SetValue("wishing", mdminihb.Wishing);//祝福语                                 hb.SetValue("wxappid", mdminihb.Wxappid);//绑定在商户的小程序的appid 不是公众号的                                  hb.SetValue("scene_id", mdminihb.Scene_id);                                 var sign = hb.MakeSign2(mdminihb.Mch_key);//商户秘钥                                 hb.SetValue("sign", sign);                                 string xml = hb.ToXml();                                 string response = HttpService.HbPost(xml, url, true, 6, mdminihb.Mch_path, mdminihb.Mch_certkey);                                 WxPayData result = new WxPayData();                                 result.FromXml(response);//将xml格式的结果转换为对象以返回                                 var package = "";                                 if (result.GetValue("return_code").ToString() == "SUCCESS" && result.GetValue("result_code").ToString() == "SUCCESS")                                 { //这边是成功后返回的代码 具体逻辑判断自己处理  package = result.GetValue("package").ToString();//成功后返回的                                     package = HttpUtility.UrlEncode(package); //这是用于领取红包的代码   WxPayData inputObj = new WxPayData();                                     inputObj.SetValue("appId", mdminihb.Wxappid);//这边是小程序的appId   这个appId 一定要记住 I要大写                                     inputObj.SetValue("timeStamp", timeStamp);                                     inputObj.SetValue("nonceStr", nonceStr);                                     inputObj.SetValue("package", package);                                     var paySign = inputObj.HBMakeSign(mdminihb.Mch_key);//商户秘钥 } 签名方法： public string MakeSign2(string key)         {             //转url格式             string str = ToUrl();             //在string后加入API KEY             str += "&key=" + key + "";             var rd = Md5.md5(str, 32);                 // 所有字符转为大写             return rd.ToUpper();         } 还有记得带证书 写的比较笼统 有不清楚的再补充 补充说明1：目前小程序红包仅支持用户微信扫码打开小程序，进行红包领取。（场景值1011,1025,1047,1124，小程序场景值详情参见文档 这个条件一定要注意 所以特别注意一定要通过wx.getLaunchOptionsSync()先看下场景值对不对 特别说明 体验版的二维码是无法领取红包的（第三方的要注意） 补充说明2：第二次领取红包的签名不需要大写

1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约。 中文文档 | github地址 | 在线预览 [图片] 2. vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。小编在开发微信公众号的时候使用过，欢迎来评论区吐槽。 中文文档 | github地址 | 在线预览 [图片] 3. Mint UI Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。 中文文档 | github地址 | 在线预览 [图片] 4. Muse-UI 基于 Vue 2.0 和 Material Design 的 UI 组件库 中文文档 | github地址 [图片] 5. Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 中文文档 | github地址 | 在线预览 [图片] 6. Cube-UI 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 中文文档 | github地址 | 在线预览 [图片] 7. vue-ydui Vue-ydui 是 YDUI Touch 的一个Vue2.x实现版本，专为移动端打造，在追求完美视觉体验的同时也保证了其性能高效。目前由个人维护。 中文文档 | github地址 | 在线预览 [图片] 8. Mand-Mobile 面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品。 中文文档 | github地址 | 在线预览 [图片] 9. v-charts 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。特别感谢 @书简_yu 的贡献。 中文文档 | github地址 | 在线预览 [图片] 10. Vue Carbon Vue Carbon 是基于 vue 开发的material design ui 库。 中文文档 | github地址 | 在线预览 [图片] 11. Quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。 中文文档 | github地址 [图片] 12. Vue-recyclerview 使用vue-recyclerview掌握大型列表。 github地址 | 在线预览 [图片] 13. Vue.js modal 易于使用，高度可定制，移动友好的Vue.js 2.0+ modal。 在线文档 | github地址 | 在线预览 [图片] 14. Vue Baidu Map Vue Baidu Map是基于Vue 2.x的百度地图组件。 中文文档 | github地址 | 在线预览 [图片] 15. Onsen UI 将Vue.js的强大功能和简单性带入混合和渐进式Web应用程序。 在线文档 | github地址 | 在线预览 [图片] 相关文章 Vue PC端框架 别走，还有后续呐······ 如果小伙伴们有比较好的移动端框架，欢迎在评论区留言砸场，我会持续更新在简书上，谢谢你的贡献。

当我们需要自定义底部导航栏时   首先要解决iphoneX的底部大横条对这个兼容   通常不设置兼容  都会被挡住 如何编写 在你要编写的底部菜单中插入   样式 [代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码])   即可兼容 [代码] [代码] 例如：css中插入[代码] [代码]@supports ([代码][代码]bottom[代码][代码]: constant(safe-area-inset-[代码][代码]bottom[代码][代码])) or ([代码][代码]bottom[代码][代码]: env(safe-area-inset-[代码][代码]bottom[代码][代码])) {[代码][代码]    [代码][代码].fixed-wrap {[代码][代码]        [代码][代码]height[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]        [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码].fixed-pay {[代码][代码]        [代码][代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]    [代码][代码]}[代码] [代码]}[代码]其中       [代码]env(safe-area-inset-[代码][代码]bottom[代码][代码])  是计算兼容的高度   通常一半即可   [代码]         calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写   view.footer {     bottom: calc(100rpx + env(safe-area-inset-bottom)); } 这样轻轻松松解决兼容  不需要写js代码 <-------------大横条-------------> [图片]

        最近一直在寻找一个相对比较好的图表库做统计，之前用echarts，虽然满足了部分需求，但还是有些有点丑，后来多找找，终于找到了阿里开源的一款叫F2的图表库。         官方描述：F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex），完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。         演示：扫二维码 [图片]

在做一个浏览图片的小程序, 页面中含有多个 swiper, 翻页多了之后滑动卡的很. 但又想在首页中展示大图轮播和自动翻页, 尝试过多个方案, 最终实现如下: 方案1: 减少单条记录中 swiper 个数, 只保留3个. 在 onChange 时切换图片. 优点: 每次只加载一张图片, 提高页面载入速度; 缺点: 切换图片不能平滑过渡, 每次切换图片会显示 loading. 同时在白色背景下会闪烁. 改为黑色背景会好很多. 使用方案1之后, 会大大减少页面中 swiper-item 的数量, 但一旦加载多页后, swiper个数多了还是会卡顿, 尤其是在 android 下, 更加明显. 方案2: 通过wx.createIntersectionObserver()来监测当前页面中显示元素, 使用二维数组分页之后, 可以控制只让当前显示页来使用 swiper 来轮播, 其他已经翻过去的页面都可以设置为组图中的单张图片(或者直接设置成空白占位). 这样可以保证基本上只有一个 pageSize 页面中含有 swiper(最多两个页面, 在翻页交界过程中监测都在当前屏幕中显示), 能大大减少卡顿. 目前使用了这两个方案后, 用 Android手机测试, 滑动基本上就不卡了. 如果还有其他方案, 欢迎大家探讨.

问题1：小程序可以注销吗？ 答：小程序目前无法删除和注销，您可以自行关闭小程序的可访问状态。关闭入口：电脑登录小程序，点击【设置】->【基本设置】->【当前访问状态】->【关闭】；可选择暂停服务的原因及预计恢复时间。 问题2：企业身份和个人身份申请的小程序有什么区别？ 答：个人申请的小程序无法发布，个人申请的小程序没有支付功能。 问题3：小程序注册个数？ 答：企业、政府、媒体、其他组织主体可以注册50个小程序，个体户和个人类型主体可注册5个小程序，主体注册次数不占公众号次数限制；个人类型主体身份证和管理员绑定的微信号独立计算（不与组织类型重合）。 问题4：小程序关联主体公众号，公众号可以复用资质给小程序吗？ 答：可以，登录服务号-小程序-小程序管理-已关联小程序-详情-申请，根据页面操作即可。 问题5：复用资质注册小程序数量？ 答：企业、政府、媒体、其他组织主体可以注册50个小程序，个体户主体可注册5个小程序，若是主体没有上限就可以复用公众号资质注册并认证。一个公众号一个月可以复用资质注册5个小程序。主体注册次数不占公众号次数限制。 问题6：公众号关联小程序数量？ 答：公众号可关联同一主体的10个小程序，不同主体的3个小程序；一个小程序可关联最多500个公众号，一个月可以新增关联500次。公众号关联小程序不要求已发布，但未发布的小程序不可设置展示在公众号资料页、图文消息、自定义菜单等场景。 问题7：公众号绑定小程序？ 答：电脑登录公众号，点击【小程序管理】->【添加】，公众号管理员扫码确认后，输入小程序AppID，发送邀请后，需小程序管理员微信号确认成功即可绑定。 问题8：小程序绑定运营者微信号数量？ 答：小程序管理员身份证信息不多于5个，一个微信号最多绑定5个小程序的管理员。 问题9：小程序域名设置数量？ 答：1.每个小程序帐号仅支持配置最多20个域名；2.每个域名仅支持绑定最多20个小程序；3.每个小程序一年内最多支持修改域名50次。 问题10：小程序名称修改次数？ 答：1.名称修改超过2次的小程序需要先发布后，再去微信认证，认证过程中会有改名入口，若小程序未发布，即使微信认证也不会有改名入口；2.个人类型小程序已发布后一自然年内只能修改2次名称。 问题11：小程序名称审核时间？ 答：名称提交后将会立即生效，若修改名称涉嫌命中保护词的情况，审核时间为7个工作日内。 问题12：小程序名称修改方法？ 答：电脑登录小程序，点击【设置】->【基本信息】->【小程序名称】->【修改】；通过管理员扫码验证后即可进入修改页面，当修改名称命中保护词时，需要进一步审核通过才可修改成功，名称修改成功后，原名称会立即释放。审核中无法加急，也无法取消审核。 问题13：小程序如何修改头像？ 答：请电脑登录小程序，点击【设置】->【基本设置】，在小程序头像进行修改，一个月内头像可申请修改5次（按自然月）。 最后分享一下我收集的微信小程序 https://www.sucaihuo.com/source/0-0-266-0-0-0

微盟小程序性能优化要分享的内容分为三部分，启动性能加载、首屏加载的体验建议和渲染性能优化。 先讲启动性能加载的性能优化实践，先看启动加载过程的流程： [图片] · 公共库注入 · 资源准备（基础UI创建，代码包下载） · 业务代码注入和渲染 · 渲染首屏 · 异步请求 优化方案 1、控制代码包大小 · 开启开发者工具中的 “ 上传代码时自动压缩 ” · 及时清理无用代码和资源文件 · 减少代码包中的图片等资源文件的大小和数量 · 将图片等资源文件放到CND中 · 提取公共样式 · 代码压缩，图片格式，压缩，或者外联 · 公共组件提取，代码复用 2、 分包加载 分包加载过程流程 [图片] 在开发小程序分包项目时，会有一个或者多个分包，其中没有分包小程序必须包含一个主包，即放置启动页面或者tabBar页面，以及一些分包都需要用到的公共资源脚本。 在小程序启动时，默认会下载主包并且启动主包内页面，如果用户打开分包内的页面，客户端会把分包下载下来，下载完之后再进行展示。 · 分包加载流程 [图片] 使用分包加载的优点： · 能够增加小程序更大的代码体积，开发更多的功能 · 对于用户，可以更快地打开小程序，同时不影响启动速度 使用分包加载有哪些限制： · 整个小程序所有分包不能超过8M · 单个主包/分包不能超过2M 3、 运行机制优化 · 代码中减少立即执行的代码数量 · 避免高开销和长时间阻塞代码 · 业务代码都写入页面的生命周期中 · 做好缓存策略 4、 数据管理优化 · 首屏请求数量尽量不能超过5个，超过的可以做接口合并（node层，服务端都可以处理） · 对多次提交的数据可以做合并处理 接下来和大家聊一聊首屏加载的体验建议和渲染性能优化。 二、首屏加载的体验建议 · 提前请求     异步数据请求不需要等待页面渲染完成。 · 利用缓存   利用storage API对异步请求数据进行缓存，二次渲染页面，再进行后台更新。 · 避免白屏   先展示页面骨架和基础内容。 三、渲染性能优化 ·  每次 setData 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关 ·  setData 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互 ·  setData 是小程序开发使用最频繁，也是最容易引发性能问题的 ·  在页面列表中使用懒加载+动态移除非可视区域范围内的内容，让dom小下去 ·  耗时比较长的js做到异步，不要阻塞进程（js属于单线程） ·  少使用scroll-view,这个组件对性能的影响太大，单纯的只是需要一块区域滚动，可以使用view+css的方式实现 ·  在页面频繁滚动触发回调函数，会导致页面卡顿，这时必须和防抖动函数或者节流函数相结合做一些处理 ·  页面中的图片可以使用懒加载的方式（添加lazy-load属性，只针对page与scroll-view下的image有效） ·  页面跳转要做一下限制，如果页面快速点击会出现跳转多次的情况  避免不正当的使用setData · 使用data在方法间共享数据，可能增加setData传输的数据量。data 应该仅仅包含与页面渲染相关的数据 · 使用setData 传输大量的数据，通讯耗时与数据量成正比，导致页面更新延迟 可能造成页面更新开销增加。所以setData 仅传输页面需要的数据,使用setData 的特殊Key 实现局部更新 · 短时间内频繁调用setData  (操作卡顿、交互延迟   阻塞通信、页面渲染延迟)，对连续的setData 调用进行合并 · 后台进行页面setData  (抢占前台页面的渲染资源) 例如 活动定时器 再页面切入后台时应该将关闭 避免不正当的使用onPageScroll · 只在必要的时候监听pageScroll 事件 · 避免在onPageScroll 中执行复杂的逻辑 · 避免在onPageScroll 中频繁调用setData · 避免频繁查询节点信息(SelectQuery) 部分场景建议使用节点布局相交状态 ·  监听( IntersectionObserver) 替代 使用自定义组件 在需要频繁更新的场景下，自定义组件的更新只在组件内部进行，不受页面部分内容的复杂性的影响。 使用体验评分功能 在开发过程中使用体验评分可以测试出代码中一些需要优化的点，准备定位到影响性能的原因，很大程序提高页面的性能。

大家都知道，小程序的websocket在切入后台5秒左右，会断开链接，或者长时间无数据收发，也会切断链接。 然而心跳数据并不能完全保证链接的正常， 我在这里说一下我的经验，我初中毕业（真的）,代码方面写的不好不要见笑。 首先，我为了知道当前的网络是否断了，使用了一个标志位比如 : var NetworkIsOK = false; 当首次链接打开时比如socket的 onOpen 事件！在这个事件回调中，将NetworkIsOK = true; 同理，如果网络出现错误，在错误的回调中将NetworkIsOK = false; 建立一个发送 发送区数据 暂存站 var SendBuffer =[]; 将socket的send 函数包装一下，比如取名SendToServer(data) 在SendToServer中，首先检查网络的状态，如果状态是正常的，则直接调用socket.send()发送数据， 如果不是正常的，则重新链接服务器，并在onOpen事件中检查 SendBuffer.length是否大于 0 ，如果有存入的缓冲数据，则依次发送掉， 以下是部分实际代码，请忽略我垃圾的编程水平! [代码]var[代码] [代码]app = getApp();[代码][代码]/**[代码][代码] [代码][代码]* 与服务器进行通信的所有操作在此进行[代码][代码] [代码][代码]*/[代码][代码]var[代码] [代码]Server = {};[代码][代码]Server.socket = [代码][代码]null[代码][代码]; [代码][代码]//socket连接句柄[代码][代码]Server.isOK = [代码][代码]false[代码][代码];  [代码][代码]//服务器连接状态处理数组[代码][代码]Server.event = []; [代码][代码]//事件注册处理数组[代码][代码]Server.url = [代码][代码]'wss://********'[代码][代码]; //服务器地址[代码] [代码]Server.SendBuffer=[]; [代码][代码]//数据包发送缓冲[代码][代码]/**[代码][代码] [代码][代码]* 初始化操作[代码][代码] [代码][代码]*/[代码][代码]Server.Init=[代码][代码]function[代码][代码](apps){[代码][代码]  [代码][代码]console.log([代码][代码]'hello server'[代码][代码]);[代码][代码]   [代码][代码]app = apps;[代码][代码]  [代码][代码]console.log(app);[代码][代码]  [代码][代码]var[代码] [代码]Timer;[代码][代码]  [代码][代码]/**执行服务器连接逻辑 */[代码][代码]    [代码][代码]Server.socket = wx.connectSocket({[代码][代码]      [代码][代码]url:Server.url[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]//132.232.87.229[代码][代码]    [代码][代码]Server.socket.onOpen([代码][代码]function[代码] [代码]() {[代码][代码]      [代码][代码]console.log([代码][代码]'Server open'[代码][代码]);[代码][代码]      [代码][代码]Server.isOK=[代码][代码]true[代码][代码]; [代码][代码]//可以通信了[代码][代码]      [代码][代码]//显示成功[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: [代码][代码]'已连接服务器 '[代码][代码],[代码][代码]      [代码][代码]});[代码][代码]      [代码][代码]Timer = setInterval([代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]Server.startHeart();[代码][代码]      [代码][代码]}, 1000 * 50);[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]Server.socket.onError([代码][代码]function[代码] [代码]() {[代码][代码]      [代码][代码]console.log([代码][代码]'Server error'[代码][代码]);[代码][代码]      [代码][代码]Server.isOK = [代码][代码]false[代码][代码];[代码][代码]      [代码][代码]//显示成功[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: [代码][代码]'服务器连接错误'[代码][代码],[代码][代码]        [代码][代码]icon:[代码][代码]'none'[代码][代码]      [代码][代码]});[代码][代码]      [代码][代码]//Server.reLink();[代码][代码]      [代码][代码]clearInterval(Timer);[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]Server.socket.onClose([代码][代码]function[代码] [代码]() {[代码][代码]      [代码][代码]console.log([代码][代码]'Server close'[代码][代码]);[代码][代码]      [代码][代码]Server.isOK = [代码][代码]false[代码][代码];[代码][代码]      [代码][代码]//显示成功[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: [代码][代码]'服务器连接关闭'[代码][代码],[代码][代码]        [代码][代码]icon: [代码][代码]'none'[代码][代码]      [代码][代码]});[代码][代码]      [代码][代码]//Server.reLink();[代码][代码]      [代码][代码]clearInterval(Timer);[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]Server.socket.onMessage([代码][代码]function[代码] [代码](res) {[代码][代码]      [代码][代码]//Server.socketPress.onMessage(res);[代码][代码]      [代码][代码]var[代码] [代码]message = JSON.parse(res.data);[代码][代码]      [代码][代码]if[代码][代码](!message)  [代码][代码]return[代码][代码]; [代码][代码]//空数据[代码][代码]      [代码][代码]var[代码] [代码]Operator = message.Operator;[代码][代码]      [代码][代码]var[代码] [代码]event=Server.event[Operator];[代码][代码]      [代码][代码]if[代码][代码](event){[代码][代码]        [代码][代码]event(message);  [代码][代码]//实际执行[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]});[代码][代码]} /**服务器重连**/[代码] [代码]Server.reLink=[代码][代码]function[代码][代码](){[代码][代码]  [代码][代码]var[代码] [代码]Timer;[代码][代码]  [代码][代码]/**执行服务器连接逻辑 */[代码][代码]  [代码][代码]Server.socket = wx.connectSocket({[代码][代码]    [代码][代码]url:Server.url[代码][代码]  [代码][代码]});[代码][代码]  [代码][代码]//132.232.87.229[代码][代码]  [代码][代码]Server.socket.onOpen([代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]console.log([代码][代码]'Server open'[代码][代码]);[代码][代码]    [代码][代码]Server.isOK = [代码][代码]true[代码][代码]; [代码][代码]//可以通信了[代码][代码]    [代码][代码]//显示成功[代码][代码]    [代码][代码]wx.showToast({[代码][代码]      [代码][代码]title: [代码][代码]'已连接服务器 '[代码][代码],[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]Server.Login();[代码][代码]//重新注册登入[代码][代码]    [代码][代码]Timer = setInterval([代码][代码]function[代码][代码](){[代码][代码]      [代码][代码]Server.startHeart();[代码][代码]    [代码][代码]},1000*50);[代码][代码]    [代码][代码]//检查缓冲区是否有未发送数据[代码][代码]    [代码][代码]while[代码] [代码](Server.SendBuffer.length>0){[代码][代码]      [代码][代码]var[代码] [代码]data = Server.SendBuffer.pop();[代码][代码]      [代码][代码]//将用户的code发往服务器[代码][代码]      [代码][代码]Server.socket.send({[代码][代码]        [代码][代码]data: data[代码][代码]      [代码][代码]});[代码][代码]      [代码][代码]console.log([代码][代码]'将缓存中的信息发送'[代码][代码],data)[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码][代码]  [代码][代码]Server.socket.onError([代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]console.log([代码][代码]'Server error'[代码][代码]);[代码][代码]    [代码][代码]Server.isOK = [代码][代码]false[代码][代码];[代码][代码]    [代码][代码]//显示成功[代码][代码]    [代码][代码]wx.showToast({[代码][代码]      [代码][代码]title: [代码][代码]'服务器连接错误'[代码][代码],[代码][代码]      [代码][代码]icon: [代码][代码]'none'[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]//Server.reLink();[代码][代码]    [代码][代码]clearInterval(Timer);[代码][代码]  [代码][代码]});[代码][代码]  [代码][代码]Server.socket.onClose([代码][代码]function[代码] [代码]() {[代码][代码]    [代码][代码]console.log([代码][代码]'Server close'[代码][代码]);[代码][代码]    [代码][代码]Server.isOK = [代码][代码]false[代码][代码];[代码][代码]    [代码][代码]//显示成功[代码][代码]    [代码][代码]wx.showToast({[代码][代码]      [代码][代码]title: [代码][代码]'服务器连接关闭'[代码][代码],[代码][代码]      [代码][代码]icon: [代码][代码]'none'[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]//Server.reLink();[代码][代码]    [代码][代码]clearInterval(Timer);[代码][代码]  [代码][代码]});[代码][代码]  [代码][代码]Server.socket.onMessage([代码][代码]function[代码] [代码](res) {[代码][代码]    [代码][代码]//Server.socketPress.onMessage(res);[代码][代码]    [代码][代码]var[代码] [代码]message = JSON.parse(res.data);[代码][代码]    [代码][代码]if[代码] [代码](!message) [代码][代码]return[代码][代码]; [代码][代码]//空数据[代码][代码]    [代码][代码]var[代码] [代码]Operator = message.Operator;[代码][代码]    [代码][代码]var[代码] [代码]event = Server.event[Operator];[代码][代码]    [代码][代码]if[代码] [代码](event) {[代码][代码]      [代码][代码]event(message);  [代码][代码]//实际执行[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码][代码]};[代码][代码]/**[代码][代码] [代码][代码]* 启动心跳[代码][代码] [代码][代码]*/[代码][代码]Server.startHeart=[代码][代码]function[代码][代码](){[代码][代码]  [代码][代码]if[代码] [代码](Server.isOK == [代码][代码]false[代码][代码]) {[代码][代码]    [代码][代码]Server.reLink(); [代码][代码]//重连[代码][代码]    [代码][代码]return[代码][代码];[代码][代码]  [代码][代码]}[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'Heart'[代码][代码], [代码][代码]//操作方式[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]var[代码] [代码]JsonData = JSON.stringify(sendData);[代码][代码]  [代码][代码]// console.log(JsonData);[代码][代码]  [代码][代码]//将用户的code发往服务器[代码][代码]  [代码][代码]Server.socket.send({[代码][代码]    [代码][代码]data: JsonData[代码][代码]  [代码][代码]});[代码][代码]  [代码][代码]Server.addEvent([代码][代码]'HeartOK'[代码][代码],[代码][代码]function[代码][代码](message){[代码][代码]   [代码][代码]// console.log('心跳OK',message);[代码][代码]  [代码][代码]})[代码][代码]}[代码][代码]/**用户登陆 */[代码][代码]Server.Login=[代码][代码]function[代码][代码](ques){[代码][代码]  [代码][代码]var[代码] [代码]userOpenId = wx.getStorageSync([代码][代码]'openId'[代码][代码]);[代码][代码]  [代码][代码]console.log(app);[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'userLogin'[代码][代码], [代码][代码]//操作方式[代码][代码]    [代码][代码]userCode: app.userCode,     [代码][代码]//用户code[代码][代码]    [代码][代码]userInfo: app.userInfo,  [代码][代码]//用户信息[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]if[代码] [代码](userOpenId) {  [代码][代码]//如果缓存中的有效，就用缓存中的openId发过去给服务器[代码][代码]    [代码][代码]sendData.userOpenId = userOpenId;[代码][代码]    [代码][代码]console.log([代码][代码]'调用缓存openID'[代码][代码]);[代码][代码]  [代码][代码]}[代码] [代码]  [代码][代码]var[代码] [代码]JsonData = JSON.stringify(sendData);[代码][代码]  [代码][代码]console.log([代码][代码]"登陆数据:"[代码][代码], JsonData);[代码][代码]  [代码][代码]// console.log(JsonData);[代码][代码]  [代码][代码]//将用户的code发往服务器[代码][代码]  [代码][代码]Server.SendData(sendData);[代码][代码]  [代码][代码]/**如果是黑名单用户，禁止使用 */[代码][代码]  [代码][代码]Server.addEvent([代码][代码]'BanLogin'[代码][代码],[代码][代码]function[代码][代码](message){[代码][代码]    [代码][代码]if[代码] [代码](ques) {[代码][代码]      [代码][代码]ques();[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码][代码]};[代码][代码]/**[代码][代码] [代码][代码]* 注册消息执行处理函数[代码][代码] [代码][代码]*/[代码][代码]Server.addEvent=[代码][代码]function[代码][代码](eventName,eventHandle){[代码][代码]   [代码][代码]Server.event[eventName] = eventHandle;[代码][代码]}[代码][代码]/**注册登入成功处理事件 */[代码][代码]Server.addEvent([代码][代码]'LoginOK'[代码][代码],[代码][代码]function[代码][代码](message){[代码][代码]  [代码][代码]console.log([代码][代码]'LOGIN OK'[代码][代码]);[代码][代码]  [代码][代码]console.log(message);[代码][代码]  [代码][代码]wx.setStorageSync([代码][代码]'openId'[代码][代码],message.openId);[代码][代码]});[代码][代码]/**注册登入失败处理事件 */[代码][代码]Server.addEvent([代码][代码]'LoginError'[代码][代码], [代码][代码]function[代码] [代码](message) {[代码][代码]  [代码][代码]wx.showModal({[代码][代码]    [代码][代码]content: [代码][代码]'登入失败了！部分功能可能无法使用，可能是网络原因，也可能是没有获得授权'[代码][代码],[代码][代码]    [代码][代码]showCancel: [代码][代码]false[代码][代码],[代码][代码]    [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]      [代码][代码]if[代码] [代码](res.confirm) {[代码][代码]        [代码][代码]//console.log('用户点确定');[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码][代码]});[代码][代码]/**[代码][代码] [代码][代码]* 创建帖子[代码][代码] [代码][代码]*/[代码][代码]Server.CreateInvitation=[代码][代码]function[代码][代码](table,image,text,isRichText){[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'CreateInvitation'[代码][代码], [代码][代码]//操作方式[代码][代码]    [代码][代码]isRichText:isRichText,[代码][代码]//是否为富文本[代码][代码]    [代码][代码]Table:table,[代码][代码]//标题[代码][代码]    [代码][代码]Image:image,[代码][代码]//图片地址[代码][代码]    [代码][代码]Text:text,[代码][代码]//文本内容[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]Server.SendData(sendData);[代码][代码]};[代码][代码]/**[代码][代码] [代码][代码]* 从服务器获取贴子[代码][代码] [代码][代码]*/[代码][代码]Server.GetInvitation=[代码][代码]function[代码][代码](id,mode,time,limt,skip,success){[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'GetInvitation'[代码][代码], [代码][代码]//操作方式[代码][代码]    [代码][代码]id:id, [代码][代码]//使用帖子ID的查询方式[代码][代码]    [代码][代码]mode:mode, [代码][代码]//操作模式[代码][代码]    [代码][代码]time:time, [代码][代码]//时间查询时使用的时间[代码][代码]    [代码][代码]limt:limt, [代码][代码]//分页查询时需要获取的贴子数量[代码][代码]    [代码][代码]skip:skip, [代码][代码]//需要跳过的帖子数量[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]//var JsonData = JSON.stringify(sendData);[代码][代码]  [代码][代码]Server.SendData(sendData);[代码][代码]  [代码][代码]/**注册登入成功处理事件 */[代码][代码]  [代码][代码]Server.addEvent([代码][代码]'GetInvitationOK'[代码][代码], [代码][代码]function[代码] [代码](message) {[代码][代码]    [代码][代码]console.log([代码][代码]'GetInvitationOK'[代码][代码]);[代码][代码]    [代码][代码]var[代码] [代码]data = message.data; [代码][代码]    [代码][代码]var[代码] [代码]serverTime=message.serverTime;[代码][代码]    [代码][代码]if[代码][代码](success) success(data,serverTime);  [代码][代码]//回调执行[代码][代码]  [代码][代码]});[代码][代码]}[代码][代码]/**[代码][代码] [代码][代码]* 创建帖子评论[代码][代码] [代码][代码]*/[代码][代码]Server.CreateInvitationComment=[代码][代码]function[代码][代码](_id,text,success){[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'CreateInvitationComment'[代码][代码], [代码][代码]//操作方式[代码][代码]    [代码][代码]id:_id, [代码][代码]//使用帖子ID的查询方式[代码][代码]    [代码][代码]text:text,[代码][代码]//评论内容[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]Server.SendData(sendData);[代码][代码]  [代码][代码]/**注册登入成功处理事件 */[代码][代码]  [代码][代码]Server.addEvent([代码][代码]'CreateInvitationCommentOK'[代码][代码], [代码][代码]function[代码] [代码](message) {[代码][代码]    [代码][代码]console.log([代码][代码]'CreateInvitationCommentOK'[代码][代码]);[代码][代码]    [代码][代码]var[代码] [代码]data = message.data;[代码][代码]    [代码][代码]if[代码] [代码](success) success(data);  [代码][代码]//回调执行[代码][代码]  [代码][代码]});[代码][代码]};[代码][代码]/**[代码][代码] [代码][代码]* 给帖子点赞[代码][代码] [代码][代码]*/[代码][代码]Server.LoveInvitation=[代码][代码]function[代码][代码](_id,success){[代码][代码]  [代码][代码]var[代码] [代码]sendData = {[代码][代码]    [代码][代码]Operator: [代码][代码]'LoveInvitation'[代码][代码], [代码][代码]//操作方式[代码][代码]    [代码][代码]id:_id, [代码][代码]//使用帖子ID的查询方式[代码][代码]  [代码][代码]};[代码][代码]  [代码][代码]Server.SendData(sendData);[代码][代码]  [代码][代码]/**注册登入成功处理事件 */[代码][代码]  [代码][代码]Server.addEvent([代码][代码]'LoveInvitationOK'[代码][代码], [代码][代码]function[代码] [代码](message) {[代码][代码]    [代码][代码]console.log([代码][代码]'LoveInvitationOK'[代码][代码]);[代码][代码]    [代码][代码]if[代码] [代码](success) success();  [代码][代码]//回调执行[代码][代码]  [代码][代码]});[代码][代码]}[代码][代码]/**[代码][代码] [代码][代码]* 向服务器发送数据，数据类型为任意数据,[代码][代码] [代码][代码]* 如果服务器断线，则自动重连服务器，数据被暂存，重连成功后将被发送[代码][代码] [代码][代码]*/[代码][代码]Server.SendData=[代码][代码]function[代码][代码](data){[代码][代码]  [代码][代码]if[代码] [代码](Server.isOK == [代码][代码]false[代码][代码]) {[代码][代码]    [代码][代码]Server.reLink(); [代码][代码]//重连[代码][代码]    [代码][代码]//将未发送数据存入Buffer[代码][代码]    [代码][代码]var[代码] [代码]JsonData = JSON.stringify(data);[代码][代码]    [代码][代码]Server.SendBuffer.push(JsonData);[代码][代码]    [代码][代码]return[代码][代码];[代码][代码]  [代码][代码]}[代码][代码]else[代码][代码]{ [代码][代码]//否则直接给服务器发送数据[代码][代码]    [代码][代码]var[代码] [代码]JsonData = JSON.stringify(data);[代码][代码]    [代码][代码]Server.socket.send({[代码][代码]      [代码][代码]data: JsonData[代码][代码]    [代码][代码]});[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]//暴露接口[代码][代码]module.exports.Server = Server;[代码]

大家都知道产品体验的重要性，而其中最重要的就是加载速度，一个产品如果打开都很慢，可能也就没有后面更多的事情了。这篇文章是我最近项目中的一些加载优化总结，欢迎大家一起讨论交流。 内容包括： 性能指标及数据采集 性能分析方法 性能优化方法 性能优化具体实践 第一部分：性能指标及数据采集 要优化性能首先需要有一套用来评估性能的指标，这套指标应该是是可度量、可线上精确采集分析的。现在来一起看看如何选择性能指标吧。 1. 性能指标 加载的过程是一个用户的感知变化的过程。所以我们的页面性能指标也是要以用户感知为中心的。下面是google定义了几个以用户感知为中心的性能指标。 1.1 以用户感知为中心的性能指标 首先确定页面视觉的变化传递给用户的感知变化关键点： 感知点 说明 发生了吗？ 浏览是否成功。 有用了吗？ 是否有足够的内容呈现给用户。 可用了吗？ 用户是否可以和页面交互了。 好用吗？ 用户和应用交互是否流畅自然。 我这里讲的是加载优化，所以第四点暂时不讨论。下面是感知点相关的性能指标。 First paint(FP) and first contentful paint(FCP) FP: Webview跳转到应用的首次渲染时间。 FCP：Webview首次渲染内容的时间:文本，图像（包括背景图像），非白色画布或SVG。这是用户第一次消费内容的时间。 Chrome支持用Paint Timing API获取这两个值： [代码] performance.getEntriesByType("paint") [代码] First meaningful paint(FMP) 首次绘制有效内容的时间，用来表明这个应用是否绘制了有效内容。比如天气应用可以看到天气了，商品列表可以看到商品了。 Time to Interactive(TTI) 应用可交互时间，这时应用渲染完成且可以响应用户输入的时间。这种情况下JS已经加载完成且主线程处于空闲状态。 Speed index 速度指标：代表填充页面内容的速度。要想降低速度指标分数，您需要让加载速度从视觉上显得更快，也就是渐进式展示。 上面指标对应的感知点如下： 感知点 说明 发生了吗？ FP/FCP 有用了吗？ FMP 可用了吗？ TTI Speed index是个整体效果指标所以没有对应上面的任何一个，但也同时对应任何一个。 对于实际项目中我们选取指标要便于采集，下面是针对我的实际项目（APP内的单页面应用）选取的性能指标。 1.2 实际项目选取的性能指标 Webview加载时间 反应Webview性能。这样就可以更真实的知道我们应用的加载情况。 页面下载时间 反应浏览成功时间。 应用启动时间 反应应用启动完成时间，这个时候页面初始化完成，是JS首次执行完成的时间，应用所需异步请求都已经发出去了。 首次有效绘制内容时间 已经有足够的内容呈现给用户，是首屏所需重要接口返回且DOM渲染完成的时间，这个时间由程序员自行判断。 应用加载完成时间 应用完整的呈现给了用户，这个时候页面中所有资源都已经下载好，包括图片等资源。 这里我们的性能指标确定了，下面看看这些数据怎么采集吧。 2. 数据采集 performance.timing为我们提供页面加载每个过程的精确时间，如下图： [图片] 是不是很完美，这足够了？还不够，我们还需要加上原生APP为我们提供的点击我们应用的时间和我们自己确定的FMP才够完美。 下面是每个指标的获取方法： 公用代码部分 [代码]let performance = window.performance || window.msPerformance || window.webkitPerformance; if (performance && performance.timing) { let t = performance.timing; let navigationStart = t.navigationStart; //跳转开始时间 let enterTime = ""; //app提供的用户点击应用的时间，需要和app沟通传递方式 //... 性能指标部分 } [代码] Webview加载时间 [代码] let webviewLoaded = navigationStart - enterTime; [代码] 注意：enterTime应该是客户端ms时间戳，不是服务器时间。 页面下载时间 [代码] let pageDownLoadedTime = t.responseEnd - navigationStart; [代码] 应用启动时间 [代码]let appStartTime = t.domContentLoadedEventStart - navigationStart; [代码] 首次有效绘制内容时间 这里我们需要在有效绘制后调用 [代码]window._fmpTime = +(new Date())[代码]获取当前时间戳。 [代码]let fmpTime = window._fmpTime - navigationStart; [代码] 应用加载完成时间 [代码]let domCompleteTime = t.domComplete - navigationStart; [代码] 最后在document load以后使用上面代码就可以收集到性能数据了，然后就可以上报给后台了。 [代码]if (document.readyState == 'complete') { _report(); } else { window.addEventListener("load", _report, false); } [代码] 这样就封装了一个简单性能数据采集上报组件，这是非常通用的可以用在类似项目中使用只要按照标准提供enterTime和window._fmpTime就可以。 3. 数据分析 有了上面的原始数据，我们需要一些统计方法来观察性能效果和变化趋势，所以我们选取下面一些统计指标。 平均值 注意在平均值计算的时候要设置一个取值范围比如：0～10s以防脏数据污染。 平均值的趋势用折线图展示： [图片] 分布占比 可以清晰的看到用户访问时间的分布,这样你就可以知道有多少用户是秒开的了。 分布占比可以使用折线图、堆积图、饼状图展示： [图片] [图片] [图片] 第二部分：性能分析方法 上面有了性能指标和性能数据，现在我们来学习一下性能分析的一些方法，这样我们才能知道性能到底哪里不行、为什么不行。 1. 影响性能的外部因素 分析性能最重要的一点要确定外部因素。经常会有这种情况，有人反应页面打开速度很慢，而你打开速度很快，其实可能并不是页面性能不好，只是外部因素不同而已。 所以做好性能优化不能只考虑外部因素好的情况，也要让用户能在恶劣条件（如弱网络情况）下也有满足预期的表现。下面看看影响性能的外部因素主要有哪些。 1.1 网络 网络可以说是最影响页面性能最重要的外部因素了，网络的主要指标有： 带宽：表示通信线路传送数据的能力，即在单位时间内通过网络中某一点的最高数据率，单位有bps(b/s)、Kbps(kb/s)、Mbps(mb/s)等。常说的百兆带宽100M就是100Mbps,理论下载最大速度12.5MB/s。 时延：Delay，指数据从网络的一端传送到另一端所需的时间，反应的网络畅通程度。 往返时间RTT：Round-Trip Time，是指从发送端发送数据到接收端接受到确认的总时间。我们经常用的ping命令就是用这个指标表明我们和目标主机的网络顺畅程度。比如我们要对比几个翻墙代理哪里个好，我们就可以ping一下，看看这几个代理哪个RTT低来作出选择。 [图片] 这三个主要指标中后面两个类似，在Chrome中模拟网络主要用设置带宽和网络延迟（往返时间RTT出现最小延迟）来模拟网络。我们电脑一般用的是WI-FI（百兆），那么我们模拟网络，主要模拟常见3G（1兆）、4G（10兆）网络就好，这样我们就覆盖了三个级别的网络情况了。 可以在Chrome的NetWork面板直接选取Chrome模拟好的网络,这个项目network-emulation-conditions中有默认模拟网络的速度。 [图片] 如果默认不满足，你也可以自己配置网络参数，在设置面板的Throttling。 [图片] 上面设置的3G接近100KB/s,4G 0.5MB/s。你可以根据自己的需要来调整这个值，这两个值的差异应该能很好两种不同的网络情况了。设置模拟网络只要能覆盖不同的带宽情况就好，也不用那么真实因为真实情况很复杂。网络部分就介绍完了，接着看其他因素。 1.2 用户机器性能 经常会有这种情况，一个应用在别人手机上打开速度那么快、那么流畅，为啥到我这里就不行了呢？原因很简单人家手机好，自然有更好的配置、更多的资源让程序运行的更快。 Chrome现在非常强大你可以通过performance面板来模拟cpu性能。也可以让你看到应用在低性能机器上的表现。 [图片] 1.3 用户访问次：首次访问、2次访问、发版本访问 用户访问次数也是分析性能的重要外部因素，当用户第一次访问要请求所有资源，后面在访问因为有些资源缓存了访问速度也会不同。当我们开发者又发版本，会更新部分资源，这样访问速度又会跟着变。因为缓存的效果存在，所以这三种情况要分开分析。同时也要注意我们是否要支持用户离线访问。 通过在Chrome中的Network面板中选中Disable cache就可以强制不缓存了，来模拟首次访问。 [图片] 1.4 因素对选取 上面的外部因素虽然只有3种但相乘也有不少情况，为了简化我们性能分析，要选取代表性的因素去分析我们的性能。下面是指导因素对： 网络：WIFI 3G 4G 用户访问状态：首次 2次 这样有6种情况不算特别多，也能很好反应我们应用在不同情况下的性能。 2. devtools具体分析性能 通过devtools可以观察在不同外部因素下代码具体加载执行情况，这个工具是我们性能分析中最重要的工具，加载优化这里我们主要关注两个面板：Network、Performance。 先看Network面板的列表页： [图片] 这是网络请求的列表，右击表头可以增删属性列，根据自己需要作出调整。 下面我介绍网络列表中的几个重点属性： Protocol:网络协议，h2说明你的请求是http2协议的了。 Initiator:可以查到这个资源是哪里引用的。 Status:网络状态码。 Waterfall:资源加载瀑布流。 下面在看看Network面板中单个请求的详情页： [图片] 这里可以看到具体的请求情况，Timing面板是用来观察这次网络的请求时间占用的具体情况，对我们性能分析非常重要。具体每个时间段介绍可以点击Explanation。 虽然Network面板可以让我看到了网络请求的整体和单个请求的具体情况，但Network面板整体请求情况看着并不友好，而且也只有加载情况没有浏览器线程的执行情况。下面看看强大的Performance面板的吧。 [图片] 这里可以清晰看到浏览器如何加载资源如何解析html、解析css、执行js和渲染绘制的。 Performance简直太强大了，所以请你务必要掌握它的使用，这里篇幅有限，只能介绍了个大概，建议到google网站仔细学习一下。 3. Lighthouse整体分析性能 使用Lighthouse可以对应用做整体性能分析评分，并且会给我们专业的指导建议。我们可以安装Lighthouse插件或者安装Lighthouse npm包来使用它。 检测结果中可以看到很多性能指标的分值和建议。你也可以去测试下你的应用表现。 4. 线上用户统计分析性能 虽然使用devtools和Lighthouse可以知道页面的性能情况，但我们还要观察用户的真实访问情况，这才能真实反映我们应用的性能。线上数据采集分析，第一步部分已经介绍过了，这里就不在多说了。优化完看看自己对线上数据到底造成了什么影响。 上面介绍了性能分析的方法，可以很好帮你去分析性能，有了性能分析的基础，下面我们在来看看怎么做性能优化吧。 第三部分：性能优化方法 1. 微观：优化单次网络请求时间 在性能分析知道Network面板可以看到单次网络请求的详情 [图片] 从图可以看出请求包括：DNS时间、TCP时间、SSL时间（https）、TTFB时间（服务器处理时间）、ContentLoaded内容下载时间，所以有下面公式： [代码]requestTime = DNS + TCP + SSL+ TTFB +ContentLoaded [代码] 所以只要我们降低这里面任意一个值就可以降低单次网络请求的时间了。 2. 宏观：优化整体加载过程 加载过程的优化就是不断让第一部分的性能指标感知点提前的过程。通过关键路径优化、渐进式展示、内容效率优化手段，来优化资源调度。 2.1 加载过程 在介绍页面加载过程，先看看渲染绘制过程： [图片] Javascript:操作DOM和CSSOM。 样式计算：根据选择器应用规则并计算每个元素的最终样式。 布局：浏览器计算它要占据的空间大小及其在屏幕的位置。 绘制：绘制是填充像素的过程。 合成。由于页面的各部分可能被绘制到多层，合成是将他们按正确顺序绘制到屏幕上，正确渲染页面。 渲染其实是很复杂的过程这里只简单了解一下，想深入了解可以看看这篇文章。 了解了渲染绘制过程，在学习加载过程的时候就可以把它当作黑盒了，黑盒只包括渲染过程从样式计算开始，因为上面的Javascript主要是用来输入DOM、CSSOM。 浏览器加载过程： Webview加载 下载HTML 解析HTML：根据资源优先级加载资源并构建DOM树 遇到加载同步JS资源暂停DOM构建，等待CSSOM树构建 CSS返回构建CSSOM树 用已经构建的DOM、CSSOM树进行渲染绘制 JS返回执行继续构建DOM树，进行渲染绘制 当HTML中的JS执行完成，DOM树第一次完整构建完成触发：domContentLoaded 当所有异步接口返回后渲染制完成，并且外部加载完成触发：onload 注意点： CSSOM未构建好页面不会进行任何渲染 脚本在文档的何处插入，就在何处执行 脚本会阻塞DOM构建 脚本执行要等待CSSOM构建完成后执行 下面看看如何在加载过程提前感知点。 2.2 优化关键路径 把关键路径定义为：从页面请求到应用启动完成这个过程，也就是到JS执行完domContentLoaded触发的过程。 主要指标有： 关键资源: 影响应用启动完成的资源。 关键资源的数量：这个过程中加载的资源数据。 关键路径长度：关键资源请求的串行长度。 关键字节的数量：关键资源大小总和。 [图片] 上图关键资源有：html、css、3个js。关键资源数量：5个。关键字节的数量：5个资源的总大小。关键路径长度：2，html+剩余其他资源。 关键优化路径优化，就是要降低关键路径长度、关键字节的数量，在http1时代还要降低关键资源的数量，现在http2资源数不用关心。 2.3 优化内容效率 主要是关注的应用加载完成这个时间点，由首页加载完成所需的资源量决定。我们要尽量减少加载资源的大小，避免不必要加载的资源，比如做一些图片压缩懒加载尽快让应用加载完成。 主要指标有： 应用加载完成字节数：应用加载完成，所需的资源大小。 这个指标可以从Chrome上观察到，不过要剔除prefetch的资源。这个指标一般不太稳定，因为页面展示的内容不太相同，所以最好在相同内容相同情况下对比。 2.4 渐进式展示 从上面的加载过程中，可以知道渲染是多次的。那样我们可以先让用户看到一个Loading提示、先展示首屏内容。Loading主要优化的是FP/FCP这两个指标，先展示首屏主要是优化FMP。 3. 缓存：优化多次访问 缓存重点强调的是二次访问、发版访问、离线访问情况下的优化。 通过缓存有效减少二次访问、发版访问所要加载资源，甚至可以让应用支持离线访问，而且是对弱网络环境是最有效的手段，一定要善于使用缓存这是你性能优化的利器。 4. 优化手段 优化手段我归纳为5类：small（更小）、pre（更早）、delay（更晚）、concurrent（并发）、cache（缓存）。性能优化就是将这5种手段应用于上面的优化点：网络请求优化、关键路径优化、内容效率优化、多次访问优化。 5. 构建自己可动态改变的优化方法表和检查表 Checklist包括两部分，一个优化方法表，另外一个优化方法检查表。优化方法表是让我们对我们的性能优化方法有个评估和认识，优化方法检查表的好处是，可以清晰的知道你的项目用了哪些优化方法，还有哪些可以尝试做进一步优化，同时作为一个新项目的指导。 优化名：优化方法的名字。 优化介绍：对优化方法做简单的介绍。 优化点：网络请求优化、关键路径优化、内容效率优化、多次访问优化。 优化手段：small、pre、delay、concurrent、cache。 本地效果：选取合适的因素对，进行效果分析，确定预期作用大小。 线上效果：线上效果对比，确定这个优化方案的有效性及实际作用大小。 这样我们就能大概了解了这个效果的好处。我们新引入了一种优化方法都要按这张表的方法进行操作。 优化方法表： 名称 内容 优化名 JS压缩 优化介绍 压缩JS 优化点 关键路径优化 优化手段 small 本地效果 具体本地效果对比 线上效果 线上数据效果 上面是以JS压缩为例的优化方法表。 优化方法检查表： 分类 优化点 是否使用 不适用 问题说明 small JS压缩 √ pre preload/prefetch √ 不需要 通过这张表就能看出我们使用了哪些方法，还有哪些没使用，哪些方法不适用我们。可以很方便的应用于任何一个新项目。 第四部分：性能优化具体实践 现在就看看我在项目中的具体实践吧，项目中使用的技术栈是：Webpack3+Babel7+Vue2，下面我按照优化手段介绍： 1. small（更小） scope-hoisting scope-hoisting(作用域提升)：Webpack分析出模块之间的依赖关系，把可以合并到一起模块合并到一起，但不造成冗余，因此只有被一个地方引用的代码可以合并到一起。这样做函数声明会变少，可以让代码更小、执行更快。 这个功能从Webpack3开始引入,依赖于ES2015模块的静态分析，所以要把Babel的preset要设置成[代码]"modules": false[代码]： [代码] ... [ "@babel/preset-env", { "modules": false ... [代码] Webpack3要引入ModuleConcatenationPlugin插件，Webpack4 product模式已经预置该插件： [代码]... new webpack.optimize.ModuleConcatenationPlugin(), ... [代码] [图片] 如上图，不压缩的JS中可以文件中看到CONCATENATED MODULE这就说明生效了。 tree-shaking 摇树：通常用于描述移除JavaScript上下文中的未引用代码，在webpack2中开始内置。依赖于ES2105模块的静态分析，所以我们使用babel同样要设置成 [代码]"modules": false[代码]。 [图片] 如上图，不压缩的JS中可以文件中看到unused harmony这就说明摇树成功了。 code-splitting(按需加载) 代码分片，将代码分离到不同的js中，进行并行加载和按需加载。 代码分片主要有两种： 按需加载：动态导入 vendor提取：业务代码和公共库分离 这里只介绍按需加载部分，动态导入Webpack提供了两个类似的技术。1. Webpack特定的动态导入require.ensure。2.ECMAScript提案[代码]import()[代码]。这里我只介绍我使用的[代码]import()[代码]这种方法。因为是推荐方法。 代码如下： Babel配置支持动态导入语法： [代码]... "@babel/plugin-syntax-dynamic-import", ... [代码] 代码中使用： [代码]... if(isDevtools()){ import(/* webpackChunkName: "devtools" */'./comm/devtools').then((devtools)=>{ let initDevtools = devtools.default; initDevtools(); }); } ... [代码] polyfill按需加载 我们代码是ES2015以上版本的要真正能在浏览器上能使用要通过babel进行编译转化，还要使用polyfill来支持新的对象方法,如：Promise、Array.from等。对于不同环境来说需要polyfill的对象方法是不一样的，所以到了Babel7支持了按需加载polyfill。 下面是我项目中的配置，看完以后我会介绍一下几个关键点： [代码]module.exports = function (api) { api.cache(true); const sourceType = "unambiguous"; const presets = [ [ "@babel/preset-env", { "modules": false, "useBuiltIns": "usage", // "debug": true, "targets": { "browsers": ["Android >= 4.0", "ios >= 8"] } } ] ]; const plugins= [ "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-strict-mode", "@babel/plugin-proposal-object-rest-spread", [ "@babel/plugin-transform-runtime", { "corejs": false, "helpers": true, "regenerator": false, "useESModules": false } ] ]; return { sourceType, presets, plugins } } [代码] @babel/preset-env preset是预置的语法转化插件的集合。原来有很多preset如：@babel/preset-es2015。直到出现了@babel/preset-env，它可以根据目标环境来动态的选择语法转化插件和polyfill，统一了preset众多的局面。 [代码]targets[代码]：是我们用来设置环境的，我的应用支持移动端所以设置了上面那样,这样就可以只加载这个环境需要的插件了。如果不设置[代码]targets[代码]通过@babel/preset-env引入的插件是 @babel/preset-es2015、@babel/preset-es2016和@babel/preset-es2017插件的集合。 [代码]"useBuiltIns": "usage"[代码]:将useBuiltIns设置为usage就会根据执行环境和代码按需加载polyfill。 @babel/plugin-transform-runtime 和polyfill不同，@babel/plugin-transform-runtime可以在不污染全局变量的情况下，使用新的对象和方法，并且可以移除内联的Babel语法转化时候的辅助函数。 我们这里只用它来移除辅助函数，不需要它来帮我处理其他对象方法，因为我们在开发应用不是做组件不怕全局污染。 sourceType:“unambiguous” 一个文件混用了ES2015模块导入导出和CJS模块导入导出。需要设置[代码]sourceType:"unambiguous"[代码],需要让babel自己猜测类型。如果你的代码都很合规不用加这个的。 压缩：js、css js、css压缩应该最基本的了。我在项目中使用的是[代码]UglifyJsPlugin[代码]和[代码]optimize-css-assets-webpack-plugin[代码]，这里不做过多介绍。 压缩图片 通过对图片压缩来进行内容效率优化，可以极大的提前应用加载完成时间，我在项目中做了下面两件事。 广告图片，限制大小50K以内。原来基本会上传超过100K的广告图。 项目中图片使用的[代码]img-loader[代码]对图片进行压缩。 HTTP2支持，去掉css中base64图片 先看看HTTP1.1中的问题： 同一域名浏览器做了TCP连接数的限制，如：Chrome中只能有6个。 一个TCP连接只能同时处理一个请求响应。 在看看HTTP2的优势： 二进制分帧：HTTP2的性能增强的核心在于新的二进制分帧层。帧是最小传输单位，帧组成消息，数据以消息形式发送。 多路复用：所有请求在一个连接上完成，可以支持多数据流混合传输，在接收端拼接。 头部压缩：使用HPACK对头部压缩，网络中可以传递更少的数据。 服务端推送：服务端可以主动向客户端推送资源。 有了HTTP2我们在也不用担心资源数量，不用在考虑减少请求了。像：base64图片打到css、合并js、域名分片、精灵图都不要去做了。 这里我把原来base64压缩图片从css中去除了。 2. pre（更早） preload prefetch preload：将资源加载和执行分离，你可以根据你的需要指定要强制加载的资源，比如后面css要用到一个字体文件就可以在preload中指定加载，这样提高了页面展示效果。建议把首页展示必须的资源指定到preload中。 prefetch：用来告诉浏览器我将来会用到什么资源，这样浏览器会在空闲的时候加载。比如我在列表页将详情页js设置成prefetch，这样在进入详情页的时候速度就会快很多，因为我提前加载好了。 这里我用的是来使用[代码]preload-webpack-plugin[代码]preload和prefetch的。 代码： [代码]... const PreloadWebpackPlugin = require('preload-webpack-plugin'); ... new PreloadWebpackPlugin({ rel: 'prefetch', include: ['devtools','detail','VideoPlayer'] }), ... [代码] dns-prefetch preconnect dns-prefetch：在页面中请求该域名下资源前提前进行dns解析。preconnect：比dns-prefetch更近一步连TCP和SSL都为我们处理好了。 使用注意点：1. 考虑到兼容性问题，我们对一个域名两个都设置 2. 对于应用中不一定会使用的域名我们设置dns-prefetch就好以防占用资源。 代码如下： [代码]... <link rel="preconnect" href="//game.gtimg.cn"> ... <link rel="dns-prefetch" href="//game.gtimg.cn"> ... [代码] 3. delay（更晚） lazyload 对图片进行懒加载，我使用的是[代码]vue-lazyload[代码]。 代码如下： [代码]... import VueLazyload from 'vue-lazyload' ... Vue.use(VueLazyload, { preLoad: 1.3, error: '...', loading: '...', attempt: 1 }); ... <div class='v-fullpage' v-lazy:background-image="item.roomPic" :key="item.roomPic"></div> ... [代码] 这里的:key特别注意，如果你的列表数据是动态变化的一定要设置，否则图片是最开始一次的。 code-splitting(按需加载) code-splitting(按需加载)前面已经介绍过这里只是强调下它的delay作用，不使用的部分先不加载。 4. concurrent（并发） HTTP2 HTTP2前面已经应用在了css体积减少，这里主要强调它的多路复用。需要大家看看自己的项目是否升级到HTTP2，是否所有资源都是HTTP2的，如果不是的，需要推进升级。 code-splitting(vendor提取) vendor提取是把业务代码和公共库分离并发加载，这样有两个好处： 下次发版本这部分不用在加载（缓存的作用）。 JS并发加载：让先到并在前面的部分先编译执行，让加载和执行并发。 Webpack配置： [代码] ... entry:{ "bundle":["./src/index.js"], "vendor":["vue","vue-router","vuex","url","fastclick","axios","qs","vue-lazyload"] }, ... new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }), ... [代码] 5. cache（缓存） HTTP缓存 HTTP缓存对我们来说是非常有用的。 下面介绍下HTTP缓存的重点： Last-Modified/ETag：用来让服务器判断文件是否过期。 Cache-Control：用来控制缓存行为。 max-age: 当请求头设置max-age=deta-time，如果上次请求和这次请求时间小于deta-time服务端直接返回304。当响应头设置max-age=deta-time，客户端在小于deta-time使用客户端缓存。 强制缓存：这主要把不经常变化的文件设置强制缓存，这样就不需要在发起HTTP请求了。通过设置响应头Cache-Control的max-age设置。 如果像缓存很久设置一个很大的值，如果不想缓存设置成：Cache-Control：no-cahce。 协商缓存：如果没有走强制缓存就要走协商缓存，服务器根据Last-Modified/ETag来判断文件是否变动，如果没变动就直接返回304。 这里我们做的就是让运维调整资源的强制缓存时间，前端在结合文件hash命名就可以进行资源更新了。 ServiceWorker ServiceWorker是Web应用和浏览器之间的代理服务器，可以用来拦截网络来进行资源缓存、离线体验，还可以进行推送通知和后台同步。功能非常强大，我们这里使用的是资源缓存功能，看看和HTTP缓存比有什么优势： 功能多：支持离线访问、资源缓存、推送通知、后台同步。 控制力更强：缓存操作+络拦截功能都由开发者控制，可以做出很多你想做的事情比如动态缓存。 仅HTTPS下可用，更安全。 看看我在项目中的使用： js使用HTTP缓存和ServiceWorker双重缓存在cacheid变化后依然可以缓存。 不得对service-worker.js缓存，因为我们要用这个更新应用。在Chrome中看到请求的cache-control被默认设置了no-cache。 我们项目中使是Google的Workbox,Webpack中插件是 workbox-webpack-plugin。 [代码]... const WorkboxPlugin = require('workbox-webpack-plugin'); ... new WorkboxPlugin.GenerateSW({ cacheId: 'sw-wzzs-v1', // 缓存id skipWaiting: true, clientsClaim: true, swDest: './html/service-worker.js', include: [/\.js(.*)$/,/\.css$/], importsDirectory:'./swmainfest', importWorkboxFrom: 'local', ignoreUrlParametersMatching: [/./] }), ... [代码] localStorage localStorage项目中主要做接口数据缓存。通常localStorage是没有缓存时间的我们将其封装成了有时间的缓存，并且在应用启动的时候对过期的缓存清理。 code-splitting(vendor提取) 这里在提vendor提取主要是说明它发版本时候的缓存价值，前面介绍过了。 6. 整体优化效果评价 经过上面的优化，看看效果提升吧。 主要增长点来源： 关键路径资源：698.6K降低到538.6K降低22.9% 内容效率提升：广告图由原来的基本100K以上降低到现在50K以下，页面内图片全部走强制缓存。 缓存加快多次访问速度：js+css强制缓存加ServiceWorker。 线上数据效果： 页面下载时间： 平均值下降：25.74%左右 应用启动完成时间： 平均值下降：33.45%左右 秒开占比提高：23.42%左右 应用加载完成时间： 平均值下降：48.02%左右 第六部分：总结 以上就是我在加载优化方面的一些总结，希望对您有所帮助，个人理解有限，欢迎一起讨论交流。