我知道国内很多网页制作人员都还在制作table式网页,这样的网页打开速度很慢。如果要想网站打开速度快,就要学会使用DIV+CSS,将图片写进CSS,这样如果网站内容很多的时候,也不会影响网页的浏览。它会先显示文字,在你一边浏览的时候,它就一边加载网页的图片。但是很多初学者写的CSS就是代码不够简洁,很多地方重复多余。

现在,我就教大家如何优化CSS,压缩CSS的大小,使网页加载速度更快。

要优化你网站的CSS,首先第一步就是要将你的多个CSS文件合并,这样减少一个CSS文件你的网页速度就会快上一点。CSS文件越少越好,最好只有1个。这样少一个CSS,就直接减少一个http请求。

其次,我给大家推荐一个叫Clean CSS的网站,网址是http://www.cleancss.com/,将你的CSS代码或者CSS文件的URL路径放在输入框中,然后选择你的压缩级别,最后点击“Procsss CSS”。你就可以看到,CSS代码现在简洁多了,注释语句没有了,还有一些代码也合并了,颜色代码简写了。前后比较一下你的CSS文件,你就会发现,文件变小了很多。

最后,你还是不满意的你CSS文件大小的话,我们还可以进一步压缩,但是这样以来就会影响到以后的阅读了。我还是将这个压缩工具也一起告诉大家,它就是Online YUI Compressor,地址是http://www.refresh-sf.com/yui/。注意这个不但可以压缩CSS,还可以压缩JS,但是压缩后的文件都会变成一行,它把所有换行的空白都去掉了,这样文件更加小了。如果你以后不再修改CSS了,那么可以使用一下。文件真的会变小很多哦。

css js 优化工具的更多相关文章

  1. HTML,CSS,JS优化

    HTML部分 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防 ...

  2. 前端开发必备 40款优秀CSS代码编写工具推荐

    摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...

  3. css,js工具篇

    4. web前端开发分享-css,js工具篇   web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

  4. 关于js优化和css优化

    css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...

  5. 前端小白页面开发注意事项及小工具(html\css\js)

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  6. 【工具相关】web-HTML/CSS/JS Prettify的使用

    一,打开Sublime Text,代码如下面所示. 二,鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示,明显的代码变得整齐了.

  7. 纯JS文本比较工具

    前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...

  8. Gulp:静态资源(css,js)版本控制

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...

  9. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

随机推荐

  1. 设置VIM的配色方案

    [转]Ubuntu的VIM的默认颜色难看死了,蓝色的注释基本上看不到. 查看有多少配色方案: $ ls /usr/share/vim/vim72/colors  发现有以下文件 blue.vim    ...

  2. BZOJ 1260: [CQOI2007]涂色paint( 区间dp )

    区间dp.. dp( l , r ) 表示让 [ l , r ] 这个区间都变成目标颜色的最少涂色次数. 考虑转移 : l == r 则 dp( l , r ) = 1 ( 显然 ) s[ l ] = ...

  3. Android之ksoap2-android详解与调用天气预报Webservice完整实例

    Google为Android平台开发Web Service客户端提供了ksoap2-android项目,在这个网址下载开发包http://code.google.com/p/ksoap2-androi ...

  4. PAD会取代PC吗

    公司上了新的内部管理系统,上线一片混乱,群里也很热闹,从系统是否应该支持pad谈起 ,有技术大佬说5年内就是pad时代了,pad将完全取代pc.我不知道大佬从何得出这个结论,有和数据支撑.我的观点是, ...

  5. java--实例成员 & 静态成员

    class run{ static String str1 = "静态变量"; String str2 = "非静态变量"; public static voi ...

  6. 利用java concurrent 包实现日志写数据库的并发处理

    一.概述 在很多系统中,往往需要将各种操作写入数据库(比如客户端发起的操作). 最简单的做法是,封装一个公共的写日志的api,各个操作中调用该api完成自己操作日志的入库.但因为入数据库效率比较低,如 ...

  7. 基于Andoird 4.2.2的Account Manager源代码分析学习:AccountManagerService系统服务的添加

    从启动说起 Android系统加载时,首先启动init进程,该进程会启动Zygote进程.Zygote进程执行/system/bin/app_process程序.app_process程序在执行中,通 ...

  8. php:兄弟连之面向对象版图形计算器2

    上篇说到通过result.class.php来分流,因为三个类都继承了shape这个类,让我们来看一下,面向对象中的继承. shape.class.shape文件 <?php abstract ...

  9. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  10. 三种java 去掉字符串中的重复字符函数

    三种java 去掉字符串中的重复字符函数 public static void main(string[] args) { system.out.println(removerepeatedchar( ...