Thinking for Fun » 性能 http://jsfox.cn/blog 网络 ● 生活 ● 技术 Tue, 01 Jun 2010 01:52:41 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Even Faster Web Sites: 读书笔记(二) http://jsfox.cn/blog/javascript/even-faster-websites-notes2.html http://jsfox.cn/blog/javascript/even-faster-websites-notes2.html#comments Sun, 24 Jan 2010 08:54:18 +0000 yongbin http://jsfox.cn/blog/?p=170 这次因为一个项目的原因，又重读了《Even Faster Web Sites》书里的第四章：Loading scripts without blocking，并且在Cuzillion里做了大量测试，又发现了很多有意思的细节。发现自己读书太糙，自责一下。结合实际工作，加上自己的理解，再把这一章的实用内容总结一下。

要解决的问题

页面的script标签引入外部js文件时，会阻塞后续外部资源的下载和加载，包括图片、CSS文件、iframe等等。

1. Script DOM Element比较常用

“Script DOM Element”方法是常见的方法，也就是createElement(“script”)的方法下载js文件，以此并行加载后续资源。这其实是很棒的一个方法，因为不需要担心跨域，而且我们在中文应用中，不用担心编码的问题（可以为<script>指定编码）。但这里需要注意的是，非IE浏览器下，这种方法会阻止window.onload事件，因此如果你的js文件很大，可能会带来用户体验不好。IE浏览器对这种贴script标签的行为是“无动于衷”的，不会在状态栏、光标和进度圈上做任何指示。看来IE也不是一无是处嘛，哈哈！测试地址。

2. 个人不提倡使用XHR Eval

XHR Eval方法我不提倡使用，首先是中文编码上会遇到麻烦，其次跨域问题。另外就是下面这句：

eval(xhrObj.responseText);

当js文件比较大的时候，用eval会相对较慢，并带来安全性隐患。

3. XHR Inject是个好东西

如果编码和跨域问题都不是问题，那么XHR Inject就是最好的方法了。这是XHR Eval和DOM Script的一个这种办法，实现机制就是：

var s = document.createElement('script');
s.text = xhrObj.responseText;

这种方法避开了evil eval，并且和DOM Script一样，可以按顺序加载js文件，当然，不会阻塞后续资源的加载。更为重要的是，在所有浏览器下，这种方法都不会阻止渲染和onload事件，体现了XMLHTTPRequest的本色。测试地址在此。

4. defer属性可以快速尝试

Script标签的defer属性，可以让后续资源并行加载。在实际的项目中，偶尔也可以尝试使用，因为比较快捷。Firefox 3.1以后，也开始支持script的defer属性啦。

5. document.write(“a.js”)的注意事项

注意：在<head>用document.write来插入js脚本，只能让浏览器并行加载<head>里的资源。也就是说，<head>里write脚本，会阻塞<body>的加载。测试地址。另外关于document.write，还有两个需要注意的问题。第一，它只能带来“并行加载js文件”的效果，对其他资源无效；第二，IE、Chrome支持，Firefox不支持。

6. Script in Iframe方法强烈不赞同

在iframe放js，来实现页面资源并行加载，无疑是得不偿失的行为。首先，iframe太沉重了；其次，你还得改你的js代码。反正我是不能接受的，哈哈。

结束语

在开发中，如果要加载数个js大文件，比较实际的做法还是插入script标签的方法。如果没有编码和跨域问题，用XHR Inject方法当然更好啦。

欢迎指正！

]]> http://jsfox.cn/blog/javascript/even-faster-websites-notes2.html/feed 0 Even Faster Web Sites: 读书笔记(一) http://jsfox.cn/blog/javascript/even-faster-websites-notes1.html http://jsfox.cn/blog/javascript/even-faster-websites-notes1.html#comments Fri, 21 Aug 2009 04:31:43 +0000 yongbin http://jsfox.cn/blog/?p=156 《Even Faster Web Sites》是Steve Souders的新书。Steve Souders现在是Google工程师，《High Performance Web Sites》一书的作者，Google Web Ex系列讲座的主持人，对前端优化有很专业的研究。他的UA Profiler和Cuzillion项目尤其引人注目。

《High Performance Web Sites》这本书相信大家都比较熟悉，Souders在其中主要讲解了Yahoo!的14条网站性能军规。很是期待这本《Even Faster Web Sites》，可惜国内市面上还没有。偶得电子版一套，迫不及待打印出来，细细读来。

这本书只有一多半是Souders写的，其他部分是Crockford, NCZ等人的贡献，因此十分有内容。这次先记一些关于页面加载性能方面的读书笔记。

Splitting the initial payload

要提高前端性能，可以这样：页面在第一次加载时，只加载渲染页面所需要的资源（主要针对js），以及一个ScriptLoader方法。其他js资源在需要的时候再动态加载。这样做的挑战就是分离用于初次渲染的js资源，也就是找到split。微软有一个Doloto项目是做这个的，但Doloto还没有向外公布，所以我们得手动搞分裂了。

Loading scripts without blocking

外部js文件在下载和执行时，大多数浏览器都会阻塞其后面的内容（ps这也是可以理解的）。要防止这种阻塞，有若干种办法。我们比较常用的大概是XHR注入和Script tag。Souders还介绍了XHR Eval, Script in Iframe, Script Defer, document.write(<script>)等，并且画出了决策树。这些方法原理都是用异步加载外部js文件，以提高页面渲染速度。方法类似于我们用script tag来实现类ajax跨域应用。

大家可以用Cuzillion来真实测试一下堵塞情形，非常有意思，非常有必要，非常好。

前两天NCZ在他的博客上也对这种异步加载作了介绍，The best way to load external JavaScript。他认为这项技术的best practice是，首先写一个scriptLoader.js，再把页面所需要的其他js都放在second.js里，把scriptLoader.js放在</body>之前，再紧跟行内js加载second.js文件。确实不错，而且YUI和Google Analytics都这么做了。

那么到底用哪种方法来做script loader呢，在实际应用中，我认为如果不需要跨域、不考虑多个js文件加载顺序的话，XHR Injection最好，因为它不会阻塞onload事件（发现TinyMCE加载插件就是这个原理）；否则的话，就是用script tag方法。

Positioning inline scripts

行内js在执行时，会阻塞其后内容的并行加载、页面渲染。顺便说，如果执行时间过长（100ms以上），用户会感觉到卡，体验非常不好。为了防止阻塞，可以用setTimeout来实现异步调用。那么文档下载完之后，为了给浏览器喘息的机会（进行渲染），延时多久才让这些js执行呢，IE下0ms即可，Firefox下是250ms。

另外有一个大忌，就是外部css文件紧跟行内js的情况。这样会造成比较严重的阻塞。是什么原因呢？行内js一般不会被阻塞，除非代码前面有css。

<link rel='stylesheet' type='text/css' href='a.css' />
<script type="text/javascript">
// do a lot of things
</script>

假如行内js前有一个外部css文件（如上述代码），那么这段js要等到css文件完全下载完才会被执行，js被阻塞，造成了页面剩余内容被阻塞，恶劣的连锁反应被引发。

先总结这么多，欢迎指正！

]]> http://jsfox.cn/blog/javascript/even-faster-websites-notes1.html/feed 7