美文网首页
页面优化建议

页面优化建议

作者: xiongxiong109 | 来源:发表于2016-06-15 13:10 被阅读0次

页面中的可改进部分:

关于导航

当前页面中,页面滚动的时候会有一个导航固定在顶部,然后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。

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

相关文章

  • 页面优化建议

    页面中的可改进部分: 关于导航 当前页面中,页面滚动的时候会有一个导航固定在顶部,然后hover过去会有一个高亮显...

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

  • 微采商场优化问题汇总

    1.页面体验优化建议 2.商品分类栏hover上去,高度变低(2px)。(border-color :#fff) ...

  • 「页面架构」页面优化

    页面优化 页面优化可以提升页面的访问速度从而提高用户体验,优化的页面可以更好的提升 SEO 的效果同时也可以提高代...

  • iOS性能优化之页面加载速率

    iOS性能优化之页面加载速率 iOS性能优化之页面加载速率

  • Vickate_积累及优化

    关于优化的建议: 1. 首页的启动速度 2. 页面浏览速度 3. 操作流畅度优化: 4. 服务器端和客户端的交互优...

  • 沈洛:单页面优化教程

    单页面搜索引擎优化的工作是个精细的工作,单页面优化需要把优化工作做到极致。所以,单页面优化工作不光考察你的SEO技...

  • 单页面关键词布局优化

    网站文章页优化,既可以是只有一个页面的站点,也可以是拥有众多页面的网站的某一个页面。 一、单页面元素优化 元素优化...

  • 网站文章页优化知识

    网站文章页优化,既可以是只有一个页面的站点,也可以是拥有众多页面的网站的某一个页面。 一、单页面元素优化 元素优化...

  • 分析网站优化布局思路与SEO细节

    大多数做SEO的人不会忽视网站的页面优化。很多人把注意力集中在网站主页的页面优化上。网站页面优化也是网站内部优化的...

网友评论

      本文标题:页面优化建议

      本文链接:https://www.haomeiwen.com/subject/mrfpdttx.html