性能优化

雅虎性能优化34条军规

• 减少HTTP请求

  • 终端用户响应的时间中，有80%用于下载各种内容，这部分时间包括下载页面中的图像，样式表，脚本，Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。
  • 几条减少HTTP请求次数同时保持页面内容丰富的技术
    • 合并文件
      • 合并文件就是通过把所有脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有CSS文件都放在一个样式表中。
    • CSS Sprites
      • 把所有背景图像都放到一个图片文件中，然后通过CSS的background-image 和 background-position属性来显示图片的不同部分。
    • 图片地图
      • 把多张图片整合到一个图片中。虽然文件的总体大小不会变，但是可以减少HTTP请求次数。（只有在图片的所有组成部分在页面中是紧挨在一起的时候可用，如导航栏，不具备可读性，坐标会比较繁琐易出错，不推荐使用）
    • 内联图像
      • 内联图像是使用data:URL scheme的方法把图像数据加载页面中.
  • 减少页面的HTTP请求是优化网站首先要做的一步，这是改进首次访问用户等待时间最重要的方法。

• 减少DNS查找次数

  • DNS提供了域名和IP的对应关系.当你在浏览器地址中输入域名时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样是需要时间的，一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间，这个过程中浏览器什么都不做直到DNS查找完毕。
  • 减少主机名的数量可以减少DNS查找次数。
  • 减少主机名的数量还可以减少页面中并行下载的数量。
  • 减少DNS查找会节省响应时间，但是减少并行下载数量会增加响应时间，所以最好主机数量在2-4个，这样就能在减少DNS查找次数和保持较高程度并行下载两者之间权衡。

• 避免跳转

  • 跳转是使用301和302代码实现的。
  • 有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在URL本该有斜杠“/”却被忽略掉时。

• 可缓存的AJAX

  • AJAX经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用AJAX并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
  • 为了提高性能，优化AJAX响应是很重要的。提高AJAX性能的措施中最重要的方法就是使响应具有缓存性。
    • Gzip压缩文件
    • 减少DNS查找次数
    • 精简JavaScript
    • 避免跳转
    • 配置ETags

• 推迟加载内容

  • 你可以看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？”
  • 把整个过程按照onload事件分割成两部分，隐藏或折叠部分的内容可延迟加载。

• 预加载

  • 预加载和后加载看起来似乎恰恰相反，但实际上预加载就为了实现另外一个目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像，样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以打打改善访问速度。
  • 几种预加载方法
    • 无条件加载：根据用户的操作有根据地判断用户下面可能去往的页面并相应的预加载页面内容。
    • 有预期的加载：载入重新设计过的页面时使用预加载。

• 减少DOM元素数量

  • 一个复杂的页面以为者需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。
  • 大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。

• 根据域名划分页面内容

  • 把页面内容划分为若干部分可以使你最大限度地实现并行下载。由于DNS查找带来的影响你首先要确保你使用的域名在2个到4个左右。

• 使iframe的数量最小

  • iframe元素可以在父文档中插入一个新的html文档。了解iframe的工作原理后才能更有效的使用它，这一点很重要。
  • iframe优点：
    • 解决加载缓慢的第三方内容如图标和广告等的加载问题。
    • Security sandbox
    • 并行加载脚本
  • iframe缺点：
    • 即时内容为空，加载也需要时间
    • 会阻止页面加载
    • 没有语意

• 不要出现404错误

  • HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应是没有必要的，塔只会降低用户体验而不会有一点好处。

• 使用CDN（内容分发网络）

  • CDN是由一系列分散到各个不同地理位置上的web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要根据和用户在网络上的靠近程度来指定的。
  • 用户与你网站服务器的接近程度会影响响应时间的长短。把你的网络内容分散到多个，处于不同地域位置的服务器上可以加快下载速度。

• 为文件头指定Expires和Cache-Control

  • 对于静态内容，设置文件头过期时间Expires的值为“Never expire” （永不过期）
  • 对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
  • 第一次访问你页面的用户会进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面的访问中不必要的HTTP请求。

