页面优化建议

页面中的可改进部分:

关于导航

当前页面中,页面滚动的时候会有一个导航固定在顶部,然后hover过去会有一个高亮显示, 高亮的样式是在a:hover里面添加了一个border-bottom: 2px solid #FF5A92; 这样做的话,导航其实会在鼠标滑过的时候不断地抖动,因为hover状态让导航增加了2px的高度
可以考虑用:after :before伪类配合定位来画这条线,或者考虑让border-bottom的高度一直存在,:hover的时候只是改变border-bottom-color

关于轮播图

1.点击事件和自动播放有点冲突,而且在快速连续点击不同按钮的时候定时器没有清掉,轮播图会挂。

2.可以考虑做成无缝滚动。

3.现在的轮播图是线性动画,也可以考虑添加Tween 算法,做成缓动效果。

4.可以考虑添加lazyload, 即一开始只加载第一屏的图片,后续几个轮播的图片只在即将滚动到该屏的时候再去请求资源进行加载。

关于图片列表

电商网站的图片比较多,也可以考虑懒加载。

关于CSS部分

里面的last-child ie8支持度不高(现在的PC大多数还是需要兼容到ie8的, 特别360浏览器还是个双核的,它的兼容模式是个ie7)
关于css3选择器的兼容性,可以查询 can i use 网站,然后再做处理。

另外还可以添加meta头来处理

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

关于原生js部分####

原生js api getElementsByClassName的确存在,但是ie8不支持,会报错,所以需要自己封装.class 的DOM获取函数。

关于index.js

使用了jquery, 并使用load方法保证了页面加载的顺序,但是这种加载类似ajax加载,作为电商网站的话, 这样的处理可能会影响SEO。

还可以考虑做一个移动版的页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,403评论 25 708
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,179评论 2 19
  • 周末晚上,宇飞和一群猪朋狗友泡在酒吧,喝个烂醉,回来路上东倒西歪。 突然,他像一只狗趴在墙上,抬起一条腿小解,嘴里...
    帅姐赖皮红阅读 937评论 36 33