1.开始

　　随着互联网技术的发展，企业应用里到处都是B/S设计，我有幸经历了很多项目有Asp.Net的，有Html/js的，有Silverlight的，有Flex的。很遗憾这些项目很少关注前端优化的问题，而将所有的100%的对性能关注集中于业务设计、第三方平台、数据库等方面，然而我想说只要拿出1%的精力，做一些前端优化的工作，也可以极大提升系统访问效率。

我见过一些项目加载html,js,css,xap等静态资源用了1~2秒，核心服务2~3秒，最后呕心沥血半个月仅能将核心服务优化0.5S，互联网早已有方案能够一天之内将静态资源加载优化至0.2S以内。

　　当掌握这一技能，运用起来又是如此简单，我只能说在Node.js的帮助下，前端工程师真是碉堡了。

2.前端优化

      304 : 当再次访问同样资源时，常常返回资源是304的状态码，表示资源没有修改，同时Body为空，减少了传输中使用的带宽。

　　FromCached ：某些资源会设置MaxAge，这样浏览器会将此资源保存在浏览器缓存文件夹中，当再次访问同样资源时就不再访问。

　　前端优化的核心就是缓存，首次访问时将所有静态资源（js,css）缓存在客户端，用户再次访问站点时，直接从缓存中加载静态资源，减少HTTP请求，从而加快系统加载的速度。

304是什么？

　　不用有这种担心，IIS已经默认帮我们做好了304规则，打开Fiddler监视IIS下的站点，刷新一下网页，所有发布在IIS中的静态文件都是304请求.

FromCached是什么？

　　是一个HTTP响应标头，在IIS里面直接设置一下就好了。

304还是FromCached？

　　FromCached更快，304还是要访问网络，现在网络带宽是增加了，但是我们TCP协议最怕丢包，在丢包率很难继续优化下去的时候，FromCached简直打爆304。

开了FromCached如何更新代码？

　　所有的HTML页都不应该FromCached缓存，仅缓存js,css。有更新时在HTML中修改引用的地址如

<link href="Assets/Default_5a33cd6.css" rel="stylesheet">

　　由于每次更新都使用不同的静态资源地址，所以低版本的静态资源就自动失效了。

　　更进一步的解释：https://github.com/fouber/blog/issues/6

有没有自动化的构建工具？

　　我们系统有几十个HTML，如果要手动一个个改，这更新频率，设计这方案会被开发人员喷死啊。幸好有了FIS。

3.FIS

　　FIS代表一个体系，首先要满足其目录规范，再进行下一步。

FIS的目录规范是什么？

　　开发一个站点一般会引用第三方类库（jQuery,Bootstrap之类），自己写一些项目上用的js,css,jpg之类，这些静态资源需要按照FIS的规范来划分目录。

　　不推荐使用FIS来管理第三方类库，第三方的类库发布在统一的静态站点下。

所以建议你的目录看起来应该是这样子的：

　　Assets用来存储所有自己为项目写的css,js,jpg等静态资源文件，Libs用来存储第三方的类库

　　Index.Html应该长这样

<!DOCTYPE html>

<html>

<head>

    <title></title>

	<meta charset="utf-8" />

    <link href="/Libs/jquery-1.12.3.min.js" rel="stylesheet" />

    <link href="/Assets/Index.css" rel="stylesheet">

    <link href="/Assets/Index.js" rel="stylesheet"/>

</head>

<body>

</body>

</html>

配置FIS发布程序

　　将站点发布出来，并配置fis-conf.js文件

fis.config.init({

    project: {

        md5Length: 7

    }

});

fis.config.merge({

    roadmap: {

        path: [

            {

                //查找所有Assets目录下的所有文件

                reg: /^\/Libs\/(.*)/i,

                //生成新的url '/Static/xxxx'

                url: '/Static/$1',

                //指定文件不产出MD5戳

                useHash: false,

                release: '/Static/$1'

            },

            {

                //查找所有Assets目录下的js,css,png文件

                reg: /^\/Assets\/(.*\.(?:js|css|png))/i,

                //生成新的url '/myappAssets/xxxx'

                url: '/myappAssets/$1',

                //js/css/png打上md5标记生成到/myappAssets/xxx目录下

                release: '/myappAssets/$1'

            },

            {

                //所有根目录下的.html文件

                reg : /^(.*\.html)/i,

                //发布到/myapp/xxx目录下

                release : '/myapp/$1'

            },

            {

                //前面规则未匹配到的其他文件

                reg: /.*/,

                //编译的时候不要产出了

                release: false

            }

        ]

    }

});

