《高性能网站建设指南》阅读...-《高性能网站建设指南》阅读...-DIV背景定位，老鸟勿入

当前位置: 编程技术>WEB前端

本页文章导读:

▪《高性能网站建设指南》阅读笔记_规则7- 避免CSS表达式 http://stevesouders.com/hpws/rule-expr.php CSS表达式是动态设置CSS属性的一种强大但很危险的方式，因为： 1.CSS表达式用于动态设置CSS属性，它只受到IE 5及以后版本的支持。 2. 禁用CSS表达式，因为它几.........

▪《高性能网站建设指南》阅读笔记_规则4- 压缩组件 1.什么东西应该压缩？ a.图片、PDF等二进制文件不应该压缩，因为它们已经压缩过了 b.太小的文件不应压缩。为小文件压缩而耗费一些CPU时间不太值得。一般来说，应该只对1KB或2KB以上的.........

▪DIV背景定位，老鸟勿入　在写博客之前我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的.........

[1]《高性能网站建设指南》阅读笔记_规则7- 避免CSS表达式

来源: 互联网发布时间: 2013-11-06

http://stevesouders.com/hpws/rule-expr.php

CSS表达式是动态设置CSS属性的一种强大但很危险的方式，因为：

1.CSS表达式用于动态设置CSS属性，它只受到IE 5及以后版本的支持。
2. 禁用CSS表达式，因为它几乎在触发各种事件时都会被调用。
3. 有的时候，CSS表达式也会影响页面的加载时间。

任何css表达式实现的功能我们都可以找到它的替代方式，比如事件处理器等。

就是时间触发的时候才会执行，比如设置一个页面的最小宽度数600像素，IE不支持min-width属性，所以在IE中使用CSS表达式。width:expression(document.body.clientWidth<600?"600px":"auto");
min-width:600px;）优化成只有window.onresize触发时才执行

CSS表达式（示例）：
background-color: expression( (new Date()).getSeconds()%2 ?"red":"blue" );
详细实例：
<HTML>
<HEAD>
<style>
.mybody{
background-color: expression((new Date()).getSeconds()%5 ?'#FF0000':'#0000FF');
}</style>
</HEAD>
<BODY all"> </HTML>

注意：禁用CSS表达式，因为它几乎在触发各种事件时都会被调用。

改进：（一次性表达式）
<style>
P{ background-color: expression( altBgcolor(this) ); }
</style>
<script type="text/javascript">
function altBgcolor(elem)
{
elem.style.backgroundColor=(new Date()).getHours()%2?"#f00":"#0f0";
}
</script>

在调用JS代码后，JS代码重写了其background-color属性，所以只会执行一次。

但是我们看下例子，一次性表达式似乎也不是很好，所以最好不用。

作者：llkaximoduo 发表于2013-1-30 14:02:16 原文链接

阅读：9 评论：0 查看评论

[2]《高性能网站建设指南》阅读笔记_规则4- 压缩组件

来源: 互联网发布时间: 2013-11-06

1.什么东西应该压缩？
a.图片、PDF等二进制文件不应该压缩，因为它们已经压缩过了
b.太小的文件不应压缩。为小文件压缩而耗费一些CPU时间不太值得。一般来说，应该只对1KB或2KB以上的文件进行压缩。

2.浏览器端的支持
支持HTTP1.1的浏览器才能展现压缩过的内容。如果你用的是APACHE服务器，则可以设置“浏览器白名单”，只对名单里的客户端传输压缩过的内容。IIS

服务器我没查到相关的配置。

4.HTTP压缩工作原理
Web服务器处理HTTP压缩的工作原理如下：

Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩；
如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；
如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；
如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；
如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；
如果请求文件是ASPX等动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。

5. IIS 6.0中配置HTTPGzip压缩的步骤: (本文以windows server 2003操作系统和IIS6.0服务器为例).win7不行
1、双击IIS服务器，右键点击网站，点击属性，然后点击服务，我们看到HTTP压缩，然后在压缩应用程序文件，压缩静态文件中打钩，然后点击确定，第一步就完成了

2、然后我们右键点击web服务扩展，点击添加一个新的web服务扩展，输入扩展名，为了便于我们识别，我们可以起名为gzip（关于起名应该是随意吧，小编没有测试过），然后点击添加，选择C:\WINDOWS\system32\inetsrv\gzip.dll，然后点击确定，扩展状态为允许，否则gzip不能生效，一切完成，我们就可以点击确定了.

