当前位置: 网站建设 > 网页设计 > 建站经验 >

高性能网站建设的14个原则

时间:2013-03-02 04:16来源:未知 作者:admin 点击:

标签:高性能网站建设的14个原则 网站建设(1202)原则(20)Web(57)14个(1)不一致(1)服务器(15)不同(24)高性能(4)
1. 不一致:不同Web服务器(Apache, IIS等)定义的ETag格局不同 这次看的是原版。我对Web开发较缺少实际教训,加之看得匆仓促,因而可能存在漏掉、表述不当之处,盼望宽大网友不吝斧正。 ETag是除Last-Modified之外的另一种HTTP Cache手腕。通过hash的措施辨识资源是否被修正。但ETag存在一些问题,例如: 2. URL丑化 作者给出的倡议是:要么依据你的运用特色改良已有的ETag计算方式, 页面重构应注意repaint和reflow的9个问题 ,要么罗唆就不必ETag
高性能网站建设的14个原则》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349632013.htm

1. 不一致:不同Web服务器(Apache, IIS等)定义的ETag格局不同

这次看的是原版。我对Web开发较缺少实际教训,加之看得匆仓促,因而可能存在漏掉、表述不当之处,盼望宽大网友不吝斧正。

ETag是除Last-Modified之外的另一种HTTP Cache手腕。通过hash的措施辨识资源是否被修正。但ETag存在一些问题,例如:

2. URL丑化

作者给出的倡议是:要么依据你的运用特色改良已有的ETag计算方式,页面重构应注意repaint和reflow的9个问题,要么罗唆就不必ETag,而改用最简略的Last-Modified。

因为JavaScript跟CSS绝对稳固,咱们可以对其对应的资源设置较长的失效期(参考原则3)。

为你的站点提供多种线路(例如海内电信、联通、挪动)、多个地舆地位(北方、南方、西部)的访问,使得所有用户都可能疾速访问。

原则12 移除重复的脚本

作者给出的提议是:

这仿佛与原则1中的合并思维相悖,但实在不然:考虑每个页面都引入了一个公共的JavaScript资源(例如jQuery或是ExtJS这样的JavaScript库),单就一个页面的表示来看,内联(行将JavaScript嵌入HTML)页面将比外联(使用<script>标签引入)页面加载更快(由于其较少的HTTP请求数)。但如果有良多页面都引入了这个公共JavaScript资源,那么内联计划会造成重复传输(因为这个资源内嵌在每个页面中了,所以每次翻开一个页面都要将这局部资源传输一遍,从而造成网络传输资源的挥霍)。而将这种资源独立出来外联援用可以解决这个问题。

浏览版jQuery代码,230KB

准则1 减少HTTP恳求数

原则10 压缩你的JavaScript

本书另有对其中个别问题深刻探索的进阶篇《Even Faster Web Sites》,中译《高性能网站建设进阶指南》。

每次请求新域名都须要进行通过DNS查找不同的域名,且DNS缓存无奈施展作用。因此应当尽量将站点组织在一个统一域名下,避免使用过多子域名

1. 使用Keep-Alive坚持衔接

在可读性好的URL与实际资源URL之间转换,例如对于Google Toolbar,用户记得住

压缩版jQuery代码(用于实际安排),页面设计中的中文测试,89.4KB

原则4 使用Gzip压缩

2. ETag的计算是不稳定的(由于斟酌过多因素),例如:

通过设置<img>标签的usemap属性与使用<map>标签可以在一幅图片上切分出多个区域,指向不同的链接。比起使用多幅图片分辨构造链接减少了请求数。

原则14 在Ajax中利用HTTP Cache

通过设置元素的background-position款式做到。个别用于界面图标。典范的能够参考TinyMCE编纂器上方的那些小按钮。多个小图本质是从一个同一的大图通过不同的偏移量裁剪而来,这样加载界面上的众多按钮实际上只有要求一次(请求大图一次),从而减少HTTP请求数。

