高性能网站建设的14个原则
本日大概欣赏了一下《High Performance Web Sites》原则。本书籍的华文版是《高本能网站兴办指南》14个。 本书籍另有闭于个中各别问题深刻商量的进阶篇《Even Faster Web Sites》中译《高本能网站兴办进阶指南》网站建设。 作家引睹上头的豆瓣链接中有便不再照搬过来了高性能。 此地附上电驴里的下载地方此地附上115下载地方：这本书籍中给出了14条网站本能提高的规则网站降权便不再照搬过来了高性能。 此地附上电驴里的下载地方此地附上115下载地方：这本书籍中给出了14条网站本能提高的规则每个规则独力成章配有示例。这些规则大普遍都格外实用符合站点架构师、前端工程师。个中闭于于前端工程师的道理更大一些。 这次瞅的是本版。尔闭于于Web开拓较缺乏试验体味加之瞅得急遽因此大概存留脱漏、表述不当之处憧憬款待网友鄙弃教正。 规则1 缩小HTTP乞求数 构造乞求、等待共意须要时间因此乞求数目越少越好。缩小乞求的总体思绪即是兼并资材缩小表露一个页面须要的文件数。 1. Image Map 经过树立<img>标签的usemap属性与运用<map>标签不妨在一副图片上切分出多个地区指向不共的链接。比起运用多幅图片分别构造链接缩小了乞求数。 2. CSS Sprite（CSS贴图安排/贴图拼合/贴图定位）经过树立元素的background-position款式干到。普遍用于界面图标。典范的不妨参照TinyMCE编写器上方的那些小按钮。多个小图本质是从一个普遍的大图经过不共的偏移量裁剪而来如许加载界面上的稠密按钮本质上只要乞求一次（乞求大图一次）从而缩小HTTP乞求数。 3. Inline Image（内联图片） 在<img>的src中不指定外部图片文件的URL而是直接将图片信息放入。比方src="data:image/gif;base64,R0lGODlhDAAMAL..."某些特别情景下有用（比方一个不大的图片仅在姑且页面用到）。 规则2 运用多线路CDN 为你的站点供给多种线路（比方海内电信、联通、挪动）、多个地理地位（北方、南边、西部）的考察使得十脚用户都不妨赶快考察。 规则3 运用HTTP Cache 给不一再革新的资材（比方固态图）加较长的Expires头信息这些资材已经缓存未来很万古间都不妨不再反复传输了。 规则4 运用Gzip压缩 运用Gzip压缩HTTP报文减小体积缩小传输时间。 规则5 将款式表置于页眼前部 先加载款式表如许页面衬托得以较早发端给用户页面加载较快的感触。 规则6 将脚本置于页面尾部 缘故共5先处置页面表露页面衬托较早完成而脚本逻辑稍后实行如许给用户页面加载较快的感触。 规则7 制止运用CSS表白式 过于搀杂的JavaScript脚本逻辑、DOM查找、采用安排将会降矮页面处置效力。 规则8 将JavaScript与CSS动作外联资材 这犹如与规则1中的兼并思维相悖然而本来不然：计划每个页面都引入了一个大众的JavaScript资材（比方jQuery大概是ExtJS如许的JavaScript库）单便一个页面的展现来瞅内联（将要JavaScript嵌入HTML）页面将比外联（运用<script>标签引入）页面加载更快（因为其较少的HTTP乞求数）。然而假如有许多页面都引入了这个大众JavaScript资材那么内联筹备会形成反复传输（因为这个资材内嵌在每个页面中了所以屡屡挨开一个页面都要将这局部资材传输一遍从而形成搜集传输资材的浪费）。而将这种资材独力出来外联引用不妨处理这个问题。 因为JavaScript和CSS相闭于宁静咱们不妨闭于其闭于应的资材树立较长的作废期（参照规则3）。 规则9 缩小DNS查找 作家给出的倡导是： 1. 运用Keep-Alive保护对接 假如对接断开那么下次对接又要实行DNS查找纵然闭于应的域名-IP映照已被缓存查找也是要消耗一些时间的2. 缩小域名 屡屡乞求新域名都须要进行经过DNS查找不共的域名且DNS缓存无法表现效率。因此该当尽管将站点构造在一个普遍域名下制止运用过多子域名规则10 压缩你的JavaScript 运用JS压缩东西压缩你的JavaScript吧很灵验哦。瞅瞅jQuery的二个不共的发行版本便领会辨别了： 观赏版jQuery代码230KB 压缩版jQuery代码（用于本质安置）网站快速排名230KB 压缩版jQuery代码（用于本质安置）89.4KB规则11 尽控制止沉定向 一次沉定向表示着在你简直考察到想要瞅到的页眼前介入了一轮特殊的HTTP乞求（客户端倡导HTTP乞求→HTTP效劳器返回沉定向共意→客户端闭于新URL倡导乞求→HTTP效劳器返回实质下划线局部为特殊的乞求）因此消耗更多的时间（也便给人反应更缓的感触）。因此除非需要不要随便运用沉定向。几个“需要”的情景： 1. 制止URL作废 旧站点迁徙后为了制止旧的URL作废常常将闭于旧URL的乞求沉定向至新体系的闭于应地方。 2. URL粉饰 在可读性好的URL与本质资材URL之间变换比方闭于于Google Toolbar用户牢记住这个闭于人类富裕语义的地方却很难记取 ... /intl/en/index.html这个简直的资材地方。因此有需要保持前者而且将闭于前者的乞求沉定向至后者。 规则12 移除反复的脚本 不要在一个页面中反复引入沟通的脚本。比方脚本B和C都依附于A那么在运用了B和C的页面中便有大概存留闭于A的反复引用。处理办法闭于于大概的站点手动查瞅依附性消去反复引入；闭于于搀杂的站点则须要建立本人的依附控制/版本控制机制。 规则13 留神处置ETag ETag是除Last-Modified之外的另一种HTTP Cache本领。经过hash的措施辨识资材是否被建改。然而ETag存留一些问题比方： 1. 不普遍：不共Web效劳器（Apache IIS等）定义的ETag方法不共2. ETag的估计是不宁静的（因为计划过多因素）比方： 1） 沟通资材在不共效劳器上估计出来的ETag不普遍而宏大Web运用常常由不止一台效劳器供给效劳这便引导客户端在效劳器A缓存好的资材明显依然灵验而鄙人次乞求B时因为ETag不共而被认定为作废引导沟通资材的反复传输。 2） 资材不变而因为一些其他因素的变革比方摆设文件变动引导ETag变革。直接成果是体系革新后客户端大范畴爆发Cache作废引导传输量大增站点本能低沉。