首页 > 代码库 > 前端优化总结

前端优化总结

前端优化

首页独立优化

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

  • 图片独立服务,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>