随笔分类 -  重构技巧

【原】一张图片优化5K的带宽成本
摘要：上周，我参加了公司的一门课程《网站性能优化》，讲师提出了一个问题：一张图片优化后减少5K，1年内可以大概省下多少宽带成本呢？非常好奇，仔细听完讲师分析，计算出来的数据让小伙伴们都惊呆了，仅仅5K，看起来真的没什么，一年内大概节省540元~1440元，这说明一个问题，用户数庞大的网站中，一点优化可能会带来巨大的带宽成本节省，表现出价值是特别高的，不容忽视小小优化带来的意义。相信很多同学也好奇这个数据是怎么计算的，公司的内部数据不好透露，给大家重新举个例子：这个例子只是图片的优化，对于实际工作中，还有很多节省宽带成本的方法，如果要去算，那这个影响会放大10倍，100倍甚至是1000倍以上的数量级。 阅读全文
posted @ 2013-11-01 13:45 白树 阅读(6798) 评论(34) 推荐(11) 编辑
【原】ZenCoding中常用的CSS3样式
摘要：用ZenCoding这么久了，总结下常用CSS3的写法，方便以后查找： PropertyAlias@media print {}@mbox-sizing:border-box;bxz:bbbox-shadow:;bxsh-webkit-box-shadow:0 0 0 #000;bxsh:wborder-radius:;bdrsbackground-size:;bgzbackground-size:auto;bgz:acontent:;cttext-shadow:0 0 0 #000;tsh+ 阅读全文
posted @ 2013-06-20 15:14 白树 阅读(1228) 评论(4) 推荐(0) 编辑
【原】PNG的使用技巧
摘要：Png是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中经常使用到它，如常用CSS 雪碧图。而Png的使用不仅仅如此，Png有多少种格式，有哪些特点，PC端中常用的Png格式是哪些，手机端最合适的Png格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案(*... 阅读全文
posted @ 2013-05-30 17:54 白树 阅读(14962) 评论(40) 推荐(17) 编辑
【原】提高网站加载速度的3项黄金守则
摘要：如何优化网页加载速度是每个前端开发工程师需要了解的，也是前端开发工程师需要具备的基本条件。优化网站加载速度的原理主要是减少网站文件的大小，减少HTTP请求数。网站文件越小，浏览器加载页面会比较轻松，打开页面的速度也会提升；一个HTTP请求，对页面打开速度造成的延时大概是0.01秒，HTTP的请求数越多，网站打开的速度就会越慢。那么如何减少网站文件的大小，减少HTTP请求数呢？笔者做前端(重构方向)有2年多了，这里分享3项优化网站加载速度的方法，希望能给有需要的同学以及刚接触前端的初学者带来帮助~comm on！一起来优化你的网站~1、优化图片使用Css Sprites（适用于大流量的网站）其原 阅读全文
posted @ 2013-04-01 18:24 白树 阅读(8045) 评论(15) 推荐(14) 编辑
CSS3Ps -Photoshop图层特效转CSS3代码
摘要：推荐给大家一款免费PS扩展插件CSS3Ps，灰常好用，可以将Photoshop图层特效等效果直接转为CSS3代码，无需为了再浏览网页查询css3代码的写法，无需手动查看ps图层特殊的数据来编写css3代码，大大提升编写代码的效率，走过路过的同学不过错过哈！Come on，直接进去正题吧！！！下图为Photoshop CS5图层的混合选项菜单。有了CSS3Ps，上面的特效可以直接导出CSS3代码~以webkit浏览器为主的css3代码示例：圆角边框：-webkit-border-radius: 5px;模块阴影：-webkit-box-shadow: 1px 1px 1px rgba(0,0,0 阅读全文
posted @ 2013-03-09 14:30 白树 阅读(9145) 评论(6) 推荐(1) 编辑
【转】PNG的秘密—— 一淘前端分享会
摘要：PNG是我们经常使用的图片格式，但是你真的了解PNG吗？此次一淘前端分享会，一丝冰凉将带大家深入了解你不知道的PNG。首先有三个问题：什么是 PNG?PNG 有哪些特点?如何优化 PNG? Png的秘密 from jieorlin Png的秘密— 内容简介1. PNG 的秘密—— 你真的了解 PNG吗？ By一淘 UX 一丝冰凉 旺旺:yisibl2. 首先我们来看三个问题：◆什么是 PNG?◆PNG 有哪些特点?◆如何优化 PNG?3. 一、 什么是 PNG?◆全称是： 便携式网络图形（Portable Network Graphics） 是一种：无损位图图像文件格式◆PNG... 阅读全文
posted @ 2013-02-27 17:43 白树 阅读(2099) 评论(1) 推荐(0) 编辑
Linr PS toolkit（Photoshop开发人员辅助工具）
摘要：来自(vickey)的肖软件~github地址：https://github.com/Linrstudio/LinrPSToolkitLinr PS toolkit（Photoshop开发人员辅助工具）一键导图:快速输出选区为Web所用格式;若当前图层被锁定则只输出当前图层的当前选区; 快速获取信息... 阅读全文
posted @ 2013-01-30 11:28 白树 阅读(3031) 评论(4) 推荐(2) 编辑
【原】设计稿中字体pt与px之间的转化
摘要：通常，设计网页时，字体一般会使用像素（px）或者倍数（em）。某一天开始重构页面，用PS打开设计师给过来的稿子，开始切图，在查看文字时，发现字体大小是用pt来设置的，⊙﹏⊙b汗，如下图：为了解pt和px是如何转换的，百度后整理出来的资料如下：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。pt全 阅读全文
posted @ 2012-11-29 22:26 白树 阅读(9077) 评论(4) 推荐(3) 编辑
前端开发小工具SuperApp——Ctrl+S自动刷新浏览器
摘要：推荐前端开发中一个小工具SuperApp，灰常好用，前端开发的童鞋们，走过路过不要错过啊！使用SuperApp后，在编辑器中更新页面资源（html,js,css）时，只需按Ctrl+S，浏览器会自动刷新页面文件，可以避免使用F5频繁刷新浏览器以及在编辑器和浏览器之间不停切换带来烦恼，有双屏显示器，甚至是有双屏以上的高富帅们，使用效果更佳，可大大提升开发体验。SuperApp——它让程序始终处于最顶层（最前端），可以随意拖动到任何位置，大小可调节，双击适应窗口大小。0~9键以不同透明度显示程序。[提示]： 双击载入的窗口标题栏，最大化窗口； 在载入的浏览器里按F11键，切换至无边的浏览器; 双击 阅读全文
posted @ 2012-11-14 17:23 白树 阅读(7791) 评论(18) 推荐(2) 编辑
【转】CSS雪碧图会占用太多浏览器内存吗
摘要：可能是某篇微博的关系，今天有人来评论说，使用雪碧图，内存会暴涨的。。。这个问题讨论的也蛮多了，那，到底，使用雪碧图后，会占用很多内存吗？实验：下午做了个简单的实验，用99个128px*128px的png 32图片，写了三个页面来做测试：只用img标签调用；用css分别调用每个png图片做背景；使用雪碧图做背景然后分别用Chrome、IE6/7/8/9、Firefox做测试，具体的数据我这里就不详细列了，感兴趣的话可以自测一下。结论：在各浏览器下，三个页面占用的内存相当，只有很小的差异，Chrome下，雪碧图占用内存略少一点点儿，IE下略多一点点儿。。。包括mouseover等交互事件，对浏览器 阅读全文
posted @ 2012-05-18 16:08 白树 阅读(1366) 评论(0) 推荐(0) 编辑

Copyright 2011- | 网站统计：腾讯分析