首页 存档 技术 查看内容

【ITA1024前端精英群】京东资深前端架构师分享前端工程化在电商首页中的实践

2018-3-30 13:00 |来自: 互联网 366 0

摘要: 【本文系ITA1024原创首发,转载或节选内容前需获授权(授权后一周以后可以转载),并且必须在正文前注明:本文转自ITA1024在线技术分享实录,微信公众号:ita1024k】 2016年3月,互联网技术联盟(ITA1024)推出前端技 ...

本文系ITA1024原创首发,转载或节选内容前需获授权(授权后一周以后可以转载),并且必须在正文前注明:本文转自ITA1024在线技术分享实录,微信公众号:ita1024k

2016年3月,互联网技术联盟(ITA1024)推出前端技术专题月,由联盟成员企业推荐国内一流技术专家联手打造。通过每周的线上万人课堂和每月的线下ITA1024互联网技术大会针对前端开发,前端框架,性能调优,复合型前端技术等热门话题展开深入的分享和交流。


本期分享嘉宾:刘威(京东资深前端架构开发工程师)

本期特邀主持:赵晓强(百度高级前端工程师)

如下是3.28刘威在ITA1024前端精英群分享实录。


大家好,我是京东用户体验设计部前端架构团队的刘威,网上ID是putaoshu,非常高兴 “ITA1024团队”的邀请,有这样的一个机会与大家分享下我们团队关于2015年京东PC新首页的一些前端开发实践,希望通过今天的讲解能为大家以后在大型前端项目开发和改版时提供一个思路和参考。

今天我的讲解主要分为两部分,具体如下:

京东首页前端架构设计与实现

面临挑战

前端页面静态化

前端页面整体架构

前端页面加载策略

前端基础架构

前端工具和系统

前端灾备策略

前端性能优化


前端工程化在电商首页的实践

命令行工具

前端模块

前端组件

前端开发流程

前端文档

实际应用

京东首页前端架构设计与实现

1
面临挑战
  • 页面DOM元素剧增:单个楼层Tab标签由5个到9个

  • 页面整体高度翻倍:算上头尾,共计14个楼层,高度也由4820px到9862px

  • 页面图片量增加:80%的位置变为图片展示

  • 首屏加载时间要有保证:加载时间相比原来不能增加

  • 首页独特的影响力:页面不能空白,不能有报错

  • 大流量高并发,对稳定性要求极高

  • 对接业务方很多,临时需求、紧急需求较多

2
前端页面静态化

众所周知,一般网站首页栏目会有很多,不同栏目的数据库查询方式也不同,而首页流量巨大,如果按照一般的动态网站每次用户来时查询后台数据库取数据的话,开销巨大,从而导致首页访问速度降低,于是要考虑做静态化,我们具体的架构如下:

接入层:CDN

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部