<?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>ControlJS &#8211; LPC影子技术分享</title>
	<atom:link href="https://www.mudbest.com/tag/controljs/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mudbest.com</link>
	<description>行影不离,忘之却步.</description>
	<lastBuildDate>Mon, 01 Oct 2012 08:11:00 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.1</generator>
	<item>
		<title>ControlJS简单应用介绍</title>
		<link>https://www.mudbest.com/controljs%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e4%bb%8b%e7%bb%8d/</link>
					<comments>https://www.mudbest.com/controljs%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e4%bb%8b%e7%bb%8d/#comments</comments>
		
		<dc:creator><![CDATA[hkshadow]]></dc:creator>
		<pubDate>Fri, 16 Mar 2012 05:45:46 +0000</pubDate>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[ControlJS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<guid isPermaLink="false">http://www.mudbest.com/?p=954</guid>

					<description><![CDATA[Steve Souders 最近做了这么一个东西—— ControllJs。 主要为了是解决网页加载中Js文件 ... <a title="ControlJS简单应用介绍" class="read-more" href="https://www.mudbest.com/controljs%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e4%bb%8b%e7%bb%8d/" aria-label="阅读 ControlJS简单应用介绍">阅读更多</a>]]></description>
										<content:encoded><![CDATA[<p>Steve Souders 最近做了这么一个东西—— ControllJs。 主要为了是解决网页加载中Js文件的性能问题。这里做一个简单的转述。</p>
<p>众所周知，资源文件在浏览器加载直至用户可用是有两个阶段的：加载，执行。JavaScript的加载会阻滞其他资源的加载，而由于浏览器渲染是单线程的，JS执行的同时浏览器实际是假死状态的，页面渲染会停止，浏览器也不会下载新的文件。这样也会造成很大的性能问题， 所以Steve提出了三个方法：异步加载；延迟执行；覆写document.write。<br />
<strong><br />
1. 异步加载</strong><br />
核心思想还是很简单：让页面中的js片段对浏览器不可识别。jquery的template也是用了类似的方法。</p>
<p>外链脚本：由</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;main.js&quot;&gt;&lt;script&gt; 
</pre>
<p><span id="more-954"></span><br />
改写成</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/cjs&quot; src=&quot;main.js&quot;&gt;&lt;script&gt; 
</pre>
<p>内联脚本：由</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot;&gt;sth...&lt;script&gt;
</pre>
<p>改写成</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/cjs&quot;&gt;sth...&lt;script&gt; 
</pre>
<p>这样子的type声明，浏览器是识别不了的，也不会去加载，更不会执行非ie浏览器不会加载，ie浏览器会加载这个文件，但所有都不会执行内部脚本。</p>
<p>接下来，对于外链的脚本，取出所有的src属性，通过Image或Object元素加载进页面（可参考css,javascript的预加载）。 这样加载的文件不会执行，节省了js的执行时间。</p>
<p>Gmail团队使用了另外一种方法，内联的js全部都放在/*&#8230;*/的注释中。也是可以参考的一种方法。</p>
<p>对于没有其他处理的脚本，ControlJS将在window.onload之后执行。对于外链重新创建一个正常的script运行，对于内联则直接eval。如果需要延迟，则需要采取下面的防范。</p>
<p><strong>2. 延迟执行</strong></p>
<p>正如前面说的，JS的执行也会带来大量性能问题。而据统计，一个页面只有29%的脚本是对于页面渲染，逻辑执行等有关系的，其余71%都是在页面加载之后执行，很多用户甚至都不会有机会执行他们。如果将这71%的脚本放在用户触发行为产生时才执行，将是对页面初期渲染性能多大的提升啊。</p>
<p>在ControlJs中，只需要简单做下面一步： </p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script cjsexec=false type=&quot;text/cjs&quot; cjssrc=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
</pre>
<p>声明一个cjsexec为false即可。到需要执行的时候，调用：</p>
<pre class="brush: jscript; title: ; notranslate">
CJS.execScript(&quot;fg.menu.js&quot;, createExamplesMenu);
</pre>
<p>即可。</p>
<p><strong>3. 重写document.write</strong></p>
<p>由于ControlJs会将所有脚本在window.onload之后执行。如果此时页面中有内联脚本执行document.write（广告等），将会自动执行window.open，所有的document.write的内容将取代现有页面的内容，这是不可接受的。</p>
<p>于是Steve重写了document.write，当调用时，会在script节点前自动创建一个span 标签，并把document.write的输出放到span里面去。这个能解决部分问题。</p>
<p>这里有个简单的DEMO：<br />
1. 引入 ControlJS</p>
<pre class="brush: jscript; title: ; notranslate">
var cjsscript = document.createElement('script');
cjsscript.src = &quot;control.js&quot;;
var cjssib = document.getElementsByTagName('script')&#x5B;0];
cjssib.parentNode.insertBefore(cjsscript, cjssib);
</pre>
<p>2. 修改外部脚本</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot; src=&quot;main.js&quot;&gt;&lt;script&gt;
</pre>
<p>改为</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/cjs&quot; data-cjssrc=&quot;main.js&quot;&gt;&lt;script&gt;
</pre>
<p>3. 修改 inline 脚本</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot;&gt;
var name = getName();
&lt;script&gt;
</pre>
<p>改为 “text/cjs”, 如下所示：</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/cjs&quot;&gt;
var name = getName();
&lt;script&gt;
</pre>
<p><strong>#ControlJS 包括了下面一些其他脚本加载程序没有的特点：</strong></p>
<p>    异步下载脚本<br />
    能同时处理外链和内联脚本<br />
    让脚本在页面加载完成之后才执行<br />
    支持脚本单纯下载但不执行<br />
    使用原生HTML<br />
    解决了部分document.write的问题<br />
    control.js自身加载是异步的 </p>
<p><strong>其他相关参考文档：</strong><br />
http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/<br />
http://www.stevesouders.com/blog/2010/12/15/controljs-part-2/<br />
http://www.stevesouders.com/blog/2010/12/15/controljs-part-3/<br />
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html （需翻墙）</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mudbest.com/controljs%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e4%bb%8b%e7%bb%8d/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
