999广告联盟-最专业的|CPC|CPV|CPM广告联盟

解决网站响应速度应该注意的18个规则

规则5、将样式表放在顶部

当样式表放在文档底部会致使在浏览器中阻止内容逐步呈现,浏览器会延迟显示任何可视化组件,这种现象称为白屏。

用link标签将样式表放在文档HEAD中,可以解决白屏和无样式内容的闪烁。

规则9、降低DNS查找

Keep-Alive可以通过重用现有连接而防止了重复的DNS查找,还能防止TCP/IP开销来降低响应时间。

降低唯一主机名的数目就可以降低DNS查找的数目,但也会潜在的降低页面中并行下载的数目。

规则3、添加Exh3ires头

Web服务器用Expires头来告诉Web推广客户端它可以用一个组件的目前副本,知晓指定的时间为止。HTTP规范中简要地称该头为“在这1日期/时间之后,响应将被觉得是无效的”。

为了克服Expires的限制(由于Expires用一个特定的事件,这需要服务器和推广客户端的时钟要严格同步,而且过期日期需要常常检查,若到期则需要服务器提供一个新日期。)HTTP1.1引入了Cache-Control头,用max-age指定指定组件被缓存多长时间。它以秒为单位概念。

虽然Cache-Control解决了Expires的限制,但对于不支持HTTP1.1的浏览器,你可能仍然期望提供Expires头。

Expires和Cache-Control的max-age同时存在时,Cache-Control具备优先权并且明确指出了相对于请求时间所经过的秒数。

Expires不只应用于图片,而应该包含任何不常常变化的组件,如脚本,样式白哦和flash组件。

假如想在Expires过期前更新所缓存的组件,则仅需修改文件名即可,通常讲版本号嵌入组件的文件名内,修改版本号即可自动更新。

果一个组件没长久的Expires头,它仍然会存储在浏览器的缓存中。但在后续的请求中,浏览器会检查缓存并发现组件已经过期,就会向服务器发送一个条件GET请求来检查,若未改变则接收到304状况码。而通过用Expires头则可以防止额外的HTTP请求,对应降低响应时间。

规则十1、防止重定向

HTML文档的头中包含的meta refresh标签可以在其content属性所指定的秒数之后重定向用户

meta http-equiv=”refresh” content=”0” url=http://stevesouders.com/newuri

对于内部流量的跟踪,可以通过打造Referer日志来防止重定向,以此节省最后用户响应时间。

对于跟踪出站流量,可以用信标——一个HTTP请求,其URL中包含有跟踪信息。譬如在a标签上添加点击事件,新建一个图片对象,给它的src赋予链接出处和来源。

规则十5、降低跨域访问

跨域访问相比较来讲是个较耗时的过程,如非必要,尽可能降低跨域请求的个数。

规则十3、使ajax缓存

Ajax不是一个单独的,需要许可证的技术,而且一组技术,包括js,css,dom和异步数据获得,ajax 的目的是为了图片Web本质的开始-停止交互方法。

Ajax请求分被动和主动。被动请求:为了以后用而预先发起的,譬如:预加载。主动请求:基于用户目前的操作而发起的。

使ajax请求可缓存,可以用一个长久的Expires头来替换原来的HTTP头,但还需要进行更多的工作,用查看字符串参数,将用户名与该消息的ID都加入查看字符串中。

要确保Ajax请求遵守性能知晓,特别应具备长久的Expires头。

规则十4、尽可能少用iframe

大家都知道iframe对于SEO优化,和网页打开都有影响,应该尽可能降低用。但在实质应用中可能会用iframe做一些广告加载等,这个看具体需要进行优化。

规则十2、删除重复脚本

重复脚本损伤性能的方法有两种:非必须的HTTP请求和实行js所浪费的事件。

规则2、用内容发布互联网

假如应用程序Web服务器离用户更近,则一个HTTP请求的响应时间将缩短。

内部发布互联网(cdn)是一组分布在多个不同地点的Web服务器,用于愈加有效地向用户发布内容。除去缩短响应时间以外,CDN还可以带来其他优势。他们的服务包括备份,扩展存储能力和进行缓存。

依靠CDN的一个缺点就是你的响应时间可能会遭到其他网站的流量的影响,第二就是没办法直接控制组件服务器所带来的特殊麻烦。比如:修改http响应头需要通过服务提供商而不是自己,而且假如CDN的服务性能降低,你的工作水平也随之降低。

CDN用于发布静态内容,如图片,脚本,样式表和Flash。

2)、用事件处置器代替。

规则8、用外部的JS和CSS

纯粹而言,内联快一些。但外部的js和css文件有机会被浏览器缓存起来,而且可维护性也高得多。

