Web前端优化

Web前端优化总结

 

 

刘岩

 

suhuanzheng7784877.iteye.com

 

1.Grade A on Make AJAX cacheable

 

缓存AJAX的实时数据：当在浏览器下使用ajax技术时，如果在一个时间段内多次访问同一URL地址（GET方法，POST方法是多阶段提交，第二阶段提交body体信息），由于浏览器的缓存（占客户端机器的资源）作用，当第一次访问时，浏览器会将访问的内容缓存，这样当在一段时间内再次访问这个网页时，浏览器就不会真正的到服务器去请求页面，而是用缓存的内容来响应ajax的异步请求，即使此时服务器端的相应页面已经改变，浏览器也不会向服务器提交新的请求（注意这个和正常的网页页面请求不一样，如果正常的网页请求，所请求的页面在服务器端已经改变，浏览器会进行一个判断，然后请求新的页面，如果没有改变，则不会进行新的请求，所以在正常的网页访问中不会出现这种缓存问题），也就是说，通过ajax访问时浏览器不检查网页的更新，而直接用缓存进行响应。

 

优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好。

 

缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响。

 

延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少。

 

2.Grade A on Use GET for AJAX requests

 

Get方法和服务器只有一次交互（发送数据），而Post虽然也需要一次，但是整个body体还没发送完毕的话，那么http请求会一直阻塞（发送头部再发送数据）。

 

结合HTTP的原理，GET请求参数随着URI一并发送到服务器端，而post请求会连续发送两次，第二次是http request的body请求体。这个视业务场景而定，必须用post的时候才用post。

 

业务场景，一般Get请求的场景是为了获取服务器资源URI（json数据、xml数据、静态资源）。而post请求更多是为了与服务器进行人机业务交互，比如——用户登录；评论商品等等。

 

3.Reduce the Number of DOM Elements

 

1）HTML DOM 定义了访问和操作 HTML 文档的标准方法。

 

2）DOM 将 HTML 文档表达为树结构。

 

 

一个HTML文档，由于其独有的特性，它有且只能有一个根元素，所有其他元素都是根元素的子元素，然后子元素又可以有子元素。对于这种数据结构，为了便于构造以及日后的访问（包括查询、修改）。对于这个元素数量的问题，并没有什么固定的标准，应该尽可能地减小。

 

减少dom的基本做法

 

1：html静态页：页面信息量过大的话，尽量根据用户习惯延迟加载，用户右滚动条下拉的时候采取加载显示该页面后续的DOM结点信息，技术方案连接如下（http://www.w3cfuns.com/article-1116-1.html）

 

2：避免使用服务器端标签，比如Struts标签、Spring MVC标签、JSF标签。这些标签是要服务器端进行解析，解析为html文本后再response给前端页面，由其框架自动生成的html标签，比较多，相应的DOM元素就会多。

 

3：杀手锏，将信息量比较大的页面切分成几个页面，分页显示。缺点很明显，用户要点击多次才能看到自己想看到的东西，用户体验太差。

 

4.Grade A on Avoid HTTP 404 (Not Found) error

 

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

 

另外，404页面一般是用户无意之中输入的错误网址或者因为网站改动对网页进行了删除处理产生，但是蜘蛛还是会对404页面进行抓取的，如果我们太多错误页面，肯定会对网站正常的SEO造成影响，因为这些404页面消耗了大量的蜘蛛爬行时间。在谈提高网站的整体收录量的时候就为大家介绍过，蜘蛛对每个网站的抓取是有限度的，过多的404页面，会消耗蜘蛛资源，从而会影响蜘蛛对其他网页的抓取索引，这样会限制网站收录，限制SEO流量，不利于网站整体优化。所以，我们要做的工作就是尽量的减少404页面的产生，另外，对已经产生的404页面进行引导：引导蜘蛛，引导用户。

 

5.Grade A on Reduce cookie size

 

大量的cookie会加重请求的发送网络开销，http规范对头是不压缩的，对于跨境网站来说，网络差异非常大，所以过大的cookie的网络latency是非常大的，当然为了满足业务需求，cookie的大小大也没有更好的方法，所以只能尽量减少，毕竟满足业务需求前提下，才能满足性能。（http://jishu.zol.com.cn/13734.html，阿里巴巴——周涛明）

 

6.Grade A on Use cookie-free domains

 

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

 

这里是有关静态服务器的问题，主要是指一些静态文件比如说图片、CSS等等，比如说YAHOO，他的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

 

主要使用的原理：减少网络IO包的发送，请求个静态资源，就是为了看，没必要将client端的cookie也传过去。传cookie到服务器端，主要为了与服务器进行post交互。

 

7.Grade A on Avoid AlphaImageLoader filter

 

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。总之一句话，若是需要边界透视的类似logo的图片使用png格式（由美工负责切图），若是四四方方的图片，那么可以使用jpg格式图片。

 

PNG，图像文件存储格式，其目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。可移植网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序中，或网页或S60程序中是因为它压缩比高，生成文件容量小。

 

体积小 网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，网页中不可能大范围的使用文件较大的bmp、jpg格式文件。

 

无损压缩 PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。

 

索引彩色模式 PNG-8格式与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代表性的颜色编号，每一编号对应一种颜色，图像的数据量也因此减少，这对彩色图像的传播非常有利。

 

