读高性能网站建设指南-阿里云开发者社区

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

读高性能网站建设指南

简介: 原文:读高性能网站建设指南 性能黄金法则:只有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头

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

相关文章
高性能网站的14个原则
原则1 减少HTTP请求数 构造请求、等待响应需要时间,因此请求数量越少越好。减少请求的总体思路就是合并资源,减少显示一个页面需要的文件数。 1. Image Map 通过设置标签的usemap属性与使用标签可以在一幅图片上切分出多个区域,指向不同的链接。
679 0
大型网站如何实现图片服务器分离 提高网站性能
大家可以关注一下当前所有的大型网站,他们的图片URL一般都会用其他二级域名,其服务器也是独立的服务器。现在很多的网站上都会用到大量的图片,而图片是网页传输中占主要的数据量,也是影响网站性能的主要因素。
4458 0
网站的高性能架构
<div class="markdown_views"> <h2 id="性能测试">性能测试</h2> <h3 id="角度">角度</h3> <ul> <li>用户视角的网站性能 <br> 用户点击到看到屏幕响应的感受。 <br> 受到网络带宽, 浏览器解析HTML速度。以及服务器处理的影响 <br> 可以通过优化HTML,利用多域名提高并发,调整浏览器缓存策略,使
1434 0
【观点】如何打造网站高性能的核心优势
【CSDN编译】导读:本文根据Jeff Atwood的博文《Performance is a Feature》整理编译而来。作者就如何创建高性能网站分享了一些经验。现整理出来与大家分享。 以下是博客内容: 很多数据表明,网页打开和下载的速度越慢,用户越不愿使用。
766 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
高性能网站最佳实践
http://www.lazysa.com/2010/12/14/high_performance_site.html
399 0
12个用于网站性能优化的最佳的图片压缩工具
  图像压缩工具允许轻松的进行压缩,编辑和调整图片大小。这些工具支持多种图像格式,如JPEG,PNG,GIF,可以重新大小根据您的需要他们,让您的网站和 Web 应用程序的拥有更快的载入速度。   在这个列表中,我们编制了12个最佳的图片压缩工具,所有这些都将帮助你压缩你的网站上的图像,节省带宽和提高网站的性能。
865 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载