微采商场优化问题汇总

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](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也要调整):


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服务器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,469评论 1 19
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,127评论 2 19
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,354评论 24 450
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,356评论 0 25
  • 没有桥的时代,一条河分开两岸,所有人要渡过这条河,都要等那个摆渡的人。 他平时孤身一人,住在岸边的草屋里。白天就在...
    于洛阅读 399评论 0 3