京东首页前端框架优化策略与实践.pptVIP

大纲

面临挑战

页面静态化

加载方略

灾备方略

性能优化

移动端兼容

开发模式

工程化

第1页

面临挑战

第2页

面临挑战

大流量高并发

页面Dom元素剧增

楼层tab标签由5个到9个

页面整体高度翻倍

由4820到9862px

页面图片量增长

80%的位置是图片展示

首屏加载时间要有确保

加载时间不能增长

…

第3页

页面静态化

第4页

页面静态化

第5页

加载方略

普通的前端页面加载方略

后端从数据库取出数据，拼装好页面，浏览器加载页面所有HTML元素，并对图片懒加载(lazyload)

第6页

加载方略

我们的加载方略

楼层异步加载+本地缓存

把页面按楼层进行拆分，把首屏做为页面框架主体，每个楼层的数据，单独做成数据接口，异步加载。

给每个楼层设置默认高度，到达这个区域时祈求目前楼层数据文件，对楼层数据文件进行md5(即data-time)，并把楼层数据和data-timelocalStorage至本地，假如页面上的data-time和本地的data-time值一样，直接取localStorage，假如不一样，才重新ajax祈求数据

流程图如下

第7页

加载方略

第8页

加载方略

楼层初始化

楼层数据：涉及html结构和目前楼层的脚本

祈求的数据渲染到页面，并且初始化楼层脚本

详细代码

divclass=wfloorlazy-fndata-title=美妆id=l