本篇文章是京东资深前端架构开发工程师刘威3月8日在ITA04前端精英群的分享实录，分享的话题是前端工程化在电商首页中的实践。内容很好，值得多看几遍。
大家好，我是京东用户体验设计部前端架构团队的刘威，网上ID是putaoshu，非常高兴“ITA04团队”的邀请，有这样的一个机会与大家分享下我们团队关于05年京东PC新首页的一些前端开发实践，希望通过今天的讲解能为大家以后在大型前端项目开发和改版时提供一个思路和参考。
今天我的讲解主要分为两部分，具体如下：
京东首页前端架构设计与实现面临挑战
前端页面静态化
前端页面整体架构
前端页面加载策略
前端基础架构
前端工具和系统
前端灾备策略
前端性能优化
前端工程化在电商首页的实践命令行工具
前端模块
前端组件
前端开发流程
前端文档
实际应用
京东首页前端架构设计与实现面临挑战
页面DOM元素剧增：单个楼层Tab标签由5个到9个
页面整体高度翻倍：算上头尾,共计4个楼层，高度也由px到px
页面图片量增加：80%的位置变为图片展示
首屏加载时间要有保证：加载时间相比原来不能增加
首页独特的影响力：页面不能空白，不能有报错
大流量高并发，对稳定性要求极高
对接业务方很多，临时需求、紧急需求较多
前端页面静态化
众所周知，一般网站首页栏目会有很多，不同栏目的数据库查询方式也不同，而首页流量巨大，如果按照一般的动态网站每次用户来时查询后台数据库取数据的话，开销巨大，从而导致首页访问速度降低，于是要考虑做静态化，我们具体的架构如下:
接入层：CDN—HAProxy—nginx
应用层：PHPRedis
存储层：Mysql
首先，用户访问首页实际是请求CDN上拼接好的静态页面，往下会到达Nginx动态缓存，然后到达Nginx，Nginx再把请求转发给PHP进行处理，并通过HTTP头来精确控制缓存；接着到了PHP应用层，使用了Redis作为缓存，并用MySQL存储数据；定时分钟循环任务生成静态文件，从源服务器同布分发至各地CDN结点。这样用户访问时，会访问到离当前用户最近CDN结点机器上拼装好的静态文件。
3前端页面整体架构
JS部分
首页页面依赖的JS库为jQueryV.6.4版本，前期调研评估后采用这个比较低的版本，是因为首页改版上线后，头尾组件以及一大部分公共组件要推至全站使用，即还要平滑升级上千个一二级页面站点的公共头尾，而旧页面引用了非常旧的jQery版本，要想平滑升级综合评估后，.6.4这个版本最合适；另外jQuery我们根据整体业务进行特殊修正，就比如jsonp回调函数名称后端规范对长度有要求，我们就对长度进行修正等等。
第二层是JDF公共组件，包括UI组件、Unit业务组件、Widget模块，这些组件包括event，localStorage，焦点图，动画，地区选择，对话框，下拉菜单，懒惰加载，suggestion，login，search，category，cookie等常见交互组件和业务组件；同时也有当前业务级需要的公共组件，比如楼层懒加载组件，楼层切换电梯组件等。
第三层是页面脚本,比如今日推荐楼层，猜你喜欢楼层，广告楼层，天天低价楼层等等。
CSS部分
改版前的公共样式base.css耦合不少公共组件样式，现在采用很轻的样式重置ui-base.css，公共组件单独按需调用自身样式，彻底解耦。另外首页所有楼层依赖的样式文件是放在首屏加载，而不是请求当前楼层时异步加载，主要为了保证楼层的高可用性和预加载，另外单一个楼层文件非常小，每次到达时候异步加载并不如放在首屏，所有楼层样式文件