京东首页前端架构设计.ppt

工程化 前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com 谢谢！ 京东首页前端架构设计 关于我 刘威 （@putaoshu：微博，微信，github） 现就职于京东用户体验设计部（JDC），负责前端架构组 曾工作于百度、新浪 * 大纲 面临挑战 页面静态化 加载策略 灾备策略 性能优化 移动端兼容 开发模式 工程化 面临挑战 * 面临挑战 大流量高并发 页面Dom元素剧增 楼层tab标签由5个到9个 页面整体高度翻倍 由4820到9862px 页面图片量增加 80%的位置是图片展示 首屏加载时间要有保证 加载时间不能增加 … * 页面静态化 * 页面静态化 * 加载策略 一般的前端页面加载策略 后端从数据库取出数据，拼装好页面，浏览器加载页面所有HTML元素，并对图片懒加载(lazyload) * 加载策略 我们的加载策略 楼层异步加载+本地缓存 把页面按楼层进行拆分，把首屏做为页面框架主体，每个楼层的数据，单独做成数据接口，异步加载。 给每个楼层设置默认高度，到达这个区域时请求当前楼层数据文件，对楼层数据文件进行md5(即data-time)，并把楼层数据和data-time localStorage至本地，如果页面上的data-time和本地的data-time值一样，直接取localStorage，如果不一样，才重新ajax请求数据 流程图如下 * 加载策略 * 加载策略 楼层初始化 楼层数据：包括html结构和当前楼层的脚本 请求的数据渲染到页面，并且初始化楼层脚本 具体代码 div class=w floor lazy-fn data-title=美妆 id=lazy-cosmetics data-path=floor2-floor_index.js data-time=c64202ba3511eea016b9053308cbffa9/div div class=w floor lazy-fn data-title=服饰 id=lazy-clothes data-path=floor1-floor_index.js data-time=5e0c42256f2fe7b4394edf7cb526a9ad/div * 加载策略 好处 大大降低首屏页面内容大小，缩短页面加载完成时间 页面大约共有3288个元素：首屏846+楼层2442 只加载首屏，可减少74%元素量 数据接口优先请求走本地localStorage，减少后台服务器压力 楼层之间数据和脚本完全解耦 非常有利于后期维护 可随意定时上线和下线运营楼层，比如618大促 * 灾备策略 * 灾备策略 1.本地缓存 接口挂掉，优先使用本地localStorage的缓存数据 2.二次请求 本地无localStorage缓存数据，再次发出请求 3.双层接口 部分接口会上线至CDN，优先使用CDN接口，X秒未请求到数据，再次请求时才用源接口 4.垫底数据 实时推荐数据接口，布署在集群上，数据实时更新，不能使用服务器缓存和本地缓存，接口一旦挂掉，此时需要使用预设好的垫底数据 5.接口下线 必要时候，下线非核心业务接口和非核心功能 * 性能优化 CSS样式文件内联(CDN) 基调网络ABTest，内联比外联可用性高5% CSS sprite JS combo /??a.js,b.js CSS/JS/images压缩 * 移动端兼容 对移动端进行了特殊优化和处理，焦点图iPad效果展示 * 开发模式 团队协作 多人并行开发 业务拆分 顶/尾部：公共头尾 首屏：焦点图 二屏：分楼层 widget模块化开发 vm/js/scss/json * 工程化 JDF定义 京东前端集成解决方案，包括命令行工具，前端模块，开发流程，前端组件，前端文档。 github：/putaoshu/jdf/ * 工程化 JDF工具进展 图片支持转换为Base64 在PC端调试H5页面(内嵌weinre远程调试工具) 压缩js/css/png可使用多线程(减少多文件项目压缩时间) 优化node-sass、ws等依赖node-gyp的模块，独立封装，提高安装速度 widget模块依赖自动下载安装 支持文件格式化(htmllint、csslint、jslint) * 工程化 Windows可视化工具 * JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com 谢谢！ * *