关于前端性能优化（下）

《关于前端性能优化（下）》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、关于前端性能优化(下)Cookie减少Cookie大小Cookie被用来做认证或个性化设置，英信息被包含在http报文头中，对于cookie我们要注意以下几点，來提高请求的响应速度，去除没有必要的cookie,如果网页不需要cookie就完全禁掉将cookie的大小减到最小注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain设置合适的过期时间，比较长的过期时间可以提高响应速度。关于asp.net屮的cookie可以参考ASP.NETCookiesOverview和

2、ConfigureUseCookiesModeforSessionState(IIS7)页面内容使用无cookie域名大多数网站的静态资源都没必要cookie,我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如杲能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。常见的划分domain的方式是将静态文件放在static.example.com,动态内容放在ww

3、w.example.com。也有一些网站需要在二级域名上应用cookie,所有的子域都会继承，这种情况下一般会再购买一个专门的域名来存放cookie-free的静态资源。例如Yahoo!的yimg.com,YouTube的ytimg.com等。CSS将样式表置顶经样式表(css)放在网页的HEAD屮会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。如果将样式表放在底部，浏览器会拒绝渲

4、染己经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来Z前只好对不起观众To避免CSS表达式CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同吋间设置不同的背景颜色。background-color:expression)(newDated).getHours()%2?"#B8D4FF":"#F08A00");css表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或

5、大小改变吋计算，即使我们滚动屏幕或者移动鼠标的吋候也在计算，因此我们还是尽量避免使用它來防止使用不当而造成的性能损耗。如果想达到类似的效果我们可以通过简单的脚本做到。varcurrentTime=newDate().getHours();if(currentTime%2){if(document.body){document.body.style.background=”#B8D4FF

6、”；}}else{if(document.body){document,body.style.background=,,#F08A00";}}用vlink>代替@import避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。避免使用FiltersAlphalmageLoad也是IE5.5-IE8中支持，这种滤镜的使用会导致图片在下载的吋候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。Javascr

7、ipt将脚本置底HTTP/l.lspecification建议浏览器对同一个hostname不耍超过两个并行下载连接，所以当你从多个domain下载图片的时候可以提高并行下载连接数量。但是当脚本在下载的时候,即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载Z后依次解析和执行。因此对于脚本提速，我们可以考虑以下方式，把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。HTML5中新加了as

8、ync关键字，可以让脚本异步执行。使用外部Javascirpt和CSS文件使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。同时将Javascript和CSS从inline变为external也减小了网页内容的大小。使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如micro