欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 11:10:59
...

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可缓存