高性能网站14条——读《高性能网站建设指南》
来源:互联网 发布:元首最广为人知 编辑:程序博客网 时间:2024/06/06 18:34
虽然不是做前端开发的,但是了解一些也是有用的。例如js脚本和css脚本是应该放在页面顶部吗?…
规则1、 较少HTTP请求
性能黄金法则:只有10%-20%的最终用户响应时间花在了下载HTML文档上。其余的80%-90%时间花在了下载页面的所有组件上。
实现技术:
- 图片地图(Image map):当在导航栏或者其他超链接中使用多个图片时,使用图片地图在一个图片上关联多个URL,可以减少HTTP请求加速页面。
- CSS Sprites:将多个图片合并到一个单独的图片中,然后使用CSS的background-positon属性为span,div等设置背景图片。通过合并图片减少了HTTP请求,并且比 图片地图更加灵活。
- 合并脚本和样式表:如果页面引用了多个样式表和脚本那就需要合并了,最好一个页面不多于一个脚本和样式表。
规则2、 使用内容发布网络CDN
CDN是一组分布在多个不同地理位置的web服务器,可以更加有效的向用户发布内容。
规则3、添加Expires头
我们利用浏览器的缓存来改善网站性能,Web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本,直到指定的时间为止,例如。
两外还可以用Cache-Control的max-age来指定组件缓存的秒数。例如:
文件名:添加缓存后,那么相应的组件更新时用户也获取不到新版本,为了解决这个问题可以在文件名中添加版本号。
规则4:压缩组件
通常的做法是用gzip压缩脚本和样式表。
规则5:将样式表放在顶部
为了避免白屏现象,请使用LINK标签将样式表放在文档顶部的head中,这样无论页面是在新窗口打开、重新加载还是作为主页,页面都是逐步呈现的。
规则6:将脚本放在底部
HTTP1.1规范检疫浏览器从每个主机名并行下载两个组件,这样可以提高性能。但为了保证脚本正确的执行顺序,下载脚本时
不是并行的。因此脚本对web页面会有以下影响:
- 脚本会阻塞对其后面内容的呈现;
- 脚本会阻塞对其后面组件的下载。
将脚本移到页面底部可以加速web页面。
规则7:避免是用CSS表达式
CSS表达式允许动态设置CSS属性,例如
问题是表达式求值的频率过高,除了页面加载和改变大小外,当页面滚动、鼠标移动时都会重新求值。
解决方式:
- 一次性表达式:可以将上面例子中计算背景色的部分提取到js中,然后在css中调用一次该方法。
- 事件处理器:可以将需要计算的部分提取到单独的方法中,并写明调用该方法的事件,例如window.resize等等,这样就能减少不必要的求值。
规则8:使用外部Javascript和css
如果纯粹比较javascript和css的内联外联的话,可能内联会快一些。但在实际应用时,由于外联文件可以被浏览器缓存起来,因此使用外部文件会产生较快的页面。
规则9:减少DNS查找
DNS将主机名映射到IP地址上,当用户请求一个主机名之后,DNS信息会留在操作系统的DNS缓存中来提高性能。通过使用Keep-Alive和较少的域名来减少DNS查找。
规则10:精简Javascript
精简是从代码中移除不必要的字符以减小其大小,进而改善加载时间。常用的javascript精简工具有JSMin,DojoCompressor等。
规则11:避免重定向
重定向用于将用户从一个URL重新路由到另一个URL,实现重定向可能有很多原因,包括网站重新设计、跟踪流量、记录广告点击、建立便于记忆的URL等。但实际上重定向会使页面变慢,下面是几种常见的替代方案:
- URL结尾斜线:如果网站包含目录并且使用了自动索引,那么当URL结尾缺少应有的斜线时,可能会发送重定向。
- 跟踪内部流量:重定向经常用于跟踪用户流量的流向。也可以用Referer日志来跟踪流量,避免给向用户发送重定向,从而改善响应时间。
- 美化URL:为了向user展现便于记忆的URL,有时需要重定向。其实可以利用Alias,mod_rewrite和直接链接代码等来避免。
规则12:移除重复脚本
由于团队大小和脚本数量的影响,网站中的脚本是可能重复的,这可能导致不必要的HTTP请求和执行Javascript时浪费时间。要避免重复使用脚本,可以在模板系统中实现脚本管理模块,处理脚本的依赖性和版本。
规则13:配置或移除ETag
ETag(Entity Tag)实体标签,是Web服务器和浏览器用于确认缓存组件的有效性机制之一。它是唯一标识了一个组件的特定版本的字符串,格式约束是该字符串要用引号引起来。例如:
如果网站时放在同一台服务器是没有问题的,但是如果使用了服务器集群,则组件的下载次数会增多,导致性能下降。
规则14:使用Ajax可缓存
确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。
- 高性能网站14条——读《高性能网站建设指南》
- 高性能网站建设指南——网站优化的14条建议
- 高性能网站建设指南
- 高性能网站建设指南
- 高性能网站建设指南
- 高性能网站建设指南
- 《高性能网站建设指南》
- 读《高性能网站建设指南》——笔记
- 高性能网站建设-14条规则
- 读《高性能网站建设指南》有感
- 读《高性能网站建设指南》
- 关于web性能的思考与分享[08]雅虎14条军规—高性能网站建设指南
- Exceptional Performance:高性能网站建设指南
- 《高性能网站建设指南》笔记
- 《高性能网站建设指南》精要
- 《高性能网站建设指南》笔记
- 《高性能网站建设指南》笔记
- 高性能网站建设指南--前端
- Ubuntu11.10上编译android
- Linux ulimit命令
- 【原创】Linux下安装Mysql/RPM文件的安装/tar的安装/src源代码文件包
- 11大类编程语言功能比较表
- 使用变量控制Tab标签或按钮的方法|Axure实例
- 高性能网站14条——读《高性能网站建设指南》
- SystemProperties cannot be resolved错误
- 独立开发者:Android平台赚钱秘籍分享
- InitiateSystemShutdown与AbortSystemShutdown
- iPhone应用开发之一:窗口,视图,视图控制器和UIKit基础
- Joomla Component com_bch LFI Vulnerability
- 在WINDOWS下使用Eclipse + JNI开发C++ Android程序的环境配置
- PHP基础算法
- 独立开发者如何笑傲应用商店?