整站的性能优化可以从以下几个大的方面来做。
加载优化、
一:加载优化:
1:合并css,JavaScript代码,压缩代码。
2:合并小图片,使用css精灵。
3:利用缓存。
5:使用外联样式引入css和JavaScript。
6:启用GZip。
7:使用首屏先加载
8:使用按需加载。
9:通过滚动加载。
10:通过Media Query加载。
11:增加loading进度条
12:减少cookie
13:避免重定向。
14:异步加载第三方资源。
二:css优化:
1:css写在头部。JavaScript写在尾部活异步加载。
2:避免图片和iframe等的src为空。
3:尽量避免重设图片的大小。
4:图片尽量避免使用DataURL。
5:避免使用css表达式。
6:尽量避免写在html标签中写style属性。
7:移除空的css规则。
8:正确使用display的属性。
9:不滥用float。
10:不滥用web字体。
11:不声明过多的font-size。
12:值为0时不需要任何单位。
13:标准化各种浏览器的前缀。
14:避免让选择符看起来像正则表达式。
三:图片的优化
1:使用只图。
2:使用(css3,svg,iconfont)代替图片。
3:使用srcset。
4:webp优于jpg。
5:png8优于gif。
6:首次加载不大于1014kb(基于3秒联通平均网速所能达到的值)
7:图片不宽于640.
四:脚本优化
1:减少重绘和回流。
2:缓存列表.length。
3:尽量使用事件代理,避免批量绑定事件。
4:缓存DOM选择与计算
5:尽量使用ID选择器。
6:使用touchstart,touchend代替click。
五:渲染优化:
1:html使用wieport。
2:减少DOM节点。
3:合理使用css3动画。
4:适当使用canvas动画。
5:touckmove,scroll事件会导致多次渲染。
: