<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>付琦 博客</title>
	<atom:link href="http://www.imf7.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.imf7.com</link>
	<description>我们的身体可以停止生长，但我们的心灵却可以不断进化...</description>
	<lastBuildDate>Fri, 20 Apr 2012 07:24:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>CSS在IE中的一些HACK</title>
		<link>http://www.imf7.com/archives/349</link>
		<comments>http://www.imf7.com/archives/349#comments</comments>
		<pubDate>Fri, 20 Apr 2012 07:24:24 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=349</guid>
		<description><![CDATA[了解一下就可以了，不建议广泛使用。。。 * html #selector {} /* ie 6 */ *+html #selector {} /* ie 7 */ _property:value; /* ie 6 */ *property:value; /* ie 6/7 */ property:value!ie; /* ie 6/7 */ property:value\0; /* ie 8/9 */ property:value\9\0; /* ie 8/9 */ 某些只支持ie9【background-color:red\9\0;】，某些支持8和9【background:red\9\0;】，不建议使用 property /*\**/:value\9; /* ie 7/8/9 */ property:value\9; /* ie 6/7/8/9 */ font缩写不支持 property [...]]]></description>
			<content:encoded><![CDATA[<p>了解一下就可以了，不建议广泛使用。。。</p>
<p>* html #selector {} /* ie 6 */<br />
*+html #selector {} /* ie 7 */</p>
<p>_property:value; /* ie 6 */<br />
*property:value; /* ie 6/7 */<br />
property:value!ie; /* ie 6/7 */<br />
property:value\0; /* ie 8/9 */<br />
property:value\9\0; /* ie 8/9 */ 某些只支持ie9【background-color:red\9\0;】，某些支持8和9【background:red\9\0;】，不建议使用<br />
property /*\**/:value\9; /* ie 7/8/9 */<br />
property:value\9; /* ie 6/7/8/9 */  font缩写不支持<br />
property /**/:value; /* ! ie 6 */ 除IE6之外的所有浏览器</p>
<p>更多更详细的参考：http://www.swordair.com/tools/css-hack-table/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/349/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>有关JS的继承</title>
		<link>http://www.imf7.com/archives/345</link>
		<comments>http://www.imf7.com/archives/345#comments</comments>
		<pubDate>Fri, 23 Mar 2012 03:51:21 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=345</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中，继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的，需要采取一系列措施。 &#160; &#160;&#160;&#160;&#160;Js的继承在很多书里面细致的分了很多种类型和实现方式，大体上就是两种：对象冒充、原型方式。这两种方式各有优点和缺陷。 对象冒充继承： 【优点】可以实现多重继承； 【缺点】无法继承prototype域的变量和方法； &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;所有的成员方法都是针对this而创建的，所有的实例都会拥有一份成员方法的副本，属于深copy，比较浪费资源 &#160; 原型继承： 【优点】所有实例共用一个pototype域，性能好些； 【缺点】不能传递参数； &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;注意 constructor 会指向父对象； &#160; 我们来列举一些出来看看： &#160; (一)对象冒充： function Parent(name) { this.name = name; this.showName = function () { console.log(this.name); }; }; function Child (name, age) { this.method = Parent; this.method(name); delete this.method; this.age = age; this.showAge = function () { console.log(this.name +":"+ this.age); }; [...]]]></description>
			<content:encoded><![CDATA[<div>&nbsp;&nbsp;&nbsp;&nbsp;在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中，继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的，需要采取一系列措施。</div>
<div>&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;Js的继承在很多书里面细致的分了很多种类型和实现方式，大体上就是两种：对象冒充、原型方式。这两种方式各有优点和缺陷。</div>
<div><strong>对象冒充继承：</strong> </div>
<div>【优点】可以实现多重继承；</div>
<div>【缺点】无法继承prototype域的变量和方法；</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所有的成员方法都是针对this而创建的，所有的实例都会拥有一份成员方法的副本，属于深copy，比较浪费资源</div>
<div>&nbsp;</div>
<div><strong>原型继承：</strong></div>
<div>【优点】所有实例共用一个pototype域，性能好些；</div>
<div>【缺点】不能传递参数；</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注意 constructor 会指向父对象；</div>
<p><span id="more-345"></span></p>
<div>&nbsp;</div>
<div>我们来列举一些出来看看：</div>
<div>&nbsp;</div>
<div><strong>(一)对象冒充：</strong></div>
<pre class="articleQuote">
function Parent(name) {
	this.name = name;
	this.showName = function () {
		console.log(this.name);
	};
};

function Child (name, age) {
	this.method = Parent;
	this.method(name);
	delete this.method;

	this.age = age;
	this.showAge = function () {
		console.log(this.name +":"+ this.age);
	};
};

var parent = new Parent("Kang"),
	child = new Child("F7", 30);

parent.showName();
child.showName();
child.showAge();
</pre>
<div>&nbsp;&nbsp;&nbsp;&nbsp;注意这里的上下文环境中的this对象是Child 的实例，所以在执行Parent构造函数脚本时，所有Parent的变量和方法都会赋值给this所指的对象，即Child的实例，这样子就达到Child继承了Parent的属性方法的目的。之后删除临时引用method，是防止维护Child中对Parent的类对象（注意不是实例对象）的引用更改，因为更改method会直接导致类Parent（注意不是类Parent的对象）结构的变化。 </div>
<div>&nbsp;</div>
<div><strong>（小插曲）</strong></div>
<div>    &nbsp;&nbsp;&nbsp;&nbsp;在Js版本更新的过程中，为了更方便的执行这种上下文this的切换以达到继承或者更加广义的目的，增加了call和apply函数。它们的原理是一样的，只是参数不同的版本罢了(一个可变任意参数，一个必须传入数组作为参数集合)。</div>
<pre class="articleQuote">
关于Call方法，官方解释：调用一个对象的一个方法，以另一个对象替换当前对象。
call (thisOb,arg1, arg2…)
</pre>
<div>下面我们将借助call和apply方法实现继承。</div>
<div>&nbsp;</div>
<div><strong>(二)call方法继承：</strong></div>
<pre class="articleQuote">
function ParentCall (name) {
	this.name = name;
	this.showName = function () {
		console.log(this.name);
	};
};

function ChildCall (name, age) {
	ParentCall.call(this, name);
	this.age = age;
	this.showAge = function () {
		console.log(this.name +":"+ this.age);
	};
};
var pc = new ParentCall("Kang"),
	cc = new ChildCall("F7", 30);

pc.showName();
cc.showName();
cc.showAge();
</pre>
<div>&nbsp;</div>
<div><strong>(三)apply方法继承：</strong></div>
<pre class="articleQuote">
function ParentApply (name) {
	this.name = name;
	this.showName = function () {
		console.log(this.name);
	};
};

function ChildApply (name, age) {
	ParentApply.apply(this, [name]);
	this.age = age;
	this.showAge = function () {
		console.log(this.name +":"+ this.age);
	};
};
var pa = new ParentApply("Kang"),
	ca = new ChildApply("F7", 30);

pa.showName();
ca.showName();
ca.showAge();
</pre>
<div>&nbsp;</div>
<div>以上的 call 和 apply 方法继承都是对象冒充原理的一个运用。</div>
<div>&nbsp;</div>
<div><strong>(四)原型继承：</strong></div>
<pre class="articleQuote">
function ParentPrototype () {
	this.name = "F7";// 不能传递参数就只能写常量了
	this.showName = function () {
		console.log(this.name);
	}
};
ParentPrototype.prototype.showInfo = function () {
	console.log(this.name +":"+ this.age);
};

function ChildPrototype () {
	this.age = 30;
};
ChildPrototype.prototype = new ParentPrototype();

var ap = new ChildPrototype(),
	bp = new ParentPrototype();

bp.showName();
ap.showName();
ap.showInfo();
</pre>
<div>&nbsp;</div>
<div><strong>(五)混合集成【寄生组合模式】：</strong></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;为了集合两种继承模式的优点，消除缺点产生了这种混合模式。</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;利用对象冒充机制的call方法把父类的属性给抓取下来，而成员方法尽量写进被所有对象实例共享的prototype域中，以防止方法副本重复创建。然后利用原型继承让子类继承父类prototype域的所有方法。</div>
<pre class="articleQuote">
function ParentBlend (name) {
	this.name = name;
	this.showName = function () {
		console.log(this.name);
	};
};
ParentBlend.prototype.showInfo = function () {
	console.log(this.name);
};

function ChildBlend (name, age, sex) {
	ParentBlend.call(this, name);
	this.age = age;
	this.sex = sex
	this.showAge = function () {
		console.log(this.name +":"+ this.age);
	};
};
ChildBlend.prototype = new ParentBlend();
ChildBlend.prototype.showSex = function () {
	console.log(this.name +":"+ this.sex);
};

var pb = new ParentBlend("Kang"),
	cb = new ChildBlend("F7", 30, "男");

pb.showName();
pb.showInfo();
cb.showName();
cb.showInfo();
cb.showAge();
cb.showSex();
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/345/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>cookie的大小的数量限制</title>
		<link>http://www.imf7.com/archives/341</link>
		<comments>http://www.imf7.com/archives/341#comments</comments>
		<pubDate>Sun, 19 Feb 2012 04:53:31 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=341</guid>
		<description><![CDATA[&#160; cookie的总数量没有限制，但是每个域名的COOKIE数量和每个COOKIE的大小是有限制的！ 一、浏览器答应每个域名所包含的cookie数： 　　microsoft指出internetexplorer8增加cookie限制为每个域名50个，但ie7似乎也答应每个域名50个cookie。 　　firefox每个域名cookie限制为50个。 　　opera每个域名cookie限制为30个。 　　safari/webkit貌似没有cookie限制。但是假如cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。 　　注：“每个域名cookie限制为20个”将不再正确！ 二、当很多的cookie被设置，浏览器如何去响应。 　　除safari（可以设置全部cookie，不管数量多少），有两个方法： 　　最少最近使用（leastrecentlyused(lru)）的方法：当cookie已达到限额，自动踢除最老的cookie，以使给最新的cookie一些空间。internetexplorer和opera使用此方法。 　　firefox很独特：虽然最后的设置的cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在firefox中不要超过cookie限制）。 三、不同浏览器间cookie总大小也不同： 　　firefox和safari答应cookie多达4097个字节，包括名（name）、值（value）和等号。 　　opera答应cookie多达4096个字节，包括：名（name）、值（value）和等号。 　　internetexplorer答应cookie多达4095个字节，包括：名（name）、值（value）和等号。 注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。 &#160; 转自：http://blog.csdn.net/eryongyan/article/details/6519185]]></description>
			<content:encoded><![CDATA[<div>&nbsp;</div>
<div><strong>cookie的总数量没有限制，但是每个域名的COOKIE数量和每个COOKIE的大小是有限制的！</strong></div>
<div><strong>一、浏览器答应每个域名所包含的<b>cookie</b>数：</strong></div>
<div>　　microsoft指出internetexplorer8增加<b>cookie</b><b>限制</b>为每个域名50个，但ie7似乎也答应每个域名50个<b>cookie</b>。</div>
<div>　　firefox每个域名<b>cookie</b><b>限制</b>为50个。</div>
<div>　　opera每个域名<b>cookie</b><b>限制</b>为30个。</div>
<div>　　safari/webkit貌似没有<b>cookie</b><b>限制</b>。但是假如<b>cookie</b>很多，则会使header<b>大小</b>超过<a href="http://product.it168.com/files/0402search.shtml" target="_blank">服务器</a>的处理的<b>限制</b>，会导致错误发生。</div>
<div>　　注：“每个域名<b>cookie</b><b>限制</b>为20个”将不再正确！</div>
<p><span id="more-341"></span></p>
<div><strong>二、当很多的<b>cookie</b>被设置，浏览器如何去响应。</strong></div>
<div>　　除safari（可以设置全部<b>cookie</b>，不管数量多少），有两个方法：</div>
<div>　　最少最近使用（leastrecentlyused(lru)）的方法：当<b>cookie</b>已达到限额，自动踢除最老的<b>cookie</b>，以使给最新的<b>cookie</b>一些空间。internetexplorer和opera使用此方法。</div>
<div>　　firefox很独特：虽然最后的设置的<b>cookie</b>始终保留，但似乎随机决定哪些<b>cookie</b>被保留。似乎没有任何计划（建议：在firefox中不要超过<b>cookie</b><b>限制</b>）。</div>
<div><strong>三、不同浏览器间<b>cookie</b>总<b>大小</b>也不同：</strong></div>
<div>　　firefox和safari答应<b>cookie</b>多达4097个字节，包括名（name）、值（value）和等号。</div>
<div>　　opera答应<b>cookie</b>多达4096个字节，包括：名（name）、值（value）和等号。</div>
<div>　　internetexplorer答应<b>cookie</b>多达4095个字节，包括：名（name）、值（value）和等号。</div>
<div>注：多字节字符计算为两个字节。在所有浏览器中，任何<b>cookie</b><b>大小</b>超过<b>限制</b>都被忽略，且永远不会被设置。</div>
<div>&nbsp;</div>
<div>转自：http://blog.csdn.net/eryongyan/article/details/6519185</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/341/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一个前端对设计师的诉求</title>
		<link>http://www.imf7.com/archives/336</link>
		<comments>http://www.imf7.com/archives/336#comments</comments>
		<pubDate>Tue, 14 Feb 2012 03:11:03 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[我的作品]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=336</guid>
		<description><![CDATA[首先声明，这是一篇和谐帖。。。目的在于提高设计与制作的合作效率，帮助设计师了解制作的想法，提高团队战斗力。如其中有用词不当的，请设计师承让，其他制作也可将自己的心得回复出来。另外，也请制作的同学们反省自己的不足。 &#160; &#160; 对于不确定性因素考虑周全问题： &#160; &#160; &#160; &#160; 例1：评论模块，显示评论的文字，显示多了怎么办，显示评论的条数，显示评论者的昵称长度问题等等。&#160;&#160;假设现在有现在有300×200的一个模块，你应该怎么设计评论内容呢？ &#160; &#160; &#160; &#160; &#160; 例2：一个互动的操作是否需要登录，登录框要在页面显示还是在弹出层中，还是跳转？显示的样式是什么？登录成功后显示什么。这些都应该考虑一下。。。 &#160; &#160; &#160; &#160; &#160; 例3：链接:hover的效果，按钮鼠标滑过的效果，这些是否需要，不设计出来将默认为不需要，建议，至少链接要有hover。。。如果您已经设计了hover状态的样式，请确保别人看了可以知道那个是正常样式，那个是hover样式【例如：在hover样式上面放个小手】 &#160; &#160; &#160; &#160; 例3反例：曾经见过一个TAB模块有三个页签，搞了红、绿、灰三个颜色并且没有任何注释，苍天哪，我要不问需求方哪里还知道这是一个TAB页签啊，红绿灰三个颜色鬼知道是干什么用的 &#160; 重用性的考虑： &#160; &#160; &#160; &#160; 模块装饰的通用性和统一性，例如一个模块的标题背景或者边框可以延伸使用到多个模块中【重用性越高，效率越高】 &#160; &#160; &#160; &#160; &#160; 相同模块的大小统一、间距统一，极力推荐：相信科学，切莫完全依赖肉眼。。。请实用工具【重用性的分支】 &#160; &#160; &#160; &#160; &#160; 相同可循环模块或者边框的颜色尽可能的统一 &#160; &#160; &#160; &#160; &#160; 大型渐变背景请保持颜色的一致性【例如：做了纵向的线性渐变，可最终的效果左边开始和右边结束的颜色有差异，亲！这样的背景无法被循环，咱们还达不到韩国的网速，请尽可能使用可循环背景】 &#160; &#160; &#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<div><strong style="color:red">首先声明，这是一篇和谐帖。。。目的在于提高设计与制作的合作效率，帮助设计师了解制作的想法，提高团队战斗力。如其中有用词不当的，请设计师承让，其他制作也可将自己的心得回复出来。另外，也请制作的同学们反省自己的不足。</strong></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div><strong>对于不确定性因素考虑周全问题：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 例1：评论模块，显示评论的文字，显示多了怎么办，显示评论的条数，显示评论者的昵称长度问题等等。&nbsp;&nbsp;假设现在有现在有300×200的一个模块，你应该怎么设计评论内容呢？</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 例2：一个互动的操作是否需要登录，登录框要在页面显示还是在弹出层中，还是跳转？显示的样式是什么？登录成功后显示什么。这些都应该考虑一下。。。</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 例3：链接:hover的效果，按钮鼠标滑过的效果，这些是否需要，不设计出来将默认为不需要，建议，至少链接要有hover。。。如果您已经设计了hover状态的样式，请确保别人看了可以知道那个是正常样式，那个是hover样式【例如：在hover样式上面放个小手】</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 例3反例：曾经见过一个TAB模块有三个页签，搞了红、绿、灰三个颜色并且没有任何注释，苍天哪，我要不问需求方哪里还知道这是一个TAB页签啊，红绿灰三个颜色鬼知道是干什么用的</div>
<div>&nbsp;</div>
<div>
<strong>重用性的考虑：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 模块装饰的通用性和统一性，例如一个模块的标题背景或者边框可以延伸使用到多个模块中【重用性越高，效率越高】</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 相同模块的大小统一、间距统一，极力推荐：相信科学，切莫完全依赖肉眼。。。请实用工具【重用性的分支】</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 相同可循环模块或者边框的颜色尽可能的统一</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 大型渐变背景请保持颜色的一致性【例如：做了纵向的线性渐变，可最终的效果左边开始和右边结束的颜色有差异，亲！这样的背景无法被循环，咱们还达不到韩国的网速，请尽可能使用可循环背景】</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 在使用“变亮、叠加、差值”等图层效果的时候请考虑一下是否会影响到页面其他地方的效果，上述背景左右不同很多都是因为这样的原因造成的，还有使用半透明蒙版、大面积羽化等等都需要注意是否影响其他地方</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 您在平铺背景的时候请保留一份单元图出来，前端的小朋友们也需要用</div>
<p><span id="more-336"></span></p>
<div>&nbsp;</div>
<div><strong>字体的使用问题：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; WEB字体请尽量不要使用字间距设置，美术字随意</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 美术字的使用：您确定、一定以及肯定要启用美术字体么？模块标题或者普通地方使用了美术字体，如果将来调整文字需要找到你，让你调整，完了再重新将这个图片切好，然后发工单提交上线请求，上线完成后在进行CDN更新操作，之后用户才能看到新的图片，如果这样的维护成本在您或您公司的接受范围内那就请进开心大胆的用吧</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 标题做美化时请考虑到是否需要使用美术字体，做装饰时考虑下这个标题的文字是否会有长短的变化</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 文字颜色的选择尽可能选取WEB安全色[<a href="http://baike.baidu.com/view/3433514.htm" target="_blank">http://baike.baidu.com/view/3433514.htm</a>]，在PS的拾色器中有WEB安全色的选项。</div>
<div>&nbsp;</div>
<div><strong>关于结构排版：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 页面首屏排版考虑下主流显示器首屏有多高，我们应该做多高可以做到最快速加载和最好的用户体验，那个模块需要最先展示出来，是否需要给制作的同学标注【极端坏的情况：整个页面很长很长，并且只分了左中右三列，其中的小模块参差不齐，左侧要最先，左侧有N个需要JS初始化的模块，还要达到模块即加载即使用，这样JS会造成阻塞，最左侧加载就慢到极点，半天都看不到中间和右侧的内容】</div>
<div>&nbsp;</div>
<div>
&nbsp; &nbsp; &nbsp; &nbsp; 模块宽度制定时可以先计算一下，尽可能的取整数</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 图片大小在设定时尽可能采取160*120、320*240、480*360[中华网标准]这三种规格，如果达不到设计需要也可以采取其他整数尺寸，亲！是整数哦。。。</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 模块之间的宽高或固定好的宽高，劳烦在做的时候认真点，不要玩出1-2像素的差别，这会令前端哭笑不得，尽可能的调整你们设计的习惯，使用工具弥补肉眼的差距。。。</div>
<div>&nbsp;</div>
<div><strong>图片毛刺问题：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; ICON图标尽可能使用清晰一点的素材，千万不要拿一个大的，咔咔两下缩小后直接用，拜托您看看图标的毛边是不是你能接受的，如果你的设计不在乎这些细节，就当我没说。</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 遇到可能透明的GIF图片，请尽可能的将图片精确到像素，不要让边缘色块产生半透明，前端不是神，GIF搞不定半透明，PNG也逃避不了IE6的魔咒。</div>
<div>&nbsp;</div>
<div><strong>特殊的页面元素：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 遇到select选择框，美化就标注需要美化，不美化就截取一个普通的样子放那儿，别整出来后需求方使用的浏览器不同，看到的效果不同跟你较劲儿。。。</div>
<div>&nbsp;</div>
<div><strong>影响页面性能的设计技巧：</strong></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; 遇到需要用JS初始化的模块请尽可能的向屏幕右侧或者页面下方排版，这样有助于提高页面展示速度的体验，必要的时候也需要作出loading状态</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>暂时先整这么多，其他的想到了陆续在更新。。。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/336/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网站速度优化&#8211;个人总结</title>
		<link>http://www.imf7.com/archives/332</link>
		<comments>http://www.imf7.com/archives/332#comments</comments>
		<pubDate>Sun, 12 Feb 2012 05:00:39 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[我的作品]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=332</guid>
		<description><![CDATA[网站速度优化&#8211;个人总结： &#160; 静态化【必须的，可以大大提交响应速度】 &#160; 看看那些活动的时间消耗最大，最有优化前景【布局、渲染、HTML、调度、DOM、格式化、JScript、其他】 注释：《高性能网站建设进阶指南》是这样讲的，个人认为也是合理的，但还没有找到合适的工具来检测具体活动的开销。目前只能靠经验和浏览器开发者工具来判断哪些活动开销较大来具体优化。 &#160; &#160; 减少HTTP request【合并图片、css、js等】 启用CDN技术【运维部门负责】 启用GZIP压缩【服务器实现】 启用多域名【除主域名外再启用1至多个顶级域名用于下载资源文件，这样可以增加网站的并行加载数，以及避免主域名的cookie来回传递】 启用缓存机制【不变的文件长期缓存等等，根据变更率设置缓存级别】 &#160; 避免URL重定向 &#160; CSS尽可能的放在head标签【尽可能的从页面中分离出来】，有助于渲染 CSS中拒绝expressions CSS中避免使用滤镜效果【IE的恶魔】 在加载CSS是避免使用@import，请使用 标签 JS文件应该放在页面的底部执行【尽可能的从页面中分离出来】 拒绝重复加载JS和CSS 上线前压缩JS和CSS文件 &#160; 避免iframe标签的使用【所有dom中，iframe的开销是最大的，并且会造成阻塞以及阻塞onload事件】 &#160; 页面结构方面，DOM节点越少，速度越快 &#160; &#160; 尽可能的保持最少的cookie【cookie是放在HTTP headers中传递的，每一次request都会传递，所以会产生响应时间】【cookie大小限制http://www.imf7.com/archives/341】 &#160; 惰性加载【仅加载页面上显示的内容，其他隐藏、互动内容、甚至不再第一屏显示的内容都可以选择性加载】 &#160; 惰性初始化【特指JS初始化，仅初始当前迫在眉睫的，其他的选择性初始】 &#160; 还有一点特别重要：适当的异步加载会让你的速度加倍提升【不管是AJAX还是其他方法的异步都可以】 &#160; 先写这么多吧。。。]]></description>
			<content:encoded><![CDATA[<div>网站速度优化&#8211;个人总结：</div>
<div>&nbsp;</div>
<div>静态化【必须的，可以大大提交响应速度】</div>
<div>&nbsp;</div>
<div>看看那些活动的时间消耗最大，最有优化前景【布局、渲染、HTML、调度、DOM、格式化、JScript、其他】</div>
<div>注释：《高性能网站建设进阶指南》是这样讲的，个人认为也是合理的，但还没有找到合适的工具来检测具体活动的开销。目前只能靠经验和浏览器开发者工具来判断哪些活动开销较大来具体优化。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>减少HTTP request【合并图片、css、js等】</div>
<div>启用CDN技术【运维部门负责】</div>
<div>启用GZIP压缩【服务器实现】</div>
<div>启用多域名【除主域名外再启用1至多个顶级域名用于下载资源文件，这样可以增加网站的并行加载数，以及避免主域名的cookie来回传递】</div>
<div>启用缓存机制【不变的文件长期缓存等等，根据变更率设置缓存级别】</div>
<p><span id="more-332"></span></p>
<div>&nbsp;</div>
<div>避免URL重定向</div>
<div>&nbsp;</div>
<div>CSS尽可能的放在head标签【尽可能的从页面中分离出来】，有助于渲染</div>
<div>CSS中拒绝expressions</div>
<div>CSS中避免使用滤镜效果【IE的恶魔】</div>
<div>在加载CSS是避免使用@import，请使用
<link>标签</div>
<div>JS文件应该放在页面的底部执行【尽可能的从页面中分离出来】</div>
<div>拒绝重复加载JS和CSS</div>
<div>上线前压缩JS和CSS文件</div>
<div>&nbsp;</div>
<div>避免iframe标签的使用【所有dom中，iframe的开销是最大的，并且会造成阻塞以及阻塞onload事件】</div>
<div>&nbsp;</div>
<div>页面结构方面，DOM节点越少，速度越快</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>尽可能的保持最少的cookie【cookie是放在HTTP headers中传递的，每一次request都会传递，所以会产生响应时间】【cookie大小限制<a href="http://www.imf7.com/archives/341" target="_blank">http://www.imf7.com/archives/341</a>】</div>
<div>&nbsp;</div>
<div>惰性加载【仅加载页面上显示的内容，其他隐藏、互动内容、甚至不再第一屏显示的内容都可以选择性加载】</div>
<div>&nbsp;</div>
<div>惰性初始化【特指JS初始化，仅初始当前迫在眉睫的，其他的选择性初始】</div>
<div>&nbsp;</div>
<div>还有一点特别重要：适当的异步加载会让你的速度加倍提升【不管是AJAX还是其他方法的异步都可以】</div>
<div>&nbsp;</div>
<div>先写这么多吧。。。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/332/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>我的财政状况</title>
		<link>http://www.imf7.com/archives/327</link>
		<comments>http://www.imf7.com/archives/327#comments</comments>
		<pubDate>Sun, 05 Feb 2012 02:40:25 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[我的小生活]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=327</guid>
		<description><![CDATA[2012.2.5 我的财政状况 &#160; 总收入： 100% &#160; 房租： 26% &#160; 房贷： 37% &#160; 投资： 11% &#160; 存款： 0% &#160; 旅游： 0% &#160; 应急： 3% &#160; 购物： 3% &#160; 日常刚需： 20% 包含【吃饭、抽烟、交通、通讯】 &#160; &#160; 目前仅计算实际到手的数额，税金、保险、公积金等不在本次计算范围内 &#160; &#160; 我想我应该降低日常刚需、房租、房贷的比重，填补几个零比重的项目，提高投资的比重。 &#160; &#160; 我要改变！一定！！！并且以最快的速度。 &#160; &#160;]]></description>
			<content:encoded><![CDATA[<div>2012.2.5 我的财政状况</div>
<div>&nbsp;</div>
<div>总收入： 	100%</div>
<div>&nbsp;</div>
<div>房租：		26%</div>
<div>&nbsp;</div>
<div>房贷： 	37%</div>
<div>&nbsp;</div>
<div>投资：		11%</div>
<div>&nbsp;</div>
<div>存款： 	0%</div>
<div>&nbsp;</div>
<div>旅游： 	0%</div>
<div>&nbsp;</div>
<div>应急： 	3%</div>
<div>&nbsp;</div>
<div>购物： 	3%</div>
<div>&nbsp;</div>
<div>日常刚需：	20%</div>
<div>包含【吃饭、抽烟、交通、通讯】</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>目前仅计算实际到手的数额，税金、保险、公积金等不在本次计算范围内</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>我想我应该降低日常刚需、房租、房贷的比重，填补几个零比重的项目，提高投资的比重。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>我要改变！一定！！！并且以最快的速度。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/327/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>利用windows桌面小工具开发的目标提醒组件</title>
		<link>http://www.imf7.com/archives/321</link>
		<comments>http://www.imf7.com/archives/321#comments</comments>
		<pubDate>Tue, 03 Jan 2012 09:52:40 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=321</guid>
		<description><![CDATA[新年新气象，2012的计划大家写了没有，没有的赶快哈！ 有条件的可以和我一样，利用windows桌面小工具开发一个专属于自己的目标提醒组件，功能任意哈，有什么想法都可以加进组件。 参考资料：http://apps.hi.baidu.com/share/detail/19091126 很简单，只需要HTML、CSS、JavaScript基础就可以开发。 &#160; 下面是我画的一个简单的工具： 希望大家有更好的发挥，将windows的东东利用起来。]]></description>
			<content:encoded><![CDATA[<div>新年新气象，2012的计划大家写了没有，没有的赶快哈！<br />
有条件的可以和我一样，利用windows桌面小工具开发一个专属于自己的目标提醒组件，功能任意哈，有什么想法都可以加进组件。<br />
参考资料：<a href="http://apps.hi.baidu.com/share/detail/19091126" target="_blank">http://apps.hi.baidu.com/share/detail/19091126</a><br />
很简单，只需要HTML、CSS、JavaScript基础就可以开发。</div>
<p>&nbsp;</p>
<div>下面是我画的一个简单的工具：<br />
<img src="http://imf7.com/upload/myplan.jpg" alt="利用windows桌面小工具开发的目标提醒组件" /><br />
希望大家有更好的发挥，将windows的东东利用起来。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/321/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>关于多域增加浏览器并发来提高网页打开速度的话题</title>
		<link>http://www.imf7.com/archives/319</link>
		<comments>http://www.imf7.com/archives/319#comments</comments>
		<pubDate>Thu, 08 Dec 2011 02:28:52 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=319</guid>
		<description><![CDATA[了解过网站速度优化的同学可能会了解到，浏览器是有并发数限制的: 先总结一下HTTP1.1下主流浏览器在单个主机下的并发连接数： IE6&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160;&#160;2 IE7&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160;&#160;2 IE8&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160;&#160;6 Firefox2&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160;&#160; &#160; 2 Firefox3&#160; &#160;&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>了解过网站速度优化的同学可能会了解到，浏览器是有并发数限制的:<br />
<font color="#666666"><font face="song, Verdana "><font style="font-size: 12px">先总结一下HTTP1.1下主流浏览器在单个主机下的并发连接数：<br />
<font face="宋体 "><br />
<font face="Verdana ">IE6&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;2</font><br />
<font face="Verdana ">IE7&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;2</font><br />
<font face="Verdana ">IE8&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;6</font><br />
<font face="Verdana ">Firefox2&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 2</font><br />
<font face="Verdana ">Firefox3&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 6</font><br />
</font><font size="2"><font face="Verdana ">Safari 3,4&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 4&nbsp; &nbsp;&nbsp;&nbsp;<br />
Chrome 1,2&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;6&nbsp; &nbsp;&nbsp;&nbsp;<br />
Opera 9.63,10.00alpha&nbsp; &nbsp;&nbsp;&nbsp;4 </font></font></font></font></font></p>
<p>当然，还有HTTP1.0，不过我觉得没有必要那么做。</p>
<p>
下面一个测试并发速度的页面:<br />
<font color="#108ac6"><u><a href="http://stevesouders.com/hpws/parallel-downloads.php" target="_blank">http://stevesouders.com/hpws/parallel-downloads.php</a></u></font></p>
<p>上面的数据自网络。</p>
<p>
其实在我们的SNS【有料】项目中也采用了这个增加并发的相关方法，其中我们就采用了image.u.china.com域来加载部分资源文件。</p>
<p>但有不足的地方，这里提出几点个人意见：<br />
1、首先根绝我们有料个人首页的加载量，本人认为同时启用3个与为最佳，如果能确定3个域的解析速度一样快，随便选两个在首屏中加载文件，如果不确定，尽可能的选两个解析较为稳定的放在首屏加载文件；<br />
2、这点是比较重要的，我们的有料就犯了这样的错误，启用增加并发的域时请尽量启用新的顶级域【主域cookie污染太严重】，然后不管需要划分多少个域，只需要开设新顶级域的二级域即可。</p>
<p>暂时只想到了这两点，以后有别的想法时再补充。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/319/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Notepad++的FunctionList（函数列表）插件中文版下载</title>
		<link>http://www.imf7.com/archives/315</link>
		<comments>http://www.imf7.com/archives/315#comments</comments>
		<pubDate>Mon, 05 Dec 2011 02:25:53 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[前端技术]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=315</guid>
		<description><![CDATA[分享一款Notepad++的FunctionList（函数列表）插件，应该V5.×的都可以用。 &#160; 1.文章地址：http://www.mculee.cn/post/80.html &#160; &#160;&#160;插件下载地址：http://www.mculee.cn/upload/2009/5/200905121227110666.rar &#160; 2.下载上述文件后，将其中的FunctionList.dll解压到Notepad++安装路径的plugins目录下即可。 &#160; 3.重新启动Notepad++，看一下是否在“插件”菜单下出现了“函数列表”的子菜单？选择“列表&#8230;”或点击工具栏上的红色小图标就可以显示函数列表了！而且是中文版的～ &#160; &#160; 原文：http://apps.hi.baidu.com/share/detail/19755444]]></description>
			<content:encoded><![CDATA[<div>分享一款Notepad++的FunctionList（函数列表）插件，应该V5.×的都可以用。</div>
<div>&nbsp;</div>
<div>1.文章地址：<strong><a href="http://www.mculee.cn/post/80.html" target="_blank">http://www.mculee.cn/post/80.html</strong></a></div>
<div>&nbsp;</div>
<div>&nbsp;&nbsp;插件下载地址：<strong><a href="http://www.mculee.cn/upload/2009/5/200905121227110666.rar" target="_blank">http://www.mculee.cn/upload/2009/5/200905121227110666.rar</a></strong></div>
<div>&nbsp;</div>
<div>2.下载上述文件后，将其中的FunctionList.dll解压到Notepad++安装路径的plugins目录下即可。</div>
<div>&nbsp;</div>
<div>3.重新启动Notepad++，看一下是否在“插件”菜单下出现了“函数列表”的子菜单？选择“列表&#8230;”或点击工具栏上的红色小图标就可以显示函数列表了！而且是中文版的～</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>原文：http://apps.hi.baidu.com/share/detail/19755444</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/315/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>一个焦点图效果</title>
		<link>http://www.imf7.com/archives/307</link>
		<comments>http://www.imf7.com/archives/307#comments</comments>
		<pubDate>Thu, 01 Dec 2011 03:58:10 +0000</pubDate>
		<dc:creator>F7</dc:creator>
				<category><![CDATA[我的作品]]></category>

		<guid isPermaLink="false">http://www.imf7.com/?p=307</guid>
		<description><![CDATA[前段时间在google+溜达，看见了下面这个效果，于是乎，哈哈！就模仿了一下，唉！自己没有创意，只能模仿。 &#160; 点击预览 &#160; &#160; 点击预览 &#160;]]></description>
			<content:encoded><![CDATA[<div>前段时间在google+溜达，看见了下面这个效果，于是乎，哈哈！就模仿了一下，唉！自己没有创意，只能模仿。</div>
<div>&nbsp;</div>
<div><a href="http://www.imf7.com/demo/flyFocus/focus.html" target="_blank">点击预览</a></div>
<div>&nbsp;</div>
<div><img src="http://www.imf7.com/demo/flyFocus/flyFocus.jpg" alt="飞翔的焦点图" width="550" /></div>
<div>&nbsp;</div>
<div><a href="http://www.imf7.com/demo/flyFocus/focus.html" target="_blank">点击预览</a></div>
<div>&nbsp;</div>
]]></content:encoded>
			<wfw:commentRss>http://www.imf7.com/archives/307/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

