TOMMYHU

app开发讲就的是少请求，这样就需要更多的合并，通过一个url后面加带js或者css路径进而输入一个压缩合并的文件不失为一个好的idea，而Minify把CSS和JS压缩和削减给了我们一个思路，目前很多的公司的app都使用了这种手法，例如携程、同程的hybrid app，webapp等
Minify把CSS和JS压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。不要以为你的大带宽没有必要进行这类优化。使用它的理由更重要的是文件合并，而不是压缩，而是文件整合，这样可以减少浏览器端不断发出新的连接请求，就像FTP服务器一样，多个小文件和一个大文件耗时是不一样的。

Minify是用PHP写的，项目地址 http://code.google.com/p/minify/

安 装
   1. 下载最新的Minify然后解压缩到minify目录。
   2. 复制"min"目录到你的DOCUMENT_ROOT.

基本用法
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在，你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果，是不是minify的两个js文件的内容?

附译min目录下的README.txt
引用

该目录中的文件包含默认Minify设置，旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件，并进行HTTP压缩和缓存头。

推 荐
建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能。

GETTING STARTED
最快的开始Minify的方法是使用Minify Builder应用程序的URI
访问您的网站：http://example.com/min/builder/

压缩单个文件
比方说，你要服务于这个文件：
  http://example.com/wp-content/themes/default/default.css
下面是“Minify网址”该文件：
  http://example.com/min/?f=wp-content/themes/default/default.css

换句话说，“f”参数设置为从WEB根路径下的目标文件（不需要路径/）”。由于CSS文件可能包含相对URI，Minify会自动通过重写机制找到它们。

合并多个文件到一个文件下载
用','分隔f参数的每一个文件名。
比如，有如下CSS文件：
  http://example.com/scripts/jquery-1.2.6.js
  http://example.com/scripts/site.js
您可以通过Minify结合起来：
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

简化基本路径
如果你合并的文件共享同一父目录，你可以使用b参数设置的f参数的基本目录（同样不包括前导或者后缀/字符）。
例如，以下两种写法效果相同：
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js
  http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

在Html中使用MINIFY
在（X）HTML文件，不要忘记将&替换为&

指定允许的目录
默认情况下，Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录，在config.php中设置
$min_serveOptions ['minApp'] ['allowDirs']数组。例如：限制到/js和/themes/default目录，使用：
$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/default');  


"组"：更快的性能和更好的网址
为了获得最佳性能，编辑groupsConfig.php中的预指定文件组，下面是一个例子配置：
return array(  
    'js' => array('//js/Class.js', '//js/email.js')  
);  

以上预指定js将结果是合并了如下文件：
  http://example.com/js/Class.js
  http://example.com/js/email.js
现在，您可以如此简化URL：
  http://example.com/min/?g=js
  
组：指定document_root目录以外的文件
在groupsConfig.php阵中,//是指向DOCUMENT_ROOT，但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录：
return array(  
  'js' => array(  
    '//js/file.js'            // file within DOC_ROOT  
    ,'//../file.js'           // file in parent directory of DOC_ROOT  
    ,'C:/Users/Steve/file.js' // file anywhere on filesystem  
  )  
);  

未来过期HTTP头
Minify可以发送未来（一年）过期HTTP头。要启用该功能，您必须添加一个数字到URIs（例如/min/?g=js&1234 or /min/f=file.js&1234），每当源文件修改时改变该数字。如果你使用SVN/CVS，你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件，可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如：
// 之前确保min/lib目录设置到include_path  
// add /min/lib to your include_path first!  
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';  
$jsUri = Minify_groupUri('js');    
echo "";  


调试模式
在调试模式下，Minify不压缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设置为$min_allowDebugFlag为true，并增加"&debug=1" 到你的URIs.
例如：/min/?f=script1.js,script2.js&debug=1

注：对于该模式，注释风格的字符串正则表达式可能会导致问题。


把min目录上传根目录，根目录打开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件  ，$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个，去除//  .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径，点击 ‘Update’ 之后会为你生成一个 url，如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js

css和JS分别合并，2个地址。如果需要组合的文件很多，url 就会变得很长，Minify 支持 group，可以将这些文件分组，这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php  文件。防止其他人登陆！后期如需编辑再次上传！

Protocol Buffers 是一种轻便高效的结构化数据存储格式，可以用于结构化数据串行化，很适合做数据存储或 RPC 数据交换格式。它可用于通讯协议、数据存储等领域的语言无关、平台无关、可扩展的序列化结构数据格式。目前提供了 C++、Java、Python 三种语言的 API。

项目已经进行到第三个版本了，这里总结下开发的一些想法
1、无论什么技术，适合自己的才是最好的，必须选择开发人员能短期接受的技术，这样在后续的项目中可以进行迭代；
2、在设计之初关注扩展，性能是非常有必要的事情；
3、与第三方耦合必须设计完善的协议把控风险；
4、作为产品经理前期要和项目负责人，业务人员充分沟通；

典型的场景
点击button请求一个同步的ajax，在ajax之前show loading效果，gif或之类，当展现的效果是 loading并没有show出来，这是因为ajax阻塞了ui的渲染，下面的方法可以参考
方法一：
使用settimeout
showloading(); settimeout(function(){ $.ajax({...}); },100)