　　打开CMD定位到目录并执行命令

fis release --md5 --dest ../output

　　

　　项目被输出到../output目录中

　　url地址自动改好了，自己写的index.js和index.css的MD5码已自动加好，第三方类库并没有加上MD5码，一切OK，发布吧。

　　现在可以为所有动态文件建立缓存而不用担心更新问题了。

4.结束

　　FIS很好用，然而我们项目面临的问题仍然复杂，项目上系统加载框架使用iframe了，将导致第三方类库反复加载，为了避免反复加载这种情况需要将其重构为多页HTML的SOE框架，然而使用多页总不能反复Copy header和menu的html代码吧，当然你可以使用后端渲染引擎如swig，幸运的是grunt+FIS可以轻松的帮你搞定这个问题并避免使用后端渲染引擎，如何使用Swig+Grunt来重构iframe项目可以参考我以前的一篇博文：

Nodejs in Visual Studio Code 05.Swig+Bootstrap

　　

Nodejs in Visual Studio Code 11.前端工程优化的更多相关文章

  1. Nodejs in Visual Studio Code 10.IISNode

    1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...

  2. Nodejs in Visual Studio Code 14.IISNode与IIS7.x

    1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...

  3. Nodejs in Visual Studio Code 01.简单介绍Nodejs

    1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...

  4. Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  5. Nodejs in Visual Studio Code 07.学习Oracle

    1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...

  6. Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  7. Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

    1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...

  8. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  9. Nodejs in Visual Studio Code 06.新建Module

    1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...

随机推荐

  1. 【转】到底EJB是什么

    [转]到底EJB是什么 到底EJB是什么?被口口相传的神神秘秘的,百度一番,总觉得没有讲清楚的,仍觉得一头雾水.百度了很久,也从网络的文章的只言片语中,渐渐有了头绪. 用通俗话说,EJB就是:&quo ...

  2. window.showModalDialog 子窗口和父窗口不兼容最新的谷歌

    最新版的谷歌不支持window.showModalDialog的写法,会出现,找不到方法的问题,同时返回值的方法window.dialogArguments;也用不了. 这里就只能用最原版的windo ...

  3. 全国OA系统下载地址(全)

    思道OAhttp://www.anyoffice.net微软.NET平台,支持64位 金和OAhttp://www.jinher.com 红帆OAhttp://www.ioffice.cn 致远OAh ...

  4. head标签

    1.head标签中有个<meta>,,个人理解知识,可以设置页面字符集,文本格式,还可以加一些注释,例如如下所示

  5. ip接口调用

    <?php header("Content-type: text/html; charset=utf-8"); function getIP(){ if (isset($_S ...

  6. ios9 http请求失败的问题

    最近做项目的时候 将电脑版本升级到10.11.3  xcode'升级到 7.2  但是在模拟器上边进行数据请求的时候告诉我说网路哦有问题 截图如下 通过网络终于找到了解决的办法  原来是ios9 采用 ...

  7. JavaScript HTML DOM

    JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象 ...

  8. 使用IDEA,利用SpringMVC框架建立HelloWorld项目

    无论是从头开始学习一门新的语言还是技术,我们的入门都是从HelloWorld开始,也许就是因为这样,我在学习Spring MVC的时候,就有一种偏执,一定要写出一个HelloWorld来.研究了好久, ...

  9. asp.net 网站和asp.net Web 应用程序的一处不同

    环境为:VS2008Team+.net3.5 asp.net 网站前台页面<%= %>这样绑定可以,asp.net Web 应用程序就不可以 示例代码如下: 1.asp.net网站 < ...

  10. extjs下拉框添加复选框

    给ComboBox组件配置listConfig 下拉框代码: var gyslxcm = Ext.create('Ext.form.field.ComboBox',{ id : 'gyslxcm', ...