Liferay 中css_fast_load参数设置,minifyType, Minifier Filter

简介:

引入:

多数人为了调试目的,会吧css_fast_load设置为0 ,这样可以看到每个单独的css样式文件的加载,而在产品服务器上,为了提速,又会吧这个参数设置为1,这样多个css文件又会合并成单个,那么这其中的奥秘又如何呢?


调试分析:

趁着Sprint最后一天的空闲时间,我幸运的分析了Liferay源码,并且找到了其中的奥秘。


当请求为http://<host>:<port>/?css_fast_load=1的时候:

因为加载页面的css总是从各个模块的main.css加载的,所以,当我们加载的是platform-In-theme下的main.css时候,它会进入PortalImplgetStaticResourceURL方法:


它先在第3515行从request对象中获取ThemeDisplay,再从ThemeDisplay中获取Theme和ColorTheme


然后,它就开始为我们的请求资源附加上各个参数了。


首先,它在3531-3532行加了一个问号(?)用来区分参数和前面的请求路径。


然后在3534-3541行加上browserId参数,这个是通过BrowserSnifferUtil工具类获得的,因为这不是我们的讨论重点,所以我们不展开。


然后在3543-3550行加上themeId参数。


然后在3552-2558行加上colorThemeId参数。


下面,最重要的,就是加上minifierType参数了

从上面可以看到,要设置minifierType=css必须有2个条件,1uricss,jsp结尾,2是必须开启themeCssFastLoad.而设置minifierType=js必须满足开启themeJsFastLoad


因为在我们的例子中,我们的请求最后带了css_fast_load=1,所以themeDisplay.isThemeCssFastLoadtrue,所以我们的请求参数加上了minifierType=css.


所以,这里也可以看出,如果我们的请求是不带参数(这种情况下会使用portal.properties中的theme.css.fast.load默认值false)或者css_fast_load=0,那么这个themeDisplay.isThemeCssFastLoadfalse.请求就不会加上minifierType=css.


接下来,第3594-3597行会加上languageId参数.


3599-3602行会加上build number参数:


3604-3620会加上timestamp参数:



所以最终把这些参数都拼接在原来的访问platform-In-theme/css/main.css的后面,就形成了最终的访问url.


当然了,我们这片文章主要的重点是cssfast load ,minifyType

所以我们可以看到:

a.当请求url中有css_fast_load=1的时候,这个请求参数是有minifierType=css的,这也和页面上看到的一致(在另外一台机器上实验的):

b.当请求urlcss_fast_load=0或者没有这个参数时候,请求参数是没有minifierType=css的。


而这一切都发生在进入MinifyFilter过滤器之前。。接下来就看这个参数是到底怎么影响MinifyFilter的了。


因为不管如何后面参数如何,这个请求到底是个css请求,因为我们的请求是/platform-In-theme/css/main.css,所以它匹配Minifier Filterurl pattern


所以会去走MinifierFilterprocessFilter()方法,这方法会进而调用getMinifiedContent()方法:

这里可以看出它在第284行会去读取参数中的minifierType参数,因为我们的例子中是用的css_fast_load=1,所以这里的minifierType字符串就被为”css”,如果我们没有设置css_fast_load=1参数,那么这个minifierType字符串就为空。


而第290行可以看到,如果minifierType为空的话,那么就直接跳过这个getMinifiedContent方法的后面执行了。因为我们minifierType不为空,所以会继续走下去,一直走到第348行,

它判断如果资源文件是css扩展名,那么调用minifyCss方法,这个方法才是把多个css文件合并,去除段落空白,再用yui-compressor压缩合并。这个方法的细节可以在下面一篇文章中讲。


至少可以总结的是,如果css_fast_load1,那么会调用minifyCss方法,如果css_fast_load=0,那么压根不会调用minifyCss方法。



总结

从上面调试中,我们至少可以获得以下结论:

(1)在进入MinifyFilter过滤器之前,Liferay框架会给每个资源的请求附加上若干个参数,其中必定有的参数包含:browserId,themeId,languageId, build number,timestamp.

(2)minifyType这个参数是可选的,如果请求中带上了css_fast_load=1,或者你覆盖了portal.properties中的theme.css.fast.load=true,那么会附加参数minifyType=css. 如果请求是css_fast_load=0或者你用默认的portal.properties中的theme.css.fast.load配置,那么不会附加这个参数minifyType. 对于js资源也是一样。

(3)当请求css资源时候,它会进入Minifier Filter过滤器,这个过滤器会去检查minifyType=css|js参数。如果这个参数被设置了,比如说是minifyType=css,那么它会去调用minifyCss方法吧多个css合并,如果这个minifyType没有被设置,那么会跳过这个方法的下面执行,也就是不进行迷你化操作。





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1284078,如需转载请自行联系原作者
目录
相关文章
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
209 1
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
153 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
211 0
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
前端开发 JavaScript UED
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
292 2
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
104 1
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
118 5

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    211
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    209
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    153
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    125
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    257
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    375
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    166
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    106
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    176
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    241