1.页面体验优化建议
1.顶部系统反馈号码重叠2.商品分类栏hover上去,高度变低(2px)。(border-color :#fff)
3.这块tab切换时文字位移,这块上边框建议border实现,不用切图。
4.合作区域hover箭头消失,另外下面这个下拉区域可以加个box-shadow。
![J{P6({Q4J(KU@N5]QUDI29O.png](http://upload-images.jianshu.io/upload_images/3402722-13153952d3ddb7b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.png](http://upload-images.jianshu.io/upload_images/3402722-aae016289a051bcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5.这块返回顶部可以加个缓动效果参考如下:
var $back = $('#backTop'),
winH = $(window).height();
var move = function() {
if (!$('body,html').is(":animated")) {
$('body,html').animate({
scrollTop: 0
}, 800);
}
}
var checkPos = function(pos) {
if ($(window).scrollTop() > pos) {
$back.fadeIn();
} else {
$back.fadeOut();
}
}
$back.on('click', move);
checkPos(winH);
$(window).on('scroll', function() {
checkPos(winH);
})
6..这块要切成png的透明背景的,关于制作成雪碧图问题,目前项目基本完成代价比较大,后期维护修改图片也不方便(部分页面css也要调整):
7.这块不连贯,点几下后面就没了。(需要复制一份可以用myclass插件实现)
8.有缺口
9.带分页的列表展示页面,可以采取aajx局部刷新(建议)
2.js,css细节优化方案
1.尽量用id选择器,获取用id选择器选择到下一级,另外用$("#id").find("li")比$("#id li")高效。如下在searchselect li上绑定事件可以用jq的事件委托。
$("#searchselect").on("click","li",function () {
});
2.变量,$对象的缓存(用到多次的变量和对象)可以缓存下,js有变量自动提升机制尽量提前定义。
$(window).scroll(function () {
var pos = $(window).scrollTop(),
$headerFloor = $('#header-floor');
if (pos > 378) {
$headerFloor.removeClass('hidden');
} else {
$headerFloor.addClass('hidden');
}
});
3.避免创建隐式全局变量不加var,下面的selectListShow 可以放到闭包内,如果真要创建全局变量可以把这个全部变量赋值到一个对象上。降低全局变量覆盖插件里面定义的一些变量参考。
example: loginfo 登录状态。
4.可以考虑使用localStorage本地存储(兼容到ie8),相比cookie轻量,无需引入依赖库,内存大5m(cookie 5k左右)
5.这里就可以用上面写的jq的事件委托
6.暴露了太多全局方法,存在隐患,可以放入闭包中。
7.多次引用相同js和css问题,在header区域已经引用了,
建议把通用的js(比如layer,cookie,jq,tabview,plcesHolder)和css()打包压缩成一个。
-
(JScompress)命令行方式进行压缩的Web开发者使用
(grunt)需要nodejs要写配置文件
8.变量不用加$,从jQuery 3.0开始,不推荐使用$.parseJSON。 要解析JSON字符串,请改用原生的 JSON.parse(JSON,stringify) 方法(ie7需要兼容引入jjson3.min.js)。
9.尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器,以提高整站整体CSS渲染。
10.图片列表的显屏加载,也就是滚动显示加载(瀑布流方式)。
11.cdn优化把img 和 压缩版css js放到cdn服务器。