一举两得的办法是加载后下载,即JS和css被加载到页面中两次(先是内联的,然后是外部的)。为主页内联css和js,但又能为后续页面浏览量提供外部文件。可以通过在主页加载完成后动态下载外部组件来达成。(通过onload时间)要使其可以工作,需要处置双重概念。(在onload函数内,添加外部的css和js,新增link和script标签到页面)

还可以借助cookie指示器来达成动态内联。用户第一个访问页面时,服务器发现没cookie,则生成一个内联了组件的页面。然后服务器添加js来在页面加载后动态下载外部文件(并设置了cookie)。下一次访问页面,服务器看到了cookie,则会生成一个用外部文件的页面。

规则6、将脚本放在底部

用脚本时,对于所有坐落于脚本以下的内容,逐步呈现都被阻塞了,也阻塞了并行下载。脚本会阻塞其后内容的呈现,还会阻塞其后面组件的下载。

HTTP1.1规范建议浏览器从每一个主机名并行地下载两个组件,而HTTP1.0,Firefox的默认值是每一个主机名并行下载8个组件。

研究表明:用两个主机名比用1,4或10个主机名能带来更好的性能。

在下载脚本时浏览器阻塞并行下载的另外一个缘由是为了保证脚本可以根据正确的顺序实行。

规则7、防止CSS表达式

CSS表达式比较容易致使频繁求值,从而致使性能低下。

避开问题: 1)、用一次性的表达式

规则十6、精简网站的DOM结构

过于复杂和冗余的DOM结构会增加浏览器分析的时长

规则十7、对cookie和localstorage进行减肥

降低站点对于cookie和localstorage的用,推广客户端存取的环境比较复杂,不要往cookie和localstorage中存储敏锐信息,也应该限制存储的数据大小。

规则1、降低HTTP请求

1、图片地图:允许在一个图片上关联多个URL,目的URL的选择取决于用户点击了图片上的什么位置。

2、CSS Sprites(css精灵):需要将多个图片合并在一个单独的图片上,依据css的background属性定位到对应的图标上。图片地图中的图片需要是连续的,而css Sprites则没这个限制。

3、内联图片:通过用data:URL模式可以在WEB页面中包含图片但不需要任何额外的HTTP请求。Data:URL模式的主要缺点在于不受IE的支持(包括7),另一个缺点就是可能存在数据大小上的限制。

将内联图片放置在外部,可以从缓存中得到额外收成。

4、 合并脚本和样式表:多个脚本合并为一个脚本,多个样式表合并为一个样式表。

网络上的网站愈加多,笔者也访问过不少网站,有些网站秒开,有些网站需要3-5秒才能加载完毕,也有甚者需要6-10秒才能加载完毕,这大大的影响了客户体验。

下来主要介绍一下网站性能优化的办法:

规则十8、防止图片src属性为空

浏览器在渲染的时候,会对图片的src路径进行请求,当src的路径没有或者为空时,浏览器会进行错误显示,或者再去请求图片onerror事件里指定的操作,会增加浏览器的请求次数,

规则10、精简和压缩JS、CSS大小

精简是从代码中移除非必须的字符以降低其大小,进而改变加载时间的实践。

精简js代码的工具备JSMin,Compressor(已更名为ShrinkSafe)

Gzip压缩产生的影响最大,但精简可以进一步降低文件大小,伴随js 的用量和大小不断增长,精简js代码可以得到更多的节省。

CSS的精简也非常有必要,移除注释和空白,合并相同的类,移除不适用的类与进行一些直观的优化,譬如对颜色进行缩写和移除非必须的字符串(用0代替0px)

规则4、压缩组件

从HTTP1.1开始,Web推广客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持。(Accept-Encoding:gzip,deflate)而假如Web服务器看到请求有这个头,就会用推广客户端列出来的办法中的一种来压缩响应,Web服务器通过响应中的Content-Encoding头来公告Web推广客户端使用了何种压缩。(Content-Encoding:gzip)

压缩的本钱有:服务器端会花费额外的CPU周期来完成压缩,推广客户端要对压缩文件进行解压缩。

加盟缓存:为了防止不一样的浏览器请求相同的加盟时出现差异(一个浏览器支持gzip,另一个浏览器不支持gzip),而致使获得不到正确的数据。可以在服务器的Vary响应头中包含Accept-Encoding来解决。(Vary:Accept-Encoding),如此加盟就会缓存每一个响应的两个版本——Accept-Encoding为gzip的压缩内容和没指定Accept-Encoding时的非压缩内容。

版权保护: 本文由 999广告联盟 原创,转载请保留链接: http://www.21zao.com/zhanzhang/25.html

相关阅读