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中修改引用的地址如

  1. <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应该长这样

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. 	<meta charset="utf-8" />
  6.     <link href="/Libs/jquery-1.12.3.min.js" rel="stylesheet" />
  7.     <link href="/Assets/Index.css" rel="stylesheet">
  8.     <link href="/Assets/Index.js" rel="stylesheet"/>
  9. </head>
  10. <body>
  11.  
  12. </body>
  13. </html>

配置FIS发布程序

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

  1. fis.config.init({
  2.     project: {
  3.         md5Length: 7
  4.     }
  5. });
  6.  
  7. fis.config.merge({
  8.     roadmap: {
  9.         path: [
  10.             {
  11.                 //查找所有Assets目录下的所有文件
  12.                 reg: /^\/Libs\/(.*)/i,
  13.                 //生成新的url '/Static/xxxx'
  14.                 url: '/Static/$1',
  15.                 //指定文件不产出MD5戳
  16.                 useHash: false,
  17.                 release: '/Static/$1'
  18.             },
  19.             {
  20.                 //查找所有Assets目录下的js,css,png文件
  21.                 reg: /^\/Assets\/(.*\.(?:js|css|png))/i,
  22.                 //生成新的url '/myappAssets/xxxx'
  23.                 url: '/myappAssets/$1',
  24.                 //js/css/png打上md5标记生成到/myappAssets/xxx目录下
  25.                 release: '/myappAssets/$1'
  26.             },
  27.             {
  28.                 //所有根目录下的.html文件
  29.                 reg : /^(.*\.html)/i,
  30.                 //发布到/myapp/xxx目录下
  31.                 release : '/myapp/$1'
  32.             },
  33.             {
  34.                 //前面规则未匹配到的其他文件
  35.                 reg: /.*/,
  36.                 //编译的时候不要产出了
  37.                 release: false
  38.             }
  39.         ]
  40.     }
  41. });

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

  1. 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. js获取图片高度

    js获取图片高度时经常会获取的图片高度为0,原因是图片未加载完毕.第一次加载时,显示0(火狐等部分浏览器显示24).待加载完毕后,再刷新,显示图片高度258. var oImg = document. ...

  2. 将list<对象>转换成DataTable,把DataTable转换成参数传入存储过程实现批量插入数据

    领导让在存储过程中批量添加数据,找出效率最高的,我看到后台代码后,发现可以将list<对象>转换成DataTable,把DataTable转换成参数传入存储过程实现批量插入数据,知道还有其 ...

  3. 自定义图文混排视图MyImageTextView

    http://blog.csdn.net/xujunfeng000/article/details/36399339?utm_source=tuicool&utm_medium=referra ...

  4. django连接已有的数据库

    以连接postgresql为例: 1.安装psycopg2,下载地址:http://www.stickpeople.com/projects/python/win-psycopg/ 2.配置setti ...

  5. oracle 导出导入数据

    在window的运行中输出cmd,然后执行下面的一行代码, imp blmp/blmp@orcl full=y file=D:\blmp.dmp OK,问题解决.如果报找不到该blmp.dmp文件,就 ...

  6. Linux下安装SVN服务（CentOS7下）

    1. 安装 centos(我这里使用的是CentOS7)下yum命令即可方便的完成安装 测试安装是否成功: 2. 建立版本库 创建svn数据目录(subversion默认是把/var/svn作为数据根 ...

  7. github 分支 合并

    Git如何进行分支管理?      1.创建分支      创建分支很简单:git branch <分支名>      2.切换分支      git checkout <分支名&g ...

  8. jQuery网页加载进度条插件

    jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...

  9. nav

    $(document).ready(function() { $(window).resize(function(){ var need=0; var ul_max_width = $(window) ...

  10. linux 和 ubuntu 修改主机名

    原始主机名:jeepend-VirtualBox linux 修改方法: 1.使用secure CRT或其他方式 用root用户 登入系统.2.在终端输入: #hostname [修改后的主机名]3. ...