仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1149|回复: 8

[DIV+CSS] CSS教程之Minify优化网站:兼并多个CSS大概js文件

[复制链接]
飘灵儿 该用户已被删除
发表于 2015-1-15 23:15:37 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
破洛洛文章简介:用Minify优化网站功能兼并多个CSS大概js文件.
Minify是用PHP5开辟的使用,经由过程遵守一些Yahoo的优化划定规矩来进步网站的功能。它会集并多个CSS大概JavaScript文件,移除一些不用要的空格和正文,举行gzip紧缩,而且会设置扫瞄器的缓存头。Minify在计划上和Yahoo的ComboHandlerService十分像,不外Minify能够兼并任何你想要兼并的JavaScript和CSS文件。
一样平常情形下,网站速率的瓶颈都在前端,而最关头的就是资本的加载速率,可是年夜多半扫瞄器都有单个域名并发哀求数限定,以是假如一个页面中存在良多的资本,好比CSS和JavaScript文件,那末分明会下降网站的加载速率,对照优点理体例就是把多个文件经由过程一个哀求来会见,如许既不会影响之前的文件保护,又会削减资本的分明数目,Minify就是为之而生。上面是一些被Minify接纳的Yahoo!优化原则:
1、MakeFewerHTTPRequests
2、AddanExpiresoraCache-ControlHeader
3、GzipComponents
4、MinifyJavaScriptandCSS
5、ConfigureETags
6、KeepComponentsunder25K
上面两幅图分离是启用Minify之前和启用Minify以后网站哀求工夫的一个对照,能够看出启用Minify以后,资本的加载工夫从250ms削减到了125ms,统共节俭了50%的工夫。

CSS教程之Minify优化网站:兼并多个CSS大概js文件

CSS教程之Minify优化网站:兼并多个CSS大概js文件



CSS教程之Minify优化网站:兼并多个CSS大概js文件

CSS教程之Minify优化网站:兼并多个CSS大概js文件


特征:
兼并多个CSS或JavaScript文件为一个文件,削减哀求数目,而且举行minify处置
利用了多个开源的库,包含JSMin.php,MinifyCSS,MinifyHTML
服务端缓存(fils/APC/Memcache),能够制止不用要的反复处置
当扫瞄器存在资本的缓存,前往HTTP304NotModified
多个文件兼并时,主动天生URI
当开启服务端缓存的时分,在一样平常的服务器上Minify每秒能够处置几百个并发哀求
依据哀求头,开启Content-Encoding:gzip。在服务端缓存开启的情形下,Minify供应gzipped文件速率比Apache’smod_deflate模块要快
安装
下载最新的Minify,然后解压文件到”min”文件夹
Copy“min”文件夹到本人网站的DOCUMENT_ROOT下,假如想要Minify在子目次下事情,看这里
利用
假定网站域名是http://example.com,Minify安装在了假造主机的根目次下,那末会见http://example.com/min/,我们会看到一个“MinifyURIBuilder”,我们能够输出必要举行兼并的文件URI,以下

CSS教程之Minify优化网站:兼并多个CSS大概js文件

CSS教程之Minify优化网站:兼并多个CSS大概js文件


点击Update以后,体系会主动天生一个兼并后的URI:/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js。假如以为URI太长,能够经由过程设置文件来指定group,编纂min目次下的groupsConfig.php文件,到场以下内容:
returnarray(
js=>array(//js/jquery-a.js,//js/jquery-b.js,//js/jquery-c.js),//相对DOCUMENT_ROOT
);
以后就能够经由过程/min/?g=js来会见了

CSS教程之Minify优化网站:兼并多个CSS大概js文件

CSS教程之Minify优化网站:兼并多个CSS大概js文件


Minify在资本初次被哀求的时分,会对多个文件举行兼并,gzip,往除空格,正文等处置,然后会把处置的了局举行缓存,默许情形下是举行文件缓存,缓存的key以minify_开首,修正min/config.php文件,设置缓存文件寄存的地位:
$min_cachePath=/tmp;

CSS教程之Minify优化网站:兼并多个CSS大概js文件

CSS教程之Minify优化网站:兼并多个CSS大概js文件


除经由过程文件举行缓存以外,Minify还撑持Memcache缓存,修正min/index.php文件,到场以下代码:
requirelib/Minify/Cache/Memcache.php;
$memcache=newMemcache;
$memcache->connect(localhost,11211);
$min_cachePath=newMinify_Cache_Memcache($memcache);
Minify撑持两种debug体例,一种是经由过程firephp调试PHP毛病,修正min/config.php文件,到场以下代码:
$min_errorLogger=true;
另外一种是经由过程在URL中到场flag举行毛病调试,在min/config.php中到场
$min_allowDebugFlag=true;
以后就可以以http://example.com/min/f=jquery-a.js,jquery-b.js,jquery-c.js&debug=1体例举行调试了
参考:
http://code.google.com/p/minify/wiki/UserGuide
http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/
文章http://weizhifeng.net/2011/04/30/performance-optimization-using-minify/
</p>
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
飘灵儿 该用户已被删除
 楼主| 发表于 2015-1-17 21:11:40 | 显示全部楼层
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
只想知道 该用户已被删除
发表于 2015-1-26 22:55:48 | 显示全部楼层
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
冷月葬花魂 该用户已被删除
发表于 2015-2-5 06:27:43 | 显示全部楼层
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
山那边是海 该用户已被删除
发表于 2015-2-11 08:04:53 | 显示全部楼层
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
爱飞 该用户已被删除
发表于 2015-3-2 01:26:44 | 显示全部楼层
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
兰色精灵 该用户已被删除
发表于 2015-3-11 04:19:01 | 显示全部楼层
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
admin 该用户已被删除
发表于 2015-3-17 22:10:22 | 显示全部楼层
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
因胸联盟 该用户已被删除
发表于 2015-3-25 08:44:00 | 显示全部楼层
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-3-28 17:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表