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