<?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>苏洋博客 &#187; (x)Html</title>
	<atom:link href="http://promiseforever.com/topics/learning/html-learning/feed" rel="self" type="application/rss+xml" />
	<link>http://promiseforever.com</link>
	<description>记录我的一点一滴。</description>
	<lastBuildDate>Sat, 12 May 2012 12:37:03 +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>重新看待WEB前端性能</title>
		<link>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html</link>
		<comments>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html#comments</comments>
		<pubDate>Sat, 12 May 2012 02:05:37 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[我的总结]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[重构]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=6704</guid>
		<description><![CDATA[之前简单面试的时候,感觉回答77哥回答的不是很好. 最近又看过几本书后,有了一些新的看法，对于内容分类也有新的变化。 之前写过一篇类似的：http://promiseforever.com/2012/03/12/improve-speed-for-you.html 1.减少HTTP请求数 相同内容，相同大小的数据，10个请求数的页面肯定比100个请求数要快，浏览器和服务器建立握手，尤其在网络环境不是太理想的时候，这个问题比较突出。而且有效节约服务器资源。 2.数据内容的优化(文字,图片,CSS,JS,COOKIES,CACHE,CDN,JSON) 因为内容还原度的要求是不一样的，商品图，LOGO需要的还原度比较高，可以使用较为清晰的32位PNG或者JPG，如果是网站的边角料，可以使用gif或者16位PNG。如果有专用服务器做CDN，可以不用考虑压缩(Gzip)的问题，如果没有且服务器允许的话，对图片和文字都进行压缩的话，可以有效节约浏览器下载数据的大小。 CSS SPRITE拼合图片也可以有效节约图片体积，JS,CSS等文件在使用的时候，可以先使用YUI等压缩工具进行压缩，将只是给开发人员看的缩进内容都省略，顺便一提，对于IE较老的版本，CSS,JS的分号和滤镜中的某些空格不能随便压缩掉，如果随意压缩掉，会发生想要的效果消失掉的BUG。 鉴于访客来源地区的差异，合理使用CDN也是一个不错的方案。 例如CSS,JS这些额外的表现和行为的元素，如有可能，单独保存为外部文件，在HTML文档中引用的位置最优方案为：css位于文档头部，利于尽早渲染页面，核心JS库可以适当放置较早的位置，比如jquery，其他的js文件放置于页面尾部，有可能的话，尽量拼合这些文档，js如果包含较多数据，可以使用eval packed二次压缩。 cache可以使用etag,expire,或者HTML5-cache进行缓存,使用JS进行调用或者遵循浏览器的默认规则，有效减少重复下载内容的时间。 cookies要谨慎使用，避免发生cookies 污染，因为浏览器存在带cookies发送请求，所以cookies的大小必须在合理范围，虽然它最大也只是4kb,正确设置过期时间,合理减少不必要内容,是优化的有效手段.. JSON作为数据交换手段之一,比xml的优越性还是蛮多的,首先是它体积更小,传输更快,速度是网站的基础之一。而且JSON可以描述出对象，十分适合进行小段的程序间的通信。 3.减少DOM操作 DOM树庞大，很多操作DOM的时候是进行整体拷贝，然后遍历设置属性的过程，这个操作是很浪费时间的，如果有可能，使用XPATH,或者直接操作某个带有ID的元素，更为快捷和节约资源。使用DOM的时候，必须合理进行局部的VAR保存一下操作中会重复利用到的对象。 4.页面重构 在对DOM元素进行操作之后，如果该元素会影响到其他的元素，例如其他元素的上下文是它，那么其他元素会进行重排，在它进行重新渲染生成的时候。重新渲染元素需要消耗内存和时间，如果页面包含许多元素，重排的时间和资源也不容小觑。 DOM结构如果不能保持简明良好，反复嵌套无用的结构，不仅在重排的时候会造成浪费，而且影响后续开发。]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Jquery飞射(洗牌)特效</title>
		<link>http://promiseforever.com/2012/01/18/jquery%e9%a3%9e%e5%b0%84%e6%b4%97%e7%89%8c%e7%89%b9%e6%95%88.html</link>
		<comments>http://promiseforever.com/2012/01/18/jquery%e9%a3%9e%e5%b0%84%e6%b4%97%e7%89%8c%e7%89%b9%e6%95%88.html#comments</comments>
		<pubDate>Wed, 18 Jan 2012 15:34:43 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[我的总结]]></category>
		<category><![CDATA[jq]]></category>
		<category><![CDATA[Jquery]]></category>
		<category><![CDATA[洗牌]]></category>
		<category><![CDATA[飞射]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=5512</guid>
		<description><![CDATA[算下来,现在还差以前的登录页面没有独立做出来.所以手痒,打算做一下. 但是单调的登录感觉没什么意思,于是就开始写这个.. 做了2个效果，一个是洗牌,一个是飞射出去再聚合一起。其实是一样的。下面贴下代码。 先贴基本的CSS和HTML结构. &#60;style type=&#34;text/css&#34;&#62; #warp &#123; width:auto; height:400px; background-color:#FCF; overflow:hidden; position:relative; &#125; .slide &#123; position:absolute; width:300px; left:50%; margin-left:-150px; height: 200px; top:50%; margin-top:-100px; overflow:hidden; line-height:200px; background-color: lightyellow; float:left; &#125; #left &#123; z-index:50; border: solid 5px red; height:240px; &#125; #right &#123; z-index:40; border: solid 5px green; height:180px; &#125; .slide .inner &#123; height: 100%; width: 100% ...]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/01/18/jquery%e9%a3%9e%e5%b0%84%e6%b4%97%e7%89%8c%e7%89%b9%e6%95%88.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[随笔]一张设计小图</title>
		<link>http://promiseforever.com/2011/05/22/%e4%b8%80%e5%bc%a0%e8%ae%be%e8%ae%a1%e5%b0%8f%e5%9b%be.html</link>
		<comments>http://promiseforever.com/2011/05/22/%e4%b8%80%e5%bc%a0%e8%ae%be%e8%ae%a1%e5%b0%8f%e5%9b%be.html#comments</comments>
		<pubDate>Sun, 22 May 2011 06:11:54 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[我的作品]]></category>
		<category><![CDATA[我的设计]]></category>
		<category><![CDATA[生活随笔]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=3158</guid>
		<description><![CDATA[感觉色调搭配不爽&#8230; 将就了..]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/05/22/%e4%b8%80%e5%bc%a0%e8%ae%be%e8%ae%a1%e5%b0%8f%e5%9b%be.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[JS]javascript页面载入特效</title>
		<link>http://promiseforever.com/2011/05/10/javascript%e9%a1%b5%e9%9d%a2%e8%bd%bd%e5%85%a5%e7%89%b9%e6%95%88.html</link>
		<comments>http://promiseforever.com/2011/05/10/javascript%e9%a1%b5%e9%9d%a2%e8%bd%bd%e5%85%a5%e7%89%b9%e6%95%88.html#comments</comments>
		<pubDate>Tue, 10 May 2011 01:06:12 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[特效]]></category>
		<category><![CDATA[载入]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=3115</guid>
		<description><![CDATA[某些时候,不需要使用AJAX库的时候,或许一个很老的例子可以帮我们轻巧的解决我们需要的效果. javascript代码部分: &#60;script type=&#34;text/javascript&#34;&#62; var t_id=setInterval&#40;animate,20&#41;;var pos=0;var dir=2;var len=0;function animate&#40;&#41;&#123;var elem=document.getElementById&#40;'progress'&#41;;if&#40;elem!=null&#41;&#123;if&#40;pos==0&#41;len+=dir;if&#40;len&#62;32&#124;&#124;pos&#62;79&#41;pos+=dir;if&#40;pos&#62;79&#41;len-=dir;if&#40;pos&#62;79&#38;&#38;len==0&#41;pos=0;elem.style.left=pos;elem.style.width=len;&#125;&#125; function remove_loading&#40;&#41;&#123;this.clearInterval&#40;t_id&#41;;var targelem=document.getElementById&#40;'loader_container'&#41;;targelem.style.display='none';targelem.style.visibility='hidden';&#125; &#60;/script&#62; css代码部分: #loader_container&#123;text-align:center;position:absolute;top:40%;width:100%;left:0;padding:10px;&#125; #loader&#123;font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#7c7c7c;;background-color:#c0c0c0;padding:10px 0 16px 0;margin:0 auto;display:block;width:130px;border:1px solid #5a667b;text-align:left;z-index:2;&#125; #progress&#123;height:5px;font-size:1px;width:1px;position:relative;top:1px;left:0px;background-color:#8894a8&#125; #loader_bg&#123;background-color:#e4e7eb;position:relative;top:0px;left:0px;height:7px;width:113px;font-size:1px&#125; html代码部分: &#60;html&#62; &#60;body onload=&#34;remove_loading();&#34;&#62; &#60;div id=&#34;loader_container&#34;&#62; &#60;div id=&#34;loader&#34;&#62; &#60;div align=&#34;center&#34;&#62;页面正在加载中 ...&#60;/div&#62; &#60;div id=&#34;loader_bg&#34;&#62;&#60;div id=&#34;progress&#34;&#62; &#60;/div&#62;&#60;/div&#62;&#60;/div&#62; &#60;/div&#62; &#60;/body&#62; &#60;/html&#62; 使用方便很简单,就不多说了.]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/05/10/javascript%e9%a1%b5%e9%9d%a2%e8%bd%bd%e5%85%a5%e7%89%b9%e6%95%88.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[HTML]给网站添加各种图标</title>
		<link>http://promiseforever.com/2011/02/07/%e7%bb%99%e7%bd%91%e7%ab%99%e6%b7%bb%e5%8a%a0%e5%9b%be%e6%a0%87.html</link>
		<comments>http://promiseforever.com/2011/02/07/%e7%bb%99%e7%bd%91%e7%ab%99%e6%b7%bb%e5%8a%a0%e5%9b%be%e6%a0%87.html#comments</comments>
		<pubDate>Mon, 07 Feb 2011 06:43:32 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[我的总结]]></category>
		<category><![CDATA[favicon]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[图标]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=3074</guid>
		<description><![CDATA[今天上线,看到WEB QQ逆袭归来,习惯性的先看源代码,看到很多META,很多都是windows mobile支持的属性.看来智能手机确实是一个不可忽视的客户端份额。 head区域有一个地方感觉写的很好，摘下来，实现就是根据不同的浏览器和功能，将网站的图标缓存到客户端上。 首先这行是W3C标准的icon写法,所有支持WEB标准的浏览器都可以看到并且解释。 当然有的浏览器默认会直接读取你网站根目录的favicon.ico 如何制作稍后解释。 &#60;link rel=&#34;icon&#34; href=&#34;./favicon.ico&#34; type=&#34;image/x-icon&#34; /&#62; 下面这行是为MS的IE准备的，市场浏览器是MS做大，人有理由建立自己的标准，不是么。 &#60;link rel=&#34;shortcut icon&#34; href=&#34;./favicon32.ico&#34; type=&#34;image/x-icon&#34; /&#62; FF,IE支持书签添加图标,但是你要加上下面这句 &#60;link rel=&#34;bookmark&#34; href=&#34;./favicon.ico&#34; type=&#34;image/x-icon&#34; /&#62; Iphone越来越多的今天,不为apple添加一点支持,似乎不行..所以加上这句吧。 &#60;link rel=&#34;apple-touch-icon&#34; href=&#34;./favicon.png&#34;/&#62; 接下来是完整的代码。 &#60;link rel=&#34;icon&#34; href=&#34;./favicon.ico&#34; type=&#34;image/x-icon&#34; /&#62; &#60;link rel=&#34;shortcut icon&#34; href=&#34;./favicon32.ico&#34; type=&#34;image/x-icon&#34; /&#62; &#60;link rel=&#34;bookmark&#34; href=&#34;./favicon.ico&#34; type=&#34;image/x-icon&#34; /&#62; &#60;link rel=&#34;apple-touch-icon&#34; href=&#34;./favicon.png&#34;/&#62; 接下来是具体的实践过程。 推荐使用Axialis IconWorkshop 和adobe photoshop进行操作， 现在ps建立一个72&#215;72的画布,然后尽你可能做的简约一点，这个是为了iphone和其他icon做的模板。 ...]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/02/07/%e7%bb%99%e7%bd%91%e7%ab%99%e6%b7%bb%e5%8a%a0%e5%9b%be%e6%a0%87.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[js]准确获得页面的高度以及宽度</title>
		<link>http://promiseforever.com/2009/04/07/js-get-page-width-heigth.html</link>
		<comments>http://promiseforever.com/2009/04/07/js-get-page-width-heigth.html#comments</comments>
		<pubDate>Tue, 07 Apr 2009 13:52:26 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[获取页面宽度]]></category>
		<category><![CDATA[获取页面高度]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=415</guid>
		<description><![CDATA[原文出处：http://www.cnblogs.com/huqingyu/archive/2006/11/09/446712.html

根据出处的网友评论已经修改了源代码。

[js]
function getPageSize(){ 

var xScroll, yScroll; 

if (window.innerHeight &#038;& window.scrollMaxY) { 
xScroll = document.body.scrollWidth; 
yScroll = window.innerHeight + windo...]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/04/07/js-get-page-width-heigth.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[js]屏蔽鼠标右键</title>
		<link>http://promiseforever.com/2009/04/07/js-disable-mouse-right-button.html</link>
		<comments>http://promiseforever.com/2009/04/07/js-disable-mouse-right-button.html#comments</comments>
		<pubDate>Tue, 07 Apr 2009 01:41:13 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[禁止右键]]></category>
		<category><![CDATA[禁止鼠标]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=416</guid>
		<description><![CDATA[[js]//将彻底屏蔽鼠标右键
oncontextmenu="window.event.returnValue=false"[/js]
[HTML]
//表格中禁止使用鼠标右键
&#60;table border oncontextmenu=return(false)&#62;&#60;td&#62;PromiseForever&#60;/table&#62;[/HTML]
[js]
类似代码：
//屏蔽鼠标右键
1.oncontextmenu="return false"
//禁止选取内容
2.onselect...]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/04/07/js-disable-mouse-right-button.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[js]CCTV首页图片轮换</title>
		<link>http://promiseforever.com/2009/04/06/js-cctv-pics-change.html</link>
		<comments>http://promiseforever.com/2009/04/06/js-cctv-pics-change.html#comments</comments>
		<pubDate>Mon, 06 Apr 2009 22:50:37 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[cctv]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[图片轮换]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=417</guid>
		<description><![CDATA[花了宝贵的一刻钟把CCTV的图片轮换给扣下来了。

突然发现使用的jq的未加密库，缺陷是里面有好多废代码，

优点是html文档内的加载顺序，先是css文件的渲染，再是jq的库，接着是主要的展示div，最后是应用的js轮换代码。

附件:cctv.rar(88030 Byte)]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/04/06/js-cctv-pics-change.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[js]只能输入数字</title>
		<link>http://promiseforever.com/2009/03/31/js-only-input-nums.html</link>
		<comments>http://promiseforever.com/2009/03/31/js-only-input-nums.html#comments</comments>
		<pubDate>Tue, 31 Mar 2009 03:53:01 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[只能输入数字]]></category>
		<category><![CDATA[限制输入]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=424</guid>
		<description><![CDATA[Ajax jQuery JavaScript代码

    isNumber&#160;=&#160;function&#160;(e)&#160;{ &#160;&#160;
    &#160;&#160;&#160;&#160;if&#160;($.browser.msie)&#160;{ &#160;&#160;
    &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if&#160;(&#160;((event.keyCode&#160;&#62;&#160;47)&#160;&#38;&#38;&#160;(event....]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/03/31/js-only-input-nums.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[js]ajax加载的脚本不执行</title>
		<link>http://promiseforever.com/2009/03/31/ajax-script-donot-run.html</link>
		<comments>http://promiseforever.com/2009/03/31/ajax-script-donot-run.html#comments</comments>
		<pubDate>Tue, 31 Mar 2009 03:46:48 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[自动加载]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=425</guid>
		<description><![CDATA[在问题文档中输入即可

    &#60;div&#160;style=&#34;display:&#160;none&#34;&#62;&#160;&#160;&#160; &#160;&#160;
    &#160;&#160;&#160;&#160;&#60;iframe&#160;style=&#34;display:none&#34;&#160;onload=&#34;javascript:&#160;myJavascriptFunction()&#34;&#62;&#60;/iframe&#62;&#160;&#160;&#160; &#160;&#038;n...]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/03/31/ajax-script-donot-run.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