• Gzip压缩文件内容

  • 网络传输中的HTTP请求和应答时间可以通过前端机制得到显著改善。通过减少HTTP响应的时间可以节省HTTP响应时间。
  • nodeJS可以使用compression middleware； 可以在nginx上配置

• 配置ETags

  • ETags（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。增加ETag为实体的验证提供了一个比使用‘last-modified date’ 更加灵活的机制。ETag是一个识别内容版本号的唯一字符串。
  • 原始服务器通过含有ETag文件头的响应指定页面内容的ETag。稍后，如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回原始服务器，如果ETag匹配，就会返回一个304状态码；

• 尽早刷新输出缓冲

  • 当用户请求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件，在这期间，浏览器会一直空闲等待数据返回。使用flush() 方法，它允许你把已经编译好的部分HTML响应文件先发送给浏览器，这时浏览器就可以下载文件中的内容而后台同时处理剩下的HTML页面。这样做的效果会在后台烦恼或者前台较为空闲时更加明显。
  • 输出缓冲应用的最好的一个地方就是紧跟之后，因为HTML的头部分容易生成而且头部往往包含CSS和JavaScript文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。

• 使用GET来完成AJAX请求

  • 使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头然后再发送数据。因此使用GET最为恰当，因为它只需发送一个TCP包。
  • IE中URL的最大长度为2K，因此如果你要发送一个超过2K的数据时就不能使用GET了。

• 把样式表置于顶部

  • 把样式表放在内会使页面有步骤的加载显示。
  • 注重性能的前端服务器往往希望页面有秩序地加载。我们希望浏览器把已经接收到内容尽可能显示出来。这从整体上改善了用户体验。

• 避免使用CSS表达式

  • 表达式的问题是它的计算频率比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动，乃至移动鼠标都会要重新计算一次。

• 使用外部JavaScript和CSS

  • 在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。

• 削减JavaScript和CSS

  • 精简是指去除代码中不必要的字符减少文件大小从而节省下载时间。消减代码时，所有注释，不需要的空白字符等都要去掉。在JavaScript中，由于需要下载的文件体积变下了从而节省了响应时间。

• 用 代替 @import

  • 避免使用@import的原因很简单，因为它相当于将css放在网页内容底部

• 避免使用滤镜

• 把脚本置于页面底部

  • 脚本带来的问题就是它阻止了页面的平行下载。

• 剔除重复脚本

  • 在同一个页面重复引用JavaScript文件会影响页面的性能。

• 减少DOM访问

  • 使用JavaScript访问DOM元素比较慢，应该做到：
    • 缓存已经访问过的有关元素
    • 线下更新完节点之后再将他们添加到文档树中
    • 避免使用JavaScript来修改页面布局

• 开发智能事件处理程序

  • 有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
  • 你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕

• 减小Cookie 体积

  • HTTP cookie可以用于权限验证和个性化身份等多种用途。cookie内的有关信息是通过HTTP文件头在web服务器和浏览器之间进行交流的。因此保持cookie尽可能的小以减少用户的响应事件十分重要。
  • 怎么做
    • 去除不必要的cookie
    • 使cookie体积尽量小以减少对用户响应的影响
    • 注意在适应级别的域名上设置cookie以便使子域名不受影响

• 对于页面内容使用无cookie域名

  • 创建一个子域名来存放静态内容以确保对于静态内容的请求是无cookie的。

• 优化图像

  • 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
  • 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。
  • 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。
  • 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息

• 优化CSS Spirite

  • Spirite中水平排列图片，垂直排列会增加文件大小；
  • Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
  • 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素

• 不要在HTML中缩放图像

  • 不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要小图像就直接使用小图像。

• facicon.ico 要小而且可缓存

  • favicon.ico 是位于服务器目录下的一个图片文件。它是必定存在的，因为即使你关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。
  • 由于是在同一个服务器上，它每被请求一次cookie就被发送一次。这个图片文件还会影响下载顺序。因此，为了减少favicon.ico 带来的弊端，要做到：文件尽量的小，最好小于1K。

• 保持单个内容小于25k

  • 这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。