京喜跨端小程序开发实践

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
1. 京喜跨端小程序开发实践 沙冥冥 京东·凹凸实验室 高级前端开发工程师
2.
3. 沙冥冥 京东·凹凸实验室 负责京喜首⻚技术架构及核心开发
4. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
5. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
6. 京喜社交电商平台 整包体积 20M 100+ 开发者 峰值近亿级请求量
7. 京喜社交电商平台 微信小程序 QQ小程序 京东小程序 H5
8. 京喜社交电商平台 • 高效的跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控
9. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
10. 跨端实践 X Ta r o
11. 跨端实践 | 项目结构 首⻚项目 • 多技术栈兼容 • 单⻚编译 • 同步的多端调试 完整小程序项目 多端适配 业务开发 其他业务 编译构建 目标代码
12. 跨端实践 | 跨端语法 • 内置环境变量 • 条件编译 • 多端文件后缀 if(process.env.TARO_ENV === 'weapp'){ } if(process.env.TARO_ENV === 'h5'){ }
13. 跨端实践 | 跨端语法 • 内置环境变量 • 条件编译 • 多端文件后缀 /* #ifdef weapp /* #endif */ /* #ifdef h5 /* #endif */ */ */
14. 跨端实践 | 跨端语法 • 内置环境变量 login / • 条件编译 ├── login.weapp.js • 多端文件后缀 └── login.js ├── login.h5.js
15. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
16. 首⻚性能优化 | 问题 • 虚拟列表 • 低端机降级 • 体验评分
17. 首⻚性能优化 | 虚拟列表——组成 外层容器 onScroll() + update()
18. 首⻚性能优化 | 虚拟列表——问题 • 结构改造 • 卡片高度计算 • 白屏优化
19. 首⻚性能优化 | 虚拟列表——结构改造 ⻚面容器 外层容器 onScroll() update() onScroll() Event update()
20. 首⻚性能优化 | 虚拟列表——卡片高度计算 1 2 3 SelectorQuery vs compute 4 5 6 7
21. 首⻚性能优化 | 虚拟列表——卡片高度计算
22. 首⻚性能优化 | 虚拟列表——卡片高度计算 let sum = 345; if(a){ if(b){ if(c){ if(d){ // sum sum sum sum sum +=50; +=50; +=75; +=50; } } } }
23. 首⻚性能优化 | 虚拟列表——卡片高度计算
24. 首⻚性能优化 | 虚拟列表——卡片高度计算 1rpx => 0.42px => 绘制 1rpx => 0.426667px => 计算
25. 首⻚性能优化 | 虚拟列表——卡片高度计算 let sum = [345]; if if if if (a) (b) (c) (d) { { { { sum.push(50); sum.push(50); sum.push(75); sum.push(50); } } } } if (process.env.TARO_ENV === 'weapp') { return sum.reduce((pre, next) => { return pre + transformToRpx(Math.floor(transformFromRpx(next))) }, 0) } else { return sum.reduce((pre, next) => pre + next, 0) }
26. 首⻚性能优化 | 虚拟列表——白屏优化 ⻣架图 ⻣架图 ⻣架图
27. 首⻚性能优化 | 虚拟列表——白屏优化
28. 首⻚性能优化 | 虚拟列表——白屏优化 • 结构改造 • 卡片高度计算 • 白屏优化
29. 首⻚性能优化 | 低端机降级 • 划分标准 • 优化内容
30. 首⻚性能优化 | 低端机降级——标准 • 未知+低端:8%;高端机:92%
31. 首⻚性能优化 | 低端机降级——标准 • 部分被划分为高端机的机型体验卡顿 • 与产品渠道的用户划分比例不符
32. 首⻚性能优化 | 低端机降级——标准 样机校验 + 参数调整 未知+低端:33% ; 高端机:67%
33. 首⻚性能优化 | 低端机降级——改造内容 • 轮播图改单图 • 动图改静图 • 大图改小图 • 去除跨模块关联 • 去除时间关联
34. 首⻚性能优化 | 体验评分 • 首屏dom数 • 图片大小 • setData调用频率、内容大小
35. 首⻚性能优化 | 总结 • 虚拟列表 ——结构改造/卡片高度计算/白屏优化 • 低端机降级 ——划分标准/优化内容 • 体验评分
36. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
37. 代码体积优化 | 背景
38. 代码体积优化 | 问题 瘦身体积 === 小程序代码包文件体积 ?
39. 代码体积优化 | 标准 • 详情 -> 基本信息 -> 上次预览/上传
40. 代码体积优化 | 常⻅且收益大 • 代码分包 • 依赖分析:移除未使用内容 • 避免使用本地资源(图片) • 所有类型都进行压缩和注释清理
41. 代码体积优化 | 目录 • 继承属性 • 样式补全 • 样式命名优化
42. 代码体积优化 | 继承属性 border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-weight font-style font-variant font letter-spacing list-style-type list-style-position list-style-image list-style line-height orphans page-break-inside quotes text-align text-indent text-transform visibility white-space widows word-spacing @font-face 减少10KB,占项目总量630KB的1.6%
43. 代码体积优化 | 样式补全 .box { display: flex; display: -webkit-flex; }
44. 代码体积优化 | 样式补全 样式补全 项目代码 代码上传 样式补全 项目代码
45. 代码体积优化 | 样式补全 开发者自己补全 开启编译补全 减少58KB,占项目总量630KB的9%
46. 代码体积优化 | 样式命名优化 UglifyJs function a(){}; function b(){}; function c(){};
47. 代码体积优化 | 样式命名优化 <view className="banner">模板</view> <view className="a">模板</view> .banner { /* 样式定义 */ } .a { /* 样式定义 */ }
48. 代码体积优化 | 样式命名优化——CssModule .banner { /* 样式定义 */ } export default { banner : 'a' } /* 编译生成 */ import styles from ‘./index.module.scss.map.js' <view className=“{{styles.banner}}“>模板</view>
49. 代码体积优化 | 样式命名优化 weapp-css-modules 单字⺟编排 <view className="a">模板</view> .a { /* 样式定义 */ } 移除map文件 减少50KB,占项目总量630KB的7.9%
50. 代码体积优化 | 效果 631KB • 继承属性 • 样式补全 • 样式命名优化 wxs json 465KB wxml wxs wxss json wxml wxss js js 瘦身前 瘦身后
51. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统监控 • 总结
52. 系统监控 | Badjs监控 Kibanna • 数量大 • 模块划分不明显 • 实时反馈信息少
53. 系统监控 | Badjs监控 内容平台 上报 告警 监控平台
54. 系统监控 | 可用率监控 • 正确/错误/总数 • 周期性
55. 目录 • 项目背景 • 跨端实践 • 首⻚性能优化 • 代码体积优化 • 系统稳定性提升 • 总结
56. 总结 性能优化 虚拟列表 跨端实践 低端机降级 项目结构 体验评分 跨端语法 体积优化 系统监控 继承属性 BadJS监控 样式补全 可用率监控 样式命名优化
57. 总结 在因地制宜和极限优化里探索, 论怎么戴上小程序的镣铐⻜起
58.
59.

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-17 00:41
浙ICP备14020137号-1 $Map of visitor$