八爱网二期项目优化方案
以下是我实际开发过程中遇到的优化问题，对大家来说或许是个不错的案例。
存在的问题
- 部分功能存在浏览器兼容（效果失真、动画卡顿）
- 部分图片显示效果不佳（模糊、变形、裁剪）
- 页面加载速度慢（图片不显示、等待久）
- 运营后台智能化程度不高（人工操作）
解决方案
解决浏览器兼容
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
（优化工作还没开始，大家可以先关注一下 这个网站，待我大功告成后再点进来检验此次优化的效果）
八爱网二期项目优化方案相关推荐
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第二十五节: 3D项目优化方案
<使用Cocos2d-x 开发3D游戏>系列在线课程 第二十五节:3D项目优化方案 视频地址:http://edu.csdn.net/course/detail/1330/20825?au ...
- 项目优化方案及分析过程，解决办法
一.工具和排查方法 二.大批量的导入导出优化 三.抽样计算功能的优化 1.1. 工具和排查方法 1.1.1. 使用jdk自带的 jconsole,直接在cmd命令中打入jconsole,就会弹出一个窗 ...
- 云客网：企业网站SEO优化方案实例
早先曾经受邀帮助某企业网站进行了一次SEO优化分析,解决这个网站存在的种种不规范的SEO问题,最终提高了该网站整体的页面排名和权重,这里杭州SEO博客就和大家分享一下这个案例,云客网希望能和大家一起探 ...
- 轨迹系列8——记某真实项目中轨迹展示查询效率优化方案一（初步设计）
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 准确说,该项目的迹展示涉及到两个方面,一个是轨迹查询展 ...
- mysql 常用优化方案_项目中常用的 19 条 MySQL 优化方案
声明一下:下面的优化方案都是基于 " Mysql-索引-BTree类型 " 的 一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单 ...
- android 启动优化方案,Android 项目优化（五）：应用启动优化
介绍了前面的优化的方案后,这里我们在针对应用的启动优化做一下讲解和说明. 一.App启动概述 一个应用App的启动速度能够影响用户的首次体验,启动速度较慢(感官上)的应用可能导致用户再次开启App的意 ...
- 爱家租房项目④-项目总结与优化
文章目录 技术文档 存储服务 前端模板 项目优化 01_csrf_token缺失bug的解决 02_数据库优化介绍1 表结构设计 Django优化 数据库优化 外键保证数据的完整性 当数据量大的时候, ...
- iOS 性能优化方案-弱网优化
一.iPhone手机弱网环境配置 选择现有网络状态 或自定义网络状态 设置参数: 每个参数的含义大致如下: in bandwidth :下行带宽 in packet loss :下行丢包率 in de ...
- iOS大型项目解耦方案有难度？BeeHive设计优化来帮助
[https://yq.aliyun.com/articles/71685?utm_campaign=wenzhang&utm_medium=article&utm_source=QQ ...
最新文章
- 用JavaScript写Session的两种方法
- C【C#公共帮助类】分页逻辑处理类
- selenium环境配置
- 如何处理CloudFoundry应用部署时遇到的254错误
- 阿里云RPA专有云产品文档集合
- Entity Framework Core 批处理语句
- materialize_使用Materialize快速介绍材料设计
- java控制单元测试_java – 当单元测试控制器时,模拟一个Spring Validator
- java定时任务中使用多线程_java项目中如何利用多线程实现一个定时器任务
- 如何在几秒钟内退出所有 Mac 应用程序？
- 加权均值滤波matlab,模糊加权均值滤波器
- DLL中无法定位程序输入点inflateReset2于动态链接库
- INSPIRED启示录 读书笔记 - 第34章 恐惧、贪婪、欲望
- Java进阶04-动态代理、类加载
- wxpython后台线程更新界面控件方法
- python中Could not find module “...atari_py\ale_interface\ale_c.dll‘ (or one of its dependence)
- Python二级考试试题汇总（史上最全）
- 有些爱意,在岁月中飘遥
- 远程计算机IP地址如何获取,获取远程主机的IP地址
- 从说话人识别demo开始学习kaldi--（6）训练UBM和PLDA