八爱网二期项目优化方案

以下是我实际开发过程中遇到的优化问题，对大家来说或许是个不错的案例。

存在的问题

部分功能存在浏览器兼容（效果失真、动画卡顿）

部分图片显示效果不佳（模糊、变形、裁剪）

页面加载速度慢（图片不显示、等待久）

运营后台智能化程度不高（人工操作）

解决方案

解决浏览器兼容

IE8及以下的浏览器不支持html5和css3新特性，如果要继续兼容IE8必须放弃使用html5元素和css3动画和它的过渡效果。目前国内市场上的浏览器IE8内核的年轻用户占得极少，只有一些事业单位办公用的 windows xp或者是win7 早期的版本里还保留了IE8或者没有升级浏览器，早已处在被时代淘汰的边缘。这里特别解释一下目前国内市场上360、搜狗这类双核浏览器，他们默认的主核心是chrome的webkit内核，所谓的双核是调用本地的IE内核来实现兼容模式。说白了，只要是升级了IE8的用户不会出现兼容问题。



目前已去掉了八爱网所有的html5元素和css3特性，暂时屏蔽了兼容问题。

不过我的建议是逐步放弃IE8这类浏览器，或提醒他们升级浏览器，实现方式如下：

<!--[if lt IE 9]>
<p class="browsehappy">您正在使用<strong>过时</strong>的浏览器, 建议您<a href="http://browsehappy.com/" style="color:red" target="_blank"> 升级浏览器 </a>。 360浏览器的亲可以切换到 <a href="http://jingyan.baidu.com/article/d169e186a3dd27436611d829.html" style="color:Red">极速模式</a>，以获得更好的体验！</p>
<![endif]-->
<!--[if lt IE 8]>
<p class="browsehappy">您正在使用<strong>过时</strong>的浏览器, 建议您<a href="http://browsehappy.com/" style="color:red" target="_blank"> 升级浏览器 </a>。 360浏览器的亲可以切换到 <a href="http://jingyan.baidu.com/article/d169e186a3dd27436611d829.html" style="color:Red">极速模式</a>，以获得更好的体验！</p>
<![endif]-->

解决图片显示问题

图片问题是个大问题，因为电商网站很大吸引点就在图片上，图片的好坏很大影响客户浏览和购买。

banner图片上传前确保图片符合规定尺寸和图片清晰，因为有等比例压缩技术，保存为jpg时图片质量可以选最佳，并且保留psd源文件，设计这边辛苦定期整理归类一下。



产品图片、品牌 logo 的 比例 统一是正方形，原图尺寸必须在400*400~800*800之间，而且白色背景，主体内容占50%~60%为宜，不宜太过饱满。（注意：从其他网站截图得到的素材请确保图片清晰，最好是把对方网站上的图片文件下载下来。）





常用图片规范：



我会每个图片元素提供一个容器包裹，容器内图片居中自适应，超出部分自动隐藏，防止图片变形。

解决页面加载问题

客观分析：

目前首页首次加载的速度是3.65s，对于公司100M的网络，已经算是非常慢了。其中占流量和时间的主要是:

1. css、js文件太多，而且体积较大。

2. 图片没有压缩，大图加载时间长。

3. 网页数据由服务器一次性返回再交由浏览器进行同步渲染，需要顺序加载。

4. 客户端没有做缓存。

图片采用 又拍云 图片托管并压缩

>网页所有的图片我们都存入到又拍云服务器，又拍云提供cdn加速服务和等比例压缩，压缩完的图片不仅不失真，而且文件大小将是原先的 1/5左右。这样可以极大地加快页面加载。

css文件、js文件采用gulp自动化工具进行代码合并和压缩。

我们webApp开发过程中采用gulp进行前端自动化，这个技术可以引用到八爱网项目。八爱网开发的思路是一个页面单独一个css和js，这样的好处单例模式、可以不考虑代码污染，但是实际开发中根据实际需求，引入了很多公共组件和一些外部插件，导致一个页面 甚至引入了 10多个 外部资源，从而增加了页面加载时间。我现在可以对每个页面的单独资源和公共资源分别合并打包一次，然后分别加载到各自的页面。

页面做静态化，并且前后端分离，模块化异步加载。

> 目前我们网页是有Java后台从服务器一次性生成后返回的，属于同步加载。换句话说存在阻塞队列，后面的资源要等着前面的加载完才能加载。这极大地影响用户体验。依据目前的现状，不适合前后端完全分离，第一屏的数据依然由服务器返回，不过下一屏的内容依据滚动条的滚动做异步加载（也就是所谓的瀑布流加载），而Java后台只需提供对应数据请求的接口即可，其他工作交由前端来完成。

加入客户端缓存

客户端缓存的技术有很多，考虑到IE8支持，HTML5的缓存技术是否使用还根据实际需求。

1. sessionStorage存储单例模式里临时的数据，主要是一些变量或者数组

2. localStorage存储网站可以缓存的一切数据， 主要是把大图转为base64格式存入，更新频率不高的内容以json或者字符串数组的格式存入。

数据加载量大的页面做加载缓冲

产品详情页的数据加载量比较大，尤其是产品详情内容，有些产品需要加载很多图片，网速不好时用户等待时间比较久，而且加载时页面会卡顿，加入缓冲动画则能屏蔽这些不友好的画面，提升用户体验。

不过有一点要注意：这个效果的实现机制是ajax的异步事件执行。没有做ajax异步或者内容一次性渲染出来的网站无法使用该技术。

更智能的运营后台

智能的好处是可以减少人工操作，提高工作效率，一个强大的运营后台是一个公司高效有序运营的保证。目前我们公司的运营系统功能还算可以，但是智能化、自动化的功能相对薄弱。依据我们公司的现状，智能运营系统的建设甚是重要。而且大致的方向可以分为如下3点：

活动页面模板生成技术

八爱网活动页面不像苏宁、淘宝店铺装修那样有各种规则限制，我们的设计和布局相当自由。这虽然是我们的优势但也是我们的劣势，没有规则就无法运用规则，活动页面的上线基本上都是一个重新切图布局的过程，效率实在很低。所以我建议是前端和设计沟通，制定出一套或者多套活动页面的制作规则，也就是生成几个模板，下次能直接套用，并且和运营系统结合，定时设定活动产品价格、匹配产品id和链接、指定图片素材 即可快速生成活动页面。

产品二次归类和分析技术

定时地对所有出售的产品做二次归类，包括按销量、按好评数、差评数 等进行反馈后的排序，取精去糟，并可以对数据进行图表化的分析和处理，从而制定更合理的运营方案。

优惠券、代金券系统

虽然是老生常谈，但是确实是很不错的运营手段，优惠不仅是价格体现，而且还要实质化，能互动，让我们的活动页面不单调，这样才能吸引住用户。运营还得靠 做活动，我们八爱网接下去除了开发新功能，更重要还得不断地更新有意义的活动，让用户不流失。

项目线上地址: http://www.baai.com

（优化工作还没开始，大家可以先关注一下 这个网站，待我大功告成后再点进来检验此次优化的效果）