页面优化建议
2016-06-15 本文已影响0人
xiongxiong109
页面中的可改进部分：
关于导航
当前页面中，页面滚动的时候会有一个导航固定在顶部，然后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。
