《高性能HTML5》性能准则

 

页面加载时间大大影响访客的访问耐心与兴趣,影响流量的同时也会影响搜索引擎的搜索排名。

“排名不高的网站吸引不到很多的人,人少了东西卖不出去,卖不出去,赚不到钱,倒闭是早晚的事儿。”

当谷歌地图首页从100k减少到80k时,流量在第一周就增长了10%,接下来三周内涨了25%;亚马逊也发现,当购物页面加载时间每延长0.1秒,销量就会下降1%。

  • 网站性能准则。(按照对页面加载的时间影响强弱排序)

  1. 减少HTTP请求
  2. 使用CDN加速
  3. 避免空的src和href属性值
  4. 增加过期头
  5. 启用GZIP压缩
  6. 将CSS放在head头部
  7. 将JavaScript放在body尾部
  8. 避免使用CSS表达式
  9. 删除不需要的CSS语句
  10. 对JavaScript和CSS代码进行压缩
  11. 减少重绘

一、减少HTTP请求

  1. 理解并行连接。页面内容HTML加载很快,其他的文件是一组一组加载的。将资源文件分散在不同域名下可利用浏览器并发,提高加载速率。但太多的域名造成的长时间DNS查询可能会反过来影响加载时间。
  2. 合并资源文件。
    1. 数量少体积大的文件会比数量多体积小的文件加载的更快。
    2. 同时,合并资源后会减少HTTP请求,留更多时间在页面渲染上。因此在开发环境保持分割文件模块的方式,在上线发布的时候再去合并文件。
  3. 使用图片精灵。
    1. 图片精灵是将一个网站上的所有图片拼接合并到一个大图片上,在低并发的浏览器上效果更佳明显,可显著减少HTTP请求。在使用的时候,对图标、标志、按钮等进行定位选中即可。
    2. 还可将图片精灵根据颜色来分组,分成多个文件。即每个精灵只有一种颜色范围。不同团队负责网站不同的部位时,如Team A负责Nav,Team B负责Logo,此时,应将各自组的图片精灵分成个子的文件。
    3. 使用时,先做一个div,然后用CSS样式来制定想要显示的图标。

      background-image:url(sample.png);
      background-position:-m px -n px;
      background-repeat: no-repeat;

    4. 在线工具:spritecow.com , spritebox.net

二、使用CDN加速(内容分发系统)

使用CDN应主题给文件引用加上时间戳,避免缓存在CDN服务器上的过期文件对用户产生影响。

三、避免空的src和href属性值

  1. 当用超链接来触发JavaScript的一个交互,当点击时,虽href为空,但客户端还是会向服务器发送一个HTTP请求。解决办法是将href值设为JavaScript语句。例如

    <a href=”javascript: ;” class=”triggerName”>Trigger</a>

  2. 经常会哟空src属性的img元素被JavaScript动态赋值,此时,在脚本执行之前元素就被浏览器渲染了,尤其是在JavaScript脚本放于文档最后时。所以浏览器还是会向服务器发送一个空的HTTP请求。

四、增加过期头

  1. 为所有静态文件,包括图片、样式、脚本、PDF等等都加上过期头。过期的时间要定的很遥远,基本上可认为永不过期,这样浏览器就会缓存静态文件。例如

    Expires: Wed, 1 Jan 2050 00:00:00 GMT

  2. 要想让用户更新这些远不会过期的静态文件时,需要更改文件名。因此最好使用一套版本控制机制。使用时间戳或者版本号来命名静态文件。

五、启用GZIP压缩

  1. 压缩减少了文件传输时间,增强了用户体验,节省带宽。HTTP 1.1协议启用了Accept-Encoding功能,表明HTTP请求的内容是被压缩过的。例如

    Accept-Encoding: gzip, deflate

  2. 美中不足的是有些浏览器或Proxy服务器不支持压缩,因此在头部增加Vary字段,例如

    Header set Vary *

  3. 压缩一切文字类内容,包括HTML,CSS,脚本,XML,JSON等,但PDF,图片不应被压缩,因为越压缩越大。

六、将CSS放在head标签内,将JavaScript放在尾部

  1. CSS放在头部可以让用户更早的看到渲染后的页面,减少等待时间。同时,合并小的CSS文件可一定程度上加快载入。
  2. 脚本会阻止并行加载。将JavaScript放在头部会阻止页面的渲染,js卡住时,用户只能面对白屏。
  3. 将JavaScript放在body标签结束处,本质上解决了脚本阻塞加载的问题。同时不需要用Ready事件来保证所用的元素是可用的。

七、避免使用CSS表达式

  1. CSS表达式只有IE5~7支持,它比正常的CSS要长很多。
  2. CSS表达式执行的频率很高,只要页面一滚动,鼠标一移动就会反复执行。使得用户体验很差。

八、移除不使用的CSS语句

  1. 大多数浏览器的样式引擎是通过遍历所有CSS规则来寻找匹配的元素。移除无效CSS语句来节省时间和减少CSS文件体积节省带宽。
  2. 提取全站最公用的部分,放在base.css内,其余页面CSS语句放在单独文件内。

九、对JS、CSS代码压缩

压缩是指将所有不必要的非功能性字符从代码中去除,例如空白行,换行符,注释,分隔符等。可缩小文件体积,节省传输带宽。

还可以使用压缩工具,他们还能将变量统一变更为更短的名字,进一步缩减文件体积。但由此造成的代价是开发者读不懂自己写的源码。因此,需要保存源文件,并在源文件上进行维护。

十、减少重绘

  1. 规定图片的高和宽。为img规定好宽和高,使浏览器在生成布局树时为每个元素保留好区域。
  2. 不要使用表格布局。只在需要显示表格类数据时使用表格。因为表格是一行行显示的,通常导致页面重绘。
  3. 定义字符集。除IE6~8之外的浏览器一般会暂停页面渲染,直到找到字符集的定义。因此可以在head标签中定义字符集。千万不可将字符集的定义放在页面后面。
  4. 不要重组DOM。重排DOM会导致浏览器重绘。一定要操作DOM时,最好用class类来批量一次性修改,由此可避免很多重绘。