之前简单面试的时候,感觉回答77哥回答的不是很好. 最近又看过几本书后,有了一些新的看法,对于内容分类也有新的变化。

之前写过一篇类似的:

http://promiseforever.com/2012/03/12/improve-speed-for-you.html

1.减少HTTP请求数

相同内容,相同大小的数据,10个请求数的页面肯定比100个请求数要快,浏览器和服务器建立握手,尤其在网络环境不是太理想的时候,这个问题比较突出。而且有效节约服务器资源。

2.数据内容的优化(文字,图片,CSS,JS,COOKIES,CACHE,CDN,JSON)

因为内容还原度的要求是不一样的,商品图,LOGO需要的还原度比较高,可以使用较为清晰的32位PNG或者JPG,如果是网站的边角料,可以使用gif或者16位PNG。如果有专用服务器做CDN,可以不用考虑压缩(Gzip)的问题,如果没有且服务器允许的话,对图片和文字都进行压缩的话,可以有效节约浏览器下载数据的大小。

CSS SPRITE拼合图片也可以有效节约图片体积,JS,CSS等文件在使用的时候,可以先使用YUI等压缩工具进行压缩,将只是给开发人员看的缩进内容都省略,顺便一提,对于IE较老的版本,CSS,JS的分号和滤镜中的某些空格不能随便压缩掉,如果随意压缩掉,会发生想要的效果消失掉的BUG。

鉴于访客来源地区的差异,合理使用CDN也是一个不错的方案。

例如CSS,JS这些额外的表现和行为的元素,如有可能,单独保存为外部文件,在HTML文档中引用的位置最优方案为:css位于文档头部,利于尽早渲染页面,核心JS库可以适当放置较早的位置,比如jquery,其他的js文件放置于页面尾部,有可能的话,尽量拼合这些文档,js如果包含较多数据,可以使用eval packed二次压缩。

cache可以使用etag,expire,或者HTML5-cache进行缓存,使用JS进行调用或者遵循浏览器的默认规则,有效减少重复下载内容的时间。

cookies要谨慎使用,避免发生cookies 污染,因为浏览器存在带cookies发送请求,所以cookies的大小必须在合理范围,虽然它最大也只是4kb,正确设置过期时间,合理减少不必要内容,是优化的有效手段..

JSON作为数据交换手段之一,比xml的优越性还是蛮多的,首先是它体积更小,传输更快,速度是网站的基础之一。而且JSON可以描述出对象,十分适合进行小段的程序间的通信。

3.减少DOM操作

DOM树庞大,很多操作DOM的时候是进行整体拷贝,然后遍历设置属性的过程,这个操作是很浪费时间的,如果有可能,使用XPATH,或者直接操作某个带有ID的元素,更为快捷和节约资源。

使用DOM的时候,必须合理进行局部的VAR保存一下操作中会重复利用到的对象。

4.页面重构

在对DOM元素进行操作之后,如果该元素会影响到其他的元素,例如其他元素的上下文是它,那么其他元素会进行重排,在它进行重新渲染生成的时候。重新渲染元素需要消耗内存和时间,如果页面包含许多元素,重排的时间和资源也不容小觑。

DOM结构如果不能保持简明良好,反复嵌套无用的结构,不仅在重排的时候会造成浪费,而且影响后续开发。