开发者社区> 杰克.陈> 正文

读高性能网站建设指南

简介: 原文:读高性能网站建设指南 性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中所有组件上 规则1:减少HTTP请求 图片地图(Map) CSS Sprites(css精灵) 内联图片() 合并脚本和合并样式表 图片地...
+关注继续查看
原文:读高性能网站建设指南

性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中所有组件上
规则1:减少HTTP请求
  • 图片地图(Map)
  • CSS Sprites(css精灵)
  • 内联图片(<a><img src = "" ></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头

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23590 0
拒做背锅侠!如何利用网站性能优化驱动产品体验提升
对于运维工程师而言,如果要票选五大最抓狂运维支撑场景,花样繁多的各种促销活动一定榜上有名。每个促销季上线都是忐忑不安的不眠夜。大量内容更新、大量客户涌入,大量数据读写,虽有着各种技术方案或工具服务保障着大促顺利进行。但仍有可能收到譬如“商品图片加载不出来”、“页面打开缓慢”、“无法完成订单支付”等诸多各地用户投诉。这些由于用户体验与网站性能造成的用户转化低、业务增长缓慢等糟糕结果,最终都会让运维工程师成为“众望所归”的背锅侠。
495 0
高性能网站的14个原则
原则1 减少HTTP请求数 构造请求、等待响应需要时间,因此请求数量越少越好。减少请求的总体思路就是合并资源,减少显示一个页面需要的文件数。 1. Image Map 通过设置标签的usemap属性与使用标签可以在一幅图片上切分出多个区域,指向不同的链接。
758 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
7581 0
网站的高性能架构
<div class="markdown_views"> <h2 id="性能测试">性能测试</h2> <h3 id="角度">角度</h3> <ul> <li>用户视角的网站性能 <br> 用户点击到看到屏幕响应的感受。 <br> 受到网络带宽, 浏览器解析HTML速度。以及服务器处理的影响 <br> 可以通过优化HTML,利用多域名提高并发,调整浏览器缓存策略,使
1481 0
拒做背锅侠!如何利用网站性能优化驱动产品体验提升
对于运维工程师而言,如果要票选五大最抓狂运维支撑场景,花样繁多的各种促销活动一定榜上有名。每个促销季上线都是忐忑不安的不眠夜。大量内容更新、大量客户涌入,大量数据读写,虽有着各种技术方案或工具服务保障着大促顺利进行。但仍有可能收到譬如“商品图片加载不出来”、“页面打开缓慢”、“无法完成订单支付”等诸多各地用户投诉。这些由于用户体验与网站性能造成的用户转化低、业务增长缓慢等糟糕结果,最终都会让运维工程师成为“众望所归”的背锅侠。
267 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载