性能优化

# 前端性能优化 #
## 性能优化是多个点优化的。 ##
-  1、浏览器优化
-  
-  2、代码
-  
-  3、服务器
-  


> HTML套的层次尽量少,不要table布局
# CSS优化: #
-  1、选择器  尽量的少用复合选择器
-  
-  2、sprites技术 减少对服务器的请求,图片尽量为一张,然后利用切图
-  
-  3、合并 和 压缩 合并CSS,减少link请求。
-
-    压缩:去除掉空格,回车。减少css的大小,减少请求流量
- 4、重绘和回流    
##   重绘: ##
-     只要发生了回流就会发生重绘,只要布局没有改变,就不会发生重绘。
-     尽量减少回流的次数,       
## 动画 ##
-     尽量少用js动画,能够用css的动画,就用css动画
## js优化、 ##
-  减少dom操作,利用节点缓存  
-  合并和压缩代码
## 图片 ##
-    减少图片大小,转换分辨率
-    合并成一张图片
-    把图片转换为base64的字符串       



## 浏览器优化 ##
      1、尽量采用静态资源缓存
      2、AJAX缓存
      3、本地数据库
      4、离线缓存       
grunt js :自动化

# FIS: #
## 1、基本用法 ##
fis install: 命令安装fis仓库提供的各种 组件、框架、示例、素材、配置等 开发资源。
fis release: 命令用于编译并发布的你的项目,拥有多个参数调整编译发布操作。
fis server: 命令可以启动一个本地调试服务器用于预览fis release产出的项目。
cd dir   进入目录
fis release  发布项目  (fis server open 可打开发布目录)
fis server start启动本地调试 (fis server clean 清空www发布目录的文件)
fis release -d ./output 在当前打包文在于output文件夹中
附:server的默认目录是在c盘下面,如果如要更改,可以自行设置系统环境变量 FIS_SERVER_DOCUMENT_ROOT
2、压缩
fis relsese -o  文件压缩
fis relsese -mo 压缩并添加md5戳
3、合并
合并通过pack配置一下fis-config.js 可手动创建内容如下:
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
fis.config.set('modules.postpackager','simple');  
fis.config.set('pack', {  
    'pkg/common,common_extra,forum_viewthread.js': [  
        '/js/*.js'  
    ],  
    'pkg/lib.css':[  
        "**.css"  
    ]  
});  
在合并之前先安装$ npm install -g fis-postpackager-simple 这个插件,这个插件是在合并后对资源进行替换
fis relsese -mop 压缩合并并添加md5戳 
官方fis-quickstart-demo的fis-config.js的内容
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
//Step 1. 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple  
// fis.config.set('modules.postpackager', 'simple');  
   
//通过pack设置干预自动合并结果,将公用资源合并成一个文件,更加利于页面间的共用  
   
//Step 2. 取消下面的注释开启pack人工干预  
// fis.config.set('pack', {  
//     'pkg/lib.js': [  
//         '/lib/mod.js',  
//         '/modules/underscore/**.js',  
//         '/modules/backbone/**.js',  
//         '/modules/jquery/**.js',  
//         '/modules/vendor/**.js',  
//         '/modules/common/**.js'  
//     ]  
// });  
   
//Step 3. 取消下面的注释可以开启simple对零散资源的自动合并  
// fis.config.set('settings.postpackager.simple.autoCombine', true);  
   
   
//Step 4. 取消下面的注释开启图片合并功能  
// fis.config.set('roadmap.path', [{  
//     reg: '**.css',  
//     useSprite: true  
// }]);  
// fis.config.set('settings.spriter.csssprites.margin', 20);  
另:DOS 清屏指令:  cls     ,  linux清屏指令: clear

posted on 2015-07-26 23:20  /*我不是无情的人*/  阅读(128)  评论(0编辑  收藏  举报