在本文中,如何使用GruntJS为了使治疗简单的前端性能优化自己主动,我写了一个完整的样本放在Github上。能够參考一下。关于Yahoo的前端优化规则请參考:Best
Practices for Speeding Up Your Web Site

前端性能主要有图片的压缩。JS和CSS的合并、压缩。对全部静态文件的文件依据其内容加上hash,然后把CSS、HTML等文件里对全部的静态文件名称替换成加上hash的新文件名称。对全部的静态内容的路径上加上CDN的URL。最后将全部的静态文件上传到七牛CDN上去。以下我们按功能来说一下。

图片压缩

很多图片尤其是png图片有时候含有大量无意义的填充,添加图片的大小。我们能够通过contrib-imagemin对全部的图片进行压缩优化,从而减小图片的大小。

依据我们使用经验来看,一般能够压缩5%到10%左右。

JS和CSS的文件的合并压缩

合并JS和CSS能够大量的降低HTTP请求,达到优化前端性能的目的。

同一时候CSS和JS文件是静态文件,能够压缩到很小的大小。

GruntJS官方提供了contrib-concat,contrib-cssmin,contrib-uglify等相应的插件来做相应的事情。我们这里由于要文件名称的替换,使用了usemin插件,它会自己主动调用上述几个插件的。所以在我们的Gruntfile.js里并没有这3个插件的配置信息,而仅仅是在task列表里调用了这几个插件。

详细请參考:usemin

静态文件缓存处理

为了最大程度的提高浏览器的载入速度,最好的方法是让浏览器将全部的静态文件都缓存在client。这里的缓存是指expire和cache-control的max-age,而不是Last-Modified。由于使用Last-Modified 和 If-Modified-Since还是会发出请求的,仅仅是没有更新就返回304状态码而max-age则是不会发出请求的,而是直接使用本地的缓存。

使用缓存的面临的一个比較在的问题是假设文件有更新假设清理缓存或者假设让用户下载最新的文件。

一种做法是静态文件加上版本,比如 style.css?v=1.1。这样的做法能够达到清除缓存的目的。可是维护起来相对麻烦。比較版本没有办法自己主动化,没有办法推断文件是否有更新。第二种做法是对文件内容进行hash。然后将hash值增加到文件名称中。比如style.abd1q2.css。这样就非常easy进行自己主动化处理。我们这里使用了yeoman开发的filerev插件,它能够对文件内容进行MD5运算,然后将运算后的hash加到文件名称中去,这样就非常easy推断文件是否被改动,同一时候它能够和usemin进行完美的结合起来。

Hash处理后文件名称的替换

对CSS和JS进行压缩合并以及对全部静态资源进行filerev处理后,原来HTML、CSS、JS等静态资源的引用文件名称就须要替换成新的文件名称了。比如HTML中对CSS和JS的引用,CSS中对图片的引用。我们使用了Yeoman开发的usemin进行替换。它的工作原理是,对须要处理的文件里的静态资源,在指定的目录查找经过filerev处理过的相应文件。假设找到则替换成相应的文件。

比如。我们在代码中对CSS的引用代码例如以下:<link
type="text/css" href="style.css">,usemin会在指定的目录以下寻找类似style.abd1q2.css的文件,假设找到则会把我们的CSS引用代码自己主动替换成:<link type="text/css" href="style.abd1q2.css">。

详细请參考:usemin

CDN路径的替换

开发过程中对全部静态资源的引用都是指向项目自己的domain。假设要使用CDN,则须要将全部静态资源的引用Domain指向CDN的domain。这里使用GruntJS插件cdn来对全部静态资源进行全局替换。

上传静态资源到CDN

当以上步骤完毕后就能够将全部的静态文件上传到CDN了。

七牛官方提供了NodeJS的SDK,可是貌似比較难用。我们样例里使用了第三方开发的NodeJS模块qn,很easy,详见:qn。我的方法是画面和CSS/JS穿越了那里上传的文件夹,图片和CSS/JS加上不同的前缀分别为。由于7牛不具备的build文件夹内。见cdn.js文件。

说明

  1. grunt build
  2. grunt upload

基于GruntJS前端性能优化的更多相关文章

  1. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  2. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  3. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  5. Web前端性能优化教程04:压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  6. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  7. 前端性能优化(三)——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  8. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  9. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

随机推荐

  1. MVC @Html控件

    传统的Html元素不能和服务端数据进行绑定 HtmlHelper类提供了一系列的方法来生成Html元素 并可以实现与数据绑定在一起 然后生成Html Html.BeginForm(actionName ...

  2. FPGA机器学习之学习的方向

    经过了2个月对机器学习的了解后.我发现了,机器学习的方向多种多样.网页排序.语音识别,图像识别,推荐系统等.算法也多种多样.看见其它的书后,我发现除了讲到的k均值聚类.贝叶斯,神经网络,在线学习等等, ...

  3. 64位内核注冊tty设备

    在64位系统中,注冊tty设备须要注意的是,Android跑在EL0而且在32位模式下,kernel跑在EL1而且在64位模式下,不但内核须要打开CONFIG_COMPAT选项,非常多android上 ...

  4. Java Tread多线程(0)一个简单的多线程实例

    作者 : 卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39341887 本文演示,一个简单的多线程实例,并简单分析一下线程. 编程多 ...

  5. swing中几种layout示例(转)

    import java.awt.BorderLayout;import java.awt.FlowLayout;import java.awt.GridLayout;import java.awt.e ...

  6. 第九讲:HTML5该canvas推箱子原型实现

    <html> <head> <title>动</title> <script src="../js/jscex.jscexRequire ...

  7. 使用Simple DNS plus 构建自己的DNS

    1.下载并安装Simple DNS plus 2.界面例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2tfYm9zcw==/font/5a6L ...

  8. Codeforces 12D Ball 树形阵列模拟3排序元素

    主题链接:点击打开链接 #include<stdio.h> #include<iostream> #include<string.h> #include<se ...

  9. [原创].NET 业务框架开发实战之七 业务层初步构想

    原文:[原创].NET 业务框架开发实战之七 业务层初步构想 .NET 业务框架开发实战之七 业务层初步构想 前言:本篇主要讲述如何把DAL和BLL衔接起来. 本篇议题如下: 1.       DAL ...

  10. 【SQL Server性能优化】SQL Server 2008该表压缩

    当数据库是比较大的,而当你想备份,我们可以启动数据库备份压缩.这项由于备份文件比较小的压缩,所以整个备份的更快的速度,同时还低了磁盘空间的消耗. 当然还有一方面.肯定会添加cpu的消耗.只是一般的se ...