第一章 减少HTTP请求
使用图片地图:当导航栏包含多张图片时,可以将其合并成一张图片,再通过计算位置触发不同的链接
CSS sprites:将图标合并,引入一张背景图,通过CSS控制其位置
内联图片:将图片编码后再放到data后面。可用PHP的base64_encode对图片文件进行编码。
合并脚本和样式文件:理想情况下一个页面一个CSS文件
第二章 使用CDN(Content Delivery Networks)
CDN是指内容分发网络
CDN的做法是指将组建分布到其他服务器上
缺点:
响应时间可能会受到其他网站的影响
无法直接控制组件服务器所带来的特殊麻烦
工作度量会随CDN性能下降所影响
第三章 为组件添加长的Expires头
Expires 属性设置页面在失效前被缓存的时间。如果用户在页面失效前返回同一页面,缓存的版本将显示出来。
第四章 压缩脚本和样式表
通过压缩文件从而减少HTTP响应大小来减少响应时间
第五章 将样式表放在顶部
将样式表放在页面顶部加载可以保证页面基本内容的呈现
第六章 将脚本文件放在底部
将脚本放在底部加载可以实现页面的逐步呈现和提高下载的并行度。
如果脚本使用document.write向页面中插入内容,就不能将其移动到页面中靠后的位置。但是如果一个脚本可以延迟加载,那么它一定可以移到页面底部加载。
第七章 避免CSS表达式
CSS表达式是动态设置CSS属性的强大(但危险)方法。
如使用CSS表达式可以实现隔一个小时切换一次背景颜色:
background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );
表达式的问题在于对其进行的求值频率比人们期望的高。它们不只在页面呈现和大小改变时求值,当页面滚动、甚至用户鼠标在页面上移过时都要求值。
如果一定要使用CSS表达式,有两种技术可以避免CSS表达式产生这一问题:
创建一次性表达式
使用事件处理器取代CSS表达式
第八章 使用外部的Javascript和CSS
如果你的网站的本质上能够为用户带来高完整缓存率,使用外部文件的收益就更大。如果不大可能产生完整缓存,则内联是更好的选择。
如果你的网站中的每个/很多页面都使用了相同的Javascript和CSS,使用外部文件可以提高这些组件的重用率。
第九章 减少DNS查找
Internet是通过IP地址来查找服务器的。由于IP地址很难记忆,通常使用包含主机名的URL来取代它,但当浏览器发送其请求时,IP地址仍然是必需的。这就是DNS][2所处的角色。DNS将主机名映射到IP地址上,就像电话本将人名映射到他们的电话号码一样。当你在浏览器中键入github.com时,连接到浏览器的DNS解析器就会返回服务器的IP地址。
DNS查找可以被缓存起来以提高性能
第十章 精简JavaScript
精简是从代码中移除不必要的字符以减小文件大小,进而改善加载时间的实践。在代码被精简后,所有的注释以及不必要的空白字符(空格、换行和制表符)都将被移除。对于JavaScript而言,这可以改善响应时间效率,因为下载的文件大小减小了。
第十一章 避免重定向
重定向用于将用户从一个URL重新路由到另一个URL。
在重定向完毕并且HTML文档下载完毕之前,没有任何东西显示给用户。
重定向会使你的页面变慢
给URL的结尾添加斜线"/"
第十二章 移除重复脚本
在页面中多次包含相同的脚本会使页面变慢
在IE中,如果脚本没有被缓存,或在重新加载页面时,会产生额外的HTTP请求
在Firefox和IE中,脚本会被多次求值
第十三章 配置或移除ETag
实体标签(Entity Tag,ETag),是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。
第十四章 使Ajax可缓存
确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。
原文链接:http://www.aintnot.com/2014/12/28/read-high-performance-web-sites/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。