性能优化
xiaochouyu0703
这个作者很懒,什么都没留下…
展开
-
前端工具-Sublime Text 2
[size=medium][b]新建窗口[/b][/size] command + N[size=medium][b]大小写切换[/b][/size] 大写:command K + command U 小写:command K + command L[size=medium][b]多行编辑[/b][/size] 选中多行,按下Command...原创 2015-03-02 17:28:16 · 74 阅读 · 0 评论 -
grunt配置-imagemin任务
[code="java"]imagemin : { dist : { files : [{ expand : true, cwd : 'app', src : '**/*.{png,jpg,jpeg}', ...原创 2015-04-27 21:58:04 · 224 阅读 · 0 评论 -
grunt配置-copy任务
copy任务配置项使用示例:[code="java"]copy: { main: { files: [ // includes files within path {expand: true, src: ['path/*'], dest: 'dest/', filter: 'isFile'}, // includes files...原创 2015-04-27 20:51:33 · 870 阅读 · 0 评论 -
grunt配置-open任务
grunt-open插件-tasks目录下open.js文件中配置了一个open任务: [code="java"]grunt.registerMultiTask('open', 'Open urls and files from a grunt task', function() { var dest = this.data.url || this.data.file || this.d...原创 2015-04-27 10:53:09 · 132 阅读 · 0 评论 -
grunt配置-clean任务
grunt-contrib-clean插件-tasks目录下clean.js文件中配置了一个clean任务:[code="java"]grunt.registerMultiTask('clean', 'Clean files and folders.', function() { // Merge task-specific and/or target-specific opti...原创 2015-04-27 10:43:10 · 748 阅读 · 0 评论 -
package.json配置文件
package.json配置文件 项目根目录下,文件内部就是一个json对象 定义了项目所需要的各种模块,以及项目的配置信息(如名称、版本、许可证等元数据) npm install 命令根据它自动下载所需的模块 [code="java"]{//name中任何non-url-safe的字符都不能用 "name": "...原创 2015-04-21 16:05:51 · 330 阅读 · 0 评论 -
npm--Node.js默认模块管理器
npm[b]不需要单独安装[/b]:安装node的时候:[url]https://nodejs.org/[/url],会连带一起安装npm。 [img]http://dl2.iteye.com/upload/attachment/0107/7536/183d1c83-a55f-34f9-a4f2-0e4ad336f238.jpg[/img][b]常见的一些命令[/b...原创 2015-04-20 17:44:20 · 147 阅读 · 0 评论 -
GIT基础整理
[size=medium][b] 一些概念:[/b][/size]本地仓库由 git 维护的三棵“树”组成: 第一个是[color=blue][u]工作目录[/u][/color],它持有实际文件; 第二个是[color=blue][u] 暂存区(Index)[/u][/color],它像个缓存区域,临时保存改动; 最后是 [color=blue][u]HEAD[/u]...原创 2015-04-20 14:44:43 · 75 阅读 · 0 评论 -
Grunt:自动任务运行器
[b]干什么用?[/b]基于Node.js的一款能够按照预先设定的顺序自动运行一系列任务的工具。简化工作流程,减轻重复性工作带来的负担。[b]如何使用?[/b]1.安装[code="安装命令"]sudo npm install grunt-cli -g[/code]2.命令脚本文件Gruntfile.js--用于配置或定义任务、加载 Grunt 插件1)grun...原创 2015-04-15 17:23:39 · 182 阅读 · 0 评论 -
在线生成不同像素的图片
网站见此:[url]http://placehold.it/[/url]html中直接引用图片即可。[code="html"][/code]以后再也不用担心测试的时候自己另外存储图片引用啦~原创 2014-04-17 20:49:32 · 1218 阅读 · 0 评论 -
GIT和SVN之间的五个基本区别
1.GIT是[color=blue][b]分布式[/b][/color]的,SVN不是: GIT:每个开发人员从中心版本库/服务器上chect out代码后会在自己的机器上克隆一个自己的版本库,不能连接网络的时候,仍然能够提交文件,查看历史版本记录,创建项目分支等。只需要创建一个分支,向项目团队发送一个推请求。 SVN:非分布式的版本控制系统,集中式版本库或服务器。...原创 2015-04-09 16:01:55 · 70 阅读 · 0 评论 -
Bower: 客户端库管理工具
[b]Bower是什么?[/b] 基于node.js的解决同一网页加载多个js库的问题并且针对浏览器端的一个库管理工具。[b]如何使用?[/b]1.安装[code="安装命令"]npm install -g bower//出现报错:Please try running this command again as root/Administrator记得使用sud...原创 2015-04-05 15:43:06 · 115 阅读 · 0 评论 -
浏览器的重绘[repaints]与重排[reflows]
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树 -------- 表示页面结构,解析HTML文档来构建 渲染树 -------- 表示DOM节点如何显示,根据DOM元素的几何属性构建 渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。...原创 2015-03-24 15:49:38 · 138 阅读 · 0 评论 -
主流的浏览器开发工具
[size=medium][b]火狐(Firefox)的Firebug和YSlow[/b][/size]Firebug是一个非常成熟和完善的工具,可以除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与 JS代码。除此之外,Firebug功能还很强大,比如html,css,dom的查看与调试,网站整体分析等等,总之就是一整套完整而强大的 WEB开发工具。Yslow是运行在F...原创 2015-03-24 15:26:29 · 117 阅读 · 0 评论 -
常用前端开发框架介绍
Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。 TangramBaidu开发的一套简单可依赖的Javascript库,主要分为Base和Component两部分。Base提供了开发时常用功能的封装,是核心的工具库。Component是Tangram组件库,基于Tangram Base之上开发,...原创 2015-03-24 13:23:22 · 244 阅读 · 0 评论 -
静态资源版本迭代
查看网页时发现css样式表都添加了md5加密码:[code="html"][/code] 在工作中最初的界面发生了修改,修改了一些css,又增加了一些css,重新将代码部署到服务器,但是打开界面还是以前的老界面。 其实是缓存在作怪,浏览器缓存是根据url路径缓存资源。所以每次部署的时候,将静态资源(image, css, js, html, fonts ....) ...原创 2015-03-14 11:34:23 · 109 阅读 · 0 评论 -
减少页面加载时间的方法
[size=medium][b] 1.优化图片 [/b][/size] 优化图片文件,减小其尺寸,特别是缩略图,一定要按尺寸生成缩略图然后调用,不要在网页中用resize方法实现,虽然这样看到的图片外形笑了,但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图,其真实尺寸有10M之巨。普通图像、icon也要尽可能压缩后,可以采用web图像保存、减少颜色数等等方法实现。...原创 2015-03-05 16:05:20 · 147 阅读 · 0 评论 -
grunt配置-htmlmin任务
grunt-contrib-htmlmin插件-tasks目录下htmlmin.js文件中配置了一个htmlmin任务: [code="java"]grunt.registerMultiTask('htmlmin', 'Minify HTML', function () { var options = this.options(); grunt.verbose.writefla...原创 2015-04-27 22:17:57 · 323 阅读 · 0 评论