zoukankan      html  css  js  c++  java
  • 高性能网站14条——读《高性能网站建设指南》

    虽然不是做前端开发的,但是了解一些也是有用的。例如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客户端它可以使用一个组件的当前副本,直到指定的时间为止,例如。   clip_image002

    两外还可以用Cache-Control的max-age来指定组件缓存的秒数。例如:

    clip_image004

    文件名:添加缓存后,那么相应的组件更新时用户也获取不到新版本,为了解决这个问题可以在文件名中添加版本号。

    规则4:压缩组件

    通常的做法是用gzip压缩脚本和样式表。

    规则5:将样式表放在顶部

    为了避免白屏现象,请使用LINK标签将样式表放在文档顶部的head中,这样无论页面是在新窗口打开、重新加载还是作为主页,页面都是逐步呈现的。

    规则6:将脚本放在底部

    HTTP1.1规范检疫浏览器从每个主机名并行下载两个组件,这样可以提高性能。但为了保证脚本正确的执行顺序,下载脚本时

    不是并行的。因此脚本对web页面会有以下影响:

    • 脚本会阻塞对其后面内容的呈现;
    • 脚本会阻塞对其后面组件的下载。

    将脚本移到页面底部可以加速web页面。

    规则7:避免是用CSS表达式

    CSS表达式允许动态设置CSS属性,例如image

    问题是表达式求值的频率过高,除了页面加载和改变大小外,当页面滚动、鼠标移动时都会重新求值。

    解决方式:

    • 一次性表达式:可以将上面例子中计算背景色的部分提取到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服务器和浏览器用于确认缓存组件的有效性机制之一。它是唯一标识了一个组件的特定版本的字符串,格式约束是该字符串要用引号引起来。例如:

    image

    如果网站时放在同一台服务器是没有问题的,但是如果使用了服务器集群,则组件的下载次数会增多,导致性能下降。

    规则14:使用Ajax可缓存

    确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。

  • 相关阅读:
    一个很老的故事: 水和鱼的故事
    签到
    WEBPART结合实际的应用(.Net2005)
    Silverlight 3正式版新鲜出炉
    一个端口扫描的小程序
    带验证功能的的TextBox
    php解析url并得到url中的参数及获取url参数的四种方式
    Mysql外键约束设置使用方法
    require(): open_basedir restriction in effect. 解决方法
    PHP将变量存储在数据库中,读取并执行变量的方法
  • 原文地址:https://www.cnblogs.com/janes/p/2331370.html
Copyright © 2011-2022 走看看