现在的位置: 首页 > 综合 > 正文

web应用优化策略-前端

2013年09月17日 ⁄ 综合 ⁄ 共 1880字 ⁄ 字号 评论关闭

1.尽量减少HTTP请求的个数

   如一个客户请求访问某个jsp文件,该jsp中引用了一些2个外部的javascript文件,1个css文件,3个图片文件,那么这个jsp页面要被完整的解析成HTML所要与web服务器进行的请求数目为7=1 jsp + 2 javascript + 1 css + 3图片!可以通过firefox或chrome提供的控制台工具查看

可以看出,请求这些js,css或图片都是需要时间的,因为http协议本身的特点,约定了一个请求必须先打开链接,再发送请求消息,返回响应结果(jsp,css,image...),最后关闭链接,而打开关闭链接本身也是需要花费开销的,所以应尽量减少没有必须要的请求

  解决方案:

  设计更简单的页面包含较少的js和图片,css

  将多个图片合并成一个,通过css背景便宜的方式来展示

  合并css,js文件

2.使用CDN技术--让静态文件更靠近用户

    CDN是个么东东?看百科解释-http://baike.baidu.com/view/21895.htm ,举个简单的例子,就是把静态文件发布在各个地方的服务器上,这个用户在访问的时候就可以根据用户的访问地不同来去离用户最近的服务器上抓数据(如网通的用户去网通cdn服务器上取,移动的用户去移动的cdn)

3.添加Expires头Cache-Control

   合理设置这个参数值,让内容做一定的客户端缓存,这样可以减少内容的网络传输,如下图所示,返回状态码304表示本地cache的内容没有过期,服务器只是返回客户端一个状态码,实际文件的内容(js,css)都是直接取自客户端(浏览器缓存)

4.gzip压缩

   我们在写一些css样式或js文件的时候,为了提高代码的可读性都会在里面进行代码的缩进,注释,这个在开发的时候是个好事情,但是一旦程序发布运行起来,这些注释空格是没有意义的,而且这些注释空格本身会占用一定的字节数,上图中的'Size'这一列,gzip就是用来解决这个问题的,在发布前把css,js进行gzip压缩处理,去除不必要的东西,从而减少文件的大小,不要以为减少了几k或几B没什么意义,要知道,一旦你的网络流量大起来,想淘宝,每天几亿次的访问,每次访问减少1k的网络流量,那么每天节省下来的流量是多少呢??呵呵

5.将CSS文件放在页面的上方<head>中

  想IE或Firefox这些浏览器,在样式表传输完毕之前不会做任何渲染

6.将javascript脚本放到页面的底部

   脚本可以在任何时间执行,因此没有必要让页面等待js文件加载完毕后再去渲染,放在底部可以去除对页面下载的阻塞

7.避免在css中使用Expression

  只有IE允许将js存在与css中

8.将js和css独立与外部的文件中

  有助于缓存,应不过期策略,可以与其他页面共享文件,缺点就是会增加HTTP请求个数

9.移除重复的脚本引用

10.减少DNS查顺

   我们在浏览器中输入一个htttp://www.baidu.com的时候,浏览器会去DNS服务器解析baidu.com所对应的IP地址,而这个解释是需要时间的一般是20-120ms,DNS会被缓存,ISP会负责维护

11.缓存Ajax请求

    当有两个完全相同的ajax请求时,浏览器会缓存上一次的内容(IE),第二次请求的时候就直接取了本地缓存中的内容而不再去服务器上抓取

12.考虑将动态内容和静态内容分离开

    这个和上面提到的cdn有些重复,意思就是动态内容放在app Server上,静态内容放在另外一组服务器上,而且两组服务器最好不要使用同一个域名下,为什么,因为发送http请求的时候,会把cookie附加在http头信息后面提交

    使用不同域名还带来的一个好处就是提高了浏览器在下载web组件的并发数。我们在打开一个页面的时候,浏览器会先下载页面本身即html,然后分析这些html元素,逐步下载一系列的组件,但是浏览器下载这些组件受到最大并发数的限制,也就是同一时间最多只能下载一定量的组件不同浏览器有不同的规则

浏览器    HTTP/1.1    HTTP/1.0
IE 6,7       2                   4 
IE 8          6                    6
Firefox2   2                   8
Firefox3   6                   6
Safari3,4 4                    4
Chrome 1,2 6 --

浏览器最大并发数限制有个前提就是对同一个域名下下载的组件才有效,也就是说,浏览器会为每个域名维护独立的下载队列。因此浏览器的并行下载量增大了,下载速度也随即提高

抱歉!评论已关闭.