前端优化

首页独立优化

网站首页是访问量最多的页面，所以它的资源应该被独立，这个页面应该是优先级最高，优化程度也应最大：

• 图片独立服务，css sprites一个只有首页用到的图片，不包含其他任何页面的多余图片/图标
• 一个首页专属的css–index.css。要做到这个，需使用预处理工具把css模块化再进行合并
• 把重置样式reset.css以外联方式导入，设置缓存
• 把index.css和index.js以内联方式嵌入，减少http请求
• 项目发布时压缩index.html

减少HTTP请求

• 合并js/css/img：gruntjs合并，scss合并，sprites合并
• 把文件都内联在一个html文件中，或者外联资源设置缓存

设置缓存

• 资源采用基于文件内容的hash版本冗余机制，比如：
  引入脚本时不应该这样写

  而是工程源码是

  发布项目后是

  不过这个要一整套工具才能实现，具体可以看下：
  http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1

减少资源大小

• 删除没用到的代码和注释、空白
• 最小化压缩代码

延迟加载

• 先加载能可见视图里的图片，下面的图片暂时不加载，等滚动到或者滑动到时再进行加载

预先加载

• 加载了第n页的资源，后台就要开始自动加载第n+1页的资源

做好小细节

• 使用CDN链接资源
• 避免重定向
• css link放在里，js放在底部
• css不要用@import来导入
• 不要使用</li> </ul>

前端优化总结,布布扣,bubuko.com

前端优化总结

原文：http://my.oschina.net/luozt/blog/298704