京东首页前端架构设计

• CSS sprite • JS combo

14
移动端兼容
• 对移动端进行了特殊优化和处理，焦点图iPad效果展示

15
开发模式
• 团队协作
– 多人并行开发
• 业务拆分
– 顶/尾部：公共头尾 – 首屏：焦点图 – 二屏：分楼层
• widget模块化开发
– vm/js/scss/json
– 流程图如下

7
加载策略

8
加载策略
• 楼层初始化
– 楼层数据：包括html结构和当前楼层的脚本 – 请求的数据渲染到页面，并且初始化楼层脚本 – 具体代码
• <div class="w floor lazy-fn" data-title="美妆" id="lazy-cosmetics" data-path="floor2floor_index.js" data-time="c64202ba3511eea016b9053308cbffa9"></div>
9
加载策略
• 好处
– 大大降低首屏页面内容大小，缩短页面加载完成时间 – 页面大约共有3288个元素：首屏846+楼层2442 – 只加载首屏，可减少74%元素量
– 数据接口优先请求走本地localStorage，减少后台服务器压力 – 楼层之间数据和脚本完全解耦
– 非常有利于后期维护 – 可随意定时上线和下线运营楼层，比如618大促

18
工程化
• Windows可视化工具

19
工程化
• 前端模块构建平台

20
总结
页加灾性移开工
面载备能动发程
静策策优端模化
态略略化兼式
化
容

21
谢谢！ QA

谢谢！

谢谢！

谢谢！

谢谢！

谢谢！
• 4.垫底数据
– 实时推荐数据接口，布署在集群上，数据实时更新，不能使用服务器缓 存和本地缓存，接口一旦挂掉，此时需要使用预设好的垫底数据
• 5.接口下线
– 必要时候，下线非核心业务接口和非核心功能

13
性能优化
• CSS样式文件内联(CDN)
– 基调网络ABTest，内联比外联可用性高5%
– 给每个楼层设置默认高度，到达这个区域时请求当前楼层数据文件，对 楼层数据文件进行md5(即data-time)，并把楼层数据和data-time localStorage至本地，如果页面上的data-time和本地的data-time值一 样，直接取localStorage，如果不一样，才重新ajax请求数据

10
加载策略
ห้องสมุดไป่ตู้
11
灾备策略
本地缓存 二次请求 双层接口 垫底数据 接口下线

12
灾备策略
• 1.本地缓存
– 接口挂掉，优先使用本地localStorage的缓存数据
• 2.二次请求
– 本地无localStorage缓存数据，再次发出请求
• 3.双层接口
– 部分接口会上线至CDN，优先使用CDN接口，X秒未请求到数据，再次 请求时才用源接口

16
工程化
• JDF定义
– 京东前端集成解决方案，包括命令行工具，前端模块，开发流程，前端 组件，前端文档。

17
工程化
• JDF工具进展
– 图片支持转换为Base64 – 在PC端调试H5页面(内嵌weinre远程调试工具) – 压缩js/css/png可使用多线程(减少多文件项目压缩时间) – 优化node-sass、ws等依赖node-gyp的模块，独立封装，提高安装速度 – widget模块依赖自动下载安装 – 支持文件格式化(htmllint、csslint、jslint)
• <div class="w floor lazy-fn" data-title="服饰" id="lazy-clothes" data-path="floor1floor_index.js" data-time="5e0c42256f2fe7b4394edf7cb526a9ad"></div>

大纲
一．面临挑战 二．页面静态化 三．加载策略 四．灾备策略 五．性能优化 六．移动端兼容 七．开发模式 八．工程化
面临挑战

2
面临挑战
• 大流量高并发 • 页面Dom元素剧增
– 楼层tab标签由5个到9个
• 页面整体高度翻倍
– 由4820到9862px
• 页面图片量增加
– 80%的位置是图片展示
• 首屏加载时间要有保证
– 加载时间不能增加
•…

3
页面静态化

4
页面静态化

5
加载策略
• 一般的前端页面加载策略
– 后端从数据库取出数据，拼装好页面，浏览器加载页面所有HTML元素， 并对图片懒加载(lazyload)

6
加载策略
• 我们的加载策略
– 楼层异步加载+本地缓存 把页面按楼层进行拆分，把首屏做为页面框架主体，每个楼层的数据， 单独做成数据接口，异步加载。