JS 和 CSS 的位置对其他资源加载顺序的影响(摘和总结)

fantaxy025025

浏览: 1330452 次
性别:
来自: 北京

最近访客更多访客>>

大家都说我很棒

songhait

GDGZWQZ

zjut_wyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js_css_html_xml_nodejs

JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：

JS 有可能会修改 DOM. 典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
JS 的执行有可能依赖最新样式（也就是此js之前加载的样式，而不是所有样式。）比如，可能会有 var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
现代浏览器很聪明，会进行 prefetch 优化。性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。

以上三点可简述为三条基本定律：

定律一：资源是否下载依赖 JS 执行结果。
定律二：JS 执行依赖 CSS 最新渲染。
定律三：现代浏览器存在 prefetch 优化。

总结一下： css下载完成后，js开始下载，最后是资源的下载。

这个结论的context是：js前有css

这个结论旨在讨论：加载顺序和并行性

据我估计：渲染整个页面是一个线程。

反证法：

假设：是多个线程，

用例：

<head>

</script>

</head>

假设js会控制一个按钮100x100大小

css控制按钮200x200大小

如果是多线程的话，结果将会不可预测。

整体来说，还是保持顺序执行。具体小细节感觉还有很多，呆日后完善吧。

++++

今天看BigPipe的时候想起来js和css不同位置的情况下，会如何执行。因为这个东西会影响BigPipe设计之后的执行细节。

按照我原来的理解，应该是顺序执行。谁在前就先执行谁。

但是没有仔细想doby的执行情况，body和body内的资源的请求情况，以及可能受到的影响。

我在chrome下做了些测试，感觉还是要分很多情况来讨论。

这篇文章也在讨论这个问题，并做了些总结：

http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB/

但结论有些问题，另外，不同的浏览器也会有不同的处理方式。

这篇文章给出了一个合理的理论支持！

http://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/

但是有些说法不够精致，我就重构了一下～

http://futureinhands.iteye.com/blog/354528

这篇文章也可以看看

BigPipe的文章和参考

http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html

***本文完毕***

分享到：

ruby_对象的比较_等于号_3个等于号_equal ... | javascript_scrollbar_scroll的控制_总结

2012-02-24 10:41
浏览 2404
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论