更优化的网络传输显示 PNG图像在浏览器上采用流式浏览，即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容，然后再逐渐清晰起来。它允许连续读出和写入图像数据，这个特性很适合于在通信过程中显示和生成图像。

 

支持透明效果 PNG可以为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。

 

PNG同时还支持真彩和灰度级图像的Alpha通道透明度。

 

对于PNG图片，考虑用Pngcrush或类似的工具进行优化。

 

常见的工具如下表:

 

pngcrush http://pmt.sourceforge.net/pngcrush/

 

pngrewrite http://www.pobox.com/~jason1/pngrewrite/

 

OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/(refer: 教程)

 

PNGOut http://advsys.net/ken/utils.htm

 

 

 

8.Grade A on Do not scale images in HTML

 

更多的时候，可能是因为偷懒而没有制作合适大小的图片，页面标签中需要显示图片的大小，像素是多大，就将图片压缩成多大（ps修改图片像素大小）。因为http请求资源，不会因为html标签中图片的大小设置而压缩，而是将图片先下载，再进行渲染，显示。

 

9.Grade A on Make favicon small and cacheable

有的时候，判断独立域名的 Blog 是否专业，基本看一下是否有favicon.ico就差不多了。就像iteye的网站，都有一个favicon.ico。没有favicon.ico的网站，不是一个好网站。

 

 

Web前端使用比较频繁的优化措施，投入与产出最高的措施！

 

10.减少http请求次数

 

合并CSS、图片、javascript。用CSS控制图片坐标偏移量，js合并成一个大的js文件。

 

11.能缓存到客户端的缓存到客户端

 

通过设置http头中的cache-control的expires属性，可以设置缓存时间，将图片信息、js文件缓存到浏览器那一端

 

12.使用gzip对http传输进行压缩

 

html、js、css以及json数据都可以通过启用gzip方式进行压缩，压缩后再将这些信息传输到客户端。

 

13.CSS与JS的位置

 

CSS放在html页面的最上面，js放置在页面的最下端。浏览器加载js的时候，是边加载，边执行。若执行缓慢，会阻塞页面的显示。但是页面的解析需要js的时候，应该将此js块放在页面的顶端。

 

14.减少页面重定向的次数和概率

 

页面重定向，第一次访问服务器资源，返回来的内容，状态码是302以及一个URL，那么浏览器解析到此，还需要再次根据这个新的URL请求一下服务器。这样从用户体验上来说，多了一次访问的过程，认为上感觉会有短暂的停顿。那么从服务器端的角度来说，服务器又一次承载了一遍http request请求。如果不是特别的需求，尽量不要进行页面重定向。

 

15.压缩静态文件

 

CSS、javascript的文本内容，都可以进一步通过网络工具进行压缩和代码混淆，这样配合上gzip压缩，这些文件将会编得十分轻量。常用的工具有：

 

1）百度的js压缩工具——http://app.baidu.com/appweb/introduce/?appid=693622

 

2）站长工具——http://tool.chinaz.com/js.aspx

 

16.将时效性不是很高的页面静态化

 

类似像首页、top-N页面都可以将其动态的一面通过freemaker模板引擎转换成静态文件。用户每次的请求都是请求这个静态文件，比JSP这种动态页面，反应时间要大一到两个数量级。

 

17.从系统架构层面对Web前端的优化

 

1）：增加反向代理，并且放开其自身具备静态文件缓存的功能或者与类似squid工具进行结合，每次请求的静态资源，若在缓存中存在，那么不必请求到后端服务器，直接将资源返回给客户端浏览器。

 

2）：增加内容分发系统——CDN，通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

 

3）：将网络负载转嫁给别的网站，比如图片是比较消耗网络带宽资源的，那么您的网站就可以将您的图片上传到第三方网站，比如说（新浪微博；人人网；）。那么您的网站只需要外挂这些链接就可以为您省去一大笔带宽的负载（虽然这么做有点那个！但是互联网不是倡导，开源，共享吗！）。

 

4）：对于静态资源，例如生成的静态网站、图片、js、css最好是能将其放到另外的服务器上，这样将网络IO，本地磁盘IO的压力就分担给了另外的服务器，而WebApp自身需要消耗的IO就可以完全处理自身运行的业务上了。

 

下面是参考资料以及扩展阅读资料

 

《HTTP权威指南》

 

《高性能网站构建实战》

 

《大型网站技术架构-核心原理与案例分析》

 

http://jishu.zol.com.cn/13734.html

 

http://www.poluoluo.com/jzxy/201107/139017.html

 

http://gubaojian.blog.163.com/blog/static/166179908201222154447988/

 

http://www.cnblogs.com/me115/archive/2010/12/24/1915762.html

 

http://www.poluoluo.com/jzxy/200912/75133.html

 

http://jingyan.baidu.com/article/6b97984d609aca1ca2b0bfca.html

 

http://baike.baidu.com/link?url=nje60s6LkPxHNdoZS_cflL2_K2H3xw_ui4ZAy5xVpKYGZe5pIvlJPqLVMhEJ49Us

 

《浏览器的渲染原理》http://blogread.cn/it/article/6481?f=qqt

 

http://blogread.cn/it/article/6128?f=qqt

 

http://www.qianduan.net/keys-to-a-fast-web-app.html

 

http://blogread.cn/it/article/5950?f=qqt