Ajax是异步请求,异步请求不会梗阻你当初的操作,而且当请求完成时,面向对象的XHTML与CSS编程,你立刻就可以看到成果。但异步不代表可以刹时完成,也不代表能够容忍它花无穷多的时间完成。因此对于Ajax请求的性能也需要器重。有许多Ajax请求访问的是一些相对稳定的资源,因此别忘了对Ajax请求利用好HTTP Cache机制,详细参见原则3、13。

2) 资源不变,而由于一些其余因素的变更,例如配置文件更改,导致ETag变化。直接成果是系统更新后客户端大范围产生Cache失效,导致传输量大增,站点性能降落。

Tag:网站建设   网站建设  

这本书中给出了14条网站性能晋升的原则,每个原则独破成章,配有示例。这些原则大多数都十分适用,合适站点架构师、前端工程师。其中对于前端工程师的意思更大一些。

2. CSS Sprite(CSS贴图整合/贴图拼合/贴图定位)

旧站点迁徙后,为了避免旧的URL失效,通常将对旧URL的请求重定向至新体系的对应地址。

1) 相同资源在不同服务器上盘算出来的ETag不一样,而大型Web利用通常由不止一台服务器供给服务,这就导致客户端在服务器A缓存好的资源明明依然有效,而在下次请求B时因为ETag不同而被认定为生效,导致雷同资源的反复传输。

2. 减少域名

1. 防止URL失效

原则13 警惕处理ETag

原则2 利用多线路CDN

不要在一个页面中重复引入相同的脚本。例如脚本B和C都依赖于A,那么在使用了B和C的页面中就有可能存在对A的重复引用。解决办法,对于简单的站点手动检讨依赖性,消去重复引入;对于复杂的站点则需要构建本人的依附治理/版本把持机制。

3. Inline Image(内联图片)

使用JS压缩工具压缩你的JavaScript吧,很有效哦。看看jQuery的两个不同的发行版本就晓得差别了:

原则11 尽量避免重定向

原则6 将脚本置于页面尾部

作者先容上面的豆瓣链接中有,就不再照搬过来了。

1. Image Map

先加载样式表,这样页面渲染得以较早开端,给用户页面加载较快的感到。

给不频繁更新的资源(例如静态图)加较长的Expires头信息,这些资源一经缓存,将来很长时间都可以不再重复传输了。

原则9 减少DNS查找

--> [网站建设之]高机能网站建设的14个原则

假如连接断开,非常实用的CSS统计图表实例,那么下次连接又要履行DNS查找,即便对应的域名-IP映射已被缓存,查找也是要耗费一些时间的

原则8 将JavaScript与CSS作为外联资源

原则7 避免使用CSS表白式

一次重定向象征着在你真正拜访到想要看到的页面前参加了一轮额外的HTTP请求(客户端发起HTTP请求→HTTP服务器返回重定向响应→客户端对新URL发动请求→HTTP服务器返回内容,下划线部门为额定的请求),因此消费更多的时间(也就给人反映更慢的感觉)。因此除非必要,不要随便使用重定向。多少个“必要”的情形:

本日大抵阅读了一下《High Performance Web Sites》。本书的中文版是《高性能网站建设指南》,静态页面制作注意事项

在<img>的src中不指定外部图片文件的URL,而是直接将图片信息放入。例如src="data:image/gif;base64,R0lGODlhDAAMAL..."某些特别情况下有用(例如一个不大的图片仅在当前页面用到)。

原则5 将样式表置于页眼前部

应用Gzip紧缩HTTP报文,减小体积,减少传输时光。

过于庞杂的JavaScript脚本逻辑、DOM查找、抉择操作将会下降页面处置效力。

起因同5,先处理页面显示,页面渲染较早实现,而脚本逻辑稍后执行,这样给用户页面加载较快的感觉。

原则3 应用HTTP Cache

结构请求、等候响应需要时间,因此请求数目越少越好。减少请求的总体思路就是合并资源,减少显示一个页面需要的文件数。


(责任编辑:网站建设)
高性能网站建设的14个原则相关文章
上一篇:页面重构应注意repaint和reflow的9个问题 下一篇:高手赐招 网页制作经典技巧24条
回到顶部