<?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; js</title>
	<atom:link href="http://www.liangpeng.net/ytag/js/feed" rel="self" type="application/rss+xml" />
	<link>http://www.liangpeng.net</link>
	<description>寻找一小块属于自己的栖息地</description>
	<lastBuildDate>Fri, 13 Jan 2012 01:33:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>今天优化网站速度出现的一些问题</title>
		<link>http://www.liangpeng.net/y2009/m01/jintianyouhuawangzhansuduchuxiandeyixiewenti_517.html</link>
		<comments>http://www.liangpeng.net/y2009/m01/jintianyouhuawangzhansuduchuxiandeyixiewenti_517.html#comments</comments>
		<pubDate>Fri, 16 Jan 2009 06:21:51 +0000</pubDate>
		<dc:creator>梁鹏</dc:creator>
				<category><![CDATA[Web相关技术]]></category>
		<category><![CDATA[404]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[网站优化]]></category>
		<category><![CDATA[网站速度优化]]></category>
		<category><![CDATA[问题]]></category>

		<guid isPermaLink="false">http://www.liangpeng.net/?p=517</guid>
		<description><![CDATA[js加载不当出现的一些错误 1.js文件的加载可能滞后与页面中的js代码，所以代码都应该在document.ready中执行，可能出现错误。 2.使用ajax代码加载js文件，则可能滞后于document.ready执行，可能出现错误。 没有404页面出现的问题 1.通过firebug发现，页面加载里面有两个 网站根链接 liangpeng.net 貌似网站加载的两遍一样，而且每次加载时间都不短，严格排查原来是某个插件引用的一个css文件不存在，而且网站没有进行404处理，导致重定向到了主页。 关于网站加载速度的优化，请参见 WordPress 提速一二三 写得比较使用，相比其他诸如减少数据查询类文章要好很多，可以一观。 下面是我认为对我有用的非废话内容： 转自：北极冰仔  http://hellobmw.com/archives/tips-for-wordpress-speed-tweak.html 压缩 CSS 和 JavaScript 1. 清理 CSS CSS 可以在线使用 CSSTidy 清理一下，可以减少很多不必要的冗余（如：空格、换行等等），尤其在选择“最差可读性”之后，整个 CSS 文档内容压缩为一行。但清理前请务必备份原始 CSS 文件，一是为了方便以后修改，二是有些选项使用不当会完全破坏 CSS。强烈建议使用最保守的清理方式。 2. 打包 JavaScript JavaScript 脚本可以使用 packer 压缩，去除空格、换行后变为一行；勾选 Base62 编码将会压缩为更小的格式，但如果接下来你还想继续使用 gzip 进一步压缩 JavaScript，不推荐 Base62，实践证明普通 packer + gzip 才是最佳拍档。 3. 使用 gzip 进一步压缩 Gzip 是一种非常优秀的压缩方式，详细信息可以自行阅读 gzip [...]]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>加载不当出现的一些错误<br />
1.<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>文件的加载可能滞后与页面中的<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>代码，所以代码都应该在document.ready中执行，可能出现错误。<br />
2.使用ajax代码加载js文件，则可能滞后于document.ready执行，可能出现错误。<br />
没有<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/404" title="查看 404 中的全部文章" target="_blank">404</a></span>页面出现的<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/%e9%97%ae%e9%a2%98" title="查看 问题 中的全部文章" target="_blank">问题</a></span><br />
1.通过firebug发现，页面加载里面有两个 网站根链接 liangpeng.net 貌似网站加载的两遍一样，而且每次加载时间都不短，严格排查原来是某个插件引用的一个css文件不存在，而且网站没有进行<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/404" title="查看 404 中的全部文章" target="_blank">404</a></span>处理，导致重定向到了主页。</p>
<p>关于网站加载速度的优化，请参见 <a href="http://hellobmw.com/archives/tips-for-wordpress-speed-tweak.html" target="_blank">WordPress 提速一二三<br />
</a> 写得比较使用，相比其他诸如减少数据查询类文章要好很多，可以一观。<br />
下面是我认为对我有用的非废话内容：</p>
<p>转自：北极冰仔  http://hellobmw.com/archives/tips-for-wordpress-speed-tweak.html</p>
<h3>压缩 CSS 和 JavaScript</h3>
<p>1. 清理 CSS<br />
CSS 可以在线使用 <a class="external" href="http://www.google.com/search?hl=en&amp;q=css+tidy">CSSTidy</a> 清理一下，可以减少很多不必要的冗余（如：空格、换行等等），尤其在选择“最差可读性”之后，整个 CSS 文档内容压缩为一行。但<strong>清理前请务必备份</strong>原始 CSS 文件，一是为了方便以后修改，二是有些选项使用不当会<strong>完全</strong>破坏 CSS。<strong>强烈建议使用最保守的清理方式。</strong></p>
<p>2. 打包 JavaScript<br />
JavaScript 脚本可以使用 <a class="external" href="http://dean.edwards.name/packer/">packer</a> 压缩，去除空格、换行后变为一行；勾选 Base62 编码将会压缩为更小的格式，但如果接下来你还想继续使用 gzip 进一步压缩 JavaScript，不推荐 Base62，实践证明普通 packer + gzip 才是最佳拍档。</p>
<p>3. 使用 gzip 进一步压缩<br />
Gzip 是一种非常优秀的压缩方式，详细信息可以自行阅读 <a class="external" href="http://www.gzip.org/">gzip home</a>。使用 gzip 压缩 CSS 和 JavaScript 需要服务器支持 gzip，压缩 CSS 的方法与<a href="http://hellobmw.com/archives/compressing-javascript-with-phpgzip.html">压缩 JavaScript 的方法</a>基本是一样的，注意把 <code>Content-Type</code> 设置为 <code>text/css</code>。这里还运用了另外一个提速的技巧：<strong>强制性的浏览器缓存</strong>。</p>
<h3>尽量减少 HTTP 请求数</h3>
<p>HTTP 请求是很费时间的，主要花费（浪费）在建立连接的过程中。真正传输 1K 和 10K 数据的时间相差无几，但哪怕你请求的是一个仅有几字节的东东，一样需要花费可观的连接时间。</p>
<p><a href="http://hellobmw.com/archives/speed-up-by-css-sprites.html">CSS Sprites</a> 和 <a class="external" href="http://www.websiteoptimization.com/speed/tweak/inline-images/">Inline Images with Data URLs</a> 就可以帮上大忙了。</p>
<p><strong>CSS Sprites</strong> 的思想是把很多张小图片（如：图标）整合为一张大图，再利用 CSS 的 <a href="http://hellobmw.com/archives/css-position-property.html">background-position 属性</a>在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。</p>
<p><strong>Inline Images with Data URLs</strong> 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中，不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101，但经过 base64 编码后就可以了。基本的用法是：</p>
<div class="syntax_hilite">
<div id="code-2">
<div class="code">data:<span style="color: #006600; font-weight: bold;">[</span>&lt;mediatype&gt;<span style="color: #006600; font-weight: bold;">]</span><span style="color: #006600; font-weight: bold;">[</span>;base64<span style="color: #006600; font-weight: bold;">]</span>,&lt;data&gt;</div>
</div>
</div>
<p>例：</p>
<div class="syntax_hilite">
<div id="html-3">
<div class="html"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">“data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7&#8243;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">“16&#8243;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">“14&#8243;</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">“embedded folder icon”</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</div>
</div>
<p>可以借助 PHP 来生成 base64 的图片内容：</p>
<div class="syntax_hilite">
<div id="php-4">
<div class="php"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000066;">echo</span> <span style="color: #000066;">base64_encode</span><span style="color: #006600; font-weight: bold;">(</span><span style="color: #000066;">file_get_contents</span><span style="color: #006600; font-weight: bold;">(</span><span style="color: #ff0000;">“../images/folder16.gif”</span><span style="color: #006600; font-weight: bold;">)</span><span style="color: #006600; font-weight: bold;">)</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div>
</div>
</div>
<p>那么 CSS 就可以写成下面的样子：</p>
<div class="syntax_hilite">
<div id="css-5">
<div class="css"><span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color: #66cc66;">(</span>data:image/gif;base64,&lt;?php echo base64_encode<span style="color: #66cc66;">(</span>file_get_contents<span style="color: #66cc66;">(</span><span style="color: #ff0000;">“../images/folder16.gif”</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> ?&gt;<span style="color: #66cc66;">)</span> <span style="color: #000000; font-weight: bold;">top</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;</div>
</div>
</div>
<p>Inline Images with Data URLs 的局限：</p>
<ul>
<li>IE 5-7 不支持，IE 8 据说会支持。为了兼容 IE，把这些部分单独写入 IE 专用的 CSS 文件中。具体可以查看<a href="http://hellobmw.com/">本站</a>使用的两个样式表。</li>
<li>文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%，在 gzip 压缩后，这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。</li>
<li>浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节，Firefox 最大支持 100K。所以最好只应用在小图片上。目前<a href="http://hellobmw.com/">本站</a>在 6 个小图片上使用了该技巧。</li>
</ul>
<p>补充一点：<em>CSS Sprites</em> 和 <em>Inline Images with Data URLs</em> 是可以同时使用的。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.liangpeng.net/y2009/m01/jintianyouhuawangzhansuduchuxiandeyixiewenti_517.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>谈谈我当前对富客户端的看法</title>
		<link>http://www.liangpeng.net/y2008/m11/rish-click-web20-dev_407.html</link>
		<comments>http://www.liangpeng.net/y2008/m11/rish-click-web20-dev_407.html#comments</comments>
		<pubDate>Mon, 17 Nov 2008 11:18:03 +0000</pubDate>
		<dc:creator>梁鹏</dc:creator>
				<category><![CDATA[Web相关技术]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[富客户端]]></category>

		<guid isPermaLink="false">http://www.liangpeng.net/y2008/m11/%e8%b0%88%e8%b0%88%e6%88%91%e5%bd%93%e5%89%8d%e5%af%b9%e5%af%8c%e5%ae%a2%e6%88%b7%e7%ab%af%e7%9a%84%e7%9c%8b%e6%b3%95_407.html</guid>
		<description><![CDATA[正在制作一个web2.0的网站，鉴于装逼的最先进性，随想到了富客户端，为什么我们不用呢？ 为甚麽不使用象flash一样的富客户端，而要用php+js来构建web2.0呢，我自己认为是html更容易构建漂亮的界面，更容易来输出内容，而flash则每次界面变动都需要各种各样的调整，（如果现在的flash已经发展了，我不知道，只是根据自己以前的认知进行的总结），很容易针对某块进行局部调整，特别是div+css的模式下。 而为什么需要php这样的后台语言呢，既然现在的事情全部都由js完成了，目前看来，php现在的主要功能是组织了各种各样的action，进行模块化开发，除此之外，php仅仅就是提供数据给前台展示了，完全可以推出一款统一的后台数据库接口，由js直接读取数据，进行展示即可，这样就仅仅需要前端编码了，可是，现在的前端数据展示功能也有些弱，如果不使用php进行基本html生成，貌似完全使用js进行定位填充，需要的代码量相当复杂。 由此看来目前的技术前提下，php+div+css+js确实是最行之有效的方法。 本人是php coder，所以仅仅拿php来分析，asp、jsp、ruby等皆可。]]></description>
			<content:encoded><![CDATA[<p>正在制作一个web2.0的网站，鉴于装逼的最先进性，随想到了<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/%e5%af%8c%e5%ae%a2%e6%88%b7%e7%ab%af" title="查看 富客户端 中的全部文章" target="_blank">富客户端</a></span>，为什么我们不用呢？<br />
为甚麽不使用象flash一样的<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/%e5%af%8c%e5%ae%a2%e6%88%b7%e7%ab%af" title="查看 富客户端 中的全部文章" target="_blank">富客户端</a></span>，而要用<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/php" title="查看 php 中的全部文章" target="_blank">php</a></span>+<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>来构建web2.0呢，我自己认为是html更容易构建漂亮的界面，更容易来输出内容，而flash则每次界面变动都需要各种各样的调整，（如果现在的flash已经发展了，我不知道，只是根据自己以前的认知进行的总结），很容易针对某块进行局部调整，特别是<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/div" title="查看 div 中的全部文章" target="_blank">div</a></span>+<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/css" title="查看 css 中的全部文章" target="_blank">css</a></span>的模式下。<br />
而为什么需要<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/php" title="查看 php 中的全部文章" target="_blank">php</a></span>这样的后台语言呢，既然现在的事情全部都由<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>完成了，目前看来，<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/php" title="查看 php 中的全部文章" target="_blank">php</a></span>现在的主要功能是组织了各种各样的action，进行模块化开发，除此之外，php仅仅就是提供数据给前台展示了，完全可以推出一款统一的后台数据库接口，由js直接读取数据，进行展示即可，这样就仅仅需要前端编码了，可是，现在的前端数据展示功能也有些弱，如果不使用php进行基本html生成，貌似完全使用js进行定位填充，需要的代码量相当复杂。<br />
由此看来目前的技术前提下，php+<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/div" title="查看 div 中的全部文章" target="_blank">div</a></span>+<span class='wp_keywordlink_affiliate'><a href="http://www.liangpeng.net/ytag/css" title="查看 css 中的全部文章" target="_blank">css</a></span>+js确实是最行之有效的方法。<br />
本人是php coder，所以仅仅拿php来分析，asp、jsp、ruby等皆可。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.liangpeng.net/y2008/m11/rish-click-web20-dev_407.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

