静态文件应用和网页加速.pptxVIP

赶集静态文件部署与应用优化2010-12-10目前流行的载入JS、CSS的两种方式：使用合并文件使用异步载入一、使用合并文件在php中设置资源，自动输出合并后的JS标签PHP代码：（或者用smarty标签）?PHPRequireJs(“1.js”);RequireJs(“2.js”);RequireJs(“3.js”);?输出标签：script src=“http://www.***.com/***.js” /script以facebook为代表Facebook生成合并文件的特点：1、用php设置要载入的文件2、系统会记录使用文件的日志3、离线分析日志，根据使用情况生成合并文件4、上线时将原始文件与合并文件一起上线5、只对常用的进行合并，避免冗余我们曾经尝试的合并文件的优缺点：优点：缺点：1、任何地方设置的资源最终都可以合并成一个文件2、域名解析与http请求少1、每次运行要检测相关文件修改时间，以决定是否要重新合并2、涉及到多台服务器同步问题，不便及时合并3、结构比较复杂4、合并结果文件不太可控二、异步载入先输出一个较小的js库文件，其它需载入的文件都通过这个js中的方法异步载入例：script src=“http://www.***.com/YUI.js” /scriptscript type=“text/javascript”YUI.use(“1.js”);YUI.use(“2.js”);YUI.use(“3.js”);/script以yahoo、淘宝为代表优点：缺点：1、同步载入的js库文件很小2、异步载入是无阻塞的3、可以实现并行载入1、域名解析与http请求较多下面所述的方式概述：设置配置文件 + 半自动合并 + 异步载入特点：可控的文件合并异步无阻塞、并行的js下载支持varnish缓存页面的js文件与版本号更新Ganji_sta的目录结构├─ cgi│ ├─ ganji_sta.php│ └─ compile.php├─ src│ ├─ js│ │ ├─ 1.js│ │ ├─ 2.js│ │ └─ compile.config.php│ ├─ css│ ├─ image│ └─ swf└─ publicsrc是测试用源文件，public是线上用已编译文件，结构与src一样执行cgi/compile.php将src中的文件拷贝到public中、进行压缩，再根据 compile.config.php的设置合并文件、设置版本号关于compile.config.php?PHPreturn array( //文件合并配置 combine = array(), //文件代号 code = array(), //不需要编译的文件或文件夹 exclude = array(), //需要设置版本号的文件 version = array (),);?查看实例： ganji_sta\root\src\compile.config.phpDemo/cgi/compile.php/cgi/compile.php注：运行之前修改某js运行后查看1、已压缩的js2、已合并的js3、新的配置文件应 用原理：通过javascript标签，指向指定的接口，在页面中输出包含文件版本号信息的JS变量，并载入一个较小的库文件，通过其中的方法异步载入其它文件。适用范围：有varnish缓存与远程使用该接口如下：/cig/ganji_sta.php[?config=*][file=*]接口说明：1、单独使用/cig/ganji_sta.php将只载入默认的配置文件。默认的配置文件是src目录下的compile.config.php2、参数config可以指定要载入的其它配置文件，其值是src下的相对目录，如果指定多个用逗号分隔3、参数file可以输出指定的js或css标签 ，其值是src下的相对文件名，或代号，如果指定多个用逗号分隔Demo接口：/cgi/ganji_sta.php/cgi/ganji_sta.php/cgi/ganji_sta.php?config=tool/map/cgi/ganji_sta.php?config=tool/map/cgi/ganji_sta.php?config=tool/mapfile=ganji,css/global/list.css/cgi/ganji_sta.php?config=tool/mapfile=ganji,css/global/list.css第一个应用示例：htmlheadscript src=/cgi/ganji_sta.php?file=ganji/script/headbodyscript type=“text/j