挽星

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

影响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方式请求

     - 参考传输优化

posted on 2010-09-15 00:55  挽星  阅读(268)  评论(0编辑  收藏  举报