首页 > 代码库 > 读高性能网站建设指南

读高性能网站建设指南

2024-11-16 19:51:39   202人阅读

性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中所有组件上
规则1：减少HTTP请求
  • 图片地图（Map）
  • CSS Sprites(css精灵)
  • 内联图片（<a><img srchttp://www.mamicode.com/= "" ></a>）
  • 合并脚本和合并样式表
  • 图片地图鱼css sprites响应时间几乎一样，比原来为每个图片使用链接快50%以上，将内联图片放置在外部样式表中增加了一个额外的http请求，但被缓存后可以获得额外的收获
规则2：使用内容发布网络（CDN）
  • 将所有静态组件转移到CDN上
规则3：添加Expries头
  • Expires字段声明了一个网页或URL地址不再被浏览器缓存的时间     
  • 长久的Expires头应该用在所有组件上，包括脚本、样式表、和Flash
  • HTTP1.1引入Cache-Control头来克服expries头的限制，因为expries头使用一个特定的时间，他要求服务器鱼客户端时钟严格同步。
  • Cache-Control头使用max-age指定组件被缓存多久，他以秒为单位（不支持HTTP1.1的浏览器使用无效）
  • HTML文档不应该使用长久的Expires头，因为他包含动态内容
规则4：压缩组件
  • 使用gzip编码来压缩HTTP响应包
  • web客户端通过HTTP请求中的Accept-Encoding头来标识对压缩的支持
  • Accept-Encoding:gzip,deflate
  • web服务器是通过Content-Encoding头来通知web客户端
  • Content-Enconding:gzip(gzip是目前最流行最有效的压缩方法)
  •     使用Vary:* 或 Cache-Control:private头来禁用代理缓存，Vary:*头防止了使用浏览器使用缓存的组件，推荐使用Cache-Control:private，他是为所有浏览器禁用代理缓存。因为代理无法缓存你的内容
规则5：将样式表放在顶部
  • 逐步呈现（逐步加载）
  • 将样式表放在文档底部会导致浏览器中阻止内容逐步呈现
  • 使用LINK标签将样式表放在文档HEAD中
规则6：将脚本放在底部
  • 将脚本放在页面越靠下的地方，意味着越多的内容能够逐步地呈现
  • 并行下载
  • 最差的情况：将脚本放在顶部，脚本会阻塞对其后面的内容/组件的下载
  • 将脚本移到页面底部
规则7：避免CSS表达式
  • CSS表达式是动态设置CSS属性的一种强大（并且危险）的方式
规则8：使用外部的JavaScript和CSS
  • 加载后下载
规则9：减少DNS查找
  • DNS缓存和TTL（DDN查找可以被缓存起来以提高性能）
规则10：精简JavaScript
  • 精简
    • 从代码中移除不必要的字符以减少其大小，进而改善加载时间的实践，在代码被精简后，所有的注释以及不必要的空白字符（空格、制表符、换行）都将被移除
  • 混淆
    • 和精简一样，也会移除注释与空白，同时它会改写代码。作为改写的一部分，函数和变量名将被转换为更短的字符串，这时代码更精炼，也变得更难以阅读
    • 三个主要缺点
      • 缺陷：混淆过程本身很有可能引入错误
      • 维护：由于混淆会改变JavaScript字符，因此需要对任何不能改变的符号进行标记，防止混淆器修改它们
      • 调试：混淆的代码很难阅读，造成产品在调式问题更加困难
  • 节省
    • 精简JavaScript脚本最流行的工具jsMin
  • 结合使用gzip压缩之后，精简和混淆之间的差距会减少，精简脚本可以降低响应时间，但不会带来混淆的风险
规则11：避免重定向
  • 重定向会使你的页面变慢
  • 使用重定向会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现出任何东西，也没有任何组件会被下载
  • 使用Alias/mod_rewrite/DirectorySlash和直接连接代码来避免重定向
规则12：移除重复脚本
  • 重复脚本损伤性能——不必要HTTP请求和执行JavaScript所浪费的时间
    • 在页面中包含相同的脚本会使页面变慢
    • 在IE中，如果脚本没有被缓存，或在重新加载页面时，会产生额外的HTTP请求
    • 在Firefox和IE中，脚本会被多次求值
  • 避免重复脚本
    • 在模板系统中实现一个脚本管理模块
规则13：配置ETag
  • ETag：实体标签（Entity Tag，ETag）是web服务器和浏览器用于确认缓存组件的有效性的一种机制
  • 服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方式
    • 比较最新日期
    • 比较实体标签
  • ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来
  • ETag还降低了代理缓存的效率
规则14：使用Ajax缓存
  • DHTML：动态HTML允许在页面加载完成后，HTML页面的表现能够变化。这是JavaScript和css与浏览器的文档对象模型进行交互来实现
  • Ajax：异步的JavaScript与XML。它将Web体验从“浏览页面”转变为“与应用程序进行交互
  • Ajax的请求：
    • 被动请求：是为了将来使用而预先发起的
    • 主动请求：是基于用户当前的操作而发起的
  • 确保Ajax请求遵守性能指导，尤其应具有长久的Expires头

读高性能网站建设指南


联系
我们