首页 >web前端 >html教程 >网页优化相关笔记一_html/css_WEB-ITnose

网页优化相关笔记一_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:19:441033浏览

Yahoo WEB优化14条法则

减少HTTP请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的作用。

减少HTTP请求次数

Image maps组合多个图片到一张图片中。总文件大小变化不大,但减少了HTTP请求次数从而加快了页面显示速度。该方式只适合图片连续的情况;同时坐标的定义是烦人又容易出错的工作。

CSS Sprites是更好的方法。它可以组合页面中的图片到单个文件中,并使用CSS的background-image和background-position属性来现实所需的部分图片。

Inline images使用data: URL scheme来在页面中内嵌图片。这将增大HTML文件的大小。组合inline images到你的(缓存)样式表是既能较少HTTP请求,又能避免加大HTML文件大小的方法。

优点: ①. 减少资源请求链接数。缺点: ①. 不会被浏览器缓存起来; ②. 移动端性能比http URI scheme低。

可通过在css文件的background-image样式规则使用Data URI Scheme,使其随css文件一同被浏览器缓存起来。

Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数。样式表也可采用类似方法处理。这个方法虽然简单,但没有得到大规模的使用。10大美国网站每页平均有7个脚本文件和2个样式表。当页面之间脚本和样式表变化很大时,该方式将遇到很大的挑战,但如果做到的话,将能加快响应时间。

使用CDN(Content Delivery Network, 内容分发网络)

可以通过 CDN服务提供商增加Expires Header缓存相关

压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间。从HTTP/1.1开始,web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型

把样式表放在头上

我们发现把样式表移到HEAD部分可以提高界面加载速度,因此这使得页面元素可以顺序显示。

把脚本文件放在底部

与样式文件一样,我们需要注意脚本文件的位置。我们需尽量把它们放在页面的底部,这样一方面能顺序显示,另方面可达到最大的并行下载。

在某些情况下,不是很容易就能把脚本移到底部的。如,脚本使用document.write方法来插入页面内容。同时可能还存在域的问题。不过在很多情况下,还是有一些方法的。

一个备选方法是使用延迟脚本(deferred script)。DEFER属性表明脚本未包含document.write,指示浏览器刻继续显示。不幸的是,Firefox不支持DEFER属性。在IE中,脚本可能被延迟执行,但不一定得到需要的长时间延迟。不过从另外角度来说,如果脚本能被延迟执行,那它就可以被放在底部了。

避免CSS表达式

一种减少CSS表达式执行次数的方法是一次性表达式,即当第一次执行时就以明确的数值代替表达式。如果必须动态设置的话,可使用事件处理函数代替。如果您必须使用CSS表达式的话,请记住它们可能被执行上千次,从而影响页面性能。

把JavaScript和CSS放到外部文件中

在现实世界中,使用外部文件会加快页面显示速度,因为外部文件会被浏览器缓存。如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数,但增大了页面的大小。另外一方面,使用外部文件,会被浏览器缓存,则页面大小会减小,同时又不增加HTTP请求次数。因此,一般来说,外部文件是更可行的方式。唯一的例外是内嵌方式对主页更有效,如Yahoo!和My Yahoo!都使用内嵌方式。一般来说,在一个session中,主页访问此时较少,因此内嵌方式可以取得更快的用户响应时间。

减少DNS查询次数

减少主机名可减少DNS查询的次数,但可能造成并行下载数的减少。避免DNS查询可减少响应时间,而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个,最多4个不同的主机名上。

最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符,从而降低下载时间。两个流行的工具是#JSMin 和YUI Compressor。混淆是最小化于源码的备选方式。象最小化一样,它通过删除注释和空格来减少源码大小,同时它还可以对代码进行混淆处理。作为混淆的一部分,函数名和变量名被替换成短的字符串,这使得代码更紧凑,同时也更难读,使得难于被反向工程。Dojo Compressor (ShrinkSafe)是最常见的混淆工具。

避免重定向

重定向功能是通过301和302这两个HTTP状态码完成的,如:

  HTTP/1.1 301 Moved Permanently  Location: http://example.com/newuri  Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上,重定向的主要问题是降低了用户体验。

删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能,即它会建立不必要的HTTP请求和额外的JS执行。

配置ETags

不是很懂,留个坑

缓存Ajax

提高Ajax的性能最重要的方式是使得其response可缓存

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn