# 前端性能优化 #
## 性能优化是多个点优化的。 ##
- 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