- 浏览: 306447 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
完善自我:
支持一下!
揭秘IT人才特点:中美印日四国程序员比较 -
悲剧了:
好文,看玩thinking in java的提到的异常处理,看 ...
高效的Java异常处理框架(转) -
yin_bp:
开源框架bbossgroups页支持组件异步方法调用哦,详情请 ...
Spring 3中异步方法调用 -
flyjava:
sun的悲哀
Apache怒了,威胁说要离开JCP
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites 和 图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合 并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用 服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。
YUI Combo Handler
2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少 文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件,常用方式如下:
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> |
而使用Combo Handler服务之后,则上述的代码可以写为:
<script src="http://yui.yahooapis.com/combo? |
除了代码的可读性稍稍有一点点降低外,使用Combo Handler服务大大的降低了HTTP请求数,同时也减少了URL代码量,这对于Web性能优化来讲至关重要。所以,随后YUI从2.6.0开始,其核 心组件YUI Loader内置了Combo Handling功能,即使用YUI Loader时,通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来,这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时,CDN默认是使用Yahoo! CDN(http://yui.yahooapis.com),所以没有任何问题。这正是YUI最迷人的地方之一。
遗憾的是http://yui.yahooapis.com在中国的速度并不佳,本来中国雅虎提供http: //cn.yui.yahooapis.com/ ,但尚未提供Combo Handler服务,同时因种种原因,其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源,但至少现在依旧是私有技术,要使用就需要自己实现类似功能,所以国内类似技术的应用并不太多。
Minify
在Google Code上有一个PHP的开源项目叫Minify,它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似 Combo Handler,只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify,那么上面Rich Text Editor的代码用Minify的默认格式来写就是:
<script src="http://yui.yahooapis.com/min/f= |
本地使用Minify很简单,只需要Apache + PHP环境就OK了:
安装好Apache + PHP (Windows、Mac)。
下载Minify源码,解压,然后把min文件夹复制到指定的根目录下,比如localhost。这时URL的写法大概是http://localhost/min/f=。..
启用Apache的Mod Rewrite模块,然后在min文件夹下新建.htaccess文件,并添加如下Rewrite规则:
<IfModule mod_rewrite.c> |
如果不启用Mod Rewrite功能,则Minify的URL会类似http://localhost/min/index.php?f=…,这对客户端和中间服务器的缓 存不利,而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…,不仅解决前面问题且更短。
4. 配置Minify,即编辑min/config.php文件
$min_enableBuilder = true; |
4. 配置Minify,即编辑min/config.php文件
$min_enableBuilder = true; |
转自:http://www.yindaoxian.com/html/web/Javascript_Ajax-13828.html
发表评论
-
Web编程是函数式编程
2010-11-30 13:44 1035任何一位在两个领域里 ... -
如何开发Web应用程序
2010-11-30 13:41 1071这是一个经常被问到的 ... -
设计Web应用程序时要注意可伸缩性
2010-11-26 09:19 887Max Indelicato是一位软件 ... -
Web 2.0应用客户端性能问题十大根源
2010-11-25 20:19 1001Web 2.0应用的推广为用户带来了全新的体验,同时也让开 ... -
HTML压缩(JSP的GZIP实现)
2010-11-24 22:31 4903HTTP 压缩可以大大提高浏览网站的速度,它的 ... -
浏览器加载和渲染html的顺序
2010-11-22 09:45 25161.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到 ... -
在服务端合并和压缩JavaScript和CSS文件
2010-11-22 09:16 1097Web性能优化最佳实践中最重要的一条是减少HTTP请求 ... -
用 YUI Compressor 压缩和混淆 JS 和 CSS
2010-11-22 09:05 2308一、简介: 目前开发Web应用Javas ... -
如何缓存DWR生成的JS文件
2010-11-18 17:37 1938DWR provides a convenient mec ... -
HTTP状态一览
2010-11-17 22:43 746在网站建设的实际应用中,容易出现很多小小的失误,就像m ... -
两款HTTP流量分析工具的比较:HTTP Watch,Fiddler
2010-11-17 17:26 0做Web开发或者Web分析经常需要查看Http通讯的过程, ... -
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-11-17 16:49 0用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知 ... -
高性能WEB开发 - flush让页面分块,逐步呈现
2010-11-17 16:47 0在处理比较耗时的请求的时候,我们总希望先让用户先 ... -
WEB高性能开发 - 疯狂的HTML压缩
2010-11-17 16:46 0前言: ... -
该如何加载google-analytics(或其他第三方)的JS
2010-11-17 16:44 0很多网站为了获取用户访问网站的统计信息,使用了go ... -
高性能WEB开发 - 页面呈现、重绘、回流。
2010-11-17 15:57 0页面呈现流程 在讨论页面重绘、回流之前。需要 ... -
高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
2010-11-17 15:54 0本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存 ... -
高性能WEB开发- 减少请求,响应的数据量
2010-11-17 15:49 0上一篇中我们说 ... -
高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
2010-11-17 15:42 0http请求头的数据量 我们先分析下 ... -
高性能web开发 - 如何加载JS,JS应该放在什么位置?
2010-11-17 15:39 0外部JS的阻塞下载 所有浏览器在下载JS的时候, ...
相关推荐
前端优化是Web应用开发的重点之一,通过减小页面请求量、压缩和合并JS和CSS文件、优化图片大小和清晰度等方式来减少页面加载时间和提高用户体验。同时,可以使用浏览器缓存技术来减少页面请求次数,从而提高页面响应...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放...22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
介绍本文的正式内容之前先引用《淘宝技术这十年》中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS、JS(JavaScript)、图片等样式、脚本和资源文件。但是可能相对较少的人才会...
第1章 页面特效 ...22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
Minify 是一个 PHP5 的应用,帮助你... Minify可以按需对JavaScript以及CSS文件进行合并、压缩以及缓存,以加快页面的载入速度。而安装minify则极其简单,只需在网站根目录下上传程序目录即可。 标签:Minify
Django Compressor将Django模板中的链接和内联Javascript或CSS处理,合并并最小化为可缓存的静态文件。 Django Compressor Django Compressor将Django模板中的链接和内联Javascript或CSS合并,最小化为可缓存的静态...
这是一个用于创建iOS webclip mobileconfig文件的javascript文件,我没有包含html文件,所以你们像我一样学习如何编码还有css需要某些javascript框架等等 我还要告诉您的一件事是如何将其包含在配置文件生成器中。 ...
Magento即时CSS和JS缩小程序,具有布局句柄合并和自动文件重命名功能。 事实 版本:1.1.1 描述 该扩展使用CssMin和JsMin来压缩css和javascript资源中的每个字节。 好处 更快的加载时间 减轻服务器和带宽的压力 ...
ReactHybrid总结md-4:CSS 必备知识介绍HTML 基础CSS 基础CSS 布局CSS 效果CSS 动画CSS 预处理器BootstrapCSS 工程化框架中的 CSS总结md-5:Web 前端性能优化web 前端性能优化资源的合并与压缩图片相关的优化css 和 ...
Web应用程序的“打包”包括以下步骤: 将所有JavaScript文件合并为一个组合JavaScript文件。 如果项目使用TypeScript而不是JavaScript,则将TypeScript文件编译为JavaScript文件。 将所有CSS文件合并为一个组合CSS...
小眼糖果-HTML / CSS和JavaScript执照麻省理工学院执照版权所有(c)2020-2021 Traversy Media 特此免费授予获得该软件和相关文档文件(“软件”)副本的任何人无限制使用软件的权利,包括但不限于使用,复制,修改...
它支持 Web 应用程序根运算符、波浪号 (~) 和多种用于定位文件的通配符模式。 这最初是为从客户端构建工具(例如或 注入修订版命名的 JavaScript 和 CSS 包而构建的。 但是,它可以简单地用于基于托管应用程序的...
它是用Web标准技术(例如JavaScript,CSS和HTML5)编写的单页应用程序(SPA)。 它利用了常见的流行框架/库,例如AngularJS,Bootstrap和Font Awesome。 入门/在线演示 每当合并具有新功能或错误修正的“拉取请求”...
用于Python Web开发的资产管理应用程序-使用它来合并和压缩您JavaScript和CSS文件。 文档:https://webassets.readthedocs.io/由于发布并不是完全在用于Python Web开发的常规资产管理应用程序上进行的-请使用它来...
基于PostCSS和Snowpack的博客就绪型11ty入门程序,带有RSS feed和Native... 最小化,合并和优化CSS输出 用于简单的资产构建流程 使浏览Web应用程序更快 仅在使用键盘导航时显示轮廓 先决条件 和NPM 用法 您可以使用以下
resources-optimizer-maven-plugin.zip,maven plugin用于压缩和合并javascript和css文件等资源。maven plugin用于压缩和合并web资源
MiniMerge - “合并具有依赖项的文件。...如果使用依赖项关键字,程序将按特定顺序合并或列出文件内容,例如名为 myFile.css 的文件中的行: //:include css/style.css //:include ../otherdir/licen
资源服务器是库和Web应用程序的集合,旨在更有效地将静态资源(例如CSS和JavaScript)包含在Java Web应用程序中。 诸如jQuery版本之类的共享资源包含在Web应用程序中的一个定义良好的版本化URL下,并带有浏览器端...