影响Web前端性能的主要因素:
1、传输数度 2、传输数量 3、浏览器的缓存 4、预先加载和延迟加载 5、页面的渲染效率 6、JS的执行效率
一、传输速度
1、字节优化
- html、CSS、JS、图片、Flash、XML等文件,尽量减少文件尺寸。
例如 html文件和XML文件,在生产环境中,可以将其源码中的空格全部去掉,大约可以减少10%--30%的尺寸
JS文件可以采用压缩技术,图片尽量使用GIF这样的网络格式
2、CDN
- 打破运营商间的限制(例如:DNSPod)
- 减少相同文件的重复下载(例如:Microsoft Ajax CDN)
二、传输数量
1、减少文件的请求数量
通过工具我们可以了解到,再向Server请求页面资源的过程中,每个资源都会存在连接时间、等待时间和下载时间,
越多的文件请求数导致连接或者等待的总体时间越长,所以,减少文件的请求数量可以大大提高请求效率。这一部分的
监控可以使用HttpWatch工具进行分析。
2、适当的分域
这一部分需要更多了解
3、避免404错误和重定向
对于404错误可参考此连接: http://www.cnblogs.com/younggun/articles/1826545.html
404错误和重定向会加重CPU的负载,并容易造成死循环。
4、使用多图集成的图片文件
相应用户行为的方式不是重新加载文件,而是改变CSS的属性。
三、浏览器缓存
1、采用Get的方式请求文件便于缓存
2、CSS、JS采用分离成外部文件的方式(手机、客户端除外)
四、预先加载和延迟加载
1、预先加载
- 打开页面后用户马上要看到的
- 打开页面时需要立即起作用的JS和CSS文件
2、延迟加载
- 打开页面后需要用户执行某些动作才能够看到的
- 预孤岛用户可能要访问的资源
五、客户端优化
1、CSS
- 尽量不要使用IE的滤镜和CSS表达式(CPU会很高)
- 尽量将CSS放在代码的前面
- 尽量减少使用小图片Repeat形成背景
2、JS
- 优化算法(尤其是循环)
- 注意不支持长整型
- 没有真正的多线程,要模拟实现
- 异步加载非页面初始化必须的JS文件
3、HTML
- 尽量不要使用table做布局,尤其是外围布局
- 尽量使用div、p等流式标签
- 尽量使用语义化的标签,如strong、em.....
- 减少DOM对象的数量,减少iframe的使用
- 部分页面异步加载
4、AJAX
- 避免并发
- 尽量使用Get方式请求
- 参考传输优化