发布时间 : 星期日 文章电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文更新完毕开始阅读
名称所属类别商品描述商品编号库存数量商品n浏览n订单项目订单编号下单时间管理m用户m下单n订单n处理1超市1价格收货地址账号联系电话密码类型备注图4-4
数据表的建立主要有：
1.用户表（SysUser）: u_id(账号)、u_pwd（密码）、u_type（类型）、u_phone（联系电话）、u_memo（备注）
2.商品表（Product）：p_id（商品编号）、p_name（商品名称）、sc_id（所属类别）、p_comment（商品描述）、p_num（库存数量）
3.订单表（UserOrder）：o_id（订单编号）、u_id（下单人编号）、o_time（下单时间）、o_price（价格）、o_addr（收货地址）、o_time（收货时间）、list（订单项目）
4.订单项目表(OrderItem)：oi_id（订单项编号）、p_id（产品编号）、oi_num（产品数量）、o_id（订单编号）
5.大类表(BigClass)：bc_name（大类名称）、bc_i（编号）、ListSmall（小类列表）
6.小类表(SmallClass)：sc_id（小类编号）、bc_id（大类的编号）、sc_name
（小类名称）
7.广告表(Advertisement)：a_id(广告编号)、 a_img（图片） 4.2 系统详细设计和实现
一个网站有好的页面风格和结构是十分重要的，网站首页如图4-5所示，所有用户可以进行商品的分类查看，继续几点进去就可以看到商品的详细信息，也可以通过关键字搜索来得到更多详细的结果，还有购物车功能。用户注册登录之后可以管理我的订单，进入会员中心和客户服务中心。
图4-5
图4-5显示了首页包含了前台的用户模块（包括个人中心、注册和登录、我的订单），商品模块（包括商品分类显示、购物车）和客户服务模块（包括问题反馈、留言板、常见问题）。
图4-6
图4-7
图4-6是后台登陆，图4-7显示了登陆进去后的后台管理模块，包含了商品管理模块（包括商品信息比如库存数量、价格、属性的查询、修改、增加、删除操作），订单管理模块（包括订单状态管理、订单查询、订单信息修改），常规管理模块（包括基本设置、广告设置、留言板管理、联系方式设置）和其他的管理模块。
4.2 优化方案的应用和测试
在本超市购物网站中，将上述前端优化方案应用进去，使用浏览器的开发工具和其他分析工具来收集网页深层信息的网页数据，通过在浏览器页面上显示的反馈信息和日志，对比前端性能优化之前和之后的表现数据，来证明这些优化方案都是可行的、有效的。
4.2.1 图片地图
优化前：商品数量的加减控制图标是分开的两个图片和，代码如图4-8。
图4-8
在浏览器中运行（图4-9）显示加载请求所需的全部时间为1.23s（onload 2.1s），共发送30个HTTP请求。
图4-9
优化后： 将商品数量的加减控制图标和合并成一个图片地图（码如图4-10。
），代