浏览器中JavaScript执行原理
本章我们讨论javascript在浏览器中是如果工作的,包括:下载、解析、执行的全过程。javascript的这些讨人嫌的地方我们是知道的:
i.需要串行下载
ii.需要解析
iii.需要串行执行
而在chrchromium中,js是这样解析的:(其实第一章末尾已经有了)
至于一些步骤的解释,这里就不再复述了,不懂的请戳:浏览器渲染过程 拉至末尾。
简直就是大魔王有木有?心中可有一万只草泥马奔腾而过?为什么在所有的下载线程中:
i.css加载不会阻塞页面
ii.images加载不会阻塞页面
iii.flash加载不会阻塞页面
iiii.activeX加载不会阻塞页面
iiiii.ajax还有同步异步之分
特么javascript文件就会阻塞页面!!
既然如此,我们能回避UI阻塞吗
i.在页面底部(</body>之前)引入js脚本,原因:由于js加载阻塞页面,而HTML是下载多少渲染多少,因此我们把它至于页面底部,让UI线程先执行完再加载js脚本
ii.根据具体情况,通过combo和compress减少请求数(通常在正式生产环境,我们将多个js脚本压缩为一个)
BUT ,这并没有真正回避UI阻塞,在</body>之前存在一个较大的脚本需要加载执行时,UI在ready后,需要较长的时间等待脚本加载和执行,在脚本ready前,UI是处于无事件响应状态的。
iii.defer属性
HTML4标准中为<script>标签定义的属性,用于告诉浏览器:内容中包含document.write之类破坏DOM的脚本
浏览器会无阻塞式(延迟)加载脚本,并且按页面中<script>标签顺序串行执行js脚本
在HTML渲染完毕之后,onload触发之前执行
支持:IE4.0+ ,FF3.5+
iiii.async属性
HTML5标准中为<script>标签定义的属性
对比defer,以下相同:
无阻塞式加载
以下不同:
加载完立即执行
不保证按照页面中<script>标签顺序执行
支持:FF3.6+ ,Chrome ,Opera10.5+ ,Safari ,IE9+
iiiii.不依赖浏览器版本的方式
Dynamic Script DOM ,比如google分析:
XHR Inject
XHR Eval
Script in Iframe
还有问题吗?当然还有:
i.并行、异步加载脚本也需要保证顺序、同源策略、CDN、缓存等因素的影响
ii.没有通用的解决方案,不过我们可以:
使用LABjs || requireJS || seaJS 等管理我们的脚本加载
服务端combo脚本
iii.以上可以相对完美的解决脚本下载问题,但这并不能解决脚本执行阻塞的问题
异步大法好
关于异步
i.你是否认为: 异步 == (方法 + 回调) ? 呵呵 ... 你懂得! 冒泡排序的异步例子:
var innerLoop = function (array, x, y, callback) { if (y < array.length - x) { compare(array[y], array[y + 1], function (r) { if (r > 0) { swap(array, y, y + 1, function () { innerLoop(array, x, y + 1, callback); }); } else { innerLoop(array, x, y + 1, callback); } }); } else { callback(); } } outerLoop(array, 0, function () { console.log("done!"); } ); var compare = function (x, y, callback) { setTimeout(10, function () { callback(x - y); }); } var swap = function (a, i, j, callback) { var t = a[i]; a[i] = a[j]; a[j] = t; repaint(a); setTimeout(20, callback); } var outerLoop = function (array, x, callback) { if (x < array) { innerLoop(array, x, 0, function () { outerLoop(array, x + 1, callback); }); } else { callback(); } }
ii.你是否认为: 浏览器是单线程执行的 ?
iii.你是否使用 setTimeout || setInterval 模拟过多线程 ?
iiii.异步编程是有难度的:
破坏了代码的局部性
难以应用于需要保持顺序的场景
难以处理异常及取消
难以操作异步之间的协作及组合
问题根源:
i.javascript是单线程语言
不能创建线程
不能开展并行任务
不能对线程操作
ii.阻塞UI渲染
如何解决:
i.浏览器并不是单线程的货,我们可以利用如下异步线程:
资源下载线程(javacript、images、css、object)
ajax线程
web worker线程
setTimeout模拟多线程
总结
我们可以使用各种组合方式、现代浏览器的新特性去处理这些问题,总而言之,没有一种方案是通用的。我们需要在对应的场景中找出最合适的方案,而这些方案无非是围绕这些原理做出的变体。