方法二：
上面的图片在IE与Chrome浏览器不显示，在firefox里面正常，通过Chrome debug模式发现，它是会显示的，由于后面的计算是JQuery同步操作，需要过长时间计算，导致界面UI卡死（来不及展示）。
浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求 时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线 程阻塞，不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后，引入了Deferred对象，提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案，deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
解决方法：使用JQuery Deferred对象。
var getWordCount = function(。。。){         var defer = $.Deferred();         var urlStr = "postcommit.html?I_SOURCE=getxliff";         $.ajax({             url : urlStr,             //async : false,表示异步执行。             success: function(dataStr){                       defer.resolve(dataStr);             }         });                 return defer.promise();    } var myTotalprice = function(。。。){                            //当getWordCount() 执行完成后，执行done()以下操作。就跟同步效果一样。                           $.when(getWordCount(。。。)).done(function(dataStr){                                        alert(dataStr);                            });                      }

从服务端优化来说，通过对服务端做压缩配置可以大大减小文本文件的体积，从而使加载文本的速度成倍的加快。目前比较通用的压缩方法是启用gzip压缩。它会把浏览器请求的页面，以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装.具体是实现不用关心，我们只要将GZip启用就好.下图是使用相关工具检测没有开启网页压缩的效果。如下步骤我们就来具体开启基于apache的GZip压缩支持。

找到并打开apache/conf目录中的httpd.conf文件
httpd.conf中打开deflate_Module和headers_Module模块，具体做法为将 如下两句前面的#去掉：
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
开启apache服务器gzip压缩
在httpd.conf文件底部加入如下代码配置需要压缩的文件：

SetOutputFilter DEFLATE
# Don’t compress images and other
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript

开启apache服务器gzip压缩
重启apache服务端
开启apache服务器gzip压缩
使用工具重新检测是否开启gzip压缩。考虑到相关广告检测机制具体的gzip检测工具访问地址可以到搜索引擎中去查找。
开启apache服务器gzip压缩

关于控制器如何通信的问题，是不少刚接触angulr的同学想知道的。总的来说，angular控制器通信的方式有三种：
1，利用作用域继承的方式。即子控制器继承父控制器中的内容

2，基于事件的方式。即$on,$emit,$boardcast这三种方式

3，服务方式。写一个服务的单例然后通过注入来使用

利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式，所以这里分为两种情况，当作用域上面的值为基本类型的时候，修改父作用域上面的值会
影响到子作用域，反之，修改子作用域只会影响子作用域的值，不会影响父作用域上面的值；如果需要父作用域与子作用域共享一个值
的话，就需要用到后面一种，即作用域上的值为对象，任何一方的修改都能影响另一方，这是因为在js中对象都是引用类型。
基本类型 function Sandcrawler($scope) {     $scope.location = "Mos Eisley North";     $scope.move = function(newLocation) {         $scope.location = newLocation;     } }; function Droid($scope) {     $scope.sell = function(newLocation) {         $scope.location = newLocation;     } } // html <div ng-controller="Sandcrawler">     <p>Location: </p>     <button ng-click="move('Mos Eisley South')">Move</button>     <div ng-controller="Droid">         <p>Location: </p>         <button ng-click="sell('Owen Farm')">Sell</button>     </div> </div> 对象 function Sandcrawler($scope) {     $scope.obj = {location:"Mos Eisley North"}; } function Droid($scope) {     $scope.summon = function(newLocation) {         $scope.obj.location = newLocation;     } } // html     <div ng-controller="Sandcrawler">     <p>Sandcrawler Location: </p>     <div ng-controller="Droid">         <button ng-click="summon('Owen Farm')">             Summon Sandcrawler         </button>     </div> </div>

requirejs加载超时，除了将js min化之外，还可以增加requirejs的超时时间，如下
waitSeconds: 0,

下面是我整理和收集的一些前端开发常用的 插件、工具、软件等不为别的，相当于给电脑做个小备份，至于使用方法，以后我会总结，目前的话还是自行google吧。

【FireFox插件】

1.  Firefbug     ——    页面调式工具
2.  YSlow     ——    网页评级工具
3.  pixel Perfect      ——    HTML与设计稿对比
4.  CSS Usage     ——    CSS使用效率优化工具
5.  Page Speed     ——    快速优化网页类似于YSlow
6.  Measureit     ——    实时测量工具
7.  Fiddler     ——    本地调式页面样式利器
8.  DNS flusher     ——    DNS刷新工具
9.  Colorzilla     ——    实时颜色选取工具
10.  Web Developer     ——    检查网页的相关信息
11.  FireMobileSimulator     ——    模拟手机
12.  JavaScript Dubugger     ——    JavaScript 排错
13.  Greasemonkey     ——    脚本小程序
14.  Firecookie     ——    Cookie

【Chrome插件】

1.  Awesome Screenshot     ——    网页截图
2.  user-Agent Switcher     ——    切换显示设备
3.  web Developer     ——    检查网页的相关信息
4.  Window Resizer     ——    更改分辨率
5.  YSlow     ——    网页评级工具
6.  浏览器兼容性检测