浅谈京东静态html原理,京东首页前端架构设计.ppt

京东首页前端架构设计

工程化 Windows可视化工具 * 工程化 前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com JD.com 谢谢！ 京东首页前端架构设计 刘威 2015年11月22日 关于我 刘威 (@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结构和当前楼层的脚本 请求的数据渲染到页面，并且初始化楼层脚本 具体代码