Tagged

优化

A collection of 7 posts

优化

前端压缩工具Yabo——鸭脖

嗯,介绍一下大猫老湿最近的作品——鸭脖(Yabo)。 鸭脖主要用于自动合并压缩样式文件并自动为外部资源如图片等添加时间戳——时间戳是把双刃剑,设定文件的客户端缓存但不小心也会让客户端页面乱掉~~ 主要功能: 无需单独的合并列表文件,直接读取 CSS 里的 @import 文件合并 合并后自动调用 YUI Compressor 进行压缩,filename.source.css 进去 出来 filename.css || filename.css 进去 出来 filename.min.css 给图片加时间戳, 包含关键词 Yabo_img_timestamp_off 来关闭此功能 给文件结尾加时间戳 安装 下载 Yabo 编辑器里配置外部工具,这里用 Intellij IDEA 举例,当然同样适用于 PHPStorm

优化

网站性能优化工具大全

网站性能优化(WPO)已经成为一个非常重要的话题了,越来越多的互联网公司开始有WPO的职位,而相关技能也是对前端开发工程师的重要技术要求之一。国外大牛Steve Souders在参加WebPerfDays London期间,收集了大量常用的网站性能优化工具,这里和大家分享下。 常用的网站性能优化工具: WebPagetest Cuzillion Chrome Dev Tools Speed Tracer Performance Analyzer (收费) SPOF-O-Matic, 3PO for YSlow Wireshark PageSpeed, YSlow HttpFox dynaTrace Ajax Edition 和 SpeedoftheWeb HTTP Archive 关键路径浏览—— PageSpeed Insights的一部分 PhantomJS 移动设备同步调试:Weinre, jsconsole.com, Opera Dragonfly, Chrome for Android Apache

Chrome

mac下网页中文字体优化

最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享。 看了一遍国内各大门户和SNS网站,虽然可能大家的font-family设置都不太一样,但是貌似现在只有QQ空间对mac下字体做了优化。 ok,言归正传。 mac和windows自带的字体非常不一样,所以,针对windows的font-family设置一般不适用于mac系统,而在mac下,会调用系统默认的细黑体(STXihei),而这个字体渲染的其实并不是很好看。 优化的方法有两个: 方案一:使用Hiragino Sans GB字体 关于Hiragino Sans GB Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic(ヒラギノ角ゴ)的简体中文字体 [1],近乎完美地继承了原型的风格,有很微妙的喇叭口,弧线柔美、内敛,字面宽大程度合理。这是一款清新的专业印刷字体,小字号时足够清晰,大字号时又不会「细节欠奉」(via http://www.zhihu.com/question/

优化

CSS压缩大法:技巧与工具

原文:[CSS压缩大法:技巧与工具](http://www.qianduan.net/css-compression-tips-and-tools.html) 整理自:[18 CSS Compression Tools and Techniques](http://designshack.co.uk/articles/css/18-css-compression-tools-and-techniques) 版权所有,转载请注明引用地址!多谢 - - - - - - 学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求,尤其对于大型网站来说,这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。 很多人都有代码洁癖。这不是件坏事。 本文将整理集中你可以用来优化你的CSS的技术,以及一些可以自动压缩你的代码的在线和桌面压缩工具。 压缩还是不压缩 在我们讨论如何压缩CSS之前,需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲,而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师,你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站,

优化

12个对网页设计师非常有用的图片优化工具

原文:12个对网页设计师非常有用的图片优化工具 译自:12 Really Useful Image Optimization Tools For Web Designers 请尊重文章的版权,转载请注明出处,多谢! 图片非常重要,它们可以让你的页面更好看,更引人注目。但是,高质量和漂亮的图片常常会很大,它们会让页面加载变慢并消耗更多带宽。所以我们,这些设计师应该优化图片以使其体积更小但质量更高! 事实上有很多有用的图片优化工具,它们可以帮助我们优化并减小图片的文件尺寸。这些有用的应用包括web应用和桌面应用。 基于web的图片优化工具 1. Smush.it Smush.it是一个很流行的图片优化工具,它可以既减小图形文件的大小又能保持其质量,也就是我们称之为“无损(lossless)”图片压缩!你可以通过网站来运行Smush.it (一次最多5张图片)或者通过Firefox的YSlow扩展。 2. Dynamic Drive在线图片优化器 该在线图片优化器允许你优化不同的文件格式,比如GIF、JPG和PNG。你既可以从本机上传图片,也可以像Smush.it那样粘贴图片的URL。

firebug

YSlow出现较大更新并增加更强功能

今天Firefox自动提示有两个插件更新,打开看了一下,发现有一个是YSlow,仔细一看,我震惊了:版本从当前的1.0.2直升到2.0.0b3!这跨度太大了吧!不过,我还是怀着试一试的态度更新了,更新颇不顺利,失败了好几次,最后终于成功了。 打开YSlow界面 ,发现真的有了很大的改变: 新版本的YSlow主要有以下更新: 增加9条新的网站性能指标,加上原来的13条,共有22条指标 可自定义设置评价规则。新的YSlow有三个内置的规则:V2、V1、小型站和博客,V2的指标最多,包括所有22项指标,而V1则只包括上一个版本的13条指标。你可以完全设置自己的规则,这样就可以比较灵活,也更客观实际的分析自己的网站。 增加工具项,添加了一些网站的优化工具,比如Smush.it、JS Minified、 JS Beautified。 增加的这些工具中,值得一提的是Smush.it,这是Yahoo开发的一个图片优化工具,可以自动优化你的网站中使用的图片,将其优化并压缩,并支持打包下载,很方便。Smush.

css

使用styleneat组织你的CSS

Styleneat是一款帮助你获得“容易阅读和更新”的CSS文件的免费网络服务。 它可以组织并标准化CSS文件——选择器、子选择器及其属性。它与之前见到的CSS优化工具有所不同,styleneat更优化整理CSS的结构。 这个服务支持三种方式: 通过粘贴CSS代码; 通过上传一个CSS文件; 通过CSS文件的URL。 另外,它提供一些选项,比如“按照字母排列属性和选择器”或“单行/多行格式”。