性能优化

减少HTTP请求次数

  1. CSS Sprits
  2. CSSJS文件进行合并压缩(webpack、服务器开启资源文件gzip压缩)
  3. 采用JSON格式进行客户端与服务器端数据传输
  4. 良好的编码习惯(内存泄漏、减少对DOM操作)
  5. 图片懒加载,在页面开始加载时,不请求真实的图片地址,使用默认图占位(减少页面首次加载HTTP请求次数)
  6. audiovideo标签设置preload=none(页面加载时,音视频数据不加载,播放时再加载),(preload=auto)、(preload=metadata页面首次加载时就把音视频资源的头部信息进行加载)
  7. 更多地使用异步编程Ajax数据请求,一般都使用异步编程)(基于promise设计模式进行管理)(使用fetchvue-axios等插件进行Ajax请求处理)
  8. 避免一次性循环过多数据(循环操作是同步编程)
  9. CSS选择器优化
    1. 减少标签选择器的使用
    2. 少使用ID选择器,多使用类选择器(通用性强)
    3. 减少使用选择器的限定(.header .nav .left a {}选择器从右向左查找)
    4. 避免使用CSS表达式
  10. 减少代码冗余,提高重用率(低耦合,高内聚)
  11. CSS放在head中,JS放在body尾部
  12. 不经常更新数据使用浏览器304缓存
  13. 不使用eval
  14. 减少使用闭包(占内存、内存泄漏)
  15. DOM事件操作,避免使用事件绑定(冒泡机制:绑定外层容器,内部事件触发,外层容器相关也会被触发),使用性能更高的事件委托(事件代理)
  16. 使用字体图标代替位图(图片),方便适配以及更轻量,减少HTTP请求次数
  17. 使用CSS3动画代替JS动画(CSS3动画开启硬件加速,性能更好)
  18. 使用JS设计模式构建代码
  19. 减少CSS滤镜的使用,不使用flash
  20. 使用CDN加速

SEO优化

1、避免出现死链接(404页面),用户输入错误页面,跳转到404提示页面
2、避免浏览器中异常错误抛出
3、增加页面关键词优化