3、接下来也是最重要的一步了，编辑IIS配置数据库配置文件，在此操作之前，我们应该关闭IIS服务器才能进行接下来的操作，当然我们也可以不关闭IIS服务器，我们双击IIS服务器，右键点击本地计算机，点击属性，在允许直接编辑配置数据库上打钩，那么我们不用关闭IIS就能直接配置服务器配置数据库配置文件了

4、我们找到C:\WINDOWS\system32\inetsrv下的MetaBase.xml文件，操作这个文件之前应该先复制一份，以免出现意外的情况.打开此文件，搜索deflate,找到HcDoStaticCompression原来为false改为true,HcDynamicCompressionLevel原来为0，改为9，HcFileExtensions里面就可以添加我们需要压缩的后缀，这里添加的是静态文件，一般压缩html,js,css图片不列为压缩之列.动态的文件可不可以压缩呢，当然可以HcScriptFileExtensions里面就是填写要压缩的动态文件.配置完这个，我们要来配置下面的gzip，他们两个紧挨着的，配置方法相同.

5、一切步骤都就绪了，我们看看是否开启成功了呢，那么怎样查看呢，方法有两种，可以使用火狐的firebug，还可以使用站长工具查看

注意事项：

配置数据库配置文件之前应该关闭IIS，或者启用允许直接编辑数据库

在操作MetaBase.xml文件之前应该先备份一下，防止意外情况发生.

7、边缘情形：

正常情况下，当浏览器直接与服务器通信时我只要按常规的配置即可。但是当浏览器通过代理来发送请求的时候就变得非常复杂。可能会产生边缘情形（发送压缩内容到不支持它的客户端，忘记将压缩内容生命为已经进行了gzip压缩编码等）这就需要考虑压缩和缓存之间的平衡。

我不知道gzip压缩和禁用代理是怎么平衡的。大家可以探讨下~

作者：llkaximoduo 发表于2013-1-30 11:02:31 原文链接

阅读：9 评论：0 查看评论

[3]DIV背景定位，老鸟勿入

来源: 发布时间: 2013-11-06

　在写博客之前我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。
　　在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。
　　DIV背景定义参数：background 设置元素的背景参数，其中属性依在写博客之前我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。

在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。

DIV背景定义参数：background 设置元素的背景参数，其中属性依次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)

关于background-position 定位的问题在一张大背景下对某一块的取用时大背景的左上角为原点(0,0)，定位时，→指向x值减小,↓指向 y 值减少所以在定位中，通常都是两个负数，在对定位的div进行width height 限制就可以取出自己想要的背景图片了！

通常在使用的时候样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px; 这种格式是现在最常用的背景定位方式

写一段完整的吧：

.up_tip {

1 width: 20px; //定义高度和宽度

2 height: 18px;

3 background: url(/templates/v1/images/tips.png) 0 -17px; 定位图片位置

4 display: inline-block; //这个比较重要，

}

文章最后先吐槽下，谈谈自己对互联网的一些看法，这也算受限制的内容，我去，现在互联网是有多TM不能讲话啊，带几个链接说你发广告，说几句评价，说尼玛负面新闻，一群编辑这么怕老板抽你！？

算了还是专心写我的技术贴，因为我是web前端从业者，文章内容难免会涉及到某个网站，在这里还请那些审核的编辑们，别弄得跟seo很肮脏一样，见到这种就想删说明你们自己思想有问题次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)
　　关于background-position 定位的问题在一张大背景下对某一块的取用时大背景的左上角为原点(0,0)，定位时，→指向x值减小,↓指向 y 值减少所以在定位中，通常都是两个负数，在对定位的div进行width height 限制就可以取出自己想要的背景图片了！
　　
　　通常在使用的时候样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px; 这种格式是现在最常用的背景定位方式
　　写一段完整的吧：
　　<div ></div>
　　
.up_tip {
width: 20px; //定义高度和宽度
height: 18px;
background: url(/templates/v1/images/tips.png) 0 -17px; //定位图片位置这里可以相对路径也可以绝对路径
display: inline-block; //这个比较重要，
}
　　

本文链接