前端菜鸟

前端代码优化方法

一、减少HTTP请求

1.合并CSS、js:每次调用js、css都要发送一次http请求,所以并不是分开写好几个文件比较好

  js、css压缩。js压缩可以用grunt

HTML优化:

  • 使用语义化标签
  • 减少iframe:iframe是SEO的大忌,iframe有好处也有弊端
  • 避免重定向

CSS优化:

  • 删除空样式
  • 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加
  • 选择器性能优化
  • 避免使用表达式,避免用id写样式

js优化:

  • 压缩
  • 减少重复代码

2.图片优化

  • 图片合并,CSS sprite技术
  • 不要在html中使用缩放图片
  • 用更小的并且可缓存的 favicon.ico
  • 缩小图片分辨率;
  • 改变图片格式,推荐PNG格式;
  • 降低图片保存质量。

 

二、减少DOM操作

减少对DOM元素的查询和修改,jquery也是有弊端的

方法:

  • 缓存已经访问过的元素 
  • "离线"更新节点, 再将它们添加到树中
  • 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 

 

三、使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

  与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小

注意json的格式一定要严格符合标准

 

四、js、css文件的加载顺序

css放在里,

js放在结束前:浏览器在执行JavaScript代码时,不能同时做其它事情,即

陕ICP备18021115号-1