基本工作流： JS合并、JS压缩、CSS压缩、CSS Sprite、图片优化、测试、静态资源缓存（版本更新）... 基于工作流产生的工具： JSHint（jshint.com）、CSSLint（csslint.net）、jade（jade.tilab.com）、coffeeScript（coffee ...
分类：
其他好文 时间：
2016-05-04 22:56:52
阅读次数：
141
一、相关知识讲解 看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。 减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。 ...
分类：
Web程序 时间：
2016-04-19 00:09:34
阅读次数：
159
一般为了减少Http请求数，会把多张图片合并成一张图片，然后通过改变background-position属性值，来显示对应的图片，例如类别栏目html代码： 对应的css 运行后的效果为： 常用的制作Css Sprite 的工具有 ： cssgaga http://www.99css.com/cs ...
分类：
Web程序 时间：
2016-04-11 00:06:08
阅读次数：
127
之前说要整理这块内容，分享给大家，工作原因，直到现在，赶上清明宅在家里，赶紧整理出来与大家分享。 精灵图（CSS sprite） 所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。 在用到这些图片的时候，需要引用整张图片然后设定坐标到需要的那张小 ...
分类：
其他好文 时间：
2016-04-03 23:34:38
阅读次数：
170
css sprite即CSS雪碧图又称CSS精灵。它存在的一个主要作用就是：减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。 例如 这样算下来。CSS sprite真的是个很实用的东西。 那么如何制作CSS sprite图呢？用下面这个例子来说明 这样一个图 就能用css
分类：
Web程序 时间：
2016-03-10 23:27:56
阅读次数：
276
CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样，在访问页面时，就只需请求一次就可以了，而不必一次次向服务器发送请求。 它的原理就是把见面中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”,”backg...
分类：
Web程序 时间：
2016-02-11 00:28:01
阅读次数：
245
1.图片减肥，使用软件压缩TinyPNG,小图标可以使用除css sprite，图片记得写长宽。2.减少http请求，稍晚些加载文件。对js酌情考虑加载方式3.url后面添加“/”，减少浏览器判断类型4.使文件成为.min型的5.是页面具有缓存性，使用cookie的域
分类：
Web程序 时间：
2015-12-25 16:32:59
阅读次数：
125
前端重构总结前端重构其实可以分为两个方面：性能优化和模块化。下面我们先总结一下性能优化方面的东西：首先列举一下常规的优化手段：CSS置顶，JS置底静态资源外联、合并、压缩图片优化图片延迟加载使用CSS Sprite，首屏图片全部合并到一张图上静态文件上CDN静态文件设置强缓存HTML压缩图片预加载增...
分类：
其他好文 时间：
2015-12-21 18:32:41
阅读次数：
159
说在开头前面有一篇博客说道，项目中使用压缩和csssprite技术对图标进行分类和组合；但随着项目的不断完善，我们也遇到了很多问题：1.如何对图标进行分类；刚开始还比较好，我们对图标进行分类，大概有银行卡图标一类，增删改图标一类，支付类型一类，等等。但随着，图标的不断..
分类：
Web程序 时间：
2015-12-09 07:25:00
阅读次数：
2100
很久以前，我们如何使用图标？1.切图2.拼合（Sprites）原始社会啊！后来CSSGagagrunt-css-sprite字体图标相见不曾相识Emoji绘文字iconfont.cn直接上传SVG如何使用字体@font-face { font-family: 'FontName'; src:ur.....
分类：
其他好文 时间：
2015-12-03 00:31:37
阅读次数：
145
