技术开发 频道

前端优化利器 Connect-Cachify使用指南

        【IT168 技术】在“A Node.JS Holiday Season”系列丛书的这一章中,我们将会讨论一些前端性能和介绍一些基于Mozilla的快速开发工具。我们将要使用前段性能自动化中非常重要的工具之一的connect-cachify。

  开始之前,让我们简要重述一下作为开发者如何让机器运行的更稳定。如果你已经了解前端最优化的方法,请跳过前面的部分,了解如何使用connect-cachify完成自动化功能。

  3c客户端性能优化

  网站上到处都是与性能优化相关的最佳实践的信息。虽然存在许多先进的技术可以为你的网站调整每一毫秒,但有三种基本工具是最基础的——连接、压缩和缓存。

  连接

  连接的目标是尽量减少对服务器发出的请求数量。服务器请求是昂贵的。建立一个HTTP连接所需的时间有时比传送数据本身所花的时间还要多。每个请求增加很多用于检测你的网站的开销,尤其是在移动设备上,这会造成显著的连接延迟。你是否用手机通过Edge网络浏览过一个购物网站,上面的图片一个一个蹦出来?这就是连接延时的现象。

  SPDY是一个构建在HTTP协议之上的新协议,旨在通过合并多个资源请求到一个单一的HTTP请求来减少页面加载时间。不幸的是,目前只有最新版本的Firefox、Chrome和Opera浏览器支持这个新协议。

  尽可能的合并外部资源,可能方法过时,但是可以跨浏览器工作,并且不会因为SPDY的到来而退化。已经有很多用来合并JavaScript、CSS和图片这三种最常见外部资源的工具。

  JavaScript & CSS

  当一个网站有多个外部的JS时,需要把他们合并成一个文件。在JS加载完成前,浏览器会阻止掉所有的渲染。(也就是你看不到JS的效果)。被请求的JS文件将会出现延迟,比如执行下面的代码将会花费更长的时间。

<script src="jquery.min.js"></script>
<script src="main.js"></script>
<script src="image-carousel.js"></script>
<script src="widget.js"></script>

  把四个Js文件整合成一个,将会减少延迟时间。(像下面这样)

<script src="main.production.js"></script>

  使用整合过的JS有一点难度,所以大多数情况下,使用在正式的项目中。

  Css和进程也是一样,在做项目的时候也应该整合到一起。

  Images

  Data URIs和image sprites减少请求图片的两种基本方法。

0
相关文章