YSLOW性能测试前端调优23大规则(二十一)---避免过滤器
liebian365 2024-11-18 14:19 24 浏览 0 评论
AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性，主要是为了解决半透明真彩色的PNG显示问题。
AlphalmageLoader的语法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled：是一个布尔值，表示是否激活滤镜功能，true表示激活，false表示禁止。
sizingMethod：设置或检索滤镜对图片所在的对象容器边界内显示方式。
? crop：表示会对图片进行剪切让其适应对象尺寸。
? image：增大或减小对象的尺寸边界以适应图片的尺寸，默认值。
? scale：通过缩放图片的方法来适应对象的尺寸边界。
src：表示背景图像的绝对或相对的URL地址。
下面是一个使用的实例：
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/test.png',sizingMethod='scale');">
站在性能分析的角度，不建议使用AlphalmageLoader过滤器主要原因如下：
1. 会增加内在的消耗，因为在加载过程不是按图像应用来加载的，而是按每个元素应用来加载的。
如果使用抓包工具或页面分析工具会发现，使用AlphalmageLoader过滤器请求的时候明显会更长，并且所消耗的内存也会明显增多。
2.这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test...</title>
</head>
<body>
<img src="images/tenpay.gif"/>
<img src="images/tenpayc2c.jpg"/>
<img src="images/no_picture.gif"/>
<h1>test...</h1>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/wap_logo.png',sizingMethod='scale');">
<a href="/" style="position:relative">Web site</a>
<table width="546" border="0" cellpadding="0" cellspacing="0" height="100px">
<tr class="tittr">
<td > <form><input type="text" name="username" style="position:relative"/></form></td>
</tr>
<script src="js/test.js"></script>
</body>
</html>
上面是一个测试页面，当加载到wap_logo.png（使用AlphaImageLoader过滤器处理）这个图片时，浏览器被冻结，此时浏览器无法动弹，冻结的时间超过1秒。
并且需要注意的是，并行下载不会被阻止，浏览器仍然在后台下载其他页面组件，但是没有渐进式渲染。
由于以上原因所以建议尽量避免使用AlphalmageLoader过滤器， 为了解决对这类透明度的过滤器的问题，通常还有以下两种方法：
1.使用VML透明度
VML是IE浏览器中关于PNG透明的另一种方法，
例如：定义一个div里面有一个vim空间
<v：rect>
<v：fill type =“ tile” src =“ test.png”>
<div>＆nbsp; </ div>
</ v：fill>
</ v：rect>
再声明一个VML名称空间：
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
在样式表中写以下内容：
v\:rect {
behavior:url(#default#VML);
width: 500px;
height: 500px;
display: block;
}
v\:fill {
behavior:url(#default#VML);
2.使用其它的过滤器
当然AlphaImageLoader并不是唯一存在的过滤器，另一种流行的是不透明度滤镜。
例如：如果需要对50％不透明度，那么可以使用以下属性。
? opacity: 0.5 (一般标准的用以)
? -moz-opacity: 0.5 (Mozilla和Firefox早期版本)
? filter: alpha(opacity=50)(对于IE浏览器)
- 上一篇：技术小白如何把网站快速变为黑白页面?
- 下一篇：「小技巧」如何让网页整体变灰?
相关推荐
- 月薪 4K 到 4W 的运维工程师都经历了什么?
-
运维工程师在前期是一个很苦逼的工作，在这期间可能干着修电脑、掐网线、搬机器的活，显得没地位！时间也很碎片化，各种零碎的琐事围绕着你，很难体现个人价值，渐渐的对行业很迷茫，觉得没什么发展前途。这些枯燥无...
- 计算机专业必须掌握的脚本开发语言—shell
-
提起Shell脚本很多都有了解，因为无论是windows的Dom命令行还是Linux的bash都是它的表现形式，但是很多人不知道它还有一门脚本编程语言，就是ShellScript，我们提起的Shel...
- Linux/Shell:排名第四的计算机关键技能
-
除了编程语言之外，要想找一份计算机相关的工作，还需要很多其他方面的技能。最近，来自美国求职公司Indeed的一份报告显示：在全美工作技能需求中，Linux/Shell技能仅次于SQL、Java、P...
- 使用Flask应用框架在Centos7.8系统上部署机器学习模型
-
安装centos7.8虚拟环境1、镜像链接...
- shell编程
-
简介：Shell是一个用C语言编写的程序，它是用户使用Linux的桥梁。Shell既是一种命令语言，又是一种程序设计语言。...
- 14天shell脚本入门学习-第二天#脚本和参数#排版修正
-
脚本是一种包含一系列命令的文本文件，通常用于自动化任务。Shell脚本是用Shell命令编写的脚本，可以在命令行中执行。掌握脚本的基础知识和变量的使用是编写高效脚本的关键。...
- 嵌入式Linux开发教程:Linux Shell
-
本章重点介绍Linux的常用操作和命令。在介绍命令之前，先对Linux的Shell进行了简单介绍，然后按照大多数用户的使用习惯，对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂，都给...
- 实现SHELL中的列表和字典效果
-
大家好，我是博哥爱运维。编写代码，很多情况下我们需要有种类型来存储数据，在python中有列表和字典，golang中有切片slice和map，那么在shell中，我们能否实现列表和字典呢，答案是肯定的...
- 14天shell脚本入门学习-第二天#脚本和变量
-
脚本是一种包含一系列命令的文本文件，通常用于自动化任务。Shell脚本是用Shell命令编写的脚本，可以在命令行中执行。掌握脚本的基础知识和变量的使用是编写高效脚本的关键。...
- shell常用命令之awk用法介绍
-
一、awk介绍awk的强大之处，在于能生成强大的格式化报告。数据可以来自标准输入，一个或多个文件，或者其他命令的输出。他支持用户自定义函数和动态正则表达式等先进功能，是Linux/unix一个强大的文...
- Linux编程Shell之入门——Shell数组拼接与合并
-
在Shell中，可以使用不同的方式实现数组拼接和合并。数组拼接指将两个数组中的元素合并成一个数组，而数组合并指将两个数组逐个组合成一个新数组。以下是关于Shell数组拼接和合并的详细介绍：数...
- shell中如何逆序打印数组的内容，或者反转一个数组?
-
章节索引图首先请注意，有序的概念仅适用于索引数组，而不适用于关联数组。如果没有稀疏数组，答案会更简单，但是Bash的数组可以是稀疏的（非连续索引）。因此，我们需要引入一个额外的步骤。...
- 如何学好大数据开发?---shell基本语法
-
昨天我们初步了解到了shell的一些基本知识，比如shell的分类，常用的shell类型。今天就带来大数据开发之shell基本语法，掌握好基础才是最重要的，那接下来就开始学习shell的基本语法。一、...
- Linux编程Shell之入门——Shell关联数组
-
关联数组是Shell中一种特殊的数组类型，它使用字符串作为下标。在关联数组中，每个元素都被标识为一个唯一的字符串键值，也称为关联数组的索引。在Shell中，可以使用declare或typeset命令...
- 从编译器视角看数组和指针
-
虽然有单独的文章描述数组和指针，但二者的关系实在值得再写一篇文章。...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)