首页 > 代码库 > 前端优化总结
前端优化总结
前端优化
首页独立优化
网站首页是访问量最多的页面,所以它的资源应该被独立,这个页面应该是优先级最高,优化程度也应最大:
- 图片独立服务,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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。