前端代码优化基本方法

减少HTTP请求

• HTML优化：

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

• CSS优化：

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

• js优化：

  • 压缩
  • 减少重复代码

• 图片优化：

  • 使用WebP
  • 图片合并，CSS sprite技术

减少DOM操作

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

使用JSON格式来进行数据交换
使用CDN加速
使用HTTP缓存：添加 Expires 或 Cache-Control 信息头
使用DNS预解析

• 预解析的实现：

用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />