前端优化

SEO

• 描述：<meta name="description" content=""/>告诉搜索引擎你的站点的主要内容；

• 关键字：<meta name=“keywords” content=“”/>向搜索引擎说明你的网页的关键词；

• 用以说明生成工具：<meta name="generator" content="">（如Microsoft FrontPage 4.0）；

• 告诉搜索引擎你的站点的制作的作者：<meta name="author"content="你的姓名">；

• 图片的Alt属性，对图片进行说明，当然不要所有图片都用，关键的图片使用即可

• h1-h6标签,其中h1是除了tilte标签以外最重要的一个标签，但不要过多使用，否则会被搜索引擎认为作弊

• 强调性的文字，可以使用strong和em标签有助于SEO。如果只特殊显示不需要影响SEO可以使用b和i标签。

资源加载优化

• 上线的时候，使用压缩后三方库（带有min的文件: jquery.min.js）

• 尽可能使用CDN来加载你的资源(将一个服务器的内容，复制到多个服务器上边缘节点，让用户从离自己最近的服务器获取内容，提高访问速度。)

• 选取图片的时候，能选择jpg就不选择png（只有镂空图才选择png图片）

• 图片搞定之后，使用网站进行二次压缩（TinyPNG），图片的alt，宽度，高度属性最好要加上。加载会快一些。

• 减少网路请求，比如使用懒加载、框架中的路由等等

• 异步加载三方资源。

CSS优化

• 嵌套层次不超过3层

• 合并CSS规则，合并margin、background等属性

• 移除空的CSS规则

• 去掉0的单位

• 不要声明过多的font-size

• iframe、img等src属性避免为空

• 使用精灵图，通过位置去控制显示，这样就只发起一次http请求

JS优化

• 避免重设图片大小

• 动画优化：使用CSS3动画、使用requestAnimationFrame替代setTimeout
  requestAnimationFrame这个API是浏览器提供的js全局方法

  //元素不停旋转
  var degress = 0;
  function update(){
    $(".div1").css("transform","rotate("+ (degress++) +"deg)");
    requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
  

• DOM层次不宜过多

• JS主动释放内存。

• get方法进行ajax数据获取，post会先发送文件头，再发送数据。

• 使用html5的manifest进行缓存，即使在没有网络的情况下也可以查看页面。

• 避免重定向（将用户从一个url跳转到另一个url），比如url最后少加一个/，就会被重定向。所以切记url一定要准确。