性能优化
# 前端性能优化 #
## 性能优化是多个点优化的。 ##
-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
1、link 与 @import之对比
2、【C++】向上、向下取整函数
3、解决input 有多少个radio绑定change事件，手动触发就会执行多少次问题
4、Google & Chrome console & text adventure game
5、你不知道的JavaScript学习笔记1——作用域