前言
一个前端er的使命在我看来,从用户的角度就是让其有最好的体验来浏览你写的页面,从服务商的角度就是减少页面请求,节省资源.一个前端页面有很多东西,HTML,CSS,JavaScript,image等各种资源.所以做好前端页面优化至关重要!
减少请求数,降低请求量
- 每一张图片都会向服务器发送一次请求,一个页面存在大量的图片.
- 使用精灵图,将大量小图片合成一张图片,通过定位切割完成页面设计.
- 用字体图标替代图片
- 甚至可以直接把图片转换为字符串,base64编码
- 对于不是首屏显示的,可以使用懒加载
- 零散文件整合在一起
减少重排与重绘
- 重排指的是我我们更改了dom结构，就会触发浏览器重排
- 重绘，重排发生后，一定会有重绘
- 重排与重绘高频率的发生，就容易有性能问题(代码执行的性能)
- 重排与重绘必然会发生,我们要做的事，让他们发生的次数尽可以能少
div.style.height = '10px'
// 这句代码是要获取宽度,浏览器要在重排之后才会得到最真实的宽度
div.style.width = '22px'
var a = div.style.width;
// 设置样式的代码放在一起，获取样式的代码放在一起，
// 尽可以减穿插着写.
// 推荐通过class类名来控制样式。
// 移动端用js设置动画，性能并不是特别好, css3
优化资源
- 优化静态资源 jQuery->Zepto、去除冗余代码
- 合并资源,减少请求
- cookie会在浏览器和服务器之间双向传递,减少cookie
目前个人理解比较浅薄,更多了解请点击链接.
页面优化
玩转HTML5移动页面(